Transcript
Page 1: A Responsive Project Process
Page 2: A Responsive Project Process

Design & User Experience

A Responsive Process

Presented by Dave Ruse

Page 3: A Responsive Project Process

Dave RuseWeb DesignerPhase2 Technology

Page 4: A Responsive Project Process
Page 5: A Responsive Project Process

A Responsive Process

A Responsive Process A Responsive

Process

A Responsive Process

Page 6: A Responsive Project Process
Page 7: A Responsive Project Process

Nearly 7 percent of all online purchases were made using iPads, just 18 months after the

tablet computers were released by Apple Inc.http://www.businessinsider.com/online-shopping-jumps-164-pct-on-christmas-day-2011-12

22-25% of US and UK mobile Internet browsers never or infrequently use the desktop Internet.

http://www.lukew.com/ff/entry.asp?1405

1.45M devices shipped per day - 317,124 birthshttp://www.lukew.com/ff/entry.asp?1506

Page 9: A Responsive Project Process

“The role of the designer, is that of a very good, thoughtful host, all of whose energy goes into trying to anticipate the needs of his guests.

Charles Eames ”

Page 10: A Responsive Project Process
Page 11: A Responsive Project Process
Page 12: A Responsive Project Process
Page 13: A Responsive Project Process
Page 14: A Responsive Project Process
Page 15: A Responsive Project Process
Page 16: A Responsive Project Process

This changes everythinga lot.

Page 17: A Responsive Project Process

Setting the Stage

Page 18: A Responsive Project Process

Within your project team.

http://www.flickr.com/photos/elstudio/3532534210/

Page 21: A Responsive Project Process

Copy

Page 22: A Responsive Project Process
Page 23: A Responsive Project Process
Page 24: A Responsive Project Process

Check out the links in the sidebar for more information.

IMPORTANT LINKS

Here’s a linkAnother linkSo many links

Page 25: A Responsive Project Process

IMPORTANT LINKS

Here’s a linkAnother linkSo many links

Check out the links in the sidebar for more information.

Page 26: A Responsive Project Process

Hiding ContentUse Caution When

Page 27: A Responsive Project Process
Page 28: A Responsive Project Process
Page 29: A Responsive Project Process
Page 30: A Responsive Project Process

Images

Page 31: A Responsive Project Process
Page 32: A Responsive Project Process

Video

Page 33: A Responsive Project Process
Page 34: A Responsive Project Process

Ads

Page 35: A Responsive Project Process
Page 36: A Responsive Project Process

Wireframes

Page 37: A Responsive Project Process

Prototype

Page 38: A Responsive Project Process

http://dropbox.headscapedev.com/projects/wireframes/demo.htm

Page 39: A Responsive Project Process

http://dropbox.headscapedev.com/projects/wireframes/demo.htm

Page 40: A Responsive Project Process

Design

Page 41: A Responsive Project Process

The tool doesn’t make the craftsman.

Oliver Reichenstein

“”

Page 42: A Responsive Project Process

Style Tiles

Page 43: A Responsive Project Process
Page 44: A Responsive Project Process

or

Page 45: A Responsive Project Process

and

Page 46: A Responsive Project Process

FIDELITY FLEXIBILITY

Page 47: A Responsive Project Process
Page 48: A Responsive Project Process
Page 49: A Responsive Project Process

Internal Reviews

Page 50: A Responsive Project Process

Development

Page 51: A Responsive Project Process

Drupal

Page 52: A Responsive Project Process

Testing

Page 53: A Responsive Project Process
Page 54: A Responsive Project Process
Page 55: A Responsive Project Process

Bandwidth

http://www.flickr.com/photos/magicdaddy/3679257428/

Page 56: A Responsive Project Process

Handoff

http://www.flickr.com/photos/denverjeffrey/3989287247/

Page 57: A Responsive Project Process
Page 58: A Responsive Project Process
Page 59: A Responsive Project Process
Page 61: A Responsive Project Process

Thanks!

@daveruse

Page 62: A Responsive Project Process

?

Page 64: A Responsive Project Process

BBC Style Guidehttp://www.bbc.co.uk/gel/

Death of a Cut Up Man - Josh Cooperhttp://www.agileapproach.com/blog-entry/death-of-a-cut-up-man

Test on Real Mobile Devices Without Breaking the Bank - Brad Frosthttp://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Strategies for Choosing Test Deviceshttp://stephanierieger.com/strategies-for-choosing-test-devices/

How Much Does A One-Second Page Load Delay Cost? http://www.readwriteweb.com/archives/infographic_how_much_does_a_one-second_page_load_d.php

Limit Bandwidth to Your Mac/PChttp://osxdaily.com/2009/08/19/limit-connection-bandwidth-with-speedlimit/http://www.netlimiter.com/

Starbucks Style Guidehttp://www.starbucks.com/static/reference/styleguide/

Page 65: A Responsive Project Process

What did you think?Locate this session on theDrupalCon Denver website

http://denver2012.drupal.org/program

Click the “Take the Survey” link.

Thank You!


Top Related