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

774 views

Published on

Managing Responsive Design Projects
with Andrew Smyk
Presented on September 18 2014 at
FITC's Web Unleashed Toronto 2014 Conference

Please join Andrew Smyk in this session to learn and discuss how to:

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.
OBJECTIVE

Learn why you should be designing at the very end in the desired devices.

TARGET AUDIENCE
This session is for freelancers, account managers, project managers or anyone who produces deliverables for clients.

ASSUMED AUDIENCE KNOWLEDGE
Attendees should have a working knowledge of project workflows and deliverables.

AUDIENCE MEMBERS WILL LEARN
Wire-framing in the browser
Moving away from Photoshop mock-ups
Flexible decision making using dynamic mock-ups
Guerilla user testing
Building a device lab and device testing
Exposure to new tool sets

Published in: Internet
  • Be the first to comment

Managing Responsive Design Projects

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

×