Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Managing Responsive Design Projects

  • Inicia sesión para ver los comentarios

Managing Responsive Design Projects

  1. 1. Managing Responsive Design Projects @andrewsmyk Full Stack TO 2014
  2. 2. www.andrewsmyk.com/fsto
  3. 3. @andrewsmyk 640 x 480 800 x 600 1024 x 768 1200 x 900 1920 x 1200
  4. 4. @andrewsmyk 1.5” to 50”
  5. 5. @andrewsmyk
  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. @andrewsmyk
  36. 36. via Michelle Cryan -@sporkles
  37. 37. @andrewsmyk Pro Tip: Avoid Designing and Developing Projects in Silos
  38. 38. @andrewsmyk
  39. 39. 1. Content Strategy 2. Waterfall vs. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  40. 40. @andrewsmyk Prototyping “Now we can think about users and their needs as it relates to content.”
  41. 41. Look for Pain Points @andrewsmyk https://www.flickr.com/photos/wiphey/12696434
  42. 42. “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
  43. 43. Logo needs to be “bluer”
  44. 44. desktop + + main internal specialized variants? DAYS?
  45. 45. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
  46. 46. Logo needs to be “bluer”
  47. 47. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
  48. 48. How blue is our logo?
  49. 49. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
  50. 50. We need to see another design
  51. 51. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
  52. 52. Stop Wrestling with Static Mockups @andrewsmyk
  53. 53. https://www.flickr.com/photos/kitch/4286136925
  54. 54. https://www.flickr.com/photos/kitch/4286136925 No Usability Testing
  55. 55. https://www.flickr.com/photos/kitch/4286136925 Lack Interaction
  56. 56. https://www.flickr.com/photos/kitch/4286136925 Don’t Show Transitions
  57. 57. https://www.flickr.com/photos/kitch/4286136925 Lack Fluidity
  58. 58. https://www.flickr.com/photos/kitch/4286136925 Don’t Display Web Fonts
  59. 59. In the end, static mock ups are like a dead parrot.
  60. 60. “Design consistency is not about pixels.” @andrewsmyk
  61. 61. @andrewsmyk
  62. 62. “A prototype is worth a thousand words” Leigh Howells - @leigh @andrewsmyk
  63. 63. “A prototype is worth a thousand meetings” Mike Davidson - @mikeindustries @andrewsmyk
  64. 64. Pro Tip: A Working Prototype can Help Make Decisions Faster
  65. 65. Think about the ecosystem, not just the devices: @andrewsmyk
  66. 66. @andrewsmyk
  67. 67. https://twitter.com/preetbanerjee/status/509438618683727873 @andrewsmyk
  68. 68. Use the right tools & technologies @andrewsmyk
  69. 69. @andrewsmyk am I responsive? ish. remote preview Ghostlab (license) Edge Inspect (CC subscription)
  70. 70. 1. Content Strategy 2. Waterfall vs. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  71. 71. Logo needs to be “bluer”
  72. 72. @andrewsmyk Visual inventory, you say… Responsive style tiles, you say…
  73. 73. catalog of assumptions
  74. 74. @andrewsmyk Responsive Style Tile
  75. 75. User Testing, Tools and TPS Cover Sheets
  76. 76. Plan your Interactions and Interface https://www.flickr.com/photos/kenstein/12126948903 @andrewsmyk
  77. 77. Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store @andrewsmyk
  78. 78. @andrewsmyk Pro Tip: Build a Device Library
  79. 79. http://www.flickr.com/photos/pjanvandaele/3990379048 Plan for gestures and taps @andrewsmyk
  80. 80. Help users with errors and miss taps
  81. 81. Plan for the “Fat Finger”
  82. 82. Design for the thumb
  83. 83. Pro Tip: A Touch Template helps design Interactions @andrewsmyk
  84. 84. Test Constantly @andrewsmyk
  85. 85. Test Under Extreme Conditions or Use Case https://www.flickr.com/photos/zokuga/5296157798 @andrewsmyk
  86. 86. Test Under Low Connectivity https://www.flickr.com/photos/nicholas_t/2414548729 @andrewsmyk
  87. 87. @andrewsmyk
  88. 88. @andrewsmyk
  89. 89. @andrewsmyk
  90. 90. @andrewsmyk
  91. 91. u @andrewsmyk
  92. 92. @andrewsmyk
  93. 93. #ffly #rwd
  94. 94. i
  95. 95. They share a common infrastructure, but mobile is NOT the traditional web @andrewsmyk
  96. 96. l Mobile is a different environment and requires new thinking and design considerations. @andrewsmyk
  97. 97. Harness the power of a missile throwing robot with laser beam eyes on a UNICORN. @andrewsmyk
  98. 98. @andrewsmyk
  99. 99. @andrewsmyk
  100. 100. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
  101. 101. @andrewsmyk Questions?
  102. 102. Thank you!
  103. 103. @andrewsmyk www.andrewsmyk.com/fsto
  104. 104. @andrewsmyk Questions?

×