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

Design For Developers

Design For Developers

A lot of developers have a lot of trouble coming up with a simple design. When the time comes that they want to build a side project, the interface might end up looking like something out of a 2-year-old's coloring workbook.
This talk highlights simple steps that developers can follow to come up with simple yet elegant designs for their projects.

Linda Ikechukwu

July 13, 2019
Tweet

More Decks by Linda Ikechukwu

Other Decks in Design

Transcript

  1. DESIGN FOR DEVELOPERS LINDA IKECHUKWU @_MsLinda

  2. WHO AM I ? Linda Ikechukwu Frontend Developer @_MsLinda LINDA

    IKECHUKWU @_MsLinda
  3. LINDA IKECHUKWU @_MsLinda

  4. WHAT DO I MEAN BY DESIGN ? LINDA IKECHUKWU @_QUEENNERD

  5. Design : Simple guidelines that can help you (developers) build

    basic interfaces that are effective and visually appealing. LINDA IKECHUKWU @_QUEENNERD
  6. Major Components of Design ▪Layout & Visual Appearance ▪User Experience

    LINDA IKECHUKWU @_QUEENNERD
  7. ON LAYOUT & VISUAL APPEARANCE LINDA IKECHUKWU @_QUEENNERD

  8. Cluster ▪Line components and items with grid based designs. ▪Let

    your pages breathe, be generous with whitespace. ▪Be consistent. LINDA IKECHUKWU @_QUEENNERD
  9. LINDA IKECHUKWU @_QUEENNERD

  10. LINDA IKECHUKWU @_QUEENNERD

  11. Colors Step 1 : Choose a starting color ▪Use what

    you have e.g. colors from existing logo. ▪Do not use your competitors colors and don’t default to stereotypes if you can help it. ▪Think about your target audience and what you want them to feel. Use www.color-meanings.com to find out which colors describe that feeling. LINDA IKECHUKWU @_QUEENNERD
  12. Colors Step 2 : Pick a shade. ▪Now that you

    have a starting color, you can use www.dribbble.com/colors to pick your preferred shade. Step 3 : Pick a complimentary color for contrast and highlighting e.g. headings, buttons and important tips. ▪ Use www.canva.com/colors/color-wheel/ to find a complimentary color to your base color LINDA IKECHUKWU @_QUEENNERD
  13. LINDA IKECHUKWU @_QUEENNERD

  14. LINDA IKECHUKWU @_QUEENNERD

  15. Color Step 4 : Your palette ▪ White + Black

    + Base Color + Complimentary Color Other Helpful sites : ▪www.color-blindness.com ▪www.coolors.com LINDA IKECHUKWU @_QUEENNERD
  16. LINDA IKECHUKWU @_QUEENNERD

  17. Typography ▪Use lesser number of fonts. 2 from the same

    family is a safe bet. ▪Use fancy fonts sparingly , they increase clutter. ▪Vary weights to differentiate importance and bits. ▪Useful site : Typefont.com LINDA IKECHUKWU @_QUEENNERD
  18. Images Always use retina quality images Useful sites : ▪Unsplash.com

    ▪Photopin.com ▪Undraw.co LINDA IKECHUKWU @_QUEENNERD
  19. ON USER EXPERIENCE LINDA IKECHUKWU @_QUEENNERD

  20. Actions ▪Make important actions/messages (e.g. buttons, widgets, headlines) easy to

    find and use by using brighter colors and bigger/bolder fonts. LINDA IKECHUKWU @_QUEENNERD
  21. LINDA IKECHUKWU @_QUEENNERD

  22. LINDA IKECHUKWU @_QUEENNERD

  23. Content : Less is More ▪ Use less number of

    words to pass your message across. ▪ Break up content into shorter paragraphs and bullet points where applicable. ▪ Remember the whitespace rule, be generous. ▪ Highlight / bolden important phrases in sentences. LINDA IKECHUKWU @_QUEENNERD
  24. LINDA IKECHUKWU @_QUEENNERD 1 4 3 2

  25. FINAL THOUGHTS LINDA IKECHUKWU @_QUEENNERD

  26. LINDA IKECHUKWU @_QUEENNERD “Good artists copy, Great artists steal” -Pablo

    Picasso
  27. Where to find inspiration? Useful Sites : ▪Siteinspire.com ▪Behance.com ▪Cssmaniac.com

    LINDA IKECHUKWU @_QUEENNERD
  28. LINDA IKECHUKWU @_QUEENNERD

  29. LINDA IKECHUKWU @_QUEENNERD

  30. THANK YOU LINDA IKECHUKWU @_QUEENNERD