Design Basics & Tips for Non-Designers

April 12, 2014

Author: Angela Noble

Author: Angela Noble

“Attractive things work better.” Don Norman surmises that aesthetic design changes perceptions and helps usability. Will viewers and/or users of your product or website perceive it to be professional and credible, or amateur and untrustworthy? Will their use of it come intuitively or will they be frustrated and confused? Your success may very well depend on good design. And not just the success of the personal website or project you’re working on now. A basic understanding of design principles also makes you more a more marketable professional in any industry.

Now, if you want to become a professional designer, you’ll need more help than this blog post will lend, but if you’re aiming to make your own designs a little more polished, you’re in the right place. Here are some basic design principles you should know and some helpful tips to point you in the right direction.

1. Typography

Limit your design to two fonts. Using more than that will add confusion and a loss in hierarchy (which we’ll touch on later). The simplest way to pick a good font combination is to choose one serif and one sans serif typeface. As a general rule, reserve serif fonts for headers and calls to action and use sans serif fonts for body copy or large chunks of text. As with any rule, there are exceptions. In some contexts (especially in print), serif fonts can work well for body copy; but it’s generally recognized that sans serif fonts are more legible on screen. Check out Type Connection to learn how to pick the perfect font pair.

With the introduction of Web Fonts, the world of typography on the web is now far more diverse. We’re no longer limited to web-safe fonts, but just because you can doesn’t mean you should. Avoid gimmicky (Papyrus, Comic Sans) and over-used (Lobster, Zapfino) fonts. Stick with the classics and avoid Script typefaces on the web.

If you’re interested in learning more about typography, check out another post of mine here. For a more comprehensive guide, read The Elements of Typographic Style Applied to the Web.

2. Color

Key things to keep in mind when choosing colors are contrast and feel/mood.

Your design can become illegible quickly if you don’t have enough contrast between your colors. I’ve seen too many websites where the background color is so close to the text color that I can barely read anything. A good rule is to stick with a white or light grey background and a dark grey/nearly black text color. If you’re planning to stray from that, be sure to do the squint test – if you can’t read the text on your site when squinting, you don’t have enough color contrast.

Also consider the feel or mood you’d like your site to convey. Ever been to a doctor’s office where the walls are painted in bright, vibrant colors? Probably not. That’s because medical facilities are usually painted in light colors for their calming effects. The same color principles can be applied to your design. Bright, vibrant colors should be reserved for fun, playful content while more subdued tones often give a feeling of professionalism. More on how color gives meaning to design.

With all color considerations, simplicity is best – limit yourself to just two or three colors overall.

3. White Space

Ample white space (or negative space) in your design improves legibility and scan-ability and establishes hierarchy between elements. Without enough white space, your design will become overwhelming and confusing to read or look at. Space out each element – whether that be blocks of text, images, etc. – enough to give each the prominence it needs to both stand alone and connect to your other elements as necessary.

If you’re interested in learning more about how to effectively use white space, check out this great article from tutsplus.com.

4. Hierarchy

Order your content by what is most important to what’s least important and use typography, color and white space to achieve hierarchy within your design. Reserve the largest font sizes, the most vibrant colors, and the most prominent spots for the most important items.

All of your design elements should work together and be intentional components. If something feels like an afterthought or like it doesn’t belong, ask yourself if it can be left out. Keep removing unnecessary elements and refining your design to make sure there’s nothing superfluous encumbering your design.

More on hierarchy.

Tools of the Trade

If you need stock photos, be sure not to steal them straight from Google images. Try stock sites like nanamee.com and gettyimages.com. If you’re strictly designing for the web, you’ll only need 72dpi images and even Getty isn’t too pricey for that quality.

Creativemarket.com has a great collection of resources – many of which are free. If you sign up for their emails, you’ll get frequent emails with a handful of useful free fonts, graphics, photos, plugins, etc.

Seek Professional Help

These tips aren’t meant to be a replacement for a professional designer. If they were, I’d be putting myself out of a job. If you’re working on a website for a personal project or creating a site just to see if an idea is viable, there may not be a need to pay a bunch of money for a professionally designed site right off the bat. But, once your site is seeing a lot of traffic and/or is profitable, it’s time to invest in a professionally designed site.