As a developer, it is beneficial to understand basics of design and how people digest information. You may think to yourself that you will never have to create a visual interface, but the reality is even code has a visual aspect which has impact on its consumption. A deeper understanding of visual perception can positively impact your code!

Principles

Design is a mature industry with centuries of application and study. There are many tried and true principles and concepts that you should apply and keep in mind when creating designs. Also understanding the elements of design and how they relate together allows you to put the pieces together in a cohesive fashion

  • http://www.johnlovett.com/test.htm
  • http://visual.ly/6-principles-design
  • http://learndesignprinciples.com/
  • http://www.creativebloq.com/graphic-design/gestalt-theory-10134960
  • http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
  • http://lifehacker.com/5739492/learn-the-basics-of-design-this-weekend
  • http://justcreative.com/2008/06/13/how-to-design-learn-the-basics/

Typography

A vast amount of information that is communicated is in the form of text. The visual form of this text affects how the information presented is consumed. If letters are very too close together or too far apart, reading can be hindered. If margin between lines of text is too big, discerning if information belongs together can become difficult. Typography is about addressing these sorts of problems with text and presenting text in a legible readable format.

  • http://tangledindesign.com/5-basic-principles-you-must-consider-to-master-the-art-of-typography/
  • https://www.smashingmagazine.com/2009/03/10-principles-for-readable-web-typography/

Layouts

TODO

There are a number of resources to help developer types understand basics of design. I’ve also included articles that cover the the concept of information hierarchy, which is very important tool for aiding the digestion of information.

  • https://blog.prototypr.io/design-for-programmers-d38c56982cd0
  • https://hackdesign.org/lessons
  • https://webdesign.tutsplus.com/articles/typography-basics-for-developers–webdesign-14025
  • http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong/25-Examples_of_desirable_qualities_Fast
  • https://realm.io/news/christopher-downer-design-101-for-developers/
  • https://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/
  • https://thoughtbot.com/upcase/design-for-developers
  • http://www.dadapixel.com/blog/2014/7/30/opinion-information-density-isnt-as-important-as-information-hierarchy
  • https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/
  • http://ui-patterns.com/
  • http://uxmag.com/
  • http://52weeksofux.com

Showcases

Reading about principles & concepts is great but may feel abstract. Seeing finished products where these principles are applied helps tie the concepts together.

  • http://www.awwwards.com/websites
  • pttrns.com
  • http://littlebigdetails.com/
  • https://material.uplabs.com/
  • http://beta.uihaus.com/
  • https://www.uplabs.com/

Tutorials

  • https://tutsplus.com/
  • https://teamtreehouse.com/tracks/web-design
  • https://www.coursera.org/browse/computer-science/design-and-product?languages=en

Books

  • https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535
  • https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=pd_sbs_14_img_0?_encoding=UTF8&psc=1&refRID=KSRVRJR3RBHD00H7TVQD
  • https://www.amazon.com/Designing-Mind-Simple-Understanding-Interface/dp/012375030X/