...

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