Visual Web Design Master Class
Posted in notes
Tags :
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