Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Web Designers Toolkit

•
Oct. 22, 2012
• 85 likes • 8,806 views
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
RTV Rijnmond slides voor discussie
RTV Rijnmond slides voor discussie
Loading in …3
×

Check these out next

The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GA
R/GA
Does Your Product Have a Plot - David Womack, R/GA
R/GA
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GA
R/GA
I can smell your CMS
R/GA
Adapting to the Unknown
R/GA
Taking Hollywood Out of Production
R/GA
Why Your 5-Year-Old is More Digital Than Most CMOs - Sean Miller, R/GA and J...
R/GA
SXSW Business Case Workshop 2015
R/GA
1 of 101 Ad

The Web Designers Toolkit

Oct. 22, 2012
• 85 likes • 8,806 views

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.

Advertisement

Recommended

RTV Rijnmond slides voor discussie
Vincent Everts
1.9k views
145 slides
CS Presents - A Prediction of the Past - 10th December 2012
Creative Social
1.3k views
108 slides
Chris Speed #TSBIOTResearch
Chris Speed
1.3k views
40 slides
Ricoh social media & sales
Vincent Everts
1.2k views
207 slides
The Most Awesomest Talk Ever
jkosoy
1.1k views
111 slides
Django Bootstrapping with Ease
Concentric Sky
2.2k views
54 slides
Inbound Marketing and WordPress
Aaron Smith
2.1k views
38 slides
Rubyconf2012 recap
Forrest Chang
545 views
59 slides
Advertisement

More Related Content

Viewers also liked (9)

The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GA
R/GA
5.5k views
Does Your Product Have a Plot - David Womack, R/GA
R/GA
24.2k views
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GA
R/GA
6.5k views
I can smell your CMS
R/GA
18k views
Adapting to the Unknown
R/GA
14.5k views
Taking Hollywood Out of Production
R/GA
3.9k views
Why Your 5-Year-Old is More Digital Than Most CMOs - Sean Miller, R/GA and J...
R/GA
26.5k views
SXSW Business Case Workshop 2015
R/GA
26.6k views
Brainstorming Technology First
R/GA
19.9k views
The Sports Fan in 2015 - Richard Ting and Kyle Bunch, R/GA
R/GA
5.5k views
88 slides
Does Your Product Have a Plot - David Womack, R/GA
R/GA
24.2k views
64 slides
I May Like You, But I'm Not In LIke With You - Chloe Gottlieb, R/GA
R/GA
6.5k views
53 slides
I can smell your CMS
R/GA
18k views
163 slides
Adapting to the Unknown
R/GA
14.5k views
53 slides
Taking Hollywood Out of Production
R/GA
3.9k views
30 slides

Similar to The Web Designers Toolkit (20)

Architecting large Node.js applications
Sergi Mansilla
51.3k views
Ux design bar camp
Ratha Hin
670 views
The Design of Everyday Things
Imre Gmelig Meijling
6.8k views
Agile V2
ทวิร พานิชสมบัติ
1.4k views
NCDevCon2012_designing the mobile experience
Dee Sadler
713 views
UXmas Cocktail Hours - Iskander Smit
Iskander Smit
520 views
UX Cocktail Hour
Info.nl
510 views
Html5 new sword for interactive app
Yohan Totting
1.9k views
Android - CodeMiner 42 Tech Talk
Jonas Alves
369 views
2012 Products Are Hard Keynote Address
Janice Fraser
2.1k views
Using Google Cloud Infrastructure for twindly
Astrid Paramita Mochtarram
767 views
REST & Hypermedia: the missing links and why you need them - Ruby Hoedown 2012
Phil Harvey
1.8k views
LUXr 1-day workshop, August 15, 2012 [San Francisco]
LUXr
983 views
121015INTRODUCTION
Yuichi Hirose
348 views
Sustainability Jam Heidelberg - Co-Innovation and saving the World in 48 Hours
Mauro Rego
1.3k views
Bdd intro for Microsoft, 29 Nov 2012
Aliaksandr Ikhelis
1.6k views
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
Engauge
756 views
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
linds313
685 views
Iste leadership2012 nonotes
Jason Ohler
244 views
User-Centred Design - Taking the U out of User
Jacqueline (Jax) Wechsler
3k views
Architecting large Node.js applications
Sergi Mansilla
51.3k views
81 slides
Ux design bar camp
Ratha Hin
670 views
39 slides
The Design of Everyday Things
Imre Gmelig Meijling
6.8k views
47 slides
Agile V2
ทวิร พานิชสมบัติ
1.4k views
38 slides
NCDevCon2012_designing the mobile experience
Dee Sadler
713 views
78 slides
UXmas Cocktail Hours - Iskander Smit
Iskander Smit
520 views
50 slides
Advertisement

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

×