Modern Style Guides for a Better Tomorrow

Times are changing and so must the process in which we design and build websites. The days of designing static compositions in Photoshop are a thing of the past, instead, responsive design within the browser is the future. This new world is not without its own risks, but if we focus on maintainability, organization, and modularity we can achieve a better tomorrow.

In this talk Shay will outline styleguides, living documentation on the design and development of a website, and their role within web design and development process. Looking at a few modern practices and standards, this talk will cover the benefits of stylesguides, the strategy behind creating one, and how to best utilize one within your project.

Transcript

1. Modern
   Style Guides
   for a Better Tomorrow
   Shay Howe
   @shayhowe
   learn.shayhowe.com
   

   View Slide

2. Modern Style Guides @shayhowe
   CSS is
   Hard
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. Modern Style Guides @shayhowe
   Consistency is one of the
   most powerful usability
   principles: when things
   always behave the same,
   users don’t have to worry
   about what will happen.
   – Jakob Nielson
   “
   

   View Slide

8. Modern Style Guides @shayhowe
   Times are
   Changing
   

   View Slide

9. Modern Style Guides @shayhowe
   Tools
   • HTML5 & CSS3 have opened doors
   • Preprocessors make writing code more efficient
   • Frameworks improve abstraction
   

   View Slide

10. Modern Style Guides @shayhowe
    Standards
    • Web standards are evolving
    • OOCSS & SMACSS promote modularization
    • Maintainability & performance are gaining traction
    

    View Slide

11. Modern Style Guides @shayhowe
    Browsers
    • Feature support is truly respectful
    • Rendering has tremendously improved
    • Updates are continuous
    

    View Slide

12. Modern Style Guides @shayhowe
    Processes
    • Static compositions are a house of cards
    • Responsive design is a must
    • Mobile first approach provides clarity
    

    View Slide

13. Modern Style Guides @shayhowe
    We Need to…
    • Design, or decide, in the browser
    • Provide a realistic presentation of a website
    • Quickly change & iterate
    • Stay consistent
    • Think in systems, not pages
    • Build a style guide
    

    View Slide

14. Modern Style Guides @shayhowe
    What is a
    Style Guide
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. Modern Style Guides @shayhowe
    Style Guide
    Goals
    

    View Slide

21. Modern Style Guides @shayhowe
    Provide Consistency
    • Build a living reference library
    • Favor constraints
    • Encourage more cohesive design
    • Improve maintainability
    

    View Slide

22. View Slide

23. View Slide

24. Modern Style Guides @shayhowe
    Set Standards
    • Document design & development standards
    • Conform to standards
    • Socialize standards
    

    View Slide

25. View Slide

26. Modern Style Guides @shayhowe
    Improve Workflow
    • See the design in action
    • Cut out unnecessary steps
    • Provide better deliverables
    • Make life easier & save time
    

    View Slide

27. Modern Style Guides @shayhowe
    Raise Awareness
    • Give design & development a voice
    • Create a shared vocabulary
    • Advocate quality
    

    View Slide

28. View Slide

29. View Slide

30. Modern Style Guides @shayhowe
    Getting
    Support
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. Modern Style Guides @shayhowe
    Development
    Strategy
    

    View Slide

40. Modern Style Guides @shayhowe
    Research
    • Gather the team
    • Ask thought provoking questions
    • Listen to what is needed
    • Organize feedback
    

    View Slide

41. Modern Style Guides @shayhowe
    Take Inventory
    • Take visual inventory
    • Recognize patterns
    • Identify what to include...
    • Branding
    • Buttons
    • Colors
    • Forms
    • Icons
    • Layout
    • Media
    • Navigation
    • Typography
    

    View Slide

42. Modern Style Guides @shayhowe
    Build Incrementally
    • Set a foundation for content
    Colors, Layout, Lists, Normalize, Typography
    • Add in theme & components
    Alerts, Buttons, Labels, Navigation, Tooltips
    • Round out specifics
    Carousels, Hero, Sidebar
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. Modern Style Guides @shayhowe
    Bring It to Life
    • Build in live, real code
    • Show behaviors & interactions
    • Use actual examples
    • Make it comprehensive
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. Modern Style Guides @shayhowe
    Document Standards
    • Document set standards
    • Educate through standards
    • Include brand, development, design & editorial guidelines
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. Modern Style Guides @shayhowe
    Iterate
    • Do not neglect the style guide
    • Keep the audience in mind
    • Reduce friction
    • Have a review process
    

    View Slide

61. Modern Style Guides @shayhowe
    Moving
    Forward
    

    View Slide

62. Modern Style Guides @shayhowe
    Drive Participation
    • Encourage contribution
    • Evolve through collaboration
    • Make it accessible
    

    View Slide

63. Modern Style Guides @shayhowe
    Watch the Unpredictable
    • Predict the unpredictable
    • Be rigorous, say no!
    • Again, conform to standard
    

    View Slide

64. Modern Style Guides @shayhowe
    Learn from Others
    • Look to others for advice
    • Study different style guides & frameworks
    • Don’t reinvent the wheel
    

    View Slide

65. Modern Style Guides @shayhowe
    Helpful Resources
    • Website Style Guide Resources
    styleguides.io
    • The Style Guide Guide
    vinspee.me/style-guide-guide
    • Style Guide Boilerplate
    brettjankord.com/projects/style-guide-boilerplate
    • Stylify Me
    stylifyme.com
    

    View Slide

66. Modern Style Guides @shayhowe
    In
    Closing
    

    View Slide

67. Modern Style Guides @shayhowe
    1 Provide consistency
    2 Set standards
    3 Form relationships
    4 Build incrementally
    5 Iterate often
    

    View Slide

68. View Slide

69. Modern Style Guides @shayhowe
    Thank You!
    @shayhowe
    learn.shayhowe.com
    Save 35%
    “LEARNCODE2”
    peachpit.com
    

    View Slide