Visual Design Fundamentals
-
Upload
oen-michael-hammonds -
Category
Design
-
view
718 -
download
0
Transcript of Visual Design Fundamentals
VISUAL DESIGN FUNDAMENTALS
Oen Michael Hammonds, Lead Facilitator + Advisory Designer
HELLO 2
OEN MICHAEL HAMMONDS
‣ Current: Lead Facilitator + Advisory Designer, IBM Design ‣ Vice-President, AIGA Austin ‣ Adjunct Professor, Austin Community College ‣ Previous: Associate Creative Director, Y&R Austin
HELLO 3
YOUR TURN
‣ Name ‣ Professional background ‣ Why are you here? ‣ What are your expectations?
AGENDA 4
‣ Defining Design ‣ Elements of Design ‣ Q&A
VISUAL DESIGN FUNDAMENTALS
DEFINING DESIGN
6VISUAL DESIGN FUNDAMENTALS
design |dəˈzīn|noun purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object
—Merriam-Webster
7VISUAL DESIGN FUNDAMENTALS
graphic designis a visual language uniting harmony & balance, color & light, scale & tension form & content
—Jessica Helfand
8VISUAL DESIGN FUNDAMENTALS
Creating great design starts with knowing your user so that you use the right elements of design to create a purposeful experience.
9VISUAL DESIGN PURPOSES
EMOTION
DESCRIPTION
STRUCTURE
COMMUNICATION
Personality, Reaction
Function, Context
Organization, Hierarchy
Visual Storytelling
10EMOTION
11EMOTION
Approachable
Real
Positive
Supportive
Trustworthy
12DESCRIPTION
13DESCRIPTION
14STRUCTURE
15COMMUNICATION
VISUAL DESIGN FUNDAMENTALS
ELEMENTS
17BASIC ELEMENTS
AVLayout Graphics Type Color
VISUAL DESIGN FUNDAMENTALS
LAYOUT
19DESIGN PRINCIPLES
Contrast Repetition
Alignment Proximity
20HIERARCHY
Who's on first! What's on second.
I Don't Know is on third.
—Abbott & Costello
21GRIDS
22UI EXAMPLE: ART OF THE TITLE
GRID HIERARCHY
REPETITION CONTRAST
PROXIMITY ALIGNMENT
23UI EXAMPLE: SHAZAM
GRID HIERARCHY
REPETITION CONTRAST
PROXIMITY ALIGNMENT
VISUAL DESIGN FUNDAMENTALS
GRAPHICS
25GRAPHIC ELEMENTS
26UI EXAMPLE: SAP
27UI EXAMPLE: MINI
VISUAL DESIGN FUNDAMENTALS
TYPE
29TYEOGRAPHY AS DESIGN
30TYPEFACE VS. FONT
‣ Typeface
Lubalin Lubalin Extra Light
Lubalin Extra Light Italic
Lubalin Book
Lubalin Book Italic
Lubalin Demi
Lubalin Demi Italic
‣ Font
31WEIGHTS AND STYLES
House Industries Chalet
House Industries Coop
32WEIGHTS AND STYLES
Sans Serif
Serif
Script
Display
Futura AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Janson Text Pro AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Sign Painter AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Impact AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
33TYPEFACES
‣ Size ‣ Line Spacing ‣ Line Height ‣ Contrast ‣ Scale ‣ Color
34UI EXAMPLE: FACEBOOK
35UI EXAMPLE: WIRELESS FESTIVAL
VISUAL DESIGN FUNDAMENTALS
COLOR
37COLOR THEORY
38COLOR MEANING
39UI EXAMPLE: LANDROVER USA
40UI EXAMPLE: NEST
41RECAP
AVLayout AlignmentContrast
RepetitionHierarchy
Graphics Line
ShapeTexturePhotos
IllustrationIcon
Type Typeface
FontSize/Scale
Spacing/Height
Color Color Theory
Meaning
VISUAL DESIGN FUNDAMENTALS
Q&A
VISUAL DESIGN FUNDAMENTALS
RESOURCES
RESOURCES 44
‣ General: webfieldmanual.com, alistapart.com, Smashing Magazine, pttrns.com, siteinspire.com
‣ UI/UX: uxarchive.com, inspired-ui.com, uiparade.com
‣ Graphics: icomoon.io, informationisbeautiful.net
‣ Layout: responsivelayouts.jensimmons.com, mediaqueri.es, 960grid
‣ Color: colormatters.com, Adobe Color, Colour Lovers
‣ Type: typecast.com, Google Fonts, Adobe Typekit
‣ Software: invisionapp.com, Sketch, Adobe Photoshop & Illustrator
KEEP IN TOUCH 45
OEN MICHAEL HAMMONDS
‣ visualnotepad.org ‣ @visualnotepad ‣ linkedin.com/in/oenhammonds ‣ [email protected]
VISUAL DESIGN FUNDAMENTALS
THANK YOU