Future Friendly Style Guides

1a06ed07575b1a77fa2b324e1385c2ea?s=47 Luke Brooker
February 28, 2012

Future Friendly Style Guides

How style guides can help in a responsive design workflow.

Find out more here: http://blog.lukebrooker.com/future-friendly-style-guides

Pattern Response - Github
https://github.com/lukebrooker/pattern-response

Slides from my talk at What Do You Know - Brisbane: http://whatdoyouknow.webdirections.org/brisbane

1a06ed07575b1a77fa2b324e1385c2ea?s=128

Luke Brooker

February 28, 2012
Tweet

Transcript

  1. future friendly STYLE GUIDES @lukebroker

  2. Hold up RESPONSIVE DESIGN!

  3. My work ow doesn’t WORK or FLOW

  4. How is it REALLY going to look?

  5. and how do we get there QUICKLY?

  6. HOW I GET THERE

  7. HOW I GET THERE • Wireframes - sketched only, multiple

    width.
  8. HOW I GET THERE • Wireframes - sketched only, multiple

    width. • Initial prototyping - very top level, mostly for a “live” feel of the layout from the wireframes, but able to be seen on many devices.
  9. HOW I GET THERE • Wireframes - sketched only, multiple

    width. • Initial prototyping - very top level, mostly for a “live” feel of the layout from the wireframes, but able to be seen on many devices. • Style tiles - design in Photoshop without “designing mockups” in Photoshop.
  10. and... STYLE GUIDES

  11. WHY a style guide?

  12. “Websites are systems rather than pages and as soon as

    we stop perceiving them as that, the better.” ANNA DEBENHAM
  13. ELEMENTS, COMPONENTS & PATTERNS

  14. Component Example NAVIGATION MENUS

  15. Component Example NAVIGATION MENUS

  16. Component Example NAVIGATION MENUS

  17. PATTERN LIBRARIES ey’re popping up everywhere

  18. PEARS pea.rs

  19. PATTERN PRIMER github.com/adactio/Pattern-Primer

  20. Back to STYLE GUIDES Front-end Style Guides 24ways.org/2011/front-end-style-guides Knyle Style

    Sheets warpspire.com/posts/kss
  21. KNYLE STYLE SHEETS

  22. AN IDEA

  23. PATTERN RESPONSE github.com/lukebrooker/pattern-response

  24. More than a STYLE GUIDE

  25. More than a STYLE GUIDE • Team Members - Document

    all components of a project and how to implement them.
  26. More than a STYLE GUIDE • Team Members - Document

    all components of a project and how to implement them. • Yourself - Keep as a starter style guide and another for a pattern library.
  27. More than a STYLE GUIDE • Team Members - Document

    all components of a project and how to implement them. • Yourself - Keep as a starter style guide and another for a pattern library. • Clients - Style guide, WYSIWYG Guide.
  28. USING IT IN A RESPONSIVE WORKFLOW

  29. • From wireframes - List out all components needed.

  30. • From wireframes - List out all components needed. •

    In the style guide - Add the structure (HTML) of each component.
  31. • From wireframes - List out all components needed. •

    In the style guide - Add the structure (HTML) of each component. • Design/style - Using the style guide or referencing your projects CSS as you build it.
  32. • From wireframes - List out all components needed. •

    In the style guide - Add the structure (HTML) of each component. • Design/style - Using the style guide or referencing your projects CSS as you build it. • Work together - Designers and developers can work together and discuss how things will work at different sizes.
  33. FOR EACH COMPONENT

  34. FOR EACH COMPONENT • Widths - how this component will

    react. How wide should it get before it’s layout changes.
  35. FOR EACH COMPONENT • Widths - how this component will

    react. How wide should it get before it’s layout changes. • Hierarchy - where this component will be used in the site, and how it react to others.
  36. FOR EACH COMPONENT • Widths - how this component will

    react. How wide should it get before it’s layout changes. • Hierarchy - where this component will be used in the site, and how it react to others. • Density - how the content changes as the component adapts to it’s surroundings. (will some things be hidden)
  37. FOR EACH COMPONENT • Widths - how this component will

    react. How wide should it get before it’s layout changes. • Hierarchy - where this component will be used in the site, and how it react to others. • Density - how the content changes as the component adapts to it’s surroundings. (will some things be hidden) • Interaction - will the way it is interacted with change as it changes.
  38. AN EXAMPLE

  39. AN EXAMPLE

  40. AN EXAMPLE

  41. AND THAT IS WHAT I KNOW AN IDEA I HAD.

    ank you. @lukebroker