future friendlySTYLEGUIDES@lukebroker
Hold upRESPONSIVEDESIGN!
My workflow doesn’tWORK or FLOW
How is itREALLYgoing to look?
and how dowe get thereQUICKLY?
HOW I GET THERE
HOW I GET THERE•   Wireframes - sketched only, multiple width.
HOW I GET THERE•   Wireframes - sketched only, multiple width.•   Initial prototyping - very top level, mostly    for a “l...
HOW I GET THERE•   Wireframes - sketched only, multiple width.•   Initial prototyping - very top level, mostly    for a “l...
and...STYLE GUIDES
WHYa style guide?
“Websites are systemsrather than pages andas soon as we stopperceiving them as that,the better.”            ANNA DEBENHAM
ELEMENTS,COMPONENTS& PATTERNS
Component ExampleNAVIGATIONMENUS
Component ExampleNAVIGATIONMENUS
Component ExampleNAVIGATIONMENUS
PATTERNLIBRARIESey’re popping up everywhere
PEARSpea.rs
PATTERN PRIMERgithub.com/adactio/Pattern-Primer
Back toSTYLE GUIDESFront-end Style Guides24ways.org/2011/front-end-style-guidesKnyle Style Sheetswarpspire.com/posts/kss
KNYLE STYLE SHEETS
AN IDEA
PATTERN RESPONSEgithub.com/lukebrooker/pattern-response
More than aSTYLE GUIDE
More than a    STYLE GUIDE•   Team Members - Document all    components of a project and how to    implement them.
More than a    STYLE GUIDE•   Team Members - Document all    components of a project and how to    implement them.•   Your...
More than a    STYLE GUIDE•   Team Members - Document all    components of a project and how to    implement them.•   Your...
USING IT IN ARESPONSIVEWORKFLOW
•   From wireframes - List out all components    needed.
•   From wireframes - List out all components    needed.•   In the style guide - Add the structure    (HTML) of each compo...
•   From wireframes - List out all components    needed.•   In the style guide - Add the structure    (HTML) of each compo...
•   From wireframes - List out all components    needed.•   In the style guide - Add the structure    (HTML) of each compo...
FOR EACH COMPONENT
FOR EACH COMPONENT•   Widths - how this component will react. How    wide should it get before it’s layout changes.
FOR EACH COMPONENT•   Widths - how this component will react. How    wide should it get before it’s layout changes.•   Hie...
FOR EACH COMPONENT•   Widths - how this component will react. How    wide should it get before it’s layout changes.•   Hie...
FOR EACH COMPONENT•   Widths - how this component will react. How    wide should it get before it’s layout changes.•   Hie...
AN EXAMPLE
AN EXAMPLE
AN EXAMPLE
AND THATIS WHAT I KNOWAN IDEA I HAD.ank you.@lukebroker
Upcoming SlideShare
Loading in …5
×

Future Friendly Style Guides

3,747 views

Published on

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

Published in: Design, Technology

Future Friendly Style Guides

  1. 1. future friendlySTYLEGUIDES@lukebroker
  2. 2. Hold upRESPONSIVEDESIGN!
  3. 3. My workflow doesn’tWORK or FLOW
  4. 4. How is itREALLYgoing to look?
  5. 5. and how dowe get thereQUICKLY?
  6. 6. HOW I GET THERE
  7. 7. HOW I GET THERE• Wireframes - sketched only, multiple width.
  8. 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. 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. 10. and...STYLE GUIDES
  11. 11. WHYa style guide?
  12. 12. “Websites are systemsrather than pages andas soon as we stopperceiving them as that,the better.” ANNA DEBENHAM
  13. 13. ELEMENTS,COMPONENTS& PATTERNS
  14. 14. Component ExampleNAVIGATIONMENUS
  15. 15. Component ExampleNAVIGATIONMENUS
  16. 16. Component ExampleNAVIGATIONMENUS
  17. 17. PATTERNLIBRARIESey’re popping up everywhere
  18. 18. PEARSpea.rs
  19. 19. PATTERN PRIMERgithub.com/adactio/Pattern-Primer
  20. 20. Back toSTYLE GUIDESFront-end Style Guides24ways.org/2011/front-end-style-guidesKnyle Style Sheetswarpspire.com/posts/kss
  21. 21. KNYLE STYLE SHEETS
  22. 22. AN IDEA
  23. 23. PATTERN RESPONSEgithub.com/lukebrooker/pattern-response
  24. 24. More than aSTYLE GUIDE
  25. 25. More than a STYLE GUIDE• Team Members - Document all components of a project and how to implement them.
  26. 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. 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. 28. USING IT IN ARESPONSIVEWORKFLOW
  29. 29. • From wireframes - List out all components needed.
  30. 30. • From wireframes - List out all components needed.• In the style guide - Add the structure (HTML) of each component.
  31. 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. 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. 33. FOR EACH COMPONENT
  34. 34. FOR EACH COMPONENT• Widths - how this component will react. How wide should it get before it’s layout changes.
  35. 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. 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. 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. 38. AN EXAMPLE
  39. 39. AN EXAMPLE
  40. 40. AN EXAMPLE
  41. 41. AND THATIS WHAT I KNOWAN IDEA I HAD.ank you.@lukebroker

×