Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

B12ebc301b41cd08402e95641fd3be46?s=128

Linda Ikechukwu

July 13, 2019
Tweet

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