Summary: How to Write Reusable Code

Design is an interesting field, for developers it might be black magic. Following are some lessons developers can learn about design.

Django Con 2016 Video nicely explains and gives tips for non-designers. Its a good talk to get you upto some level of competency in designing

• Design: Make an interface that works well
• How can we create effective, basic designs?
• Fastest way to better design is to cut down on clutter

• Line things up - pixel differences are definately unconsciously notices

• Use Bootstrap it has built in grid system that makes life easier
• Color principles: Keep you colors complementary. Use mostly neutrals + one brighter color for important bits
• A Simple Web Developer’s Guide To Color
• Color Lovers is a website where people share their color pallets
• Test different color pallets to see which one works
• Fonts:Keep the number of fonts low - two different fonts is usually a good rule of thumb
• Use fnacy/display font sparingly - very cluttery
• Vary weights(bolds), style(italics) and transforms (uppercase, etc.) to differentiate bits.
• Beautiful Web Type and Typewolf have good curated fonts
• White Space: The ultimate clutter reducer
• Reduce visual clutter, by keepting the number of fonts and colors low, add white space and line things up. Aim for a “clean” design

• User experience principles:

  • How it works is more important than how it looks
  • Whats the most important action on your design?
  • Make it easy to find and use
  • Pay attention to your goals
  • Make it easy to find and use {Use analytics to find how you’re design is doing}
  • Content: Less is More
  • Big Paragraph are a sign of clutter. Break into bullets if you can
  • Improve readability by formatting using bolds, italics and add white spaces

  • Headlines:

    • Talk benifits not details

    • Keep it short

      • Use natural, friendly language
  • Image and Imagery:
  • Stock photos usually looks like stock photos

  • You can accomplish a lot with just type and screenshots

    • Remember to pay attention to file size
    • Don’t forget retina-quality images
  • Unsplash, Photopin and Pixabay
  • fiverr is option to get stuff done on budget
  • Site Inspire, Unmatchd Style and CSS Mania are good sources of inspiration
  • If there is design that you like, pick elements that you like
  • Quick overview of Design Process:
  • Collect Inspiration
  • Build sketch, basic ones
  • Mock something out
  • Build it