Page layout & typography. graphic design

(1)

graphic design

(2)

(3)

lecture

goals

To help you better communicate the purpose of your web

pages by visually emphasizing the most important features

and relationships between informational units

To suggest some design approaches that will simplify

maintaining and extending your site

To appreciate some of the more subtle but important

qualities of design and typography

(4)

lecture

topics

layout grids

web typography

(5)

page layout:

attentional units

Pages can be constructed from informational units such as large blocks of

text, navigation elements, images, and even hyperlinks

Page layout involves taking

stock of what functional

units or content areas

should be present,

determining the relative

importance of these areas,

and designing these areas

to grab attention to a

greater or lesser degree.

The end result of this

process should produce a

visual hierarchy.

(6)

page layout:

visual hierarchy

Visual hierarchies communicate what information is most important by

making some informational units stand out more than others. Visual

hierarchies also provide a means of leading a viewer through the

content.

strong visual hierarchy

weak visual hierarchy

(7)

attentional units:

factors

There are a few interrelated factors that determine how

much attention a unit draws to itself.

Its all about contrast

.

location, location, location

size

color

(8)

attentional units:

location

, location, location

Position of graphic elements

should reflect their relative

importance

Most people read from top to bottom, many from right to left as well.

Top left corner is prime real estate and is often used for site identification.

Think of the “top of the fold” principle.

(9)

attentional units:

color

&

value

Differences in color are also a form of contrast. A limited palette can be used to be used to define separate sections of a page.

Avoid spotty, inconsistent use of color.

Effective use of color and value to create separate, but integrated units of information

(10)

attentional units:

size

To increase the inherent

attentional weight of any unit

increase its size.

Given the limited real estate on

the web, primary content should

be allotted the most area.

(11)

attentional units:

motion

When all is calm, things in

motion jump out.

Motion can distract or

clarify.

Motion can provide feedback to users

OR

(12)

contrast:

points to ponder

If everything stands out

nothing stands out

Contrast means contrast (font face, color, size, etc.) Stay focused on relevant message(s)

Images tend to stand out

What’s important here?

(13)

effective visual hierarchy

– Presents visual structure or viewing sequence that helps the viewer

determine what’s on the page, what the most important elements

are, and how these elements are related

poor visual hierarchy

– Leaves the viewer not really knowing what they are looking at or

what they should focus their attention on first

(14)

images/bold headings emerge read content – starting with feature analysis abstract shapes

Visual hierarchy is

established through

placement and

prioritization of

attentional units and

guides the process of

looking

(15)

visual hierarchy: guiding

questions

What path do you wish your audience to travel when initially

scanning your pages?

What can you do to differentiate between different functional

or informational units?

What should viewers notice first, second and third?

What is least important?

(16)

visual hierarchy:

examples

(17)

visual hierarchy:

examples

(18)

layout

grids

Page layout grids serve many important purposes

– They help to unify disparate sets of information

– They allow for consistency while providing for flexible, variable

designs

– The consistency they provide helps visitors understand and

navigate your site

– They help you maintain the site by providing a grid to plug new

content into

(19)

(20)

layout grids:

flexible

order

(21)

(22)

layout:

proportions

You can create grids

based upon your own set of proportions

Popular choice - golden mean or Fibonacci series where each number is the sum of the two preceding numbers [1:1.61803]

You can also use a scale to align elements.

(23)

white space

: your friend

You can frame page units with white

space or negative space to set them apart from neighboring units

Using white space creates clear units without the need for horizontal rules, borders, or other distracting elements

(24)

web

constraints

for layout

Average computer monitor will not display a traditional page

(8 1/2 x 11)

Use top 4-5 inches for critical information - 14-15” monitor: safe

browser area is 600 x 300 pixels

Vertical dimension is often variable

Columns of text

– Fine for shorter web pages

– For longer pages would require reader to scroll up and down

Printing

– Maximum size graphic that can be printed on standard size paper is 535 ppi wide

(25)

why

typography

?

“Typography is to literature as musical performance is to composition: an essential act of interpretation, full of endless opportunities for insight or obtuseness.”

Robert Bringhurst “The New Typography is distinguished from the old by the fact that its first objective is to develop its visible form out of the functions of the text…. Every part of a text relates to every other part by a definite, logical

relationship of emphasis and value, predetermined by content. It is up to the typographer to express this relationship clearly and visibly, through type sizes and weight, arrangements of lines, use of color, photography, etc.”

(26)

typography

: functional

From a functional perspective type:

is the primary vehicle through which we communicate verbal information online and in print

can facilitate or obstruct recognition and interpretive tasks involved in reading

determines how quickly or easily we can parse and process constituent shapes and combinations of shapes that comprise letters and words

communicates and reveals underlying organizational structure of content

(27)

Type also has an affective dimension.

Type can embody and

thereby communicate the

spirit of a work.

Typefaces color textual

interpretation at subtle levels.

Typefaces carry unique sets

of emotional or

anthropomorphic modifiers

(warm, welcoming, cold,

authoritative, rational, lyrical,

static, vibrant)

(28)

(29)

designing for

legibility

Resolution

Printed text: 300 dpi (low-end laser printer) to 2400 dpi (high-end typesetter) Computer monitor: 72 - 120 ppi Low resolution of computers requires selection of computer friendly fonts and honoring of font size limits

(30)

legibility:

selecting

fonts

When selecting a font for online use consider

weight, aperture, counter, serifs, and origin.

(31)

(32)

Typeface

– A specific design (look) for a set of characters

Family

– A set of typefaces based on a face, but with variations (bold,

condensed, italic, small caps, etc.) Faces in a family usually carry

the name of the base face.

Font

– An applied typeface. A font is a combination of a typeface and

other qualities such as size, weights, spacing, etc.

(33)

terminology: letter

characteristics

Serif

The stroke at the beginning and end of a main stroke of the letter. In italics the strokes are

transitive in that one stroke leads into another. Ex. Times

Sans Serif

Text without serifs (feet). Ex. Univers

Slab Serif

An abrupt or adnate serif. Ex. Officina

(34)

terminology: type

characteristics

Justify

Adjusting a line of text so that it becomes flush right or left

Leading

Space between lines. Spacers of lead were inserted between rows of type on the printing press to create “leading’.

Tracking

Additional, consistent spacing between all letters (letterspacing). Best used for headings and titles, not lowercase text.

(35)

terminology: type

text blocks

Measure

The length of a line or the width of a column

Color

Refers to overall value, lightness or darkness, of a page or screen of text. It is impacted by the spacing between words, letters and lines as well as the frequency of capital letters, font weight and contrast.

Contrast

The difference or contrast between the thickest and thinnest strokes of a letter

(36)

typography &

visual hierarchy

Present organizing structure through

font faces, headings, subheadings, blocks of text

Follow rules of alignment, contrast, repetition (consistency) and proximity Contrast - combine typefaces and sizes such as serif and smaller sans serif to set apart areas of information or repeat and amplify a specific

passage

Vary font weights and use small caps, a font screen or true color to reflect the relative importance and/or

sequence of information

Spiekermann, E. & E. M. Ginger. Stop Stealing Sheet and Learn How Type Works

(37)

typography:

additional

information

(38)

units of

measure

Em

A horizontal measure, it is equal to the type size. Thus, in 12 pt type one em would be equal to 12 points.

En

Half an em

Pica

12 points. In postscript one pica is equal to 1/6 of an inch.

Point

1/12 of a pica. There are 72 points per inch in print.

Point sizes are no measure of actual visual size. Both of these letters are 30 pt. X-height is a better predictor.

(39)

legibility:

serifs

&

caps

We read by recognizing shapes. Words set in all caps all look the same i.e., rectangular, making them harder to read in blocks of text.

Headings with initial caps can also disrupt reading Serif fonts are good for lengthy runs of text, as the feet characters form base line that guides the reader

(40)

legibility:

aliased

&

anti-aliased

Aliased

Smaller than 10 point text

Anti-aliased

10 point or larger text

Produces smooth letter shapes

Photoshop or Fireworks can

produce either aliased or

anti-aliased text.

(41)

type: font

embedding

Text rendered through a browser with HTML is limited by the

fonts resident on the user’s computer

MS Internet Explorer supports font embedding technology,

allowing designers to embed fonts within their web pages.

Netscape provides this functionality through Dynamic Fonts

However, users can override designer’s choices through the

browsers’ preferences.

(42)

cascading style sheet (

CSS

)

(43)

session seven:

references

Bringhurst, Robert. The Elements of Typographic Style.

Dowding, Geoffrey. Finer Points in the Spacing & Arrangement of Type.

Horton, Sarah and Patrick Lynch. The Web Style Guide: Basic Design Principles for Creating Web Sites.

Spiekermann, Erik and E.M. Ginger. Stop Stealing Sheep and Learn How Type Works.

(44)

(45)

(46)

(47)

back MS NBC

(48)

back Brain Pop

(49)

back Congo Trek

(50)

back Sapient

(51)

back Yale Style Guide

(52)

back E*TRADE