Future Friendly Style Guides
21 likes2,363 views
The document discusses the importance of style guides in responsive web design, emphasizing their role in documenting components, enhancing workflows, and facilitating collaboration between designers and developers. It outlines various stages of the design process, including wireframes, initial prototyping, and the creation of style tiles. The author advocates for treating websites as systems rather than static pages, with a focus on adapting components to different screen sizes and contexts.
Future Friendly Style Guides
- 3. My workflow 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.
- 12. “Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.” ANNA DEBENHAM
- 17. PATTERN LIBRARIES ey’re popping up everywhere
- 18. PEARS pea.rs
- 20. Back to STYLE GUIDES Front-end Style Guides 24ways.org/2011/front-end-style-guides Knyle Style Sheets warpspire.com/posts/kss
- 22. AN IDEA
- 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.
- 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