The Web Designers Toolkit
85 likes•8,834 views
The document discusses essential tools and processes for web designers, emphasizing the importance of adapting to mobile and social platforms. It includes sections on getting started, useful design tools, prototyping, and insights into user experience design. The overall message encourages a proactive approach to design and collaboration to create effective digital experiences.
The Web Designers Toolkit
- 1. Helpful Resources to Make Your Life Easier THE WEB DESIGNER’S TOOL KIT Monday, October 22, 12
- 2. Hello. Diana Frurip | Visual Designer @dianadianadiana Sean Kelly | Senior Visual Designer @deamplified Phil Robinson | Experience Design Director @pzilla Monday, October 22, 12
- 3. Hello. Mobile and Social Platforms Monday, October 22, 12
- 4. Before We Begin Monday, October 22, 12
- 5. PART 1: GETTING STARTED 1. A Compass 2. A Better Process 3. Insights PART 2: TOOLS TO USE 4. Sketching 5. Prototyping 6. Creating and Testing PART 3: CONCLUSION Monday, October 22, 12
- 6. Part 1 Getting Started Monday, October 22, 12
- 7. PART 1: GETTING STARTED 1. A Compass 2. A Better Process 3. Insights PART 2: TOOLS TO USE 4. Sketching 5. Prototyping 6. Creating and Testing PART 3: CONCLUSION Monday, October 22, 12
- 8. THE YEAR OF MOBILE? Monday, October 22, 12
- 9. THE YEAR OF MOBILE? Monday, October 22, 12
- 10. THE YEAR OF MOBILE? Monday, October 22, 12
- 11. THE YEAR OF MOBILE? Monday, October 22, 12
- 12. THE YEAR OF MOBILE? Monday, October 22, 12
- 13. THE YEAR OF MOBILE? Monday, October 22, 12
- 14. THE YEAR OF MOBILE? Monday, October 22, 12
- 15. THE YEAR OF MOBILE? Monday, October 22, 12
- 16. THE YEAR OF MOBILE? Monday, October 22, 12
- 17. THE YEAR OF MOBILE? Monday, October 22, 12
- 18. THE YEAR OF MOBILE? Monday, October 22, 12
- 19. THE YEAR OF MOBILE? Monday, October 22, 12
- 20. THE YEAR OF MOBILE? Monday, October 22, 12
- 21. THE YEAR OF MOBILE? Monday, October 22, 12
- 22. THE YEAR OF MOBILE? Monday, October 22, 12
- 23. “ 25% of US internet users only access the web through a mobile device. ” –MobiThinking Monday, October 22, 12
- 24. “ "Mobile devices now make up about ” 20 percent of U.S. web traffic" –All Things D Monday, October 22, 12
- 25. THINK GLOBALLY Mobile Operating System Market Share February 2012 via iCrossing Monday, October 22, 12
- 26. THIS ISN’T RESPONSIVE Monday, October 22, 12
- 27. Monday, October 22, 12
- 28. PART 1: GETTING STARTED 1. A Compass 2. A Better Process 3. Insights PART 2: TOOLS TO USE 4. Sketching 5. Prototyping 6. Creating and Testing PART 3: CONCLUSION Monday, October 22, 12
- 29. THEN... Website UX Visual Development Monday, October 22, 12
- 30. RECENTLY... Mobile Version Website UX Visual Development Monday, October 22, 12
- 31. NOW... Oh noes! UX Visual Development Monday, October 22, 12
- 32. Photo: R. Baum THE LANDSCAPE CHANGED QUICKLY Monday, October 22, 12
- 33. Photo: Asher Trafford BUT WE CAN ADAPT Monday, October 22, 12
- 34. “ Instead of viewing ourselves in terms of discrete roles, we should instead look to emphasize our range of abilities, and work with others whose skills are complimentary. –Paul Robert Lloyd, 24 Ways ” Monday, October 22, 12
- 35. SUPER TEAMS ASSEMBLE! Monday, October 22, 12
- 36. A BETTER WAY Development Visual UX Monday, October 22, 12
- 37. Monday, October 22, 12
- 38. GET COMFORTABLE BEING OUT OF AND ADAPT TO CHANGES Monday, October 22, 12
- 39. It’s not the document you’re making, it’s the input you’re giving. Monday, October 22, 12
- 40. PART 1: GETTING STARTED 1. A Compass 2. A Better Process 3. Insights PART 2: TOOLS TO USE 4. Sketching 5. Prototyping 6. Creating and Testing PART 3: CONCLUSION Monday, October 22, 12
- 41. OBJECTIVES FIRST Monday, October 22, 12
- 42. “ Content informs design – design without content is decoration ” –Jeffrey Zeldman, Happy Cog Monday, October 22, 12
- 43. ONE SIZE DOESN’T FIT ALL Monday, October 22, 12
- 44. ONE SIZE DOESN’T FIT ALL Monday, October 22, 12
- 45. DELEGATE PHILOSOPHERS Monday, October 22, 12
- 46. THINK BIG PICTURE Monday, October 22, 12
- 47. Part 2 Tools to Use Monday, October 22, 12
- 48. PART 1: GETTING STARTED 1. A Compass 2. A Better Process 3. Insights PART 2: TOOLS TO USE 4. Sketching 5. Prototyping 6. Creating and Testing PART 3: CONCLUSION Monday, October 22, 12
- 49. GET INSPIRED patterntap.com Monday, October 22, 12
- 50. GET INSPIRED lovelyui.com Monday, October 22, 12
- 51. GET INSPIRED androidpatterns.com Monday, October 22, 12
- 52. GET INSPIRED responsive.rga.com Monday, October 22, 12
- 53. GET INSPIRED mediaqueri.es Monday, October 22, 12
- 54. GET INSPIRED bradfrost.github.com/this-is-responsive/patterns.html Monday, October 22, 12
- 55. GET INSPIRED bradfrost.github.com/this-is-responsive/patterns.html Monday, October 22, 12
- 56. GET INSPIRED starbucks.com/static/reference/styleguide/ Monday, October 22, 12
- 57. START WITH A SYSTEM Monday, October 22, 12
- 58. STYLE TILES Monday, October 22, 12
- 59. STYLE TILES Monday, October 22, 12
- 60. STYLE TILES Monday, October 22, 12
- 61. SKETCH WITH PAPER via UX Magazine Monday, October 22, 12
- 62. SKETCH ON DEVICES via UX Magazine Monday, October 22, 12
- 63. SKETCH ON DEVICES Dropbox Android File Transfer Monday, October 22, 12
- 64. SKETCH ON DEVICES LiveView Android Design Preview Monday, October 22, 12
- 65. SKETCH ON DEVICES Adobe Edge Inspect Monday, October 22, 12
- 66. PART 1: GETTING STARTED 1. A Compass 2. A Better Process 3. Insights PART 2: TOOLS TO USE 4. Sketching 5. Prototyping 6. Creating and Testing PART 3: CONCLUSION Monday, October 22, 12
- 67. THEN... Monday, October 22, 12
- 68. NOW... Monday, October 22, 12
- 69. PRESENT BETTER Monday, October 22, 12
- 70. CHOOSE YOUR TOOLS WISELY disposable evolving d.i.y collaborative PAPER MOTION TEST SCRIPTED RESPONSIVE DATA/CONTENT VIDEO FUNCTIONAL (Keynote, Flash, AE) PROTOTYPE PROTOTYPE PROTOTYPE (iMovie, AfterEffects) PROTOTYPE (TAP, HTML, (HTML,Bootstrap, (HTML, iOS, (HTML, iOS, Android, Keynote, Fireworks, Codepen, Adobe Edge) Android, Flash/AIR) Flash/AIR, Cinder) Flash/AIR) Monday, October 22, 12
- 71. INTERFACE ORIGAMI via Tack Mobile Monday, October 22, 12
- 72. CONTENT HIERARCHY Monday, October 22, 12
- 73. EXPERIENCE DESIGN Monday, October 22, 12
- 74. PROTOTYPES FOR CLIENTS TAP by unitid.nl Monday, October 22, 12
- 75. PROTOTYPES FOR CLIENTS TAP by unitid.nl Monday, October 22, 12
- 76. PROTOTYPES FOR CLIENTS Prototypes App Monday, October 22, 12
- 77. MOTION PROTOTYPES via Punchcut After Effects Keynote Monday, October 22, 12
- 78. PART 1: GETTING STARTED 1. A Compass 2. A Better Process 3. Insights PART 2: TOOLS TO USE 4. Sketching 5. Prototyping 6. Creating and Testing PART 3: CONCLUSION Monday, October 22, 12
- 79. “ Those PSDs are an artifact of the design process, and very likely do not reflect the final decisions made in the coding process. The code is the deliverable, the PSDs are not. –David McCreath, Mule Design ” Monday, October 22, 12
- 80. KNOW THE MEDIUM Monday, October 22, 12
- 81. YOUR BEST NEW DESIGN TOOL image via Kuswanto, Petshop Box Studio Monday, October 22, 12
- 82. CONTENT DICTATES BREAKPOINTS Monday, October 22, 12
- 83. VISUAL TO CODE Subtle Patterns Monday, October 22, 12
- 84. VISUAL TO CODE Dev Rocket Monday, October 22, 12
- 85. VISUAL TO CODE Slicy CSS Hat Monday, October 22, 12
- 86. VISUAL TO CODE css3gen.com/box-shadow/ Monday, October 22, 12
- 87. DEVELOPER TOOLS Monday, October 22, 12
- 88. EMULATORS Opera Mobile Emulator Android SDK XCode iOS Simulator Monday, October 22, 12
- 89. TESTING *Responsinator *Responsive.is *Screen Queries Resize My Browser Responsive PX Responsive Design Bookmarklet Screenfly Adobe Edge Monday, October 22, 12
- 90. PART 1: GETTING STARTED 1. A Compass 2. A Better Process 3. Insights PART 2: TOOLS TO USE 4. Sketching 5. Prototyping 6. Creating and Testing PART 3: CONCLUSION Monday, October 22, 12
- 91. Conclusion You’ve got this. Monday, October 22, 12
- 92. FUTURE FACING Monday, October 22, 12
- 93. BE PROACTIVE Monday, October 22, 12
- 94. TEST ON DEVICE Monday, October 22, 12
- 95. SAME JOB, NEW TOOLS Monday, October 22, 12
- 96. BEYOND THE CREATIVE SUITE Monday, October 22, 12
- 97. If it’s not working, figure out a new process. Monday, October 22, 12
- 98. SAVE TIME AND MONEY Monday, October 22, 12
- 99. BE WATER, MY FRIEND Monday, October 22, 12
- 100. Monday, October 22, 12
- 101. Thank You. slideshare.net/RGA Monday, October 22, 12