More Information on Graphic Design

1
More Information on Graphic Design Color

• A few pointers for your websites other
  e-publications

Dr. Jennifer Bowie
2
Typography and Type Elements
Font Classifications

• There are four basic font classifications
• Serif the oldest type, has serifs on the end of
  letter to guide readers eye, also has thick and
  thin strokes, considered more readable than
  sans serif. Gives a more formal and traditional
  feel to documents. Often better for print than
  the web. Good body text or contrast text.
  Includes Times, Garamond, Georgia, Goudy, Book
  Antiqua, and many more.
• Sans Serif without serif, only about 100 years
  old, has stokes that have little to no variation
  in width, looks more modern and technical, used
  as a body text in Europe. Makes a good body text
  or contrast text. Good web legibility. Includes
  Arial, Helvetica, Verdana, Tahoma, Century Gothic
  (and other Gothics), Trebuchet, and many more.

3
Typography and Type Elements
Font Classifications con.

• Script fonts that look they they are hand
  lettered, can connect or not. Should be used in
  small amounts for fancy documents (invitations),
  occasionally for headings, titles, logos, and
  drop caps. Most should never be set in long
  bodies of text. Use as a display font, or rarely
  a contrast. Includes Comic Sans, Gigi, Brush
  Script (and other scripts), Fine Hand, and more
• Decorative fun, distinctive fonts. Should never
  be used in long bodies of text. Best used as
  display fonts. Very powerful, so use sparingly.
  Includes Goudy Stout, Impact, Algerian, Matisse,
  Mistral, and many more.

4
Typography and Type Elements
General Categories

• Type is used for different things. General
  categories are
• body text- a font readable in long blocks of text
  and smaller sizes (9-12 pts print, 12-14 pts
  online). Can be Sans Serif or Serif fonts
• display text- a less readable font not designed
  to be read in long blocks. Used in for titles,
  logos, and other display uses. Can be Script or
  Decorative fonts
• contrast text- meant to contrast with your body
  text. Good for headings, subheadings, titles, and
  smaller blocks of text. Normally will be Serif or
  Sans Serif (opposite of body font) but can more
  more legible Script or Display fonts

5
Typography and Type Elements
Type Styles

• Italic consider using online for emphasis.
  Italics are the right slant letters of a
  typestyle, based on cursive handwriting. Used to
  emphasize words and for titles of books
  referenced in text. Does not interrupt flow like
  bold so it can be used in body text. Not very
  legible online
• ALL CAPS avoid at all costs. All caps takes up a
  lot of room and are much harder to read than
  normal upper and lower case words, due to the way
  we read. It also is used for yelling online.
  There are much nicer ways to differentiate
  between type. Use only for small amounts of text
  (display or contrast) if using.
• Bold use to add emphasis, but use sparing and
  not in the body text (without consideration)
  since it interrupts reading
• Underline Impedes readability. Never use online
  as it looks like a link.

6
Typography and Type Elements
Hints

• Headings use differences (size, color, style,
  font) to indicate levels of headings
• Line Length lines should be shorter with sans
  serif fonts than with serif fonts
• Non-typical fonts if you want to use a
  non-typical font that you are not sure if your
  audience has on their computers consider making
  words in the font into an image. This works best
  for display uses (title, logos, buttons,..)

7
Typography and Type Elements
Good Screen Fonts

• Favor sans serif fonts for your body text as they
  are generally more readable and legible online.
  Serif fonts can make good contrast fonts (for
  headings and more)
• Good choices Verdana, Arial, Georgia, Comic
  Sans, fonts with a medium-high x-height (height
  of the lower-case x)
• A Great Pair Georgia (a serif font) and Verdana
  (a sans serif font) were designed by the same
  font designer for screen use
• Selecting a font if you dont want to use the
  default fonts, use the font lists Dreamweaver set
  up (see the drop-down list under Properties,
  Font) as these are specially chosen fonts

8
Document Design
Chunking and White Space

• Chunking elements that are related (like a
  heading with its paragraph) are grouped and look
  like they belong together.
• White space is the empty space on a page. Use it
  to
• frame elements in the page that belong together
• add emphasis to tiles and headings
• separate items that do not belong together
• help with chunking

9
Document Design
Alignment

• Alignment always choose a single alignment
  (print and especially online) for a page and
  site/document. DO NOT mix alignments!
• A single alignment creates a clean, professional
  look and adds organization and flow
• Multiple alignments on a single page are messy,
  unprofessional, annoying, and distracting
• Choose a single horizontal alignment (left,
  right, center, ) and a single vertical alignment
  (top, bottom, middle,)
• Align text, images, and all other elements on the
  page with the same alignment
• A single alignment does not mean everything has
  to line up on one margin, you can indent items,
  just make sure they still maintain your chosen
  alignment
• Horizontal Alignment options
• Left Highly preferred. Most readable (especially
  for long bodies of text) and professional.
• Right Strongly discouraged. Highly unreadable,
  use rarely. If you must use it, use it for only
  very short lines of text. Best for edgy designs
  with little text.
• Centered Strongly discouraged. Use rarely and in
  small amounts, very unreadable. Creates a weak
  line and often a weak resulting design. Leads to
  a calm, formal, and old-fashioned design (wedding
  invitations are often centered, for example)
• For more information check out Williams
  Tollett.

10
Document Design
Color

• Color adds splash and interest to documents,
  while helping readers locate information
• set and use a consistent color scheme for your
  site
• use the same color for the same type of
  information throughout the site
• use color with other devices (white space, )
• use color to communicate, not to decorate
• consider readers when selecting colors
• use color to unify series of documents

11
Have Fun and Design Well

• The End