• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to Design... For Devs
 

Intro to Design... For Devs

on

  • 1,267 views

Presentation for Seattle Web App Developer meeting on 12/8/2011. I'll make this cleaner, pretty, better for 360|Flex

Presentation for Seattle Web App Developer meeting on 12/8/2011. I'll make this cleaner, pretty, better for 360|Flex

Statistics

Views

Total Views
1,267
Views on SlideShare
1,194
Embed Views
73

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 73

http://www.scoop.it 73

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Intro to Design... For Devs Intro to Design... For Devs Presentation Transcript

    • Intro to Design... for Devs Antonio Holguin Sr. Designer - Smashing Ideas @antonioholguinThursday, December 8, 2011 1
    • Design is just as much of a talent as it is a skill.Thursday, December 8, 2011 2
    • Design is language.Thursday, December 8, 2011 3
    • My own definition:Thursday, December 8, 2011 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.Thursday, December 8, 2011 5
    • Getting people to do something or feel a certain way.Thursday, December 8, 2011 6
    • Designer : People :: Developer : ComputersThursday, December 8, 2011 7
    • Programming is objective whereas Design is subjective.Thursday, December 8, 2011 8
    • Design can be just as rational as programmingThursday, December 8, 2011 9
    • Luckily, you don’t have to figure it out.Thursday, December 8, 2011 10
    • Getting StartedThursday, December 8, 2011 11
    • Research and DiscoveryThursday, December 8, 2011 12
    • Know your audience You’ve probably heard that.Thursday, December 8, 2011 13
    • Know your clientThursday, December 8, 2011 14
    • What are you trying to say, do, or make others think?Thursday, December 8, 2011 15
    • Good Artists Copy, Great Artists Steal - Pablo Picasso (supposedly) or whatever.Thursday, December 8, 2011 16
    • Rules for DesignThursday, December 8, 2011 17
    • Emphasis Harmony Unity Opposition built with...Thursday, December 8, 2011 18
    • Color Line, Shape, Volume Composition Typography to name most importantThursday, December 8, 2011 19
    • ColorThursday, December 8, 2011 20
    • What makes up colors?Thursday, December 8, 2011 21
    • Elements of color Hue = color Saturation = amount of hue Brightness = push towards white Value = lightness / darkness of a color, think along gray scalesThursday, December 8, 2011 22
    • What do colors mean?Thursday, December 8, 2011 23
    • Red energetic, passion, anger, danger, massive alert, STOPThursday, December 8, 2011 24
    • Purple royalty, happiness, accomplishment, nightmares, insanityThursday, December 8, 2011 25
    • Blue soothing, trust, loyalty, commitment, sadnessThursday, December 8, 2011 26
    • Green Luck, nature, envy, decay, toxic, GOThursday, December 8, 2011 27
    • Yellow Happy, warmth, caution, alertThursday, December 8, 2011 28
    • 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 wheelThursday, December 8, 2011 29
    • 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.comThursday, December 8, 2011 30
    • Line - Shape - VolumeThursday, December 8, 2011 31
    • Lines • Create division • Direct the eye • Can be impliedThursday, December 8, 2011 32
    • Thursday, December 8, 2011 33
    • Shape • Fills an area • Makes solidarity • Forces posture • Important for things like iconsThursday, December 8, 2011 34
    • Thursday, December 8, 2011 35
    • Weight or density • Gives dimension • Add grounding • Heavy vs LightThursday, December 8, 2011 36
    • Thursday, December 8, 2011 37
    • CompositionThursday, December 8, 2011 38
    • Layout Balance (Symmetry) Space HierarchyThursday, December 8, 2011 39
    • Grids • 960 • Quarters, 3x (aka Rule of Thirds) • Columns, i.e. 2 vs 3 • 24px and 40 pxThursday, December 8, 2011 40
    • 960 Grid with 24 columnThursday, December 8, 2011 41
    • Rule of ThirdsThursday, December 8, 2011 42
    • Thursday, December 8, 2011 43
    • Golden Ratio Proportion of 1.618 - following 1,1,2,3,5,8,13,21,34...Thursday, December 8, 2011 44
    • Thursday, December 8, 2011 45
    • Symmetry vs Asymmetry • Create balance • Draw importance • Define “pretty”Thursday, December 8, 2011 46
    • Folded symmetryThursday, December 8, 2011 47
    • Thursday, December 8, 2011 48
    • Radial symmetryThursday, December 8, 2011 49
    • AsymmetryThursday, December 8, 2011 50
    • Space Use it wisely Use it for good Don’t try to force too muchThursday, December 8, 2011 51
    • Thursday, December 8, 2011 52
    • WTF? SoaB.Thursday, December 8, 2011 53
    • Oh OK.Thursday, December 8, 2011 54
    • Positive / Negative SpaceThursday, December 8, 2011 55
    • White space Just like your code, using white space well helps legibility.Thursday, December 8, 2011 56
    • Thursday, December 8, 2011 57
    • Visual hierarchy • Equal Sizing = Same Importance • Larger Items are more Important • Placement of Elements • Group Similar ElementsThursday, December 8, 2011 58
    • More information 960 Grid: http://www.960.gs Golden Ratio: http://bit.ly/9OIfnA (Paul Trani) White Space (AlistApart): http://bit.ly/a0ebKfThursday, December 8, 2011 59
    • TypographyThursday, December 8, 2011 60
    • Typography tips • Text should be legible • No more than 3 fonts • Watch weight and sizeThursday, December 8, 2011 61
    • Fonts and styles • Serif • San Serif • Monospaced • Script • Non Latin Alphabets • Italic • BoldThursday, December 8, 2011 62
    • Thursday, December 8, 2011 63
    • Typesetting • Kerning – distance between two letters • Tracking – distribution between multiple characters • Leading – distance between baselinesThursday, December 8, 2011 64
    • Elements of a typeface Baseline X-height Serif Sans Serif Descender AscenderThursday, December 8, 2011 65
    • More information Typeface Elements: http://bit.ly/sOAOth Fonts.com Glossary: http://www.fonts.com/ aboutfonts/glossaryThursday, December 8, 2011 66
    • 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/ohghLYThursday, December 8, 2011 67
    • Interaction Design 10Principles of Interaction Design: http://www.netmagazine.com/features/10- principles-interaction-design Deeper Thinking: UX Movement http://uxmovement.comThursday, December 8, 2011 68
    • Antonio Holguin Senior Designer @SmashingIdeas @AntonioHolguin http://swfhead.com < gonna be changingThursday, December 8, 2011 69