graphic design

1
graphic design

• Page layout typography

2
first impressions
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
• Presentation Matters

4
lecture topics
web typography
layout grids
attentional units
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.

weak visual hierarchy
strong 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
color
motion
size
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 it can distract them.
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
Whats important here?
To which company does this site belong?
13
visual hierarchy evaluating

• effective visual hierarchy
• Presents visual structure or viewing sequence
  that helps the viewer determine whats 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
visual hierarchy the process of looking

• 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?
• What is most important?

16
visual hierarchy examples
How is visual hierarchy communicated?
17
visual hierarchy examples
How is visual hierarchy communicated?
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
layout grids unifying structure
20
layout grids flexible order
Grids dont have to be limiting.
21
layout grid web examples
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 11.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
• Test to see if clipping occurs

25
why typography?
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. Jan Tschichold
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
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
typography affective

• 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
type anatomy
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
legibility a few web friendly fonts
32
typography terminology

• 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

• 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 users
  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 designers choices
  through the browsers preferences.

42
cascading style sheet (CSS)

• Font-family ltfamily-nameltgeneric-familygt
  (separate family names with a comma)
• Font-size xx-smallx-smallsmallmediumlargex-l
  argexx-largesmallerlargerltlengthgtltpercentagegt
  
• Font-style italicobliquenormal
• Font-variant small-capsnormal
• Font-weight normalboldbolderlighterlt100-900gt
• Text-align leftcenterrightjustify
• Text-decoration noneunderlineoverlineline-thro
  ughblink
• Text-indent ltlengthltpercentagegt
• Text-transform uppercaselowercasecapitalizenon
  e
• Letter-spacing ltlengthgtnormal
• Line-height ltlength.ltpercentagegtltnumbergtnormal
  
• Word-spacing ltlengthgtnormal

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.
• Tschichold, Jan. The New Typography A Handbook
  for Modern Designers.

44
back
45
back
46
back
47
MS NBC
back
48
Brain Pop
back
49
Congo Trek
back
50
Sapient
back
51
layout grid web examples
Yale Style Guide
back
52
layout grid web examples
ETRADE
back