Texture and typography
35
Texture Gives a distinctive appearance or feel to the surface of a design IIMM J187 Introduction to Interactive Multimedia
-
date post
21-Oct-2014 -
Category
Design
-
view
201 -
download
1
description
Texture and typography in web design
Transcript of Texture and typography
TextureGives a distinctive appearance or feel to the surface of a design
IIMMJ187 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
Drag picture to placeholder or click icon to add
Examples of texture in web design
Examples of texture in web design
Examples of texture in web design
Drag picture to placeholder or click icon to add
We make the web a better place, executing dashing design and gallant technology.
TypographyIt’s not just the font style!
IIMMJ187 Introduction to Interactive Multimedia
The goal: ReadabilityType 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.
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&
ContrastingCombining separate typefaces that are distinct and different from each other.
The best designs have contrast and this includes font.
Type CategoriesRemember them in groups of two:Old/Modern, Serif/Sans, Script/Decorative
OldstyleBased on hard lettering
ModernOften thin
Slab SerifGreat readability
Sans SerifNo thick-to-thin transitions
ScriptLike calligraphy or brush strokes
DecorativeUse sparingly!
Drag picture to placeholder or click icon to add
My RulesAlways 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
