Web Tools & Techniques for Print Designers – HOW Live 2017

1. Jeremy Loyd Ben Callahan WEB DESIGN TOOLS 
 & TECHNIQUES FOR PRINT DESIGNERS
2. BRANDING PRINT PACKAGING WEB
3. WEB
4. Uncertainty Doubt Pressure Fear
5. DESIGN DEVELOPMENT
6. DESIGN DEVELOPMENT
7. DESIGN DEVELOPMENT
8. DESIGN DEVELOPMENT AND
9. DESIGN DEVELOPMENT
10. DESIGN DEVELOPMENT
11. DESIGN DEVELOPMENT
12. Sharing things we’ve learned THERE IS NO ONE WAY
13. Collaborative Notes bit.ly/how2017
14. Questions?
 @bencallahan @jeremyloyd
15. WEB TOOLS & TECHNIQUES FOR PRINT DESIGNERS BEFORE DESIGN BEGINS
16. Visual Direction BEFORE DESIGN BEGINS
17. Dissecting Design Style Comparisons Light vs Dark
18. Dissecting Design Flat vs Textured Style Comparisons
19. Dissecting Design Illustration vs Photography Style Comparisons
20. 20 Second Gut Check
21. B
22. A
23. C
24. H
25. Y
29. Visual Vocabulary
30. Kevin Hoffman www.goodkickoffmeetings.com
31. Project Brief
32. Architecture
 Content Priority User Experience (UX) BEFORE DESIGN BEGINS
33. WEB TOOLS & TECHNIQUES FOR PRINT DESIGNERS DISSECTING 
 WEB DESIGN
34. Dissecting Web Design PRODUCTIVITY TIME
35. Establish the Aesthetic PRODUCTIVITY TIME
36. Solve Design Problems PRODUCTIVITY TIME
37. Refine PRODUCTIVITY TIME
38. Establish the Aesthetic DISSECTING WEB DESIGN
39. Do just enough to get good feedback on a design concept
44. Style Tiles
45. Style Prototypes
46. Style Prototypes
47. Element Collage
49. Page Comps
50. Sketch
51. Solve Design
 Problems DISSECTING WEB DESIGN
52. Do just enough to get good feedback and inform development
53. Identify Page Templates/ Design Key Modules SOLVE DESIGN PROBLEMS
54. Dribbble Example
55. What key template could I design that would knock out the most reused modules and text styles?
64. Thinking Modularly
71. Module Deliverables ➡ Pattern Libraries ➡ Style Guides ➡ Design Systems
72. Reuse, Reuse, Reuse
73. How Things Respond
75. CREATIVE DIRECTOR & ADVISOR Dan Mall
76. CREATIVE DIRECTOR & ADVISOR Dan Mall “Let’s not design in the browser, let’s decide in the browser.”
79. Dealing with 
 Variable Content
82. Design with real content if possible
83. Unique Pages SOLVE DESIGN PROBLEMS
88. Navigation SOLVE DESIGN PROBLEMS
93. Interaction SOLVE DESIGN PROBLEMS
94. Motion Comps
96. Prototyping/Animation Tools ➡ Principle ➡ Origami Studio ➡ Proto.io ➡ Framer ➡ Atomic ➡ Adobe Animate
98. Sketch
99. Refine DISSECTING WEB DESIGN
100. Design Pairing REFINE
101. Demo
102. Value of Design Pairing ➡ Fosters environment of collaboration ➡ Allows for periodic refinement while the product is built ➡ Helps both designer and developer level up
103. When to Pair ➡ When there’s questions, challenges, or snags ➡ When creating new pages from existing modules ➡ When it’s more efficient
104. Sometimes static explorations are needed
105. Hammer/Chisel SHIFT IN MINDSET
106. CONTENT DIRECTOR Emily Gray
107. “The hammer and chisel pairing allows designers to add tremendous value directly in code.” CONTENT DIRECTOR Emily Gray
108. Getting into 
 the code REFINE
110. WEB TOOLS & TECHNIQUES FOR PRINT DESIGNERS FINAL THOUGHTS
111. Think Iteratively SHIFT IN MINDSET
112. CONTENT UX FRONT-END DESIGN BACK-END
113. Think about Performance SHIFT IN MINDSET
114. Think about Accessibility SHIFT IN MINDSET
117. Think about Your Co-workers SHIFT IN MINDSET
120. You can use the design skills you have for the web FINAL THOUGHTS
121. Document your Learning FINAL THOUGHTS
122. THANKS! @jeremyloyd @bencallahan