Managing Responsive Design Projects
Download as PPTX, PDF92 likes32,050 views
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.
Ad
More Related Content
What's hot (20)
Similar to Managing Responsive Design Projects (20)
Ad
More from Andrew Smyk (20)
Ad
Recently uploaded (20)
![Download Chimera Tool Setup V42.47.0924 [Latest Version]](https://cdn.slidesharecdn.com/ss_thumbnails/artificialintelligence4-250505221011-8e660a4e-thumbnail.jpg?width=560&fit=bounds)
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
- 67. https://www.flickr.com/photos/kitch/4286136925 Don’t Show Transitions
- 69. https://www.flickr.com/photos/kitch/4286136925 Don’t Display Web Fonts
- 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
- 77. https://twitter.com/preetbanerjee/status/509438618683727873 @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