Prototyping for responsive web design

Design processes, prototypes & responsive web design (AKA: Designing For the Internet in 2012 and sharing our experiences) Ben Scammels - Graphic & Web Designer

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

Responsive Web Design (Ethan Marcotte, 2010)

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

Wireframe files for wesbite design project

When the wireframe process goes responsive +These multiple/varying layouts bring an issue....

When the wireframe process goes responsive

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

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.

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

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

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

Steps to making a Prototype: research tools for UI sketches http://sneakpeekit.com/

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

Steps to making a Prototype: Responsive UI sketching

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

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)

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

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/

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/

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/

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

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

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

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

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/

Responsive Design Layer • Avoids the same issues of multiplying design documents • Can be part of a handover doc to front end devs

http://www.iphone-entreprise.com	99
http://lanyrd.com	51
https://twitter.com	7
https://bb.ksbe.edu	1
http://www.blogger.com	1
http://canyonsullivan.com	1
http://mm.wteonline.co.uk	1

Prototyping for responsive web design

by mrscammels on Dec 12, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 161

Statistics

Prototyping for responsive web design Presentation Transcript