visual design fundamentals
TRANSCRIPT
![Page 1: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/1.jpg)
VISUAL DESIGN FUNDAMENTALS
Oen Michael Hammonds, Lead Facilitator + Advisory Designer
![Page 2: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/2.jpg)
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
![Page 3: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/3.jpg)
HELLO 3
YOUR TURN
‣ Name ‣ Professional background ‣ Why are you here? ‣ What are your expectations?
![Page 4: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/4.jpg)
AGENDA 4
‣ Defining Design ‣ Elements of Design ‣ Q&A
![Page 5: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/5.jpg)
VISUAL DESIGN FUNDAMENTALS
DEFINING DESIGN
![Page 6: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/6.jpg)
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
![Page 7: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/7.jpg)
7VISUAL DESIGN FUNDAMENTALS
graphic designis a visual language uniting harmony & balance, color & light, scale & tension form & content
—Jessica Helfand
![Page 8: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/8.jpg)
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.
![Page 9: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/9.jpg)
9VISUAL DESIGN PURPOSES
EMOTION
DESCRIPTION
STRUCTURE
COMMUNICATION
Personality, Reaction
Function, Context
Organization, Hierarchy
Visual Storytelling
![Page 10: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/10.jpg)
10EMOTION
![Page 11: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/11.jpg)
11EMOTION
Approachable
Real
Positive
Supportive
Trustworthy
![Page 12: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/12.jpg)
12DESCRIPTION
![Page 13: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/13.jpg)
13DESCRIPTION
![Page 14: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/14.jpg)
14STRUCTURE
![Page 15: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/15.jpg)
15COMMUNICATION
![Page 16: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/16.jpg)
VISUAL DESIGN FUNDAMENTALS
ELEMENTS
![Page 17: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/17.jpg)
17BASIC ELEMENTS
AVLayout Graphics Type Color
![Page 18: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/18.jpg)
VISUAL DESIGN FUNDAMENTALS
LAYOUT
![Page 19: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/19.jpg)
19DESIGN PRINCIPLES
Contrast Repetition
Alignment Proximity
![Page 20: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/20.jpg)
20HIERARCHY
Who's on first! What's on second.
I Don't Know is on third.
—Abbott & Costello
![Page 21: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/21.jpg)
21GRIDS
![Page 22: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/22.jpg)
22UI EXAMPLE: ART OF THE TITLE
GRID HIERARCHY
REPETITION CONTRAST
PROXIMITY ALIGNMENT
![Page 23: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/23.jpg)
23UI EXAMPLE: SHAZAM
GRID HIERARCHY
REPETITION CONTRAST
PROXIMITY ALIGNMENT
![Page 24: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/24.jpg)
VISUAL DESIGN FUNDAMENTALS
GRAPHICS
![Page 25: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/25.jpg)
25GRAPHIC ELEMENTS
![Page 26: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/26.jpg)
26UI EXAMPLE: SAP
![Page 27: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/27.jpg)
27UI EXAMPLE: MINI
![Page 28: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/28.jpg)
VISUAL DESIGN FUNDAMENTALS
TYPE
![Page 29: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/29.jpg)
29TYEOGRAPHY AS DESIGN
![Page 30: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/30.jpg)
30TYPEFACE VS. FONT
‣ Typeface
Lubalin Lubalin Extra Light
Lubalin Extra Light Italic
Lubalin Book
Lubalin Book Italic
Lubalin Demi
Lubalin Demi Italic
‣ Font
![Page 31: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/31.jpg)
31WEIGHTS AND STYLES
House Industries Chalet
House Industries Coop
![Page 32: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/32.jpg)
32WEIGHTS AND STYLES
Sans Serif
Serif
Script
Display
Futura AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Janson Text Pro AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Sign Painter AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Impact AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
![Page 33: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/33.jpg)
33TYPEFACES
‣ Size ‣ Line Spacing ‣ Line Height ‣ Contrast ‣ Scale ‣ Color
![Page 34: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/34.jpg)
34UI EXAMPLE: FACEBOOK
![Page 35: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/35.jpg)
35UI EXAMPLE: WIRELESS FESTIVAL
![Page 36: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/36.jpg)
VISUAL DESIGN FUNDAMENTALS
COLOR
![Page 37: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/37.jpg)
37COLOR THEORY
![Page 38: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/38.jpg)
38COLOR MEANING
![Page 39: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/39.jpg)
39UI EXAMPLE: LANDROVER USA
![Page 40: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/40.jpg)
40UI EXAMPLE: NEST
![Page 41: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/41.jpg)
41RECAP
AVLayout AlignmentContrast
RepetitionHierarchy
Graphics Line
ShapeTexturePhotos
IllustrationIcon
Type Typeface
FontSize/Scale
Spacing/Height
Color Color Theory
Meaning
![Page 42: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/42.jpg)
VISUAL DESIGN FUNDAMENTALS
Q&A
![Page 43: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/43.jpg)
VISUAL DESIGN FUNDAMENTALS
RESOURCES
![Page 44: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/44.jpg)
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
![Page 45: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/45.jpg)
KEEP IN TOUCH 45
OEN MICHAEL HAMMONDS
‣ visualnotepad.org ‣ @visualnotepad ‣ linkedin.com/in/oenhammonds ‣ [email protected]
![Page 46: Visual Design Fundamentals](https://reader031.vdocuments.us/reader031/viewer/2022021507/58f0e64c1a28abca128b45dd/html5/thumbnails/46.jpg)
VISUAL DESIGN FUNDAMENTALS
THANK YOU