Get Your (Visual) Style On

Artifact East Conference- Nov 2013

Transcript

1. Get Your (VISUAL) Style On A R T I F A C T C O N F E R E N C E
7. Options
8. Dissecting Design PRODUCTIVITY TIME
9. PRODUCTIVITY TIME Dissecting Design
10. PRODUCTIVITY TIME Dissecting Design
11. Establish the Aesthetic
12. Solve the Problem
13. Refine the Solution
15. Establish the Aesthetic
16. Style Comparisons
17. Style Comparisons “I could create an illustration or a 3D rendering of what I want my new office to look like, but that doesn’t take advantage of his great ideas. It’s dictation, not collaboration. Instead, I show him a Pinterest board my wife and I created.” @danielmall http://danielmall.com/articles/the-post-psd-era/
18. Style Comparisons Light vs Dark
19. Style Comparisons Flat vs Textured
20. Style Comparisons Illustration vs Photography
21. Style Tiles
22. Style Tiles STYLETIL.ES
26. MENU SELECTION BY JOSE GARCES I M A G E S
27. MENU SELECTION BY JOSE GARCES I M A G E S 15 TYPEFACES!
28. MENU SELECTION BY JOSE GARCES I M A G E S
29. HTML PROTOTYPE
30. HTML PROTOTYPE
31. 1. Deine typogaphy 2. Deine Key Modules 3. Deine Workhorse Modules 4. Deine Colors and Smaller components
32. TYPECAST.COM
33. MENU SELECTION BY JOSE GARCES I M A G E S MENU SELECTION BY JOSE GARCES I M A G E S MENU SELECTION BY JOSE GARCES I M A G E S MENU SELECTION BY JOSE GARCES I M A G E S
34. PRIMARY SITE GOAL: Get more people to book seats using the website
35. PRIMARY SITE GOAL: Get more people to book seats using the website
38. Style Prototypes
39. Style Prototypes
40. A CASE STUDY
42. •Hand-done •Memphis soul •Textures •Flaming Lips OMA 3
44. O MUSIC AWARDS 3
45. + and add more hand-done elements FEEDBACK
47. Approved!
48. “Circles”
49. “Rhythm”
50. “Intersection of music, tech, & fans”
51. Ok.
64. Mix & Match Trial & Error
65. Find the tools that will communicate your ideas the most clearly
66. Have conversations, not presentations
67. Cool, so what happens next?
68. Solving the problem
69. Static Design Tools
70. Static Design Tools
71. Static Design Tools
72. Responsive Design Tools
73. Responsive Design Tools
74. Responsive Design Tools
75. HTML/CSS
76. HTML/CSS
77. HTML/CSS
78. Designing for Layouts vs Modules
79. Layouts
81. Modules
84. Pattern Libay
87. Reining the Solution
88. Don’t Use Static Design Tools
89. Instead of static design hand-offs, consider design pairing
90. Design Pairing REFINE THE SOLUTION
91. Design Pairing REFINE THE SOLUTION
93. You don’t want to do the long tail more than once
94. The Switching Point
95. What if you work remotely?
96. SKETCHING
97. SKYPE
98. JOIN.ME
99. SIFTER
100. Communicate. Always.
101. PRODUCTIVITY TIME Dissecting Design
102. Photo Credit: Jay Maisel
103. Photo Credit: Jay Maisel
104. Photo Credit: Jay Maisel
105. Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans
106. Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans
107. Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans
108. Group Improvisation
109. THANK YOU! Yesenia Perez-Cruz @yeseniaa Ben Callahan @bencallahan