style guides – faster development & smoother workflow

#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 primers@nerdery.com

#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 primers@nerdery.com

¼ More answers online at http://nerdery.com

#NERDERYPRIMER

THANKS FOR TUNING IN