Style Guides – Faster Development & Smoother Workflow

545 views

Published on

Published in: Internet, Technology, Design
  • Be the first to comment

  • Be the first to like this

Style Guides – Faster Development & Smoother Workflow

  1. 1. #NERDERYPRIMER PRIMER SERIES
  2. 2. #NERDERYPRIMER RYAN CARLSON TECHNOLOGY EVANGELIST YOUR HOST:
  3. 3. #NERDERYPRIMER THE NERDERY WE PARTNER WITH CREATIVE MINDS AND BIG THINKERS TO ENGINEER AND EXECUTE THEIR INTERACTIVE PROJECTS HTTP://WWW.NERDERY.COM TWITTER: @THE_NERDERY 1,604,715 6,468 HOURS 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º
  4. 4. #NERDERYPRIMER f
  5. 5. #NERDERYPRIMER
  6. 6. #NERDERYPRIMER THE NERDERY PARTNERSHIP-BASED METHOD
  7. 7. #NERDERYPRIMER THE NERDERY VENDOR Works for you Says “yes” Push back ≠ ≠ ≠ PARTNER Works with you Says “yes, but what if” Has your back ∞ ∞ ∞ PARTNERSHIP-BASED METHOD
  8. 8. #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
  9. 9. #NERDERYPRIMER STYLE GUIDES FASTER DEVELOPMENT & SMOOTHER WORKFLOWS
  10. 10. #NERDERYPRIMER SUSAN ROBERTSON FRONT-END DEVELOPER #WIN8NERDS
  11. 11. #NERDERYPRIMER GOALS Understand 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
  12. 12. #NERDERYPRIMER FRONT-END DEVELOPER EXPECTATIONS UNIFORM CODE CLEANER STYLES AND LESS MARKUP FASTER BUILDS
  13. 13. #NERDERYPRIMER WHAT IS A STYLE GUIDE?
  14. 14. #NERDERYPRIMER NOT A BRAND GUIDELINE
  15. 15. #NERDERYPRIMER A LIVING DOCUMENT
  16. 16. #NERDERYPRIMER A LIVING DOCUMENT
  17. 17. #NERDERYPRIMER A LIVING DOCUMENT
  18. 18. #NERDERYPRIMER UNPACKING THE CONTENTS CSS HTML JAVASCRIPT
  19. 19. #NERDERYPRIMER UNPACKING THE CONTENTS
  20. 20. #NERDERYPRIMER WHO USES STYLE GUIDES?
  21. 21. #NERDERYPRIMER WHO USES STYLE GUIDES?
  22. 22. #NERDERYPRIMER WHO USES STYLE GUIDES?
  23. 23. #NERDERYPRIMER WHY USE STYLE GUIDES?
  24. 24. #NERDERYPRIMER BETTER WORKFLOW FIND PROBLEMS EARLY
  25. 25. #NERDERYPRIMER DESIGN CONSISTENCY LESS IMPACT ON PROJECTS WITH TEAM CHANGES
  26. 26. #NERDERYPRIMER REFERENCE FOR NEW TEAM MEMBERS GET UP TO SPEED FASTER
  27. 27. #NERDERYPRIMER CLEANER CSS & HTML STANDARDIZATION OF STYLES
  28. 28. #NERDERYPRIMER REFERENCE FOR BACK-END DEVELOPERS CREATE STYLES WITHOUT MOCKUPS
  29. 29. #NERDERYPRIMER FASTER PROTOTYPING
  30. 30. #NERDERYPRIMER COMMON LANGUAGE
  31. 31. #NERDERYPRIMER FAST BUILD-OUT SPEND TIME TO SAVE TIME
  32. 32. #NERDERYPRIMER EASIER TESTING
  33. 33. #NERDERYPRIMER BUILD A SYSTEM
  34. 34. #NERDERYPRIMER HOW DO YOU MAKE A STYLE GUIDE?
  35. 35. #NERDERYPRIMER TAKE TIME UP FRONT
  36. 36. #NERDERYPRIMER WORKING WITH DESIGN ASSETS Take an inventory Plan Talk with designers
  37. 37. #NERDERYPRIMER TAKE AN INVENTORY Start with several PSD files of the site Look for repeating elements Grid, colors, etc.
  38. 38. #NERDERYPRIMER TALK WITH THE DESIGNER Is everything as expected? Can anything be standardized?
  39. 39. #NERDERYPRIMER PLAN Determine the elements to include Standardize what you can Find a logical place to begin
  40. 40. #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
  41. 41. #NERDERYPRIMER ¼ Mastheads ¼ Headings ¼ Grids ¼ Buttons ¼ Body copy ¼ Other important elements WHAT’S INCLUDED
  42. 42. #NERDERYPRIMER KEEP IT UP-TO-DATE
  43. 43. #NERDERYPRIMER EXAMPLES
  44. 44. #NERDERYPRIMER
  45. 45. #NERDERYPRIMER
  46. 46. #NERDERYPRIMER
  47. 47. #NERDERYPRIMER http://24ways.org/2011/front-end-style-guides MORE INFORMATION
  48. 48. #NERDERYPRIMER THE BENEFITS OF A STYLE GUIDE CLEANER, SMALLER CSS AND HTML COMMON LANGUAGE ON THE TEAM FASTER BUILD OUTS AND PROTOTYPING
  49. 49. #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
  50. 50. #NERDERYPRIMER THANKS FOR TUNING IN

×