style guides – faster development & smoother workflow

50
#NERDERYPRIMER PRIMER SERIES

Upload: the-nerdery

Post on 27-Jan-2015

115 views

Category:

Internet


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

PRIMER SERIES

Page 2: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

RYAN CARLSONTECHNOLOGY EVANGELIST

YOUR HOST:

Page 3: Style Guides – Faster Development & Smoother Workflow

#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º

Page 5: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

Page 6: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

THE NERDERYPARTNERSHIP-BASED METHOD

Page 7: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

THE NERDERY

VENDORWorks for you

Says “yes”

Push back

PARTNERWorks with you

Says “yes, but what if”

Has your back

PARTNERSHIP-BASED METHOD

Page 8: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

HOW TO PARTICIPATE

¼ Using the questions panels in the GoToMeeting app

¼ Tweet with the #nerderyprimer hashtag

¼ Send us an email at [email protected]

Page 9: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

STYLE GUIDESFASTER DEVELOPMENT & SMOOTHER WORKFLOWS

Page 10: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

SUSAN ROBERTSONFRONT-END DEVELOPER

#WIN8NERDS

Page 11: Style Guides – Faster Development & Smoother Workflow

#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

Page 12: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

FRONT-END DEVELOPER EXPECTATIONS

UNIFORM CODE

CLEANER STYLES AND LESS MARKUP

FASTER BUILDS

Page 13: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

WHAT IS A STYLE GUIDE?

Page 14: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

NOT A BRAND GUIDELINE

Page 15: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

A LIVING DOCUMENT

Page 16: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

A LIVING DOCUMENT

Page 17: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

A LIVING DOCUMENT

Page 18: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

UNPACKING THE CONTENTS

CSS HTML JAVASCRIPT

Page 19: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

UNPACKING THE CONTENTS

Page 20: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

WHO USES STYLE GUIDES?

Page 21: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

WHO USES STYLE GUIDES?

Page 22: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

WHO USES STYLE GUIDES?

Page 23: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

WHY USE STYLE GUIDES?

Page 24: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

BETTER WORKFLOW FIND PROBLEMS EARLY

Page 25: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

DESIGN CONSISTENCYLESS IMPACT ON PROJECTS WITH TEAM CHANGES

Page 26: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

REFERENCE FOR NEW TEAM MEMBERS GET UP TO SPEED FASTER

Page 27: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

CLEANER CSS & HTMLSTANDARDIZATION OF STYLES

Page 28: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

REFERENCE FOR BACK-END DEVELOPERS CREATE STYLES WITHOUT MOCKUPS

Page 29: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

FASTER PROTOTYPING

Page 30: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

COMMON LANGUAGE

Page 31: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

FAST BUILD-OUTSPEND TIME TO SAVE TIME

Page 32: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

EASIER TESTING

Page 33: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

BUILD A SYSTEM

Page 34: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

HOW DO YOU MAKE A STYLE GUIDE?

Page 35: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

TAKE TIME UP FRONT

Page 36: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

WORKING WITH DESIGN ASSETS

Take an inventory Plan

Talk with designers

Page 37: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

TAKE AN INVENTORY

Start with several PSD files of the site

Look for repeating elements

Grid, colors, etc.

Page 38: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

TALK WITH THE DESIGNER

Is everything as expected?

Can anything be standardized?

Page 39: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

PLAN

Determine the elements to include

Standardize what you can

Find a logical place to begin

Page 40: Style Guides – Faster Development & Smoother Workflow

#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

Page 41: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

¼ Mastheads

¼ Headings

¼ Grids

¼ Buttons

¼ Body copy

¼ Other important elements

WHAT’S INCLUDED

Page 42: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

KEEP IT UP-TO-DATE

Page 43: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

EXAMPLES

Page 44: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

Page 45: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

Page 46: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

Page 47: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

http://24ways.org/2011/front-end-style-guides

MORE INFORMATION

Page 48: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

THE BENEFITS OF A STYLE GUIDE

CLEANER, SMALLER CSS AND HTML

COMMON LANGUAGE ON THE TEAM

FASTER BUILD OUTS AND PROTOTYPING

Page 49: Style Guides – Faster Development & Smoother Workflow

#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

Page 50: Style Guides – Faster Development & Smoother Workflow

#NERDERYPRIMER

THANKS FOR TUNING IN