Texture and typography
Upcoming SlideShare
Loading in...5

Texture and typography



Texture and typography in web design

Texture and typography in web design



Total Views
Views on SlideShare
Embed Views



2 Embeds 27

http://steventking.com 15
http://www.slideee.com 12



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Texture and typography Texture and typography Presentation Transcript

  • Texture Gives a distinctive appearance or feel to the surface of a design I I M M J187 Introduction to Interactive Multimedia
  • Lines provide movement …
  • and meaning
  • Literal line
  • Implied line Imaginary line you create by connecting the dots or elements together
  • Psychic line Imaginary line used to for direction from one element to another
  • Contour line Defines edges and creates boundaries
  • Dividing line Divides content
  • Decorative line Adds texture, depth, shading, or function to an element This is a link!
  • Examples of texture in web design
  • Examples of texture in web design
  • Examples of texture in web design
  • Examples of texture in web design We make the web a better place, executing dashing design and gallant technology.
  • Typography It’s not just the font style! I I M M J187 Introduction to Interactive Multimedia
  • The goal: Readability Type has multiple purposes but the most important is readability: The ability for a reader to easily read and understand the text. Contributors/Distractors Size, color, texture, light, font, weight, relationship etc.
  • Form Kerning Leading
  • Type relationships
  • Concordant Uses one type family with little change in style, size or weight. Communicates a formal situation but can be dull.
  • Conflicting  Combining type faces that are similar but not the same  Makes the page less interesting because it is not concordant Times New Roman Palatino &
  • Contrasting Combining separate typefaces that are distinct and different from each other. The best designs have contrast and this includes font.
  • Type Categories Remember them in groups of two: Old/Modern, Serif/Sans, Script/Decorative
  • Oldstyle Based on hard lettering
  • Modern Often thin
  • Slab Serif Great readability
  • Sans Serif No thick-to-thin transitions
  • Script Like calligraphy or brush strokes
  • Decorative Use sparingly!
  • My Rules Always be intentional about choosing fonts Don’t use more than three fonts; two is probably enough Never use more than one decorative font and only in limited doses Typically, I choose one serif, one sans serif and call it a style
  • Fun  Papyruswatch.com  Dafont.com  What the Font  Adobe’s font style chart
  • Project 1 Wireframes and color comprehensive layouts Assignment: Website redesign
  • Type exercise  Download type.ai assignment from class website
  • For tomorrow  Choose font styles you are considering for project 1  Consider headlines, body copy, and logo  Read Beautiful Web Design Ch. 1 (layout)  Finish type assignment