Your SlideShare is downloading. ×
Future Friendly Style Guides
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Future Friendly Style Guides

3,119

Published on

How style guides can help in a responsive design workflow. …

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
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,119
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
82
Comments
0
Likes
23
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. future friendlySTYLEGUIDES@lukebroker
  • 2. Hold upRESPONSIVEDESIGN!
  • 3. My workflow doesn’tWORK or FLOW
  • 4. How is itREALLYgoing to look?
  • 5. and how dowe get thereQUICKLY?
  • 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. WHYa style guide?
  • 12. “Websites are systemsrather than pages andas soon as we stopperceiving them as that,the better.” ANNA DEBENHAM
  • 13. ELEMENTS,COMPONENTS& PATTERNS
  • 14. Component ExampleNAVIGATIONMENUS
  • 15. Component ExampleNAVIGATIONMENUS
  • 16. Component ExampleNAVIGATIONMENUS
  • 17. PATTERNLIBRARIESey’re popping up everywhere
  • 18. PEARSpea.rs
  • 19. PATTERN PRIMERgithub.com/adactio/Pattern-Primer
  • 20. Back toSTYLE GUIDESFront-end Style Guides24ways.org/2011/front-end-style-guidesKnyle Style Sheetswarpspire.com/posts/kss
  • 21. KNYLE STYLE SHEETS
  • 22. AN IDEA
  • 23. PATTERN RESPONSEgithub.com/lukebrooker/pattern-response
  • 24. More than aSTYLE 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 ARESPONSIVEWORKFLOW
  • 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 THATIS WHAT I KNOWAN IDEA I HAD.ank you.@lukebroker

×