- Guide - Convey structure, relative importance, relationships
- Pace - Draw people in, help orient, provide hooks to dive deep
- Message - Express meaning and style, breathe life into the content
Scott used cool trick. He showed 4 different webpages and blurred them. After the blurring you could still recognize the main elements of the webpages (like navigation bars, articles, interesting picture etc).
Three basic tools for visual design
- Typography
- Layout
- Color
Typography
Gill Sans (1928)
Six typographic terms
Six typographic terms
- Point size - is not letter size but the box around the letter
- Leading
- x-height - height of the lower case letter (letter x). - Typefaces with higher x-height are easier to read by lower point sizes and lover resolution screens. Lower x-height gives ore elegance to your text.
- Ascenders and Dscenders - above and below x-height.
- Weight (light, regular, bold)
- Serifs
Numbers have small caps- lowcase too.
alexpoole.info - serif and sans serif typefaces - is one better to read?
Expectation plays an important role (example with the phrase "The Cat" or "Tae Cht").
Grids, grouping and alignment
When creating templates design for longest text block.
In general left-aligmet text is faster to skim.
Design in gray-scale at first. When this works add colors.
Its good to use color for elements for example that are clickable.
Reading and navigating
Informavores - go through a lot of information quickly and get what you need.
How do you know a page has poor scent?
- flailing
- low confidence - they dont know where to click
- back button - they are using it a lot of
If using icons use also words next to them to help to understand. Use trigger words, not words that are funny. You can also use longer terms .. like 7 words.
You can use also block navigation - speaking block navigation. Often more is better.
People are more than happy to scroll if they think they will be rewarded.
No comments:
Post a Comment