Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How To Speak Unicorn: Improving Designer/Developer Collaboration

Michelle Schulp
September 20, 2014

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.

Michelle Schulp

September 20, 2014
Tweet

More Decks by Michelle Schulp

Other Decks in Design

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
    [email protected]
    @marktimemedia
    bit.ly/speak-unicorn

    View Slide