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 ‣ oen.hammonds@mac.com

VISUAL DESIGN FUNDAMENTALS

THANK YOU