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
   

   View Slide

2. HI, I’M MICHELLE
   @marktimemedia
   

   View Slide

3. WHO IS A
   UNICORN?
   

   View Slide

4. MYTHICAL
   CREATURE WITH
   EQUAL TALENT
   IN MULTIPLE
   DISCIPLINES
   

   View Slide

5. IF I’M A
   SPECIALIST…
   WHY SHOULD I
   GENERALIZE?
   

   View Slide

6. BE A UNICORN
   SPEAK UNICORN
   

   View Slide

7. WHY SPEAK
   UNICORN?
   

   View Slide

8. YOUR
   TEAMMATES
   ARE NOT YOUR
   OPPONENTS
   

   View Slide

9. HOLISTIC PROCESS
   

   View Slide

10. BETTER
    FINAL
    PRODUCT
    

    View Slide

11. WHEN CAN
    DESIGN THINKING
    HELP DEVELOPERS?
    

    View Slide

12. SEE THE BIGGER
    PICTURE…
    

    View Slide

13. …AND THE
    DETAILS
    

    View Slide

14. BETTER
    COMMUNICATION
    

    View Slide

15. ADAPTING ON
    THE FLY
    

    View Slide

16. WRITE BETTER
    CODE
    

    View Slide

17. WHAT DO DESIGNERS
    THINK ABOUT?
    

    View Slide

18. #1
    VOCABULARY
    WORD:
    WHY?
    

    View Slide

19. BIG
    PICTURE
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. DETAILS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. WHERE CAN I
    PRACTICE?
    

    View Slide

28. EVALUATE
    EXISTING
    EXAMPLES
    

    View Slide

29. TALK TO DESIGNERS!
    

    View Slide

30. QUESTIONS?
    Michelle Schulp
    michelle@marktimemedia.com
    @marktimemedia
    bit.ly/speak-unicorn
    

    View Slide