Prototyping for responsive web design

11,786 views

Published on

A case study showing how we replaced wirefaming with a framework led prototype to better deliver a responsive web design. by Ben Scammels, Designer at http://www.makemedia.com

Published in: Design
1 Comment
20 Likes
Statistics
Notes
  • You can see this presentation with the voiceover at http://www.youtube.com/watch?v=8N_XVabJKnY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
11,786
On SlideShare
0
From Embeds
0
Number of Embeds
183
Actions
Shares
0
Downloads
138
Comments
1
Likes
20
Embeds 0
No embeds

No notes for slide

Prototyping for responsive web design

  1. Design processes, prototypes & responsive web design (AKA: Designing For the Internet in 2012 and sharing our experiences) Ben Scammels - Graphic & Web Designer
  2. Design Processes, Prototypes & RWDMY BACKGROUND:Graphic and web designer who works across UX, design and front end.I’ve worked with many design processes over the yearsTHE CHALLENGE:As we make websites responsive, old design processes becomeunsuitable and inefficientWHAT DO I WANT YOU TO GET OUT OF THIS:To see how to replace wireframing with prototypes (using othersresearch/techniques) and why its a better process for responsive design
  3. Responsive Web Design (Ethan Marcotte, 2010)
  4. Responsive Web Design (Ethan Marcotte, 2010) • RWD allows you to tailor a site’s layout and interfaces to suit various devices • SIngle codebase (unlike app/m.sites) • futureproofs site
  5. Wireframe files for wesbite design project
  6. When the wireframe process goes responsive +These multiple/varying layouts bring an issue....
  7. When the wireframe process goes responsive
  8. When the wireframe process goes responsiveKEY PROBLEMS WITH WIREFRAMES:• RWD could increase wireframing x 3• Wireframes struggle to show interaction• They’re not usable - one must imagine a user journeyCONCLUSION: We need a better design process toapproach a responsive project - A PROTOTYPE
  9. Our thoughts on Prototypes• Functionality & interaction can be discussed/defined in a more ‘realistic’ way.• Layouts work responsively• quick/easy to produce and amend• Minimally styled• It’s a place to propose a solution. Not for perfect coding.
  10. A new project requires a new approach• Small budget required an efficient process• Client wanted to improve the mobile experience• We got the contract based on it being RWD• Great opportunity to test run a new process
  11. Steps to making a Prototype1. UI sketching, mobile first2. Research ‘Accelerators’ for building prototype3. Build the prototype based on appropriate frameworks4. Usability test & iterate5. Apply style layer
  12. Steps to making a Prototype: UI sketching• Helps client understand RWD• Sketching allows discussion and instant iteration• ‘Mobile-first’ layouts helped the client focus on the essential content“smaller screens force designers tofocus on what’s truly necessary toa service/product” - Luke W
  13. Steps to making a Prototype: research tools for UI sketches http://sneakpeekit.com/
  14. Steps to making a Prototype: research tools for UI sketches http://sneakpeekit.com/
  15. Steps to making a Prototype: Responsive UI sketching• Sense check & Improve workshop sketches• Mobile then desktop versions sketched out and discussed between teams = iteration• Desktop versions very light on contentNB.Tablet layouts handled in the browser
  16. Steps to making a Prototype: Responsive UI sketching
  17. Steps to making a Prototype: Responsive UI sketching
  18. Steps to making a Prototype: Research accelerators (Frameworks & Tools)FRONT-END FRAMEWORKS:• Are a set of commonly used start-up code that can help you quickly build a site• They contain ‘best-practice’ coding from leading developers (MIT, Twitter, etc...)• Documentation = better collaboration• HTML/CSS/JS - easy for developers
  19. Steps to making a Prototype: Research accelerators (Frameworks & Tools)FRONT-END FRAMEWORKS:They contain MODULAR pre-codedelements to drop in: • User interfaces (navigation, buttons, forms, tabs...) • Essential styles (fonts, colour systems, icons... helps indicate usability) • Page structures (grids, layouts, templates)
  20. Steps to making a Prototype: Research accelerators (Frameworks & Tools)CONS:• you need to learn their system (couple of days)• the codebase is HEAVY. potentially not wise for production• Hard to customise some elements so...• ...can lead to ‘homogenisation’ of designs/layouts unless tailored
  21. Reviewing Frameworks & Prototyping tools • Responsive • Grid structure - allows lots of layout options • Some pre-coded layouts & templates • Simple visual styling http://twitter.github.com/bootstrap/
  22. Reviewing Frameworks & Prototyping tools• Aimed at the UX market• WYSIWYG tool for making prototypes• Outputs html/css/js so can be integrated into other prototypes• Quirky to learn (a bit like flash)• Expensive• Isn’t responsive• Not ideal for all team members but great for UX http://www.axure.com/
  23. Reviewing Frameworks & Prototyping tools • similar to bootstrap • Responsive • More UI elements & common layouts included • ‘dumbed down’ - easier for designers with code knowledge • ‘Stencils’ for Illustrator/omnigraffle (if you have to do wireframes) http://foundation.zurb.com/
  24. Reviewing Frameworks & Prototyping tools PROS • Resource of current responsive layout, navigation & UI patterns • Provides analysis • lighter code = easier to customise • could be used for production http://bradfrost.github.com/this-is-responsive/patterns.html http://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle
  25. Reviewing Frameworks & Prototyping tools CONS - Not intended for reuse so: • No documentation • not styled so extra work required • not as ‘modular’ as framework (requires coding knowledge to be able to drop elements in) http://bradfrost.github.com/this-is-responsive/patterns.html http://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle
  26. The Prototype • existing content = understandable • Usability test (‘early and often’) way before production code is available • character counts for copywriters • helps spot missed functionality early in timeline
  27. Conclusion• Responsive web design is a pragmatic and economical approach to modern web design.• Traditional design methods become unmanageable when going responsive.• Mobile first helps us refocus on users and what they really need and want.• ‘The pen is faster than the mouse’ - sketching is a quick way to iterate layout and design decisions (and facilitate conversation)• Prototyping (using frameworks) quickly brings a design closer to its final form and helps assess interactions, functionality and responsive layout.• Prototyping helped raise flaws, issues and unconsidered aspects early on in the project timeline
  28. Thank you for your time. Any Questions? FURTHER READING:http://coding.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any- device-with-foundation/ http://www.alistapart.com/articles/dive-into-responsive-prototyping-with- foundation/
  29. Responsive Design Layer • Avoids the same issues of multiplying design documents • Can be part of a handover doc to front end devs

×