the web designers toolkit

THE WEB DESIGNER’S TOOL KIT

Helpful Resources to Make Your Life Easier

Monday, October 22, 12

Diana Frurip | Visual Designer @dianadianadiana

Sean Kelly | Senior Visual Designer @deamplified

Phil Robinson | Experience Design Director @pzilla

Hello.

Monday, October 22, 12

Mobile and Social Platforms

Hello.

Monday, October 22, 12

Before We Begin

Monday, October 22, 12

PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights

PART 2: TOOLS TO USE

PART 3: CONCLUSION

4. Sketching5. Prototyping6. Creating and Testing

Monday, October 22, 12

Part 1Getting Started

Monday, October 22, 12

PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights

PART 2: TOOLS TO USE

PART 3: CONCLUSION

4. Sketching5. Prototyping6. Creating and Testing

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

THE YEAR OF MOBILE?

Monday, October 22, 12

25% of US internet users only access

the web through a mobile device.“–MobiThinking ”

Monday, October 22, 12

"Mobile devices now make up about

20 percent of U.S. web traffic"“–All Things D ”

Monday, October 22, 12

THINK GLOBALLY

Mobile Operating System Market Share February 2012via iCrossing

Monday, October 22, 12

THIS ISN’T RESPONSIVE

Monday, October 22, 12

Monday, October 22, 12

PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights

PART 2: TOOLS TO USE

PART 3: CONCLUSION

4. Sketching5. Prototyping6. Creating and Testing

Monday, October 22, 12

Website

UX Visual Development

THEN...

Monday, October 22, 12

UX Visual Development

Website

Mobile Version

RECENTLY...

Monday, October 22, 12

Oh noes!

UX Visual Development

NOW...

Monday, October 22, 12

THE LANDSCAPE CHANGED QUICKLY

Photo: R. Baum

Monday, October 22, 12

BUT WE CAN

ADAPT

Photo: Asher Trafford

Monday, October 22, 12

Instead of viewing ourselves in

terms of discrete roles, we should

instead look to emphasize our range

of abilities, and work with others

whose skills are complimentary.

“

–Paul Robert Lloyd, 24 Ways ”Monday, October 22, 12

SUPER TEAMS ASSEMBLE!Monday, October 22, 12

UXVisual

Development

A BETTER WAY

Monday, October 22, 12

Monday, October 22, 12

GET COMFORTABLE

BEING OUT OF

AND

ADAPT TO CHANGES

Monday, October 22, 12

It’s not the document you’re making,

it’s the input you’re giving.

Monday, October 22, 12

PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights

PART 2: TOOLS TO USE

PART 3: CONCLUSION

4. Sketching5. Prototyping6. Creating and Testing

Monday, October 22, 12

OBJECTIVES FIRST

Monday, October 22, 12

Content informs design – design

without content is decoration“–Jeffrey Zeldman, Happy Cog

”

Monday, October 22, 12

ONE SIZE DOESN’T FIT ALL

Monday, October 22, 12

ONE SIZE DOESN’T FIT ALL

Monday, October 22, 12

DELEGATE PHILOSOPHERS

Monday, October 22, 12

THINK BIG PICTURE

Monday, October 22, 12

Part 2Tools to Use

Monday, October 22, 12

PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights

PART 2: TOOLS TO USE

PART 3: CONCLUSION

4. Sketching5. Prototyping6. Creating and Testing

Monday, October 22, 12

GET INSPIREDpatterntap.com

Monday, October 22, 12

GET INSPIREDlovelyui.com

Monday, October 22, 12

GET INSPIREDandroidpatterns.com

Monday, October 22, 12

GET INSPIREDresponsive.rga.com

Monday, October 22, 12

GET INSPIREDmediaqueri.es

Monday, October 22, 12

GET INSPIREDbradfrost.github.com/this-is-responsive/patterns.html

Monday, October 22, 12

GET INSPIREDbradfrost.github.com/this-is-responsive/patterns.html

Monday, October 22, 12

GET INSPIREDstarbucks.com/static/reference/styleguide/

Monday, October 22, 12

START WITH A SYSTEM

Monday, October 22, 12

STYLE TILES

Monday, October 22, 12

STYLE TILES

Monday, October 22, 12

STYLE TILES

Monday, October 22, 12

SKETCH WITH PAPERvia UX Magazine

Monday, October 22, 12

SKETCH ON DEVICESvia UX Magazine

Monday, October 22, 12

SKETCH ON DEVICES

Android File Transfer

Dropbox

Monday, October 22, 12

SKETCH ON DEVICES

Android DesignPreview

LiveView

Monday, October 22, 12

SKETCH ON DEVICES

Adobe EdgeInspect

Monday, October 22, 12

PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights

PART 2: TOOLS TO USE

PART 3: CONCLUSION

4. Sketching5. Prototyping6. Creating and Testing

Monday, October 22, 12

THEN...

Monday, October 22, 12

NOW...

Monday, October 22, 12

PRESENT BETTER

Monday, October 22, 12

CHOOSE YOUR TOOLS WISELY

PAPER MOTION TEST (Keynote, Flash, AE)

DATA/CONTENT PROTOTYPE

(HTML, iOS, Android, Flash/AIR)

RESPONSIVE PROTOTYPE (HTML,Bootstrap,

Codepen, Adobe Edge)

FUNCTIONAL PROTOTYPE

(HTML, iOS, Android, Flash/AIR, Cinder)

SCRIPTED PROTOTYPE

(TAP, HTML, Keynote, Fireworks,

Flash/AIR)

VIDEO (iMovie, AfterEffects)

disposable d.i.y

evolving collaborative

Monday, October 22, 12

INTERFACE ORIGAMIvia Tack Mobile

Monday, October 22, 12

CONTENT HIERARCHY

Monday, October 22, 12

EXPERIENCE DESIGN

Monday, October 22, 12

PROTOTYPES FOR CLIENTS

TAP by unitid.nl

Monday, October 22, 12

PROTOTYPES FOR CLIENTS

TAP by unitid.nl

Monday, October 22, 12

PROTOTYPES FOR CLIENTS

Prototypes App

Monday, October 22, 12

MOTION PROTOTYPES

After Effects

Keynote

via Punchcut

Monday, October 22, 12

PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights

PART 2: TOOLS TO USE

PART 3: CONCLUSION

4. Sketching5. Prototyping6. Creating and Testing

Monday, October 22, 12

Those PSDs are an artifact of the

design process, and very likely do

not reflect the final decisions made

in the coding process. The code is

the deliverable, the PSDs are not.

“

–David McCreath, Mule Design ”Monday, October 22, 12

KNOW THE MEDIUM

Monday, October 22, 12

YOUR BEST NEW DESIGN TOOL

image via Kuswanto, Petshop Box Studio

Monday, October 22, 12

CONTENT DICTATES BREAKPOINTS

Monday, October 22, 12

VISUAL TO CODE

Subtle Patterns

Monday, October 22, 12

VISUAL TO CODE

Dev Rocket

Monday, October 22, 12

VISUAL TO CODE

Slicy

CSS Hat

Monday, October 22, 12

VISUAL TO CODEcss3gen.com/box-shadow/

Monday, October 22, 12

DEVELOPER TOOLS

Monday, October 22, 12

XCode iOS SimulatorAndroid SDKOpera Mobile Emulator

EMULATORS

Monday, October 22, 12

TESTING

*Responsinator

*Responsive.is

*Screen Queries

Resize My Browser

Responsive PX

Responsive Design Bookmarklet

Screenfly

Adobe Edge

Monday, October 22, 12

PART 1: GETTING STARTED1. A Compass2. A Better Process3. Insights

PART 2: TOOLS TO USE

PART 3: CONCLUSION

4. Sketching5. Prototyping6. Creating and Testing

Monday, October 22, 12

ConclusionYou’ve got this.

Monday, October 22, 12

FUTURE FACING

Monday, October 22, 12

BE PROACTIVE

Monday, October 22, 12

TEST ON DEVICE

Monday, October 22, 12

SAME JOB, NEW TOOLS

Monday, October 22, 12

BEYOND THE CREATIVE SUITE

Monday, October 22, 12

If it’s not working, figure out a

new process.

Monday, October 22, 12

SAVE TIME AND MONEY

Monday, October 22, 12

BE WATER, MY FRIEND

Monday, October 22, 12

Monday, October 22, 12

slideshare.net/RGA

Thank You.

Monday, October 22, 12