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.

Linda Ikechukwu

July 13, 2019
Tweet

More Decks by Linda Ikechukwu

Other Decks in Design

Transcript

  1. DESIGN FOR DEVELOPERS
    LINDA IKECHUKWU @_MsLinda

    View Slide

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

    View Slide

  3. LINDA IKECHUKWU @_MsLinda

    View Slide

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

    View Slide

  5. Design : Simple guidelines that can help you
    (developers) build basic interfaces that are effective
    and visually appealing.
    LINDA IKECHUKWU @_QUEENNERD

    View Slide

  6. Major Components of Design
    ▪Layout & Visual Appearance
    ▪User Experience
    LINDA IKECHUKWU @_QUEENNERD

    View Slide

  7. ON LAYOUT & VISUAL APPEARANCE
    LINDA IKECHUKWU @_QUEENNERD

    View Slide

  8. Cluster
    ▪Line components and items with grid based designs.
    ▪Let your pages breathe, be generous with whitespace.
    ▪Be consistent.
    LINDA IKECHUKWU @_QUEENNERD

    View Slide

  9. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  10. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  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

    View Slide

  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

    View Slide

  13. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  14. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  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

    View Slide

  16. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  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

    View Slide

  18. Images
    Always use retina quality images
    Useful sites :
    ▪Unsplash.com
    ▪Photopin.com
    ▪Undraw.co
    LINDA IKECHUKWU @_QUEENNERD

    View Slide

  19. ON USER EXPERIENCE
    LINDA IKECHUKWU @_QUEENNERD

    View Slide

  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

    View Slide

  21. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  22. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  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

    View Slide

  24. LINDA IKECHUKWU @_QUEENNERD
    1
    4
    3
    2

    View Slide

  25. FINAL THOUGHTS
    LINDA IKECHUKWU @_QUEENNERD

    View Slide

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

    View Slide

  27. Where to find inspiration?
    Useful Sites :
    ▪Siteinspire.com
    ▪Behance.com
    ▪Cssmaniac.com
    LINDA IKECHUKWU @_QUEENNERD

    View Slide

  28. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  29. LINDA IKECHUKWU @_QUEENNERD

    View Slide

  30. THANK YOU
    LINDA IKECHUKWU @_QUEENNERD

    View Slide