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

Design for Developers - DevFest Montreal 2022

Bryce Howitson
November 19, 2022

Design for Developers - DevFest Montreal 2022

Many development projects don't have access to design resources so it falls on the engineers to make interfaces. This session will teach you practical tricks to improve the "feel" of your interface, decrease UX blocks, incorporate branding, and highlight resources you might be missing. As a bonus, we'll cover a few several CSS/HTML tips to make "good design" easier to achieve.

Bryce Howitson

November 19, 2022
Tweet

More Decks by Bryce Howitson

Other Decks in Design

Transcript

  1. @howitson
    Design for Developers
    Design for Developers
    Tips to make your screens shine
    or at least not embarassing

    View full-size slide

  2. @howitson
    Design for Developers

    View full-size slide

  3. Untitled
    @howitson
    Design for Developers

    View full-size slide

  4. Incognito
    @howitson
    Design for Developers

    View full-size slide

  5. @howitson
    Design for Developers
    What ‘tcha got?
    Company Brand or Style Guide

    View full-size slide

  6. @howitson
    Design for Developers
    What ‘tcha got?
    A component library

    View full-size slide

  7. @howitson
    Design for Developers
    What ‘tcha got?
    Examples of similar things

    View full-size slide

  8. @howitson
    Design for Developers
    Good artists
    borrow. Great
    artists steal!

    View full-size slide

  9. @howitson
    Design for Developers

    View full-size slide

  10. @howitson
    Design for Developers
    01 Design patterns (common)
    ui-patterns.com/patterns
    02 Mobile screens collection
    mobbin.com
    03 Web app screens collection
    saasframe.io

    View full-size slide

  11. Hierarchy
    @howitson
    Design for Developers
    Matters
    A lot

    View full-size slide

  12. @howitson
    Design for Developers
    1.

    View full-size slide

  13. Typography
    @howitson
    Design for Developers
    More than just words

    View full-size slide

  14. @howitson
    Design for Developers
    Image: https://dribbble.com/tiagofank

    View full-size slide

  15. @howitson
    Design for Developers
    Expressive Fonts

    View full-size slide

  16. @howitson
    Design for Developers
    To serif or not
    to serif. That is
    the question.

    View full-size slide

  17. @howitson
    Design for Developers
    01 Font pairs for Google fonts
    www.fontpair.co/all
    02 Learning about typography
    m2.material.io/design/typography/understanding-typography.html

    View full-size slide

  18. @howitson
    Design for Developers
    Layouts that work
    Creative Space

    View full-size slide

  19. @howitson
    Design for Developers
    Docker / Kubernetes

    View full-size slide

  20. @howitson
    Design for Developers
    Docker / Kubernetes

    View full-size slide

  21. Consistency
    Consistency
    Consistency
    @howitson
    Design for Developers

    View full-size slide

  22. Not just for walls
    @howitson
    Design for Developers
    Painting

    View full-size slide

  23. @howitson
    Design for Developers

    View full-size slide

  24. @howitson
    Design for Developers

    View full-size slide

  25. @howitson
    Design for Developers
    01 Color Inspiration
    color.adobe.com/trends/Ui/ux
    02 Color weights/values
    m2.material.io/resources/color/
    03 Material Color Picker
    m2.material.io/design/color/the-color-system.html

    View full-size slide

  26. STOP! WARNING LET’S GO!

    View full-size slide

  27. At the start
    @howitson
    Design for Developers
    Finish

    View full-size slide

  28. Question
    Everything
    @howitson
    Design for Developers

    View full-size slide