design for developers
DESCRIPTION
Intro to design fundamental for developers.TRANSCRIPT
Design for DevelopersTerry Ryan Worldwide Developer Evangelist@tpryan
Who Are You?
Design is a talent
Design is a skill
Design fundamentals make you a better
developer
How?
Understanding
Communication
Better Design
PLANNING
Determine:What are you
trying?
Determine:What is your audience?
Audience determines
what you are creating.
Phones break many of the
rules
Don’t use Design Programs
Draw
DESIGN FUNDAMENTALS
• Layout• Typography• Color
Design Fundamentals
LAYOUT
Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction
Grid
Start with a
Grid
Grid GRID Grid
Grid Grid Grid
Rule of Thirds• Dividing a page into 3 rows and 3 columns• The eye naturally follows this “F” shape
Mobile = one column
TheGoldenRatio
THE GOLDEN RATIO
The Golden Ratio• Proportion defined as 1.618• Found in nature, art and architecture
1.618 1
Fibonacci Numbers
The golden ratio in Layout• Overall Width / 1.618 = Content Block• Overall Width – Content Block = Sidebar Block
Overall Width
Content Block1.618
Sidebar Block1
ELEMENTS OF A GOOD LAYOUT
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Implies importance, elegance, and professionalism.
Space
Space
Don’t try to be great, try to be invisible
“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away” Antoine de Saint-Exupery
Space
Wal-Mart Target
BALANCE
Gives a clear unified message
Symmetrical balance
Salvador Dali – The Last Supper
Variety Variety Variety VARIETY VARIETY Variety VARIETY Variety variety variety variety variety variety Variety
Variety
Variety
• Gives visual and conceptual interest• Too much and the design will appear
amateurish• Too little and the design will appear
boring
“Variety is the spice of life.”
HIERARCHYWhat’s most important
• A clear starting point that guides the viewer through the design
• Separate the most important element
• Group the less important elements
Hierarchy
“Hierarchy does not refer to upper management.”
TYPOGRAPHYSerif, sans, script, monspace
• Choose a font that fits the subject• Don’t use more than three
Typography
“Typography has one plain duty before it and that’s to convey information in writing.” Emil Ruder, Founder of Basel School of Design
Contrast
Size
Hierarchy
Legible
• There are different type classifications• Understand type anatomy • Understand type measurements.
Font Structure
Font Classification
Important Ones
• Serif• San Serif• Monospaced• Script• Non Latin Alphabets• Italic• Bold
Deeper into Fonts
Anatomy
Measurements
• Pixels– Actual Pixels on Screen
• Points–Measure for print only
• Em– Relative to document
COLORColor Wheel, Color Choices, Meaning
• Use color to create hierarchy, dominance, and balance.
• Consistent use of a few colors makes a more cohesive design.
Color
“Use color to emphasize importance, not decorate a page.” Alexander White
Color Meaning
• Warm colors bring elements forward.• Cool colors move elements back.
Color
Dong Kingman
TOOLS
Design Program
• Photo manipulators• Vector graphic manipulators• Hybrids
• My choice: Fireworks
Fonts
• Whatthefont.com• Identifont.com• Typekit.com
Color
• Color Dropper Extension• Kuler
Miscelleneous
• Web Developers Toolbar• Smashingmagazine.com• Golden Ratio AIR app:– http://designupdate.com/blog/
2010/09/01/the-golden-ratio-for-great-layouts/
INSPIRATION
How do you start from nothing?
Steal
I mean inspiration
Where to get it
• http://www.mobileawesomeness.com
• http://www.thefwa.com • http://patterntap.com • http://quince.infragistics.com• http://www.designupdate.com
Using inspiration?
• Look at examples• Find things you like• Collect them• Analyze them• Extract components
Another Example
Design for DevelopersTerry Ryan Worldwide Developer Evangelist@tpryan
HTML5• Acquired Nitobi,
makers of PhoneGap
• Released new beta of Edge
• CSS Shaders submitted to W3C
Language has been
awesomified!
CONCLUSIONS
Design is a skill
Just because you won’t be an artist
Doesn’t mean you have to give up on any design
Design will make you a better developer
