Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms...
-
Upload
amber-sparks -
Category
Documents
-
view
223 -
download
0
Transcript of Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms...
![Page 1: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/1.jpg)
Interface Design IInterface Design I
![Page 2: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/2.jpg)
TYPOGRAPHYTYPOGRAPHY
Origins of the AlphabetOrigins of the Alphabet PictogramsPictograms IdeogramsIdeograms Phoenician AlphabetPhoenician Alphabet Greek AlphabetGreek Alphabet Roman AlphabetRoman Alphabet
![Page 3: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/3.jpg)
PictogramsPictograms
Symbol represents an object Symbol represents an object such as OX or HOUSEsuch as OX or HOUSE
![Page 4: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/4.jpg)
IdeogramsIdeograms
Represents an IdeaRepresents an Idea Today's example would be Today's example would be
WHIMS symbolsWHIMS symbols
![Page 5: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/5.jpg)
Phoenician AlphabetPhoenician Alphabet
Developed 15 century BCDeveloped 15 century BC Each symbol represents a wordEach symbol represents a word
![Page 6: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/6.jpg)
Greek AlphabetGreek Alphabet
Modified the Phoenician Alphabet Modified the Phoenician Alphabet 1000 BC1000 BC
No vowels until they added 5 No vowels until they added 5 vowelsvowels
Formalized about 403 BCFormalized about 403 BC
![Page 7: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/7.jpg)
Roman AlphabetRoman Alphabet
Adopted from the Greek AlphabetAdopted from the Greek Alphabet 13 letters unchanged13 letters unchanged
ABEHIKMNOTXYZABEHIKMNOTXYZ 8 modified8 modified
CDGLPRSVCDGLPRSV 2 added2 added
FQFQ 23 total23 total
![Page 8: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/8.jpg)
Lowercase LettersLowercase Letters
Introduced in the middle ages Introduced in the middle ages with scribes.with scribes.
Two forms - one from Italy and Two forms - one from Italy and the other from Germanythe other from Germany
German version later developed German version later developed for the Gutenberg Pressfor the Gutenberg Press
![Page 9: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/9.jpg)
Serif or San-SerifSerif or San-Serif
There are many means classify There are many means classify fonts.fonts.
The first is if the font is serif or The first is if the font is serif or san-serifsan-serif
San-Serif San-Serif AA
Serif Serif AA
![Page 10: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/10.jpg)
Five Families Of TypeFive Families Of Type
Old StyleOld Style GaramondGaramond
TransitionalTransitional BaskervilleBaskerville
ModernModernBodoniBodoni
EgyptianEgyptian Century ExpandedCentury Expanded
ContemporaryContemporary HelveticaHelvetica
![Page 11: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/11.jpg)
UPPERCASE lowercaseUPPERCASE lowercase
ABC abcABC abc
![Page 12: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/12.jpg)
Measuring TypeMeasuring Type
Use points and picasUse points and picas 6 picas to an inch6 picas to an inch 12 points to a pica 12 points to a pica
![Page 13: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/13.jpg)
SPACINGSPACING
Word SpacingWord Spacing Letter SpacingLetter Spacing
TrackingTracking KerningKerning
Leading (baseline to baseline)Leading (baseline to baseline) enen emem
![Page 14: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/14.jpg)
WeightWeight
LightLight RegularRegular BoldBold Extra BoldExtra Bold
CondensedCondensed ExtendedExtended
![Page 15: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/15.jpg)
Variation in Stroke or AccentVariation in Stroke or Accent
Variation in strokeVariation in stroke Variation in Accent Variation in Accent
![Page 16: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/16.jpg)
General RuleGeneral Rule
The larger your type the closer The larger your type the closer the trackingthe tracking
The smaller your type the wider The smaller your type the wider the tracking. (Business Cards)the tracking. (Business Cards)
Relationship between Tracking Relationship between Tracking and Leading (the more tracking and Leading (the more tracking the more leading)the more leading)
![Page 17: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/17.jpg)
Corporate SymbolsCorporate Symbols
A corporate symbol is a device used A corporate symbol is a device used to market and identify a Corporation.to market and identify a Corporation.
Deals with direction, goals, valuesDeals with direction, goals, values Increase awarenessIncrease awareness Instill prideInstill pride
![Page 18: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/18.jpg)
Corporate SymbolsCorporate Symbols
MonogramsMonograms LogosLogos LogotypesLogotypes Symbols and LogotypesSymbols and Logotypes
![Page 19: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/19.jpg)
Corporate Symbols UsageCorporate Symbols Usage
Business Cards (BC) Business Cards (BC) Letterheads, envelopesLetterheads, envelopes
Web Sites, brochures, flyers Web Sites, brochures, flyers catalogues, planes, trains and catalogues, planes, trains and automobiles, buildingsautomobiles, buildings
Needs to be easily recognized Needs to be easily recognized at any size.at any size.
![Page 20: Interface Design I. TYPOGRAPHY Origins of the Alphabet Origins of the Alphabet Pictograms Pictograms Ideograms Ideograms Phoenician Alphabet Phoenician.](https://reader035.fdocuments.in/reader035/viewer/2022062407/56649e3f5503460f94b2fedf/html5/thumbnails/20.jpg)
Corporate Identification Corporate Identification ManualManual
A manual that describes the A manual that describes the correct usage of the sysmbol correct usage of the sysmbol and non appropriate usage.and non appropriate usage.
Request this document when Request this document when ever developing a site for a ever developing a site for a company.company.
Provides images that are ready Provides images that are ready to use.to use.