How To Speak Unicorn: Improving Designer/Developer Collaboration

It seems that designers and developers speak different languages: developers are fluent in How, while designers are fluent in Why. Both are extremely important to a project, but this difference often leads to communication breakdowns. This talk will give developers insight into the design process, including vocabulary, problem solving methods, and workflow, and outline some simple methods to avoid “fail points” along the way.

Transcript

1. HOW TO SPEAK UNICORN: Improving Designer/Developer Collaboration
2. HI, I’M MICHELLE @marktimemedia
3. WHO IS A UNICORN?
4. MYTHICAL CREATURE WITH EQUAL TALENT IN MULTIPLE DISCIPLINES
5. IF I’M A SPECIALIST… WHY SHOULD I GENERALIZE?
6. BE A UNICORN SPEAK UNICORN
7. WHY SPEAK UNICORN?
8. YOUR TEAMMATES ARE NOT YOUR OPPONENTS
9. HOLISTIC PROCESS
10. BETTER FINAL PRODUCT
11. WHEN CAN DESIGN THINKING HELP DEVELOPERS?
12. SEE THE BIGGER PICTURE…
13. …AND THE DETAILS
14. BETTER COMMUNICATION
15. ADAPTING ON THE FLY
16. WRITE BETTER CODE
17. WHAT DO DESIGNERS THINK ABOUT?
18. #1 VOCABULARY WORD: WHY?
19. BIG PICTURE
20. USER EXPERIENCE HOW PEOPLE INTERACT AND ENGAGE WITH THE SITE Information Architecture, GUI, Interaction Design KEY TAKEAWAY: Make functionality decisions with the end user in mind, not the application or development process.
21. BRANDING COMMUNICATING THE ORGANIZATION’S MESSAGE, VALUES, AND EXPERIENCE Design System, Essence, Archetypes, Brand Strategy KEY TAKEAWAY: Create experiences that reinforce the company’s brand
22. COMPOSITION HOW THE CONTENT AND AESTHETICS OF THE SITE WORK TOGETHER Proximity, Harmony, Unity, Balance KEY TAKEAWAY: Each element should feel like it belongs within the site layout, not added as an afterthought
23. DETAILS
24. TYPOGRAPHY AESTHETIC DECISIONS ABOUT THE ARRANGEMENT OF TYPE Line Spacing, Letter Spacing, Kerning, Fonts KEY TAKEAWAY: Typographic choices should be deliberate, both reinforcing big-picture systems and being aesthetically appealing and easy to read/understand
25. COLOR AESTHETIC DECISIONS ABOUT THE USE OF COLOR IN A COMPOSITION Hue, Value, Shade, Tint, Saturation KEY TAKEAWAY: Color choices should be deliberate and used consistantly across the entire site
26. HIERARCHY THE RELATIVE IMPORTANCE AND VISIBILITY OF PIECES OF INFORMATION Emphasis, Scale, Readability, Flow KEY TAKEAWAY: Decisions made about the styling and position of elements have a huge impact on the site experience
27. WHERE CAN I PRACTICE?
28. EVALUATE EXISTING EXAMPLES
29. TALK TO DESIGNERS!
30. QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/speak-unicorn