Laurence de Torrenté

Post written by Yuqin Cai:

Design for non-designer boot camp in 60 minutes.

Last weekend, thanks to a complimentary pass from WiMLDS, I attended Pygotham 2016 which was held in the United Nations Conference Building on the East River in New York City. The event was very well-organized, with tons of inspiring talks and hundreds of passionate people. For me, it was the best summer camp ever!!! What was most hilarious was to watch nerds in geeky T-shirts trying very hard to put on a politian/diplomat’s hat and opening their talks with “Mr. President, Mr. Secretary General, fellow delegates, ladies and gentlemen: … ”

pygotham16

Here is one talk entitled “Design for Non-Designers” that I would like to share because you can implement in less than an hour the practical aesthetic essentials in your own website/APP UX design and presentations. This talk was given by Tracy Osborn (@limedaring, limedaring.com, https://github.com/limedaring), a California Bay Area designer, developer and entreprenerd who also wrote a book with the title “Hello Web App” that teaches people how to design and build their own custom web apps using Python and Django.

The goal of the talk was to teach you effective basic designs that help you make an interface that works well without hiring a professional designer. Here are some rules to follow.

  • Cut down on clutter. Less is more. “Make everything as simple as possible, but not simpler.” Albert Einstein.
  • Use grid to line things up. People will definitely noticed pixel differences unconsciously. A shortcut for archiving nice layout is to use Bootstrap front-end frameworks, and to learn how to program in Django (/ˈdʒæŋɡoʊ/ jang-goh). Django is a free and open-source web framework that is written in Python to ease the creation of complex, database-driven websites.
  • Do the color right. A principle to follow is to keep your colors complimentary, and use mostly neutral tones and one bright color for highlighting important bits. For more information, you can read: “A Simple Web Developer’s Guide To Color” By Laura Elizabeth on Smashing Magazine.
    A shortcut is to use http://www.colourlovers.com/ to find most loved colors, palettes and patterns.
  • Keep the number of fonts low. Using only two different fonts is usually a good rule of thumb. Use fancy fonts sparingly since they tend to be very cluttery. For differentiation bits, you can vary weight, italics and uppercase/lowercase.
    For a showcase of the best typefaces from the Google web fonts you can go here.
    Typewolf also provides a curated collection of the 30 best Google fonts.
  • Add white space.
  • Use image. You can find high resolution images in photopin.com and fiverr.com. You can also use icons logo by an illustrator, like https://appcanary.com/.
  • Good artists copy, great artists steal. Get inspired by great sites like sight unseen, unmatchedstyle, cssmania, and slack. Read the book “Steal like an artist” by Austin Kleon.
    •  

    To sum up, you should aim for a clean design that reduce visual clutters, by keeping the number of fonts and colors low, adding white space, and lining things up. Follow some user experience principles. Ask what’s the most important action on your design? Make it easy to find and use. Big paragraphs are a sign of clutter–break into bullets if you can; add bold, and add white space. Keep headlines short and use natural friendly language. The benefits of good design could be instant, for example, greatly improved conversations or web profits.

    A design process usually involves the following steps: sketch, mock it up, keep content short and easy to skim, make sure your goal is easy to find and use. After many “crab” moments, you finally get a “Yes!!!”

    This blog is based on notes taken during the talk “Design for non-designers” by Tracy Osborn.