managing responsive design projects

120
Managing Responsive Design Projects FITC WebUnleashed 2014 @andrewsmyk

Upload: andrew-smyk

Post on 30-Oct-2014

12 views

Category:

Design


3 download

DESCRIPTION

Manage client expectations and get sign off for multi-screen, responsive projects with interactive mock-ups. Move away from the traditional use of Photoshop for interface mock-ups for multi-device interface and interaction designs. Incorporate client involvement for flexible decision making in responsive web design projects and building cost of devices into pricing models, guerrilla usability testing and project deliverables.

TRANSCRIPT

Page 1: Managing Responsive Design Projects

Managing Responsive Design Projects

FITC WebUnleashed 2014

@andrewsmyk

Page 2: Managing Responsive Design Projects
Page 3: Managing Responsive Design Projects

www.andrewsmyk.com/webunleashed

Page 4: Managing Responsive Design Projects

Tweet using hashtags: #WebU14 #managingRWD

Page 5: Managing Responsive Design Projects
Page 6: Managing Responsive Design Projects

@andrewsmyk

640 x 480 800 x 6001024 x 7681200 x 9001920 x 1200

Page 7: Managing Responsive Design Projects
Page 8: Managing Responsive Design Projects

@andrewsmyk

1.5” to 50”

Page 9: Managing Responsive Design Projects

@andrewsmyk

Page 10: Managing Responsive Design Projects
Page 11: Managing Responsive Design Projects

Leveraging mobile to increase student engagement

Andrew SmykHighWeb Ed – Arkansas

July 27, 2012

Wrestling with a responsive projects

@andrewsmyk

Page 12: Managing Responsive Design Projects
Page 13: Managing Responsive Design Projects

1-2-3-4

@andrewsmyk

Page 14: Managing Responsive Design Projects

1. Content Strategy2. Agile3. Prototyping4. Art Direction

@andrewsmyk

Page 15: Managing Responsive Design Projects

1. Content Strategy2. Agile3. Prototyping4. Art Direction

@andrewsmyk

Page 16: Managing Responsive Design Projects
Page 17: Managing Responsive Design Projects
Page 18: Managing Responsive Design Projects

Edit content ruthlessly

Page 19: Managing Responsive Design Projects

@andrewsmyk

Pro Tip: Document all the Types & Models of Devices You Encounter

Page 20: Managing Responsive Design Projects

@andrewsmyk

Important! Note the Devices of Decision Makers in the Room

Page 21: Managing Responsive Design Projects

http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg

Page 22: Managing Responsive Design Projects

Stakeholders

Page 23: Managing Responsive Design Projects

@andrewsmyk

Content Modeling & Strategy

• Content Engagement• Content Curation• Rank and Prioritize Content

Page 24: Managing Responsive Design Projects

Avoid coding or selecting frameworksbefore content modeling

Page 25: Managing Responsive Design Projects

Avoid coding or selecting frameworksbefore content modeling

Page 26: Managing Responsive Design Projects

@andrewsmyk

Page 27: Managing Responsive Design Projects

@andrewsmyk

Dynamic Wireframe

Page 28: Managing Responsive Design Projects

@andrewsmyk

Page 29: Managing Responsive Design Projects

@andrewsmyk

?????

Page 30: Managing Responsive Design Projects

@andrewsmyk

RUN!!!

ZombieApocalypse!!

Page 31: Managing Responsive Design Projects
Page 32: Managing Responsive Design Projects
Page 33: Managing Responsive Design Projects

@andrewsmyk

1

23

4

5

6

7

Page 34: Managing Responsive Design Projects

@andrewsmyk

1

2

3

4

5

6

7

Page 35: Managing Responsive Design Projects

1

2

3

4

5

6

7

A/B Test Content Modelsand early lo-fi Wireframes

Page 36: Managing Responsive Design Projects

http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg

Page 37: Managing Responsive Design Projects
Page 38: Managing Responsive Design Projects

1. Content Strategy2. Agile3. Prototyping4. Art Direction

@andrewsmyk

Page 39: Managing Responsive Design Projects

@andrewsmyk

Page 40: Managing Responsive Design Projects

@andrewsmyk

Page 41: Managing Responsive Design Projects

@andrewsmyk

Page 42: Managing Responsive Design Projects

@andrewsmyk

Page 43: Managing Responsive Design Projects
Page 44: Managing Responsive Design Projects
Page 45: Managing Responsive Design Projects

@andrewsmyk

Page 46: Managing Responsive Design Projects

@andrewsmyk

Page 47: Managing Responsive Design Projects

via Michelle Cryan - @sporkles

Page 48: Managing Responsive Design Projects

@andrewsmyk

Pro Tip: Avoid Designing and Developing Projects in Silos

Page 49: Managing Responsive Design Projects

@andrewsmyk

Page 50: Managing Responsive Design Projects

1. Content Strategy2. Waterfall vs. Agile3. Prototyping4. Art Direction

@andrewsmyk

Page 51: Managing Responsive Design Projects

@andrewsmyk

Prototyping

“Now we can think about users and their needs as it relates to content.”

Page 52: Managing Responsive Design Projects
Page 53: Managing Responsive Design Projects

@andrewsmyk

“Work in Photoshop and Fireworks by all means (I do). Make static visuals as rich and as detailed as you want them to be.”

Just don’t set the wrong expectations by showing them to your clients.

~ Andy Clarke

Page 54: Managing Responsive Design Projects

Logo needs to be “bluer”

Page 55: Managing Responsive Design Projects

desktop + +

main internal specialized

variants?

DAYS?

Page 56: Managing Responsive Design Projects

desktop + +

main internal specialized

tablet

smart phone

shiny & new

+ +

main internal specialized

+ +

main internal specialized

+ +

main internal specialized

variants?

DAYS?

Page 57: Managing Responsive Design Projects

Logo needs to be “bluer”

Page 58: Managing Responsive Design Projects

desktop + +

main internal specialized

tablet

smart phone

shiny & new

+ +

main internal specialized

+ +

main internal specialized

+ +

main internal specialized

variants?

DAYS?

Page 59: Managing Responsive Design Projects

How blue is our logo?

Page 60: Managing Responsive Design Projects

desktop + +

main internal specialized

tablet

smart phone

shiny & new

+ +

main internal specialized

+ +

main internal specialized

+ +

main internal specialized

variants?

DAYS?

Page 61: Managing Responsive Design Projects

We need to see another design

Page 62: Managing Responsive Design Projects

desktop + +

main internal specialized

tablet

smart phone

shiny & new

+ +

main internal specialized

+ +

main internal specialized

+ +

main internal specialized

variants?

DAYS?

Page 63: Managing Responsive Design Projects

@andrewsmyk

Stop Wrestling with Static Mockups

Page 64: Managing Responsive Design Projects

https://www.flickr.com/photos/kitch/4286136925

Page 65: Managing Responsive Design Projects

https://www.flickr.com/photos/kitch/4286136925

No Usability Testing

Page 66: Managing Responsive Design Projects

https://www.flickr.com/photos/kitch/4286136925

Lack Interaction

Page 67: Managing Responsive Design Projects

https://www.flickr.com/photos/kitch/4286136925

Don’t Show Transitions

Page 68: Managing Responsive Design Projects

https://www.flickr.com/photos/kitch/4286136925

Lack Fluidity

Page 69: Managing Responsive Design Projects

https://www.flickr.com/photos/kitch/4286136925

Don’t Display Web Fonts

Page 70: Managing Responsive Design Projects

@andrewsmyk

“Design consistency is not about pixels.”

Page 71: Managing Responsive Design Projects

@andrewsmyk

Page 72: Managing Responsive Design Projects

@andrewsmyk

“A prototype is worth a thousand words”Leigh Howells - @leigh

Page 73: Managing Responsive Design Projects

@andrewsmyk

“A prototype is worth a thousand meetings”Mike Davidson - @mikeindustries

Page 74: Managing Responsive Design Projects

Pro Tip: A Working Prototype can Help Make Decisions Faster

Page 75: Managing Responsive Design Projects

Think about the ecosystem, not just the devices:

@andrewsmyk

Page 76: Managing Responsive Design Projects

@andrewsmyk

Page 77: Managing Responsive Design Projects

https://twitter.com/preetbanerjee/status/509438618683727873 @andrewsmyk

Page 78: Managing Responsive Design Projects

@andrewsmyk

Use the right tools & technologies

Page 79: Managing Responsive Design Projects

@andrewsmyk

am I responsive?ish.remote preview

Ghostlab (license)

Edge Inspect (CC subscription)

Page 80: Managing Responsive Design Projects

1. Content Strategy2. Waterfall vs. Agile3. Prototyping4. Art Direction

@andrewsmyk

Page 81: Managing Responsive Design Projects

Logo needs to be “bluer”

Page 82: Managing Responsive Design Projects
Page 83: Managing Responsive Design Projects
Page 84: Managing Responsive Design Projects
Page 85: Managing Responsive Design Projects
Page 86: Managing Responsive Design Projects

@andrewsmyk

Visual inventory, you say…Responsive style tiles, you say…

Page 87: Managing Responsive Design Projects
Page 88: Managing Responsive Design Projects

catalog of assumptions

Page 89: Managing Responsive Design Projects
Page 90: Managing Responsive Design Projects
Page 91: Managing Responsive Design Projects
Page 92: Managing Responsive Design Projects
Page 93: Managing Responsive Design Projects

@andrewsmyk

Responsive Style Tile

Page 94: Managing Responsive Design Projects

User Testing, Tools and TPS Cover Sheets

Page 95: Managing Responsive Design Projects

@andrewsmyk

Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store

Page 96: Managing Responsive Design Projects

@andrewsmyk

Pro Tip: Build a Device Library

Page 97: Managing Responsive Design Projects

Plan for gestures and taps.

Page 98: Managing Responsive Design Projects

Help users with error and miss taps

Page 99: Managing Responsive Design Projects

Plan for the “Fat Finger”

Page 100: Managing Responsive Design Projects

Design for the thumb

Page 101: Managing Responsive Design Projects

Pro Tip: A Touch Template helps design Interactions

Page 102: Managing Responsive Design Projects

@andrewsmyk

Page 103: Managing Responsive Design Projects

@andrewsmyk

Page 104: Managing Responsive Design Projects

@andrewsmyk

Page 105: Managing Responsive Design Projects

u

@andrewsmyk

Page 106: Managing Responsive Design Projects

@andrewsmyk

Page 107: Managing Responsive Design Projects

#ffly #rwd

Page 108: Managing Responsive Design Projects

i

Page 109: Managing Responsive Design Projects

They share a common infrastructure, but mobile is NOT the traditional web

@andrewsmyk

Page 110: Managing Responsive Design Projects

l

Mobile is a different environment and requires new thinking and design considerations.

@andrewsmyk

Page 111: Managing Responsive Design Projects

Harness the power of a missile throwing robot

with laser beam eyes on a UNICORN.@andrewsmyk

Page 112: Managing Responsive Design Projects

@andrewsmyk

Page 113: Managing Responsive Design Projects

1-2-3-4

@andrewsmyk

Page 114: Managing Responsive Design Projects

1. Content Strategy2. Agile3. Prototyping4. Art Direction

@andrewsmyk

Page 115: Managing Responsive Design Projects

@andrewsmyk

Questions?

Page 116: Managing Responsive Design Projects

Thank you!

Page 117: Managing Responsive Design Projects

@andrewsmykwww.andrewsmyk.com/webunleashed

Page 118: Managing Responsive Design Projects

Tweet using hashtags: #WebU14 #managingRWD

Page 119: Managing Responsive Design Projects
Page 120: Managing Responsive Design Projects

@andrewsmyk

Questions?