Recommended
More Related Content
What's hot
What's hot (17)
Similar to Designing with style: Using style tiles in responsive design
Similar to Designing with style: Using style tiles in responsive design (20)
Recently uploaded
Recently uploaded (20)
Designing with style: Using style tiles in responsive design
- 1. DESIGNING WITH STYLE Using style tiles in responsive design
- 2. INTRODUCTION HI, I’M JASON I'm an a senior digital designer at MacLaren McCann, and I've been creating digital experiences in Calgary since 2004. (I design & build websites) @jaydorn jasondorn.com
- 3. USING STYLE TILES IN RESPONSIVE DESIGN ▸ Style tiles (or guides) are a way of defining the visual language of a web or digital project, and developing a system of reusable elements. ▸ Beneficial when dealing with responsive design as developing literal “pixel perfect” layouts for every page of a site across many breakpoints is not viable. ▸ This talk is not WordPress specific, the techniques can be leveraged for a variety of web/digital projects workflows and development environments. ABOUT THIS TALK
- 4. USING STYLE TILES IN RESPONSIVE DESIGN THE OLD WAY ▸ Mock up a home page & 1-2 interior pages ▸ Present to client, get sign off ▸ Spend 2-3 weeks meticulously laying out every individual page in photoshop, flowing in approved content ▸ Return to the client with a 20-30 (or more) page PDF for review ▸ Handover for development
- 5. USING STYLE TILES IN RESPONSIVE DESIGN WHY THIS DOESN’T WORK ANYMORE ▸ It doesn’t scale, 30-40 pages X 3 (or more) breakpoints = 100 or more layouts
- 6. USING STYLE TILES IN RESPONSIVE DESIGN AS THE NUMBER OF PAGES TO REVIEW GOES UP, FOCUS GOES DOWN
- 7. USING STYLE TILES IN RESPONSIVE DESIGN STATIC COMPS AREN’T ALWAYS ACCURATE ▸ The expectation of what was laid out in the static comp may not align with the reality of what the browser can & will render. EXPECTATION REALITY
- 8. USING STYLE TILES IN RESPONSIVE DESIGN SOME PROBLEMS CAN ONLY BE SOLVED IN THE BROWSER ▸ Are we sure these condo units will be a reasonable size on a mobile touch screen? ▸ How does it scale up to a tablet or desktop?
- 9. USING STYLE TILES IN RESPONSIVE DESIGN OPENS THE DOOR TO INCONSISTENCIES & ERRORS ▸ Are we suppose to have 6 shades of blue? ▸ Why is this one border radius different? ▸ Is the logo suppose to be 20px to the left on this one page? ▸ Are we using this image asset anywhere else?
- 10. USING STYLE TILES IN RESPONSIVE DESIGN A BETTER WAY OF GETTING JUICE FROM AN ORANGE… OR SIGN OFF FROM A CLIENT
- 11. STYLE TILES TO THE RESCUE! DEFINE YOUR VISUAL LANGUAGE UP FRONT
- 12. ▸ Before showing a homepage or any interior pages, lead with a style tile. ▸ Rationalize & explain the smaller pieces of the language before showing the whole. ▸ Get buy in on the ingredients before the finished dish. USING STYLE TILES IN RESPONSIVE DESIGN
- 13. ELEMENTS OF A STYLE TILE
- 14. USING STYLE TILES IN RESPONSIVE DESIGN ▸ Typography is defined in terms of potential usage separate from the literal content. ▸ Include headings, paragraphs, ordered/unordered list, excerpts, pull quotes, text links. ▸ Can include notes for development such as type delivery system & RGB value
- 15. USING STYLE TILES IN RESPONSIVE DESIGN ▸ Colours can be defined as primary, secondary, tertiary, and accents ▸ Buttons are defined by usage and include hover states. ▸ Include smaller elements such as icons
- 16. USING STYLE TILES IN RESPONSIVE DESIGN ▸ Expand into other brand elements such as photo treatments & textures. ▸ Or custom illustrations that will be used throughout the site.
- 17. USING STYLE TILES IN RESPONSIVE DESIGN ▸ Design content buckets that can be reused across multiple device breakpoints. ▸ Include interaction patterns such as hover and focus.
- 18. ▸ You don’t always need to redesign components for individual breakpoints. ▸ Many times what works on mobile, will work on desktop as well. USING STYLE TILES IN RESPONSIVE DESIGN
- 19. ▸ Layout a sampling of pages which show the individual elements from the style tile in context USING STYLE TILES IN RESPONSIVE DESIGN
- 20. ITERATE THE STYLE TILE ALONG WITH THE SAMPLE LAYOUTS USING STYLE TILES IN RESPONSIVE DESIGN
- 21. ITERATE THE STYLE TILE ALONG WITH THE SAMPLE LAYOUTS USING STYLE TILES IN RESPONSIVE DESIGN
- 23. USING STYLE TILES IN RESPONSIVE DESIGN FREE PHOTOSHOP (PSD) TEMPLATE HTTP://STYLETIL.ES/
- 24. USING STYLE TILES IN RESPONSIVE DESIGN
- 25. USING STYLE TILES IN RESPONSIVE DESIGN
- 26. USING STYLE TILES IN RESPONSIVE DESIGN
- 27. USING STYLE TILES IN RESPONSIVE DESIGN CRAFT PLUGIN FOR SKETCH & PHOTOSHOP HTTPS://WWW.INVISIONAPP.COM/CRAFT
- 28. USING STYLE TILES IN RESPONSIVE DESIGN STYLEGUIDES.IO HTTP://STYLEGUIDES.IO/EXAMPLES.HTML
- 29. USING STYLE TILES IN RESPONSIVE DESIGN AFTER CLIENT SIGN OFF
- 30. ▸ Development can begin by applying the style tile elements to HTML/CSS ▸ HTML version becomes a living document that can be referenced by the team USING STYLE TILES IN RESPONSIVE DESIGN
- 31. ▸ Further creative changes are tracked in the style guide ▸ New components & modules can be added as needed. USING STYLE TILES IN RESPONSIVE DESIGN WORDCAMP.JASONDORN.COM
- 32. WRAPPING IT UP
- 33. USING STYLE TILES IN RESPONSIVE DESIGN THE OLD MODERN WAY ▸ Mock up a style tile along with home page & 1-2 interior pages ▸ Present to client, get sign off on the design system ▸ Spend 2-3 weeks meticulously laying out every individual page in photoshop, flowing in approved content ▸ Start front end development with the style tile as your base ▸ Return to the client with a 20-30 (or more) page PDF for a dev link for in browser review ▸ Handover for development. Develop new components & layouts in tandem with development
- 34. USING STYLE TILES IN RESPONSIVE DESIGN ▸ Style tiles save time & effort up front ▸ They help maintain focus for project stakeholders ▸ Help maintain consistency in design elements ▸ Can allow for development to begin sooner, and maintain consistency by making design decisions in the browser ▸ Clients love them, developers love them, you should love them too BENEFITS & CONCLUSIONS
- 35. THANK YOU! Any questions? Beefs or bouquets?
- 36. ▸ Icons ▸ entypo.com ▸ thenounproject.com (Creative Stall, Viktor Vorobyev) ▸ Photography ▸ unsplash.com ▸ Clients & Agencies ▸ Flipp Advertising Inc ▸ Home Evolution ▸ Dalmatian Fire Services ▸ XONE Crew ▸ Canadian Base Operators ▸ Spec Perforation ▸ Steps by Bridgeland USING STYLE TILES IN RESPONSIVE DESIGN CREDITS