Texture
Gives a
distinctive
appearance or
feel to the
surface of a
design
I I M M
J187 Introduction to Interactive Multime...
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...
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 du...
Conflicting
 Combining type faces that are similar but not the same
 Makes the page less interesting because it is not c...
Contrasting
Combining separate
typefaces that are
distinct and different
from each other.
The best designs have
contrast a...
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...
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 Beaut...
Texture and typography
Texture and typography
Texture and typography
Upcoming SlideShare
Loading in …5
×

Texture and typography

389 views

Published on

Texture and typography in web design

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
389
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Texture and typography

  1. 1. Texture Gives a distinctive appearance or feel to the surface of a design I I M M J187 Introduction to Interactive Multimedia
  2. 2. Lines provide movement …
  3. 3. and meaning
  4. 4. Literal line
  5. 5. Implied line Imaginary line you create by connecting the dots or elements together
  6. 6. Psychic line Imaginary line used to for direction from one element to another
  7. 7. Contour line Defines edges and creates boundaries
  8. 8. Dividing line Divides content
  9. 9. Decorative line Adds texture, depth, shading, or function to an element This is a link!
  10. 10. Examples of texture in web design
  11. 11. Examples of texture in web design
  12. 12. Examples of texture in web design
  13. 13. Examples of texture in web design We make the web a better place, executing dashing design and gallant technology.
  14. 14. Typography It’s not just the font style! I I M M J187 Introduction to Interactive Multimedia
  15. 15. 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.
  16. 16. Form Kerning Leading
  17. 17. Type relationships
  18. 18. Concordant Uses one type family with little change in style, size or weight. Communicates a formal situation but can be dull.
  19. 19. 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 &
  20. 20. Contrasting Combining separate typefaces that are distinct and different from each other. The best designs have contrast and this includes font.
  21. 21. Type Categories Remember them in groups of two: Old/Modern, Serif/Sans, Script/Decorative
  22. 22. Oldstyle Based on hard lettering
  23. 23. Modern Often thin
  24. 24. Slab Serif Great readability
  25. 25. Sans Serif No thick-to-thin transitions
  26. 26. Script Like calligraphy or brush strokes
  27. 27. Decorative Use sparingly!
  28. 28. 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
  29. 29. Fun  Papyruswatch.com  Dafont.com  What the Font  Adobe’s font style chart
  30. 30. Project 1 Wireframes and color comprehensive layouts Assignment: Website redesign
  31. 31. Type exercise  Download type.ai assignment from class website
  32. 32. 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

×