Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Web Designers Toolkit

The Web Designers Toolkit

Download to read offline

As we move further into the future of digital design, web design is no longer just about creating a single great desktop browsing experience. The interactive design industry is at a crossroads; mobile and tablet devices continue to propagate and fuel new interactions, and the web is now found on more devices than ever.

So, how do we adjust accordingly? More often than not, designers and programmers use old methodologies to tackle new problems. The real tool kit of a great web designer starts off-line and off-screen. This lecture will showcase important skills that will prepare flexible designs for future facing web projects. We will outline a set of new philosophies, collaborative processes and custom tools that enable productivity in this ever-changing world. We'll also cover the importance of creating your own tools and adapting to new needs, so you can stay ahead of the game.

By demonstrating the right workflow, the right tools and a future facing philosophy, this talk aims to help anyone who has thought to themselves: 'there has to be a better way'. The future isn't 12-column grids and pixel perfect PSDs. It's a flexible thinking model that relies on your understanding of development and a strong design philosophy.

As we move further into the future of digital design, web design is no longer just about creating a single great desktop browsing experience. The interactive design industry is at a crossroads; mobile and tablet devices continue to propagate and fuel new interactions, and the web is now found on more devices than ever.

So, how do we adjust accordingly? More often than not, designers and programmers use old methodologies to tackle new problems. The real tool kit of a great web designer starts off-line and off-screen. This lecture will showcase important skills that will prepare flexible designs for future facing web projects. We will outline a set of new philosophies, collaborative processes and custom tools that enable productivity in this ever-changing world. We'll also cover the importance of creating your own tools and adapting to new needs, so you can stay ahead of the game.

By demonstrating the right workflow, the right tools and a future facing philosophy, this talk aims to help anyone who has thought to themselves: 'there has to be a better way'. The future isn't 12-column grids and pixel perfect PSDs. It's a flexible thinking model that relies on your understanding of development and a strong design philosophy.

More Related Content

Related Audiobooks

Free with a 30 day trial from Scribd

See all

The Web Designers Toolkit

  1. 1. Helpful Resources to Make Your Life Easier THE WEB DESIGNER’S TOOL KIT Monday, October 22, 12
  2. 2. Hello. Diana Frurip | Visual Designer @dianadianadiana Sean Kelly | Senior Visual Designer @deamplified Phil Robinson | Experience Design Director @pzilla Monday, October 22, 12
  3. 3. Hello. Mobile and Social Platforms Monday, October 22, 12
  4. 4. Before We Begin Monday, October 22, 12
  5. 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. 6. Part 1 Getting Started Monday, October 22, 12
  7. 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. 8. THE YEAR OF MOBILE? Monday, October 22, 12
  9. 9. THE YEAR OF MOBILE? Monday, October 22, 12
  10. 10. THE YEAR OF MOBILE? Monday, October 22, 12
  11. 11. THE YEAR OF MOBILE? Monday, October 22, 12
  12. 12. THE YEAR OF MOBILE? Monday, October 22, 12
  13. 13. THE YEAR OF MOBILE? Monday, October 22, 12
  14. 14. THE YEAR OF MOBILE? Monday, October 22, 12
  15. 15. THE YEAR OF MOBILE? Monday, October 22, 12
  16. 16. THE YEAR OF MOBILE? Monday, October 22, 12
  17. 17. THE YEAR OF MOBILE? Monday, October 22, 12
  18. 18. THE YEAR OF MOBILE? Monday, October 22, 12
  19. 19. THE YEAR OF MOBILE? Monday, October 22, 12
  20. 20. THE YEAR OF MOBILE? Monday, October 22, 12
  21. 21. THE YEAR OF MOBILE? Monday, October 22, 12
  22. 22. THE YEAR OF MOBILE? Monday, October 22, 12
  23. 23. “ 25% of US internet users only access the web through a mobile device. ” –MobiThinking Monday, October 22, 12
  24. 24. “ "Mobile devices now make up about ” 20 percent of U.S. web traffic" –All Things D Monday, October 22, 12
  25. 25. THINK GLOBALLY Mobile Operating System Market Share February 2012 via iCrossing Monday, October 22, 12
  26. 26. THIS ISN’T RESPONSIVE Monday, October 22, 12
  27. 27. Monday, October 22, 12
  28. 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. 29. THEN... Website UX Visual Development Monday, October 22, 12
  30. 30. RECENTLY... Mobile Version Website UX Visual Development Monday, October 22, 12
  31. 31. NOW... Oh noes! UX Visual Development Monday, October 22, 12
  32. 32. Photo: R. Baum THE LANDSCAPE CHANGED QUICKLY Monday, October 22, 12
  33. 33. Photo: Asher Trafford BUT WE CAN ADAPT Monday, October 22, 12
  34. 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. 35. SUPER TEAMS ASSEMBLE! Monday, October 22, 12
  36. 36. A BETTER WAY Development Visual UX Monday, October 22, 12
  37. 37. Monday, October 22, 12
  38. 38. GET COMFORTABLE BEING OUT OF AND ADAPT TO CHANGES Monday, October 22, 12
  39. 39. It’s not the document you’re making, it’s the input you’re giving. Monday, October 22, 12
  40. 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. 41. OBJECTIVES FIRST Monday, October 22, 12
  42. 42. “ Content informs design – design without content is decoration ” –Jeffrey Zeldman, Happy Cog Monday, October 22, 12
  43. 43. ONE SIZE DOESN’T FIT ALL Monday, October 22, 12
  44. 44. ONE SIZE DOESN’T FIT ALL Monday, October 22, 12
  45. 45. DELEGATE PHILOSOPHERS Monday, October 22, 12
  46. 46. THINK BIG PICTURE Monday, October 22, 12
  47. 47. Part 2 Tools to Use Monday, October 22, 12
  48. 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. 49. GET INSPIRED patterntap.com Monday, October 22, 12
  50. 50. GET INSPIRED lovelyui.com Monday, October 22, 12
  51. 51. GET INSPIRED androidpatterns.com Monday, October 22, 12
  52. 52. GET INSPIRED responsive.rga.com Monday, October 22, 12
  53. 53. GET INSPIRED mediaqueri.es Monday, October 22, 12
  54. 54. GET INSPIRED bradfrost.github.com/this-is-responsive/patterns.html Monday, October 22, 12
  55. 55. GET INSPIRED bradfrost.github.com/this-is-responsive/patterns.html Monday, October 22, 12
  56. 56. GET INSPIRED starbucks.com/static/reference/styleguide/ Monday, October 22, 12
  57. 57. START WITH A SYSTEM Monday, October 22, 12
  58. 58. STYLE TILES Monday, October 22, 12
  59. 59. STYLE TILES Monday, October 22, 12
  60. 60. STYLE TILES Monday, October 22, 12
  61. 61. SKETCH WITH PAPER via UX Magazine Monday, October 22, 12
  62. 62. SKETCH ON DEVICES via UX Magazine Monday, October 22, 12
  63. 63. SKETCH ON DEVICES Dropbox Android File Transfer Monday, October 22, 12
  64. 64. SKETCH ON DEVICES LiveView Android Design Preview Monday, October 22, 12
  65. 65. SKETCH ON DEVICES Adobe Edge Inspect Monday, October 22, 12
  66. 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. 67. THEN... Monday, October 22, 12
  68. 68. NOW... Monday, October 22, 12
  69. 69. PRESENT BETTER Monday, October 22, 12
  70. 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. 71. INTERFACE ORIGAMI via Tack Mobile Monday, October 22, 12
  72. 72. CONTENT HIERARCHY Monday, October 22, 12
  73. 73. EXPERIENCE DESIGN Monday, October 22, 12
  74. 74. PROTOTYPES FOR CLIENTS TAP by unitid.nl Monday, October 22, 12
  75. 75. PROTOTYPES FOR CLIENTS TAP by unitid.nl Monday, October 22, 12
  76. 76. PROTOTYPES FOR CLIENTS Prototypes App Monday, October 22, 12
  77. 77. MOTION PROTOTYPES via Punchcut After Effects Keynote Monday, October 22, 12
  78. 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. 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. 80. KNOW THE MEDIUM Monday, October 22, 12
  81. 81. YOUR BEST NEW DESIGN TOOL image via Kuswanto, Petshop Box Studio Monday, October 22, 12
  82. 82. CONTENT DICTATES BREAKPOINTS Monday, October 22, 12
  83. 83. VISUAL TO CODE Subtle Patterns Monday, October 22, 12
  84. 84. VISUAL TO CODE Dev Rocket Monday, October 22, 12
  85. 85. VISUAL TO CODE Slicy CSS Hat Monday, October 22, 12
  86. 86. VISUAL TO CODE css3gen.com/box-shadow/ Monday, October 22, 12
  87. 87. DEVELOPER TOOLS Monday, October 22, 12
  88. 88. EMULATORS Opera Mobile Emulator Android SDK XCode iOS Simulator Monday, October 22, 12
  89. 89. TESTING *Responsinator *Responsive.is *Screen Queries Resize My Browser Responsive PX Responsive Design Bookmarklet Screenfly Adobe Edge Monday, October 22, 12
  90. 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. 91. Conclusion You’ve got this. Monday, October 22, 12
  92. 92. FUTURE FACING Monday, October 22, 12
  93. 93. BE PROACTIVE Monday, October 22, 12
  94. 94. TEST ON DEVICE Monday, October 22, 12
  95. 95. SAME JOB, NEW TOOLS Monday, October 22, 12
  96. 96. BEYOND THE CREATIVE SUITE Monday, October 22, 12
  97. 97. If it’s not working, figure out a new process. Monday, October 22, 12
  98. 98. SAVE TIME AND MONEY Monday, October 22, 12
  99. 99. BE WATER, MY FRIEND Monday, October 22, 12
  100. 100. Monday, October 22, 12
  101. 101. Thank You. slideshare.net/RGA Monday, October 22, 12

×