Design processes, prototypes & responsive web design

(AKA: Designing For the Internet in 2012 andsharing our experiences)

Ben Scammels - Graphic & Web Designer

MY BACKGROUND:Graphic and web designer who works across UX, design and front end. I’ve worked with many design processes over the years

THE CHALLENGE:As we make websites responsive, old design processes become unsuitable and inefficient

WHAT DO I WANT YOU TO GET OUT OF THIS:To see how to replace wireframing with prototypes (using others research/techniques) and why its a better process for responsive design

Design Processes, Prototypes & RWD

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 responsive

KEY PROBLEMS WITH WIREFRAMES:

• RWD could increase wireframing x 3

• Wireframes struggle to show interaction

• They’re not usable - one must imagine a user journey

CONCLUSION: We need a better design process to approach a responsive project - A PROTOTYPE

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

Our thoughts on Prototypes

• 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

A new project requires a new approach

1. UI sketching, mobile first

2. Research ‘Accelerators’ for building prototype

3. Build the prototype based on appropriate frameworks

4. Usability test & iterate

5. Apply style layer

Steps to making a Prototype

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 to focus on what’s truly necessary to a service/product” - Luke W

http://sneakpeekit.com/

Steps to making a Prototype: research tools for UI sketches

http://sneakpeekit.com/

Steps to making a Prototype: research tools for UI sketches

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 content

NB.Tablet layouts handled in the browser

Steps to making a Prototype: Responsive UI sketching

Steps to making a Prototype: Responsive UI sketching

Steps to making a Prototype: Research accelerators (Frameworks & Tools) 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-coded elements 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

http://twitter.github.com/bootstrap/

• Responsive

• Grid structure - allows lots of layout options

• Some pre-coded layouts & templates

• Simple visual styling

Reviewing Frameworks & Prototyping tools

http://www.axure.com/

• 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

Reviewing Frameworks & Prototyping tools

http://foundation.zurb.com/

• 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)

Reviewing Frameworks & Prototyping tools

http://bradfrost.github.com/this-is-responsive/patterns.htmlhttp://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle

PROS

• Resource of current responsive layout, navigation & UI patterns

• Provides analysis

• lighter code = easier to customise

• could be used for production

Reviewing Frameworks & Prototyping tools

http://bradfrost.github.com/this-is-responsive/patterns.htmlhttp://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle

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)

Reviewing Frameworks & Prototyping tools

• 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

The Prototype

• 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

Conclusion

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