This document provides an introduction to design for developers. It discusses design as both a talent and a skill involving visual, physical, and auditory communication. Design aims to get people to feel or do something, similar to how programming gets computers to perform tasks. The document outlines important design elements like color, line, shape, composition, and typography. It provides tips on using emphasis, harmony, unity, opposition, contrast and other principles to effectively incorporate these elements. Research, understanding your audience and goals, and breaking rules thoughtfully are also emphasized.

1. Intro to Design...
for Devs
Antonio Holguin
Sr. Mobile Designer at Smashing Ideas
@antonioholguin

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

3. Design is a language.

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

5. Getting people to do
something or feel a
certain way.

6. Designer : People
::
Developer : Computers

7. Programming is objective.
Design is subjective.

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

9. It’s OK to break the rules
As long as you know what you’re doing

10. Getting Started

11. Research and Discovery

12. Know your audience
You’ve probably heard that

13. Know your client
A little less known, very valuable

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

15. Good Artists Copy,
Great Artists Steal.
- Pablo Picasso (supposedly)
or whatever

16. Rules for Design

17. Emphasis
Harmony
Unity
Opposition
built with...

18. Color & Contrast
Line, Shape, Volume
Composition
Typography
to name most important

19. Color & Contrast

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

23. energetic, passion, anger,
danger, major alert,
STOP

24. royalty, happiness,
accomplishment,
nightmares, insanity

25. soothing, trust, loyalty,
commitment, sadness

26. Luck, nature, envy, decay,
toxic, GO

27. Happy, warmth, caution,
energetic, alert

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

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

30. Color Paring
Some colors go well together
Some do not
Pairing gives relevance to another concept

31. Contrast
Makes things easier to read
Helps to draw attention
Color blind can distinguish better

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

36. Line, Shape, Weight

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

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

41. Weight or density
• Gives dimension
• Add grounding
• Heavy vs Light

43. Composition

44. Layout
Balance (Symmetry)
Space
Hierarchy

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

47. Rule of Thirds

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

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

52. Folded Symmetry

54. Radial Symmetry

55. Asymmetry

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

58. Found Him!

59. Positive & Negative Space

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

62. Visual Hierarchy
• Equal Sizing, Color/Value, Weight
! ! ! ! ! ! ! ! ! ! =
! ! ! ! ! ! Same Importance
• Larger Items are more Important
• Placement of Elements
• Group Similar Elements

64. More Information
960 Grid http://www.960.gs
Golden Ratio http://bit.ly/9OIfnA (Paul Trani)
White Space http://bit.ly/a0ebKf (AlistApart)

65. Typography

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

67. Fonts and styles
• Serif • Italic
• San Serif • Bold
• Monospaced • Thin/Light
• Script • THick
• Non Latin Alphabets
• Never to be used, ever at penalty of death

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

70. Elements of a Typeface (some)
Baseline X-height
Serif Serif Sans
Descender Ascender

71. More Information
Typeface Elements http://bit.ly/sOAOth
Fonts.com Glossary http://www.fonts.com/aboutfonts/
glossary

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

73. Interaction Design
10 Principles of Interaction Design:
http://www.netmagazine.com/features/10-principles-
interaction-design
Deeper Thinking
UX Movement http://uxmovement.com

74. It ain’t easy

75. THANKS
Antonio Holguin
Senior Mobile Designer @SmashingIdeas
@AntonioHolguin
http://antonioholguin.com