$30 off During Our Annual Pro Sale. View Details »

Devfest 2022 - Design for Developers by Bryce Howitson

GDG Montreal
November 19, 2022

Devfest 2022 - Design for Developers by Bryce Howitson

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
Speaker deck: brycehowitson
Twitter: @howitson
Linkedin: in/brycehowitson/

GDG Montreal

November 19, 2022
Tweet

More Decks by GDG Montreal

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 Slide

  2. @howitson
    Design for Developers

    View Slide

  3. Untitled
    @howitson
    Design for Developers

    View Slide

  4. Incognito
    @howitson
    Design for Developers

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. @howitson
    Design for Developers

    View 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 Slide

  11. Hierarchy
    @howitson
    Design for Developers
    Matters
    A lot

    View Slide

  12. View Slide

  13. View Slide

  14. @howitson
    Design for Developers
    1.

    View Slide

  15. View Slide

  16. View Slide

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

    View Slide

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

    View Slide

  19. @howitson
    Design for Developers
    Expressive Fonts

    View Slide

  20. View Slide

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

    View Slide

  22. View Slide

  23. @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 Slide

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

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. @howitson
    Design for Developers
    Docker / Kubernetes

    View Slide

  30. @howitson
    Design for Developers
    Docker / Kubernetes

    View Slide

  31. View Slide

  32. View Slide

  33. Consistency
    Consistency
    Consistency
    @howitson
    Design for Developers

    View Slide

  34. View Slide

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

    View Slide

  36. @howitson
    Design for Developers

    View Slide

  37. @howitson
    Design for Developers

    View Slide

  38. View Slide

  39. View Slide

  40. @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 Slide

  41. View Slide

  42. View Slide

  43. STOP! WARNING LET’S GO!

    View Slide

  44. At the start
    @howitson
    Design for Developers
    Finish

    View Slide

  45. View Slide

  46. View Slide

  47. Question
    Everything
    @howitson
    Design for Developers

    View Slide