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.

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