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
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.
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.
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.