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.

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
14. @howitson Design for Developers 1.
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
21. @howitson Design for Developers To serif or not to serif. That is the question.
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
29. @howitson Design for Developers Docker / Kubernetes
30. @howitson Design for Developers Docker / Kubernetes
33. Consistency Consistency Consistency @howitson Design for Developers
35. Not just for walls @howitson Design for Developers Painting
36. @howitson Design for Developers
37. @howitson Design for Developers
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
43. STOP! WARNING LET’S GO!
44. At the start @howitson Design for Developers Finish
47. Question Everything @howitson Design for Developers