Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Managing Responsive 
Design Projects 
@andrewsmyk 
FITC WebUnleashed 2014
www.andrewsmyk.com/webunleashed
Tweet using hashtags: #WebU14 #managingRWD
@andrewsmyk 
640 x 480 
800 x 600 
1024 x 768 
1200 x 900 
1920 x 1200
@andrewsmyk 
1.5” to 50”
@andrewsmyk
Leveraging mobile to increase 
Wrestling with a responsive projects 
student engagement 
Andrew Smyk 
HighWeb Ed – Arkansa...
@andrewsmyk
1. Content Strategy 
2. Agile 
3. Prototyping 
4. Art Direction 
@andrewsmyk
1. Content Strategy 
2. Agile 
3. Prototyping 
4. Art Direction 
@andrewsmyk
Edit content ruthlessly
Pro Tip: Document all the Types & Models of Devices You Encounter 
@andrewsmyk
Important! Note the Devices of Decision Makers in the Room 
@andrewsmyk
http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg
Stakeholders
@andrewsmyk 
Content Modeling & Strategy 
• Content Engagement 
• Content Curation 
• Rank and Prioritize Content
Avoid coding or selecting frameworks 
before content modeling
Avoid coding or selecting frameworks 
before content modeling
@andrewsmyk
@andrewsmyk 
Dynamic Wireframe
@andrewsmyk
????? 
@andrewsmyk
RUN!!! 
@andrewsmyk 
Zombie 
Apocalypse!!
@andrewsmyk 
1 
2 
3 
4 
5 
6 
7
@andrewsmyk 
1 
2 
3 
4 
5 
6 
7
1 
2 
3 
4 
5 
6 
7 
A/B Test Content Models 
and early lo-fi Wireframes
http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg
1. Content Strategy 
2. Agile 
3. Prototyping 
4. Art Direction 
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
@andrewsmyk
via Michelle Cryan -@sporkles
@andrewsmyk 
Pro Tip: Avoid Designing and Developing Projects in Silos
@andrewsmyk
1. Content Strategy 
2. Waterfall vs. Agile 
3. Prototyping 
4. Art Direction 
@andrewsmyk
@andrewsmyk 
Prototyping 
“Now we can think about users and their 
needs as it relates to content.”
“Work in Photoshop and Fireworks by all means 
(I do). Make static visuals as rich and as detailed 
as you want them to be...
Logo needs to be “bluer”
desktop + + 
main internal specialized 
variants? 
DAYS?
desktop + + 
main internal specialized 
tablet 
smart phone 
shiny & new 
+ + 
main internal specialized 
+ + 
main intern...
Logo needs to be “bluer”
desktop + + 
main internal specialized 
tablet 
smart phone 
shiny & new 
+ + 
main internal specialized 
+ + 
main intern...
How blue is our logo?
desktop + + 
main internal specialized 
tablet 
smart phone 
shiny & new 
+ + 
main internal specialized 
+ + 
main intern...
We need to see another design
desktop + + 
main internal specialized 
tablet 
smart phone 
shiny & new 
+ + 
main internal specialized 
+ + 
main intern...
Stop Wrestling with Static Mockups 
@andrewsmyk
https://www.flickr.com/photos/kitch/4286136925
https://www.flickr.com/photos/kitch/4286136925 
No Usability Testing
https://www.flickr.com/photos/kitch/4286136925 
Lack Interaction
https://www.flickr.com/photos/kitch/4286136925 
Don’t Show Transitions
https://www.flickr.com/photos/kitch/4286136925 
Lack Fluidity
https://www.flickr.com/photos/kitch/4286136925 
Don’t Display Web Fonts
“Design consistency is not about pixels.” 
@andrewsmyk
@andrewsmyk
“A prototype is worth a thousand words” 
Leigh Howells - @leigh 
@andrewsmyk
“A prototype is worth a thousand meetings” 
Mike Davidson - @mikeindustries 
@andrewsmyk
Pro Tip: A Working Prototype can Help Make Decisions Faster
Think about the ecosystem, not just the devices: 
@andrewsmyk
@andrewsmyk
https://twitter.com/preetbanerjee/status/509438618683727873 @andrewsmyk
Use the right tools & technologies 
@andrewsmyk
@andrewsmyk 
am I responsive? 
ish. 
remote preview 
Ghostlab (license) 
Edge Inspect (CC subscription)
1. Content Strategy 
2. Waterfall vs. Agile 
3. Prototyping 
4. Art Direction 
@andrewsmyk
Logo needs to be “bluer”
@andrewsmyk 
Visual inventory, you say… 
Responsive style tiles, you say…
catalog of assumptions
@andrewsmyk 
Responsive Style Tile
User Testing, Tools and TPS Cover Sheets
Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store 
@andrewsmyk
@andrewsmyk 
Pro Tip: Build a Device Library
Plan for gestures and taps.
Help users with error and miss taps
Plan for the “Fat Finger”
Design for the thumb
Pro Tip: A Touch Template helps design Interactions
@andrewsmyk
@andrewsmyk
@andrewsmyk
u 
@andrewsmyk
@andrewsmyk
#ffly #rwd
i
They share a common infrastructure, but mobile is 
NOT the traditional web 
@andrewsmyk
l 
Mobile is a different environment and requires 
new thinking and design considerations. 
@andrewsmyk
Harness the power of a missile throwing robot 
with laser beam eyes on a UNICORN. 
@andrewsmyk
@andrewsmyk
@andrewsmyk
1. Content Strategy 
2. Agile 
3. Prototyping 
4. Art Direction 
@andrewsmyk
@andrewsmyk 
Questions?
Thank you!
@andrewsmyk 
www.andrewsmyk.com/webunleashed
Tweet using hashtags: #WebU14 #managingRWD
@andrewsmyk 
Questions?
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Managing Responsive Design Projects
Upcoming SlideShare
Loading in …5
×

Managing Responsive Design Projects

21,558 views

Published on

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.

Published in: Design, Internet
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more...  https://tinyurl.com/unlockherlegss
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Managing Responsive Design Projects

  1. Managing Responsive Design Projects @andrewsmyk FITC WebUnleashed 2014
  2. www.andrewsmyk.com/webunleashed
  3. Tweet using hashtags: #WebU14 #managingRWD
  4. @andrewsmyk 640 x 480 800 x 600 1024 x 768 1200 x 900 1920 x 1200
  5. @andrewsmyk 1.5” to 50”
  6. @andrewsmyk
  7. Leveraging mobile to increase Wrestling with a responsive projects student engagement Andrew Smyk HighWeb Ed – Arkansas July 27, 2012 @andrewsmyk
  8. @andrewsmyk
  9. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  10. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  11. Edit content ruthlessly
  12. Pro Tip: Document all the Types & Models of Devices You Encounter @andrewsmyk
  13. Important! Note the Devices of Decision Makers in the Room @andrewsmyk
  14. http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg
  15. Stakeholders
  16. @andrewsmyk Content Modeling & Strategy • Content Engagement • Content Curation • Rank and Prioritize Content
  17. Avoid coding or selecting frameworks before content modeling
  18. Avoid coding or selecting frameworks before content modeling
  19. @andrewsmyk
  20. @andrewsmyk Dynamic Wireframe
  21. @andrewsmyk
  22. ????? @andrewsmyk
  23. RUN!!! @andrewsmyk Zombie Apocalypse!!
  24. @andrewsmyk 1 2 3 4 5 6 7
  25. @andrewsmyk 1 2 3 4 5 6 7
  26. 1 2 3 4 5 6 7 A/B Test Content Models and early lo-fi Wireframes
  27. http://fc09.deviantart.net/fs70/f/2012/154/8/6/retro_robot_from_outer_space_by_justsantiago-d5246bu.jpg
  28. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  29. @andrewsmyk
  30. @andrewsmyk
  31. @andrewsmyk
  32. @andrewsmyk
  33. @andrewsmyk
  34. @andrewsmyk
  35. via Michelle Cryan -@sporkles
  36. @andrewsmyk Pro Tip: Avoid Designing and Developing Projects in Silos
  37. @andrewsmyk
  38. 1. Content Strategy 2. Waterfall vs. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  39. @andrewsmyk Prototyping “Now we can think about users and their needs as it relates to content.”
  40. “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 @andrewsmyk
  41. Logo needs to be “bluer”
  42. desktop + + main internal specialized variants? DAYS?
  43. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
  44. Logo needs to be “bluer”
  45. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
  46. How blue is our logo?
  47. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
  48. We need to see another design
  49. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
  50. Stop Wrestling with Static Mockups @andrewsmyk
  51. https://www.flickr.com/photos/kitch/4286136925
  52. https://www.flickr.com/photos/kitch/4286136925 No Usability Testing
  53. https://www.flickr.com/photos/kitch/4286136925 Lack Interaction
  54. https://www.flickr.com/photos/kitch/4286136925 Don’t Show Transitions
  55. https://www.flickr.com/photos/kitch/4286136925 Lack Fluidity
  56. https://www.flickr.com/photos/kitch/4286136925 Don’t Display Web Fonts
  57. “Design consistency is not about pixels.” @andrewsmyk
  58. @andrewsmyk
  59. “A prototype is worth a thousand words” Leigh Howells - @leigh @andrewsmyk
  60. “A prototype is worth a thousand meetings” Mike Davidson - @mikeindustries @andrewsmyk
  61. Pro Tip: A Working Prototype can Help Make Decisions Faster
  62. Think about the ecosystem, not just the devices: @andrewsmyk
  63. @andrewsmyk
  64. https://twitter.com/preetbanerjee/status/509438618683727873 @andrewsmyk
  65. Use the right tools & technologies @andrewsmyk
  66. @andrewsmyk am I responsive? ish. remote preview Ghostlab (license) Edge Inspect (CC subscription)
  67. 1. Content Strategy 2. Waterfall vs. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  68. Logo needs to be “bluer”
  69. @andrewsmyk Visual inventory, you say… Responsive style tiles, you say…
  70. catalog of assumptions
  71. @andrewsmyk Responsive Style Tile
  72. User Testing, Tools and TPS Cover Sheets
  73. Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store @andrewsmyk
  74. @andrewsmyk Pro Tip: Build a Device Library
  75. Plan for gestures and taps.
  76. Help users with error and miss taps
  77. Plan for the “Fat Finger”
  78. Design for the thumb
  79. Pro Tip: A Touch Template helps design Interactions
  80. @andrewsmyk
  81. @andrewsmyk
  82. @andrewsmyk
  83. u @andrewsmyk
  84. @andrewsmyk
  85. #ffly #rwd
  86. i
  87. They share a common infrastructure, but mobile is NOT the traditional web @andrewsmyk
  88. l Mobile is a different environment and requires new thinking and design considerations. @andrewsmyk
  89. Harness the power of a missile throwing robot with laser beam eyes on a UNICORN. @andrewsmyk
  90. @andrewsmyk
  91. @andrewsmyk
  92. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  93. @andrewsmyk Questions?
  94. Thank you!
  95. @andrewsmyk www.andrewsmyk.com/webunleashed
  96. Tweet using hashtags: #WebU14 #managingRWD
  97. @andrewsmyk Questions?

×