Visual Web Design Master Class 

Tags :
Badge'd

Here are a few notes I took during the «Visual Web Design Master Class» by Andy Clarke on December 1st, 2008.

I had an inspiring day listening to Andy Clarkeand Brendan Dawes. After a bumpy start, the day turned in to rich event throughout which I met great people and came back boosted and motivated to do what I do.

I met to clean up these { raw } notes, but you know how things are, time flies, etc. so I thought I'd just log them here. My photos are available on Flickr.

Focus on the _creative_ aspects, and not so much on the tech side.
Started @media 2005 - 20 conferences since.
Little design related things.

  • Find new ways to be inspired.
  • Be playful
  • Bending rules is acceptable
  • Rethink your thinking
  • Better typo through classic techniques
  • Combinig ancient and modern layouts
  • Make designs that stand apart from the crowd

Working from home. Hard to keep motivated sometime.
How do you keep the motivation going.

[Typeface Whitney Bold: good for titles and body copy]
[Gotham Bold guest typeface: good for heading - more rounded for body copy - Obama used it]

Venue is also sponsored by letter Qq - for questions

Georg Lichterberg (1742-99) satirist "Everyone is a genius at least once a year. A real genius has his original ideas closer together"

Limitations we put on ourselves in terms of web design

Robert Frost "The brain is a wonderful organ. It starts working the moment you get up in the morning and doesn't stop until you get into the office"

Finding new way to be inspired.

So many people will look at websites (http://www.csselite.com, etc. loads of them)
http://flickr.com/photos/splat/sets/981332 (screen garbs of pages)
http://flickr.com/photos/factoyjoe/sets (screen grabs of details)
It should be more

Cyndili has stared to archive iPhone login screen

We need to look away from the web - more. The web is useful, but they are only part.
Learn about what is around us.

Currently, we focus more on the science of we design, and less on the design, creative aspects. Web design is like product design? Like you was designing a washing machine…

iPhone: not as many as we thought. Super easy to use - but we LOVE to use it. We ADORE this thing.

That is what matters when we start thinking about websites. What happens to them and what they feel.
Cab rides: you remember the experience, not the journey it self. Doesn't matter how long (e.g. flying). What matter is what happens on it.
Design is about emotion - feelings.
The experience that we create.

As adults we fall into patterns. Why do kids have more imagination? So much more less self conscious about things. They play. More expressive, more imaginative, they break rules - because they don't know the rules are there.

Designers need to be more like children. Experience more. Challenge perceptions about design. "What if" t-shirt. More of that.

What if online banking worked more like Twitter!

Change our perception. Changing your ideas. Keeping the brain fed with inspiration.

How to get ideas

  • Get more inputs
  • Learn to take risks
  • Mistakes are good
  • Bend rules
  • Give yourself more constraints

Gather as many inouts as e can from as many diff inputs. GEt away from that comfort zone. What if game.

Jemes Webb Young
"An idea is nothing more or less than a combination of old elements"

There is nothing new about iTunes. It is the experience. Convergence of different inputs.

  • Read a short story every day - take time out for this
  • Read a poem every day
  • Drive somebody else's car
  • Look up - urban areas tend to be the same - but 20 feet up, they _are_ different
  • Swap your iPod with a friend - see how that affects your mood
  • Read classified ads
  • Watch a movie (Bollywood?) - Andy's favourite movie? Gone with the Wind - Angelheart
  • Learn to ride a motorcycle - a foreign language
  • Take a different route to work evey week - start to notice things, different architecture, lots of different everything

We forget how to look, to see - too focus

GET OUT OF YOUR COMFORT ZONE

Those things that most people don't notice that matters. Feel. Sense.
Challenge: find 60 pics on Flickr in 10'

Inspired colour choices
http://degraeve.com
http://colorhunter.com

Tints Take 5 blocks - fill w/black 95% - 5%
Take 5 blocks - fill w/white 95% - 5%
Use complementary colours gives a palette

Zoom in as far as PS will take you - pixel of colour schemes

Lear to take risks

"What if" I apply these colours to ..?

Kids take risks all the time. Remember that making mistakes is okay.

Typography, texture: what can we do to take element from layout, typography, texture that may not be directly related to what we are designing. Colour combinations.

Art of seeing. Creativity. Why must everything be _safe_? Why can't we scare our users, force reflections, thinking.

We need constraints. Focus. Give yourself less time. Jason Fried and Co built Basecamp in 2 weeks. Give yourself less of everything.

We need constraints to challenge us

People tend to imagine constraints that aren't there. "I can't do this because of.."

1130

Better typography

iA article : web design is 95% typography

Obama victory: comparing print media and websites - different groups of readers? Different feeling, doesn't translate.
(thisfuckingelection.com)

What can we do to improve with the little tools we have (ilovetypography.com)

Take 1 little thing from something and start from that. Letting it grow.

Check out typesites.com/projects/typetweets

Setting type is an art/craft - knowing/understanding the little diffs that makes it looks right. Understanding the fundamental principles.

Bringhurts "Typography must often draw attention to iself before being read"

webtypography.net (Bringhurst to the web by Richard Rutter)

Web typography absolutes (5) - not always 'absolute' - not for everybody, not in every case

Better typography terminology

The typographical scale (size)

em square that goes around the char
with different typefaces we get different sizes (72px sq box containing a 72px char)

Pattern and grids

Common sizes
6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72

Invisible rythm - around for 100 th years

Some have names

36 double great primer
24 double pica
12 pica
6 nonpareil

Structure - scale, communicate the importance

48 section headers h1 { font-size: 218% or 2.25em or 3.6em}
36 second level header
24 tertiary
18 other
12 body h1 { font-size: 12px or 100% or 62.5% }

Baseline grid & vertical rythm (leading - line height)

The Wasteland - TS Eliott
Audio recording avail on the net read by the author

Leading refers to the space between the baselines

The leading will change according to the typeface you are going to use (blueprintcss warning)

Rule of thumb: the amount of leading you want to put between the lines is almost equiv to a lowercase t

  • body copy almost always needs positive leading
  • leading for shorter txt box -> shorter leading
  • darker needs more leading (sans serif fonts do)
  • increase leading with larger sizes

If it feels right then it is right

Typographical colour: squint at it - medium gray is right.

Baseline grid

12px 1.5 ratio, 18px baseline
h1 18x2 = 36
All images are multiples of 18px tall
sidebar 10px -> too must leading, too open

Nominated baseline every 5 lines
heading : 3 lines
body: 4 lines
sidebar: 5 lines

[[ Bolton talked about this at @media 2007

The measure
The measure is the number of chars you can get on a line

Reverse text out -> increase leading slightly, lighten the font too, increase tracking

Control the length of lines (66 chars?) between 52 and 78 is ideal
important: the measure will change according to the typeface you choose

How can we improve the type w/o being over complicated?

Hanging punctuation

Move bullets out of the column to align text (hang or indent punctuation)
Quotations: exactly the same thing.
Blockquote (use a line out in the margin)

Quotes and apostrophes

" vs «
… vs ...

Letterspacing strings of capitals, small caps and digita
letter-spacing: .1em to <abbr> and <span>
Hyphens, en-dashes and em-dashes

Dividing a word co-workers : shortest of all - regular
Range of values 3rd - January - 1922 : en-dash shorter dash
Break for thought, pause for breath — longer dash - em-dash

Enhance typography

Paragraphs
Indent first line w/o space between paragraphs (a sq 2.1em) don't indent first line

Pilcrow divided (para symbol)

Elevated cap on first para
Drop cap on first para (first line all caps)
Outdented caps (caps in margin)
End marks (stop icon)

Choosing the best ampersand

Improving headings with negatives line height, leading, letter-spacing
Control widows
Big typeface creates the left with negative indent (letter C G O Q S T U V W Y) until it feels right

Brendan Dawes - Scissors

"Analog in - digital out"

Scissors more usful than pencil -Truman Capote

Use time in web design
Inspiration from film making (insert time 'nothing' in sequence -> emphasis added)

When you go away from the default, it makes people sit up, listen, look up and use your stuff?

Always a good thing - generally

Brnd touch points (bookstore wraps books up in brown paper)

Make lots of stuff, get it out there

Slitscans 1px wide -> right
Cinema Redux - name it, brand it
DoodleBuzz - news aggregator

Rearrange the rules to suit yourself

Building inpiring layouts

2 columns, sidebar - main
The fondations needs logic

They are better ways to structure the pages, give things order.

CSS Framework
960 grid system http://960.gs

If you don't know why you are using something, things become 'samy' -

The golden section 1.618

We don't find a good practical reason of using this natural proportion

Start off with a line: 940px

940 / 1.618 = 580px (content area) 360px sidebar
swing up the 580px -> golden rectangle (area above the browser fold stuff)

Take a sq out of it, you are left with another golden rectangle

Fibanacci 0 1 1 2 3 5 8 13 ..

Arrange Fibonacci grids and build, twist layout - grid building techniques

It's not the grid we have that matter, it is that we have one.

Symmetrical grid based columns - use gs ratio to create the margins

Rectangle

Vertical heights are equaly important
proportions that mean something

Root rectangles
Root two rectangles. Ratio 1:1.1414

940 -> 665 root 2 rectangle. Canevas to fit things in
Draw a diag topleft - botright. Any rectangle with botright on diag will be perfect ratio (proportion)
Gives you the size of images that go in it

Gives you a system, takes the guess work out.

Root three rectangle. Ratio 1:732 (3 col)
940 -> 543

Root four rectangle. RAtio 1:2 (4 col)
940 -> 470

Experiment with diff technique for calculating how big things should be.

Start off with a fixed width: multiply things up with GS (1.618)

Modular grids

Symmetrical modular grid
Modules is golden rectangle or square (more modernist?)

Combine grid methods

Nothing wrong on developing grids based on different methods

Head margin
Margin from between the fields at the top of the grid too.

Foot margin
Same issue

Having the grid is what is important

Order in one part and chaos in another. May work. Depends on content.

Create a grid from photo (Flickr)

Newspaper grids
Focus on one event and search for litle details
Lot of inspiration you can take from print newspapers

Traditional broad sheet newspapers
8 columns as starting point
More modern use 6 cols
Often there is a seventh slightly wider col on left or right
The measure gives the nb of cols
Measure based on typeface, how many cols you can fit on paper

Text over multi col layout? Where we can control, myabe we should
Header span over multi cols -> story hierarchy

Comic book
Frank Miller
Watchmen
Dave Gibbons
Alan More

Use white space to give people to think…

Paul Chadwick
Concrete

Panel size determins how long the reader will spend reading it/looking at it

No border - leave the eye free to wonder out - time - add emphasis
Contrary to what is don on the web

Essence of time

Lead the viewer's ee around the page from where it starts to where we want to reader to end up.

You don't have to use the same grid on the sme page. More than one grid on the same page.
Main content - one grid, forefront
Secondary content - other grid, defocused, at the back

Posted a response ? — Webmention it

This site uses webmentions. If you've posted a response and need to manually notify me, you can enter the URL of your response below.

Want more ? — prev/next entries