Intro to Design...for Devs

Antonio HolguinSr. Mobile Designer at Smashing Ideas@antonioholguin

Design is just as much of a talent as it is a skill.

Design is a language.

An execution of a plan throughpatterned, organized andunderstood emotional,psychological and physiologicalhuman responses through eitherconscious or sub-consciouscommunication based on visual,physical, and auditory cues.

Getting people to dosomething or feel a

certain way.

Designer : People::

Developer : Computers

Programming is objective. Design is subjective.

Luckily,you don’t have to figure it all out.

It’s OK to break the rules

As long as you know what you’re doing

Getting Started

Research and Discovery

Know your audience

You’ve probably heard that

Know your client

A little less known, very valuable

What are you trying to say, do, or make others think?

Good Artists Copy, Great Artists Steal.

or whatever

- Pablo Picasso (supposedly)

Rules for Design

EmphasisHarmonyUnityOpposition

built with...

Color & ContrastLine, Shape, VolumeCompositionTypography

to name most important

Color & Contrast

Elements of ColorHue = colorSaturation = amount of hueBrightness = push towards whiteValue = lightness / darkness of a color,think along gray scales

energetic, passion, anger,danger, major alert,

STOP

royalty, happiness,accomplishment,

nightmares, insanity

soothing, trust, loyalty,commitment, sadness

Luck, nature, envy, decay,toxic, GO

Happy, warmth, caution,energetic, alert

Joy, heat, excitement, passion, alert, distrust, action

Color HarmoniesAnalogous – adjacent on color wheelComplementary – opposite hueMonochromatic – within the same hueTriad – 3 of equal distance on wheelNeutral – not found on color wheel

Color ParingSome colors go well togetherSome do notPairing gives relevance to another concept

ContrastMakes things easier to readHelps to draw attention Color blind can distinguish better

More InformationColor Principles http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html

Color Harmony http://kuler.adobe.com/#create

Basic Color Theoryhttp://www.colormatters.com/color-and-design/basic-color-theoryIn fact, check out all of Colormatters.com

Line, Shape, Weight

Lines• Create division• Direct the eye• Can be implied

Shape• Fills an area• Makes solidarity• Forces posture• Important for things like icons

Weight or density

• Gives dimension• Add grounding• Heavy vs Light

Composition

LayoutBalance (Symmetry)SpaceHierarchy

Grids• 960• Quarters, 3x (aka Rule of Thirds)• Columns, i.e. 2 vs 3• 24px and 40 px

Rule of Thirds

Golden Ratio

Proportion of 1.618 - following 1,1,2,3,5,8,13,21,34...

Symmetry vs Asymmetry• Create balance• Draw importance• Define “pretty”

Folded Symmetry

Radial Symmetry

Asymmetry

SpaceUse it wiselyUse it for goodDon’t try to force too much

Found Him!

Positive & Negative Space

White spaceJust like in your code, using whitespace well helps legibility

Visual Hierarchy• Equal Sizing, Color/Value, Weight ! ! ! ! ! ! ! ! ! ! = ! ! ! ! ! ! Same Importance

• Larger Items are more Important• Placement of Elements• Group Similar Elements

More Information960 Grid http://www.960.gs

Golden Ratio http://bit.ly/9OIfnA (Paul Trani)

White Space http://bit.ly/a0ebKf (AlistApart)

Typography

Typography Tips• Text should be legible• No more than 3 fonts• Watch weight and size

Fonts and styles• Serif• San Serif• Monospaced• Script• Non Latin Alphabets

• Italic• Bold• Thin/Light• THick

• Never to be used, ever at penalty of death

TypesettingKerning – distance between two lettersTracking – distribution betweenmultiple charactersLeading – distance between baselines

Elements of a Typeface (some)

Baseline X-height

Serif

Descender Ascender

Serif Sans

More InformationTypeface Elements http://bit.ly/sOAOth

Fonts.com Glossary http://www.fonts.com/aboutfonts/glossary

More InformationWhat should I look for in a UI typeface?http://bit.ly/pWxY3s

Why you should care about Typography (checkout the “What it’s saying” section)http://bit.ly/ohghLY

Interaction Design10 Principles of Interaction Design:http://www.netmagazine.com/features/10-principles-interaction-design

Deeper ThinkingUX Movement http://uxmovement.com

It ain’t easy

Antonio HolguinSenior Mobile Designer @SmashingIdeas

@AntonioHolguinhttp://antonioholguin.com

THANKS