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/

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