Typography and grids
22
Visual Design
-
Upload
fife-college-halbeath -
Category
Design
-
view
107 -
download
0
description
The basics of using Typography and Grids
Transcript of 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.
