Advantages
Time Savings
Efficient Variation Testing
Know-How Transfer
Real Interactions
Frontend
Design Production
Slide 21
Slide 21 text
Collaborate
with
Designers
Slide 22
Slide 22 text
Design Deliverables
3
Slide 23
Slide 23 text
Screens
JPG (100%)
PNG
PSD
Slide 24
Slide 24 text
HEX (#41C4FF)
RGBA (0, 182, 255)
Name (Baby Blue)
Colors
Slide 25
Slide 25 text
Family
Style / Weight (for Web Fonts)
Size (in px/em)
Color
Decoration (Underline, etc.)
Line-Height (Factor/%)
Heading 1, Lexia, Regular, 50px, 1.5
#FFFFFF
Typography
Slide 26
Slide 26 text
Dimensions
Spacings
Grid
Dimensions
Slide 27
Slide 27 text
Documentation
Slide 28
Slide 28 text
Deliver
complete
Documentation
Slide 29
Slide 29 text
Style Guides
Slide 30
Slide 30 text
A style guide is a set of standards
for the writing and design of
documents, either for general use
or for a specific publication,
organization or field.
Wikipedia
Slide 31
Slide 31 text
Why do we need a
Style Guide?
Slide 32
Slide 32 text
Types
Classic
Style Guide
Colors
Typography
Dimensions
Principles
Web
Style Guide
Controls
States
Form Elements
Icons
Viewports
Frontend
Style Guide
Markup
CSS
JavaScript
Slide 33
Slide 33 text
When I look at this...
Slide 34
Slide 34 text
Creativity Structure
Designer Developer
Focus on Focus on
Slide 35
Slide 35 text
How to add
more structure to
Designers & Developers
collaboration?
Slide 36
Slide 36 text
Bootstrap
http://twitter.github.com/bootstrap
Frameworks
Foundation
http://foundation.zurb.com