• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Prototyping for responsive web design
 

Prototyping for responsive web design

on

  • 7,815 views

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

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

Statistics

Views

Total Views
7,815
Views on SlideShare
7,644
Embed Views
171

Actions

Likes
19
Downloads
126
Comments
1

9 Embeds 171

http://www.iphone-entreprise.com 105
http://lanyrd.com 53
https://twitter.com 7
https://bb.ksbe.edu 1
http://www.blogger.com 1
http://canyonsullivan.com 1
http://mm.wteonline.co.uk 1
http://betterdesignercase.mirildatili.com 1
http://controversialdesignercase.mirildatili.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • You can see this presentation with the voiceover at http://www.youtube.com/watch?v=8N_XVabJKnY
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Prototyping for responsive web design Prototyping for responsive web design Presentation Transcript

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