Presentation for General Assembly to Introduction to Visual Design. Covers the basic understanding of what graphic design is and how it is applied in the UI and UX of design today on the web.

1. VISUAL DESIGN
FUNDAMENTALS
Oen Michael Hammonds,
Lead Facilitator + Advisory Designer

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

3. HELLO 3
YOUR TURN
‣ Name
‣ Professional background
‣ Why are you here?
‣ What are your expectations?

4. AGENDA 4
‣ Defining Design
‣ Elements of Design
‣ Q&A

5. VISUAL DESIGN FUNDAMENTALS
DEFINING DESIGN

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

7. 7VISUAL DESIGN FUNDAMENTALS
graphic design
is a visual language uniting
harmony & balance, color &
light, scale & tension form
& content
—Jessica Helfand

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

9. 9VISUAL DESIGN PURPOSES
EMOTION
DESCRIPTION
STRUCTURE
COMMUNICATION
Personality, Reaction
Function, Context
Organization, Hierarchy
Visual Storytelling

10. 10EMOTION

11. 11EMOTION
Approachable
Real
Positive
Supportive
Trustworthy

12. 12DESCRIPTION

13. 13DESCRIPTION

14. 14STRUCTURE

15. 15COMMUNICATION

16. VISUAL DESIGN FUNDAMENTALS
ELEMENTS

17. 17BASIC ELEMENTS
AVLayout Graphics Type Color

18. VISUAL DESIGN FUNDAMENTALS
LAYOUT

19. 19DESIGN PRINCIPLES
Contrast Repetition
Alignment Proximity

20. 20HIERARCHY
Who's on first!
What's on second.
I Don't Know is on third.
—Abbott & Costello

21. 21GRIDS

22. 22UI EXAMPLE: ART OF THE TITLE
GRID HIERARCHY
REPETITION CONTRAST
PROXIMITY ALIGNMENT

23. 23UI EXAMPLE: SHAZAM
GRID HIERARCHY
REPETITION CONTRAST
PROXIMITY ALIGNMENT

24. VISUAL DESIGN FUNDAMENTALS
GRAPHICS

25. 25GRAPHIC ELEMENTS

26. 26UI EXAMPLE: SAP

27. 27UI EXAMPLE: MINI

28. VISUAL DESIGN FUNDAMENTALS
TYPE

29. 29TYEOGRAPHY AS DESIGN

30. 30TYPEFACE VS. FONT
‣ Typeface
Lubalin Lubalin Extra Light
Lubalin Extra Light Italic
Lubalin Book
Lubalin Book Italic
Lubalin Demi
Lubalin Demi Italic
‣ Font

31. 31WEIGHTS AND STYLES
House Industries
Chalet
House Industries
Coop

32. 32WEIGHTS AND STYLES
Sans Serif
Serif
Script
Display
Futura AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Janson Text Pro AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Sign Painter AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789
Impact AaBbCcDdEeFfGgHhIiJjKkLlMmNn123456789

33. 33TYPEFACES
‣ Size
‣ Line Spacing
‣ Line Height
‣ Contrast
‣ Scale
‣ Color

34. 34UI EXAMPLE: FACEBOOK

35. 35UI EXAMPLE: WIRELESS FESTIVAL

36. VISUAL DESIGN FUNDAMENTALS
COLOR

37. 37COLOR THEORY

38. 38COLOR MEANING

39. 39UI EXAMPLE: LANDROVER USA

40. 40UI EXAMPLE: NEST

41. 41RECAP
AVLayout
Alignment
Contrast
Repetition
Hierarchy
Graphics
Line
Shape
Texture
Photos
Illustration
Icon
Type
Typeface
Font
Size/Scale
Spacing/Height
Color
Color Theory
Meaning

42. VISUAL DESIGN FUNDAMENTALS
Q&A

43. VISUAL DESIGN FUNDAMENTALS
RESOURCES

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

45. KEEP IN TOUCH 45
OEN MICHAEL HAMMONDS
‣ visualnotepad.org
‣ @visualnotepad
‣ linkedin.com/in/oenhammonds
‣ oen.hammonds@mac.com

46. VISUAL DESIGN FUNDAMENTALS
THANK YOU