Typography and grids

Visual Design

Typography

Dreamweaver gives a limited choice.

Use Arial, if they haven’t got Arial, use Helvetica, if they haven’t got either, use a sans-serif font.

Typography

SSerif fonts (a serif is the little tags on the letters.)

Are tagged because it was found that when reading from paper, the tags help the eye to perceive the type.

SSans serif fonts (Sans is french for

without).Are considered easier to read on screen.

Typography

Dancebase have got around the problem of limited typefaces by making jpeg images of the typeface in logos and their banner.

The rest of their type is font-family: Verdana, Arial, Helvetica, sans-serif.

Too Much

TypographyThe art of good typography is about

subtlety. You can make a value judgement based on typography, use of colour and the look and feel.

On the next slide are two websites from two different banks. Which one does the Queen bank with? How can you tell just from the look of the site?

Typography tells its own story

Typography tells its own story

Typography tells its own story

Visual Language

Your visual design needs to match your site objectives. Very often a site objective is to communicate brand identity.

Your whole site needs to reflect brand values.

Grids

Designing with grids has become very fashionable. The first principle to understand is the rule of thirds.

Rule of Thirds

Splitting a page.

images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

Splitting a page.

images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

Splitting a page.

images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

Splitting a page.

images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

Splitting a page.

images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

Adding gutters helps stop text running into each other .

Elements can then be designed to complement the grid structure.

Splitting a page

Splitting a page

Splitting a page

Splitting a page

Breaking the grid.