Managing Responsive Design Projects
Download as PPTX, PDF1 like1,016 views
The document discusses strategies for managing responsive design projects, emphasizing the importance of content strategy, agile methodologies, prototyping, and art direction. Key recommendations include avoiding siloed work, utilizing prototypes for clearer communication, and considering user needs throughout the design process. It also highlights the distinct design considerations required for mobile environments.
Managing Responsive Design Projects
- 1. Managing Responsive Design Projects @andrewsmyk FITC WebUnleashed 2014
- 4. Tweet using hashtags: #WebU14 #managingRWD
- 6. @andrewsmyk 640 x 480 800 x 600 1024 x 768 1200 x 900 1920 x 1200
- 8. @andrewsmyk 1.5” to 50”
- 9. @andrewsmyk
- 11. Leveraging mobile to increase Wrestling with a responsive projects student engagement Andrew Smyk HighWeb Ed – Arkansas July 27, 2012 @andrewsmyk
- 13. @andrewsmyk
- 14. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
- 15. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
- 19. Pro Tip: Document all the Types & Models of Devices You Encounter @andrewsmyk
- 20. Important! Note the Devices of Decision Makers in the Room @andrewsmyk
- 22. Stakeholders
- 23. @andrewsmyk Content Modeling & Strategy • Content Engagement • Content Curation • Rank and Prioritize Content
- 24. Avoid coding or selecting frameworks before content modeling
- 25. Avoid coding or selecting frameworks before content modeling
- 26. @andrewsmyk
- 28. @andrewsmyk
- 30. RUN!!! @andrewsmyk Zombie Apocalypse!!
- 33. @andrewsmyk 1 2 3 4 5 6 7
- 34. @andrewsmyk 1 2 3 4 5 6 7
- 35. 1 2 3 4 5 6 7 A/B Test Content Models and early lo-fi Wireframes
- 38. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
- 39. @andrewsmyk
- 40. @andrewsmyk
- 41. @andrewsmyk
- 42. @andrewsmyk
- 45. @andrewsmyk
- 46. @andrewsmyk
- 47. via Michelle Cryan -@sporkles
- 48. @andrewsmyk Pro Tip: Avoid Designing and Developing Projects in Silos
- 49. @andrewsmyk
- 50. 1. Content Strategy 2. Waterfall vs. Agile 3. Prototyping 4. Art Direction @andrewsmyk
- 51. @andrewsmyk Prototyping “Now we can think about users and their needs as it relates to content.”
- 53. “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
- 54. Logo needs to be “bluer”
- 55. desktop + + main internal specialized variants? DAYS?
- 56. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
- 57. Logo needs to be “bluer”
- 58. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
- 59. How blue is our logo?
- 60. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
- 61. We need to see another design
- 62. desktop + + main internal specialized tablet smart phone shiny & new + + main internal specialized + + main internal specialized + + main internal specialized variants? DAYS?
- 63. Stop Wrestling with Static Mockups @andrewsmyk
- 70. “Design consistency is not about pixels.” @andrewsmyk
- 71. @andrewsmyk
- 72. “A prototype is worth a thousand words” Leigh Howells - @leigh @andrewsmyk
- 73. “A prototype is worth a thousand meetings” Mike Davidson - @mikeindustries @andrewsmyk
- 74. Pro Tip: A Working Prototype can Help Make Decisions Faster
- 75. Think about the ecosystem, not just the devices: @andrewsmyk
- 76. @andrewsmyk
- 78. Use the right tools & technologies @andrewsmyk
- 79. @andrewsmyk am I responsive? ish. remote preview Ghostlab (license) Edge Inspect (CC subscription)
- 80. 1. Content Strategy 2. Waterfall vs. Agile 3. Prototyping 4. Art Direction @andrewsmyk
- 81. Logo needs to be “bluer”
- 86. @andrewsmyk Visual inventory, you say… Responsive style tiles, you say…
- 93. @andrewsmyk Responsive Style Tile
- 94. User Testing, Tools and TPS Cover Sheets
- 95. Pro Tip: Best Place to Test on Devices? Visit a Mobile Carrier’s Store @andrewsmyk
- 96. @andrewsmyk Pro Tip: Build a Device Library
- 97. Plan for gestures and taps.
- 98. Help users with error and miss taps
- 99. Plan for the “Fat Finger”
- 100. Design for the thumb
- 101. Pro Tip: A Touch Template helps design Interactions
- 102. @andrewsmyk
- 103. @andrewsmyk
- 104. @andrewsmyk
- 105. u @andrewsmyk
- 106. @andrewsmyk
- 107. #ffly #rwd
- 108. i
- 109. They share a common infrastructure, but mobile is NOT the traditional web @andrewsmyk
- 110. l Mobile is a different environment and requires new thinking and design considerations. @andrewsmyk
- 111. Harness the power of a missile throwing robot with laser beam eyes on a UNICORN. @andrewsmyk
- 112. @andrewsmyk
- 113. @andrewsmyk
- 114. 1. Content Strategy 2. Agile 3. Prototyping 4. Art Direction @andrewsmyk
- 116. Thank you!
- 118. Tweet using hashtags: #WebU14 #managingRWD