Intro to Multimedia Intro to Typography. http://www.wordsarepictures.co.uk

Download Intro to Multimedia Intro to Typography. http://www.wordsarepictures.co.uk

Post on 27-Dec-2015

213 views

Category:

Documents

1 download

Embed Size (px)

TRANSCRIPT

  • Intro to MultimediaIntro to Typography

  • http://www.wordsarepictures.co.uk/

  • Comparing TypographyPulp Fiction #1Pulp Fiction #2 Disclaimer:The videos you are about to watch contain vulgar language. You may opt out of this part of the presentation if you like.

  • TypographyDefinedThe art and technique of selecting and arranging type styles, point sizes, line lengths, line leading, character spacing, and word spacing for typeset applications Conveys moodCommunicates attitude

  • Typography Principles

  • Basic PrinciplesProximitygroups things togetherAlignmentconnects visually to everything elseRepetitionprovides consistency to the productContrastadds visual interest

  • Proximity - IllustratedBugsBooklouseBox Elder BugsCarpenter ants Carpet BeetlesClothes MothsClover MitesCockroachesOrchard BeesPharaoh AntsPhorid FliesPill BugsBugsBooklouseBox Elder Bugs Carpenter ants Carpet BeetlesClothes MothsClover MitesCockroaches

    Orchard BeesPharaoh AntsPhorid FliesPill BugsCarpenter AntsReproductive winged femaleReproductive winged maleMinor workersMajor workers Carpet BeetlesVaried carpet beetlesBlack carpet beetlesPhorid FliesHumpback fliesDrain flies

    Carpenter AntsReproductive winged femaleReproductive winged maleMinor workersMajor workers Carpet BeetlesVaried carpet beetlesBlack carpet beetlesPhorid FliesHumpback fliesDrain fliesVS:The principle of proximity says that related items should be grouped together. Move related items close to each other and add separation between items that are not similar. This ensures that a group is formed rather than a selection of unrelated elements. The proximity of items communicates relationship.

  • Proximity ErrorsWhat to avoid:Placing too many separate elements on a pageSticking element in the corners and in the middle of the pagesLeaving equal amounts of white space between elements (unless each group is part of a subset)Allowing confusion between related materialCreating relationships with elements that dont belong together

  • AlignmentEvery element should be visually linked, or aligned, with something else. This presents a cohesive look.

    Be conscious of items placed on the pagealign it with something else, regardless of the distance.Avoid:Avoid using more than one text alignmentReduce the use of centered alignment (especially online)

  • RepetitionUnify and add visual interest by repeating some aspect of the design.

    Repeat anything that someone will recognize visually. This can include type styles, spatial relationships, etc.Avoid:Too much repetition - it may annoy or overwhelm the viewerExcessive contrast of type styles

  • ContrastUse contrast to design something that is strongly visual and provides organizational hierarchy.Apply this when you want the elements to be very different. Use size, weight, color, direction, form and structureAvoid:Everything having the same weight and strengthWeak contrast make it strong

  • Typography RulesAvoid using all capitals with Script fonts

    Limit the number of serif fontsAlign text as much as possibleGroup text together, aligning left, center or right DONT USE SCRIPTS IN ALL CAPS

    Dont use scripts in all caps

    DONT USE SCRIPTS IN ALL CAPS

    Dont use scripts in all caps

  • Go Forth and Communicate

    ************