Date post: | 27-Jan-2015 |
Category: |
Design |
Upload: | mrscammels |
View: | 109 times |
Download: | 2 times |
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