$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
  2. @howitson Design for Developers

  3. Untitled @howitson Design for Developers

  4. Incognito @howitson Design for Developers

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

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

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

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

  9. @howitson Design for Developers

  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
  11. Hierarchy @howitson Design for Developers Matters A lot

  12. None
  13. None
  14. @howitson Design for Developers 1.

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

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

  19. @howitson Design for Developers Expressive Fonts

  20. None
  21. @howitson Design for Developers To serif or not to serif.

    That is the question.
  22. None
  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
  24. @howitson Design for Developers Layouts that work Creative Space

  25. None
  26. None
  27. None
  28. None
  29. @howitson Design for Developers Docker / Kubernetes

  30. @howitson Design for Developers Docker / Kubernetes

  31. None
  32. None
  33. Consistency Consistency Consistency @howitson Design for Developers

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

  36. @howitson Design for Developers

  37. @howitson Design for Developers

  38. None
  39. None
  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
  41. None
  42. None
  43. STOP! WARNING LET’S GO!

  44. At the start @howitson Design for Developers Finish

  45. None
  46. None
  47. Question Everything @howitson Design for Developers