Intro to Design... For Devs

Intro to Design...
for Devs
Antonio Holguin
Sr. Designer - Smashing Ideas
@antonioholguin

Thursday, December 8, 2011 1

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


Design is language.


My own deﬁnition:


An execution of a plan through
patterned, organized and
understood emotional,
psychological and physiological
human responses through either
conscious or sub-conscious
communication based on visual,
physical, and auditory cues.


Getting people to do
something or feel a
certain way.


Designer : People
::
Developer : Computers


Programming is objective
whereas Design is
subjective.


Design can be just as
rational as programming


Luckily,
you don’t have to
ﬁgure it out.


Getting Started


Research and Discovery


Know your audience

You’ve probably heard that.


Know your client


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


Good Artists Copy,
Great Artists Steal
- Pablo Picasso (supposedly)

or whatever.


Rules for Design


Emphasis
Harmony
Unity
Opposition

built with...


Color
Line, Shape, Volume
Composition
Typography

to name most important


Color


What makes up colors?


Elements of color
Hue = color
Saturation = amount of hue
Brightness = push towards white
Value = lightness / darkness of a color,
think along gray scales


What do colors mean?


Red
energetic, passion, anger,
danger, massive alert,
STOP


Purple
royalty, happiness,
accomplishment,
nightmares, insanity


Blue
soothing, trust, loyalty,
commitment, sadness


Green
Luck, nature, envy, decay,
toxic, GO


Yellow
Happy, warmth, caution,
alert


Color harmonies:
Analogous – adjacent on color wheel
Complementary – opposite hue
Monochromatic – within the same hue
Triad – 3 of equal distance on wheel
Neutral – not found on color wheel


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

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

Basic Color Theory:
http://www.colormatters.com/color-and-design/
basic-color-theory
In fact, check out all of Colormatters.com


Line - Shape - Volume


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


Layout
Balance (Symmetry)
Space
Hierarchy


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


960 Grid with 24 column


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
• Deﬁne “pretty”


Folded symmetry


Radial symmetry


Asymmetry


Space
Use it wisely
Use it for good
Don’t try to force too much


WTF? SoaB.


Oh OK.


Positive / Negative Space


White space
Just like your code, using white
space well helps legibility.


Visual hierarchy
• Equal Sizing = Same Importance
• Larger Items are more Important
• Placement of Elements
• Group Similar Elements


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

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

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


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


Typesetting
• Kerning – distance between two letters
• Tracking – distribution between
multiple characters
• Leading – distance between baselines


Elements of a typeface
Baseline X-height

Serif Sans Serif

Descender Ascender


More information
Typeface Elements: http://bit.ly/sOAOth

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


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

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


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

Deeper Thinking:
UX Movement http://uxmovement.com


Antonio Holguin
Senior Designer @SmashingIdeas
@AntonioHolguin
http://swfhead.com < gonna be changing


Intro to Design... For Devs

More Related Content

Similar to Intro to Design... For Devs (20)

Recently uploaded (20)

Intro to Design... For Devs