style guides – faster development & smoother workflow
DESCRIPTION
TRANSCRIPT
#NERDERYPRIMER
PRIMER SERIES
#NERDERYPRIMER
RYAN CARLSONTECHNOLOGY EVANGELIST
YOUR HOST:
#NERDERYPRIMER
THE NERDERY
WE PARTNER WITH CREATIVE MINDS AND BIG THINKERS TO ENGINEER AND EXECUTE THEIR INTERACTIVE PROJECTS
HTTP://WWW.NERDERY.COMTWITTER: @THE_NERDERY
1,604,715 6,468HOURS WORKED SINCE 2003 PROJECTS COMPLETED DOGS IN OUR OFFICE BIKE COMMUTERS
HOURS WORKED, LAST 12 MONTHS
PEOPLE WHO WORK AT THE NERDERY
AVERAGE JANUARY TEMPERATURE
FOUR HUNDRED THIRTY-SEVEN
TWENTY-EIGHT
80
FOURº
#NERDERYPRIMER
f
#NERDERYPRIMER
#NERDERYPRIMER
THE NERDERYPARTNERSHIP-BASED METHOD
#NERDERYPRIMER
THE NERDERY
VENDORWorks for you
Says “yes”
Push back
≠
≠
≠
PARTNERWorks with you
Says “yes, but what if”
Has your back
∞
∞
∞
PARTNERSHIP-BASED METHOD
#NERDERYPRIMER
HOW TO PARTICIPATE
¼ Using the questions panels in the GoToMeeting app
¼ Tweet with the #nerderyprimer hashtag
¼ Send us an email at [email protected]
#NERDERYPRIMER
STYLE GUIDESFASTER DEVELOPMENT & SMOOTHER WORKFLOWS
#NERDERYPRIMER
SUSAN ROBERTSONFRONT-END DEVELOPER
#WIN8NERDS
#NERDERYPRIMER
GOALSUnderstand how style guides impact project efficiency and accuracy
Learn why business owners should expect to see style guides as part of the creative process
Understand the basic fundamentals of style guide creation
1
2
3
#NERDERYPRIMER
FRONT-END DEVELOPER EXPECTATIONS
UNIFORM CODE
CLEANER STYLES AND LESS MARKUP
FASTER BUILDS
#NERDERYPRIMER
WHAT IS A STYLE GUIDE?
#NERDERYPRIMER
NOT A BRAND GUIDELINE
#NERDERYPRIMER
A LIVING DOCUMENT
#NERDERYPRIMER
A LIVING DOCUMENT
#NERDERYPRIMER
A LIVING DOCUMENT
#NERDERYPRIMER
UNPACKING THE CONTENTS
CSS HTML JAVASCRIPT
#NERDERYPRIMER
UNPACKING THE CONTENTS
#NERDERYPRIMER
WHO USES STYLE GUIDES?
#NERDERYPRIMER
WHO USES STYLE GUIDES?
#NERDERYPRIMER
WHO USES STYLE GUIDES?
#NERDERYPRIMER
WHY USE STYLE GUIDES?
#NERDERYPRIMER
BETTER WORKFLOW FIND PROBLEMS EARLY
#NERDERYPRIMER
DESIGN CONSISTENCYLESS IMPACT ON PROJECTS WITH TEAM CHANGES
#NERDERYPRIMER
REFERENCE FOR NEW TEAM MEMBERS GET UP TO SPEED FASTER
#NERDERYPRIMER
CLEANER CSS & HTMLSTANDARDIZATION OF STYLES
#NERDERYPRIMER
REFERENCE FOR BACK-END DEVELOPERS CREATE STYLES WITHOUT MOCKUPS
#NERDERYPRIMER
FASTER PROTOTYPING
#NERDERYPRIMER
COMMON LANGUAGE
#NERDERYPRIMER
FAST BUILD-OUTSPEND TIME TO SAVE TIME
#NERDERYPRIMER
EASIER TESTING
#NERDERYPRIMER
BUILD A SYSTEM
#NERDERYPRIMER
HOW DO YOU MAKE A STYLE GUIDE?
#NERDERYPRIMER
TAKE TIME UP FRONT
#NERDERYPRIMER
WORKING WITH DESIGN ASSETS
Take an inventory Plan
Talk with designers
#NERDERYPRIMER
TAKE AN INVENTORY
Start with several PSD files of the site
Look for repeating elements
Grid, colors, etc.
#NERDERYPRIMER
TALK WITH THE DESIGNER
Is everything as expected?
Can anything be standardized?
#NERDERYPRIMER
PLAN
Determine the elements to include
Standardize what you can
Find a logical place to begin
#NERDERYPRIMER
START CODING
¼ Start with the main page elements
¼ Lay it out as you would an actual page
¼ Show examples of every possible element, in context
#NERDERYPRIMER
¼ Mastheads
¼ Headings
¼ Grids
¼ Buttons
¼ Body copy
¼ Other important elements
WHAT’S INCLUDED
#NERDERYPRIMER
KEEP IT UP-TO-DATE
#NERDERYPRIMER
EXAMPLES
#NERDERYPRIMER
#NERDERYPRIMER
#NERDERYPRIMER
#NERDERYPRIMER
http://24ways.org/2011/front-end-style-guides
MORE INFORMATION
#NERDERYPRIMER
THE BENEFITS OF A STYLE GUIDE
CLEANER, SMALLER CSS AND HTML
COMMON LANGUAGE ON THE TEAM
FASTER BUILD OUTS AND PROTOTYPING
#NERDERYPRIMER
QUESTIONS?
¼ Using the questions panels in the GoToMeeting app
¼ Tweet with the #nerderyprimer hashtag
¼ Send us an email at [email protected]
¼ More answers online at http://nerdery.com
#NERDERYPRIMER
THANKS FOR TUNING IN