Interface Design I

1
Interface Design I

2
TYPOGRAPHY

• Origins of the Alphabet
• Pictograms
• Ideograms
• Phoenician Alphabet
• Greek Alphabet
• Roman Alphabet

3
Pictograms

• Symbol represents an object such as OX or HOUSE

4
Ideograms

• Represents an Idea
• Today's example would be WHIMS symbols

5
Phoenician Alphabet

• Developed 15 century BC
• Each symbol represents a word

6
Greek Alphabet

• Modified the Phoenician Alphabet 1000 BC
• No vowels until they added 5 vowels
• Formalized about 403 BC

7
Roman Alphabet

• Adopted from the Greek Alphabet
• 13 letters unchanged
• ABEHIKMNOTXYZ
• 8 modified
• CDGLPRSV
• 2 added
• FQ
• 23 total

8
Lowercase Letters

• Introduced in the middle ages with scribes.
• Two forms - one from Italy and the other from
  Germany
• German version later developed for the Gutenberg
  Press

9
Serif or San-Serif

• There are many means classify fonts.
• The first is if the font is serif or san-serif
• San-Serif A
• Serif A

10
Five Families Of Type

• Old Style
• Garamond
• Transitional
• Baskerville
• Modern
• Bodoni
• Egyptian
• Century Expanded
• Contemporary
• Helvetica

11
UPPERCASE lowercase

• ABC abc

12
Measuring Type

• Use points and picas
• 6 picas to an inch
• 12 points to a pica

13
SPACING

• Word Spacing
• Letter Spacing
• Tracking
• Kerning
• Leading (baseline to baseline)
• en
• em

14
Weight

• Light
• Regular
• Bold
• Extra Bold
• Condensed
• Extended

15
Variation in Stroke or Accent

• Variation in stroke
• Variation in Accent

16
General Rule

• The larger your type the closer the tracking
• The smaller your type the wider the tracking.
  (Business Cards)
• Relationship between Tracking and Leading (the
  more tracking the more leading)

17
Corporate Symbols

• A corporate symbol is a device used to market and
  identify a Corporation.
• Deals with direction, goals, values
• Increase awareness
• Instill pride

18
Corporate Symbols

• Monograms
• Logos
• Logotypes
• Symbols and Logotypes

19
Corporate Symbols Usage

• Business Cards (BC) Letterheads, envelopes
• Web Sites, brochures, flyers catalogues, planes,
  trains and automobiles, buildings
• Needs to be easily recognized at any size.

20
Corporate Identification Manual

• A manual that describes the correct usage of the
  sysmbol and non appropriate usage.
• Request this document when ever developing a site
  for a company.
• Provides images that are ready to use.