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.

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