Texture and typography in web design

1. Texture
Gives a
distinctive
appearance or
feel to the
surface of a
design
I I M M
J187 Introduction to Interactive Multimedia

2. Lines provide movement …

3. and meaning

4. Literal line

5. Implied line
Imaginary line you create by connecting the
dots or elements together

6. Psychic line
Imaginary line used to for direction from one
element to another

7. Contour line
Defines edges and creates boundaries

8. Dividing line
Divides content

9. Decorative line
Adds texture, depth, shading, or function to an element
This is a link!

10. Examples of texture in web design

11. Examples of texture in web design

12. Examples of texture in web design

13. Examples of texture in web design
We make the web a better
place, executing dashing
design and gallant technology.

14. Typography
It’s not just the font style!
I I M M
J187 Introduction to Interactive Multimedia

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.

17. Form
Kerning Leading

18. Type relationships

19. Concordant
Uses one type family with little change in style, size or weight.
Communicates a formal situation but can be dull.

20. 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
&

21. Contrasting
Combining separate
typefaces that are
distinct and different
from each other.
The best designs have
contrast and this
includes font.

22. Type Categories
Remember them in groups of two:
Old/Modern, Serif/Sans, Script/Decorative

23. Oldstyle
Based on hard lettering

24. Modern
Often thin

25. Slab Serif
Great readability

26. Sans Serif
No thick-to-thin transitions

27. Script
Like calligraphy or brush strokes

28. Decorative
Use sparingly!

29. 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

30. Fun
 Papyruswatch.com
 Dafont.com
 What the Font
 Adobe’s font style chart

31. Project 1
Wireframes and color comprehensive layouts
Assignment: Website redesign

34. Type exercise
 Download type.ai assignment from class website

35. 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