One of my absolute favorite design books is, Robin Williams Design Workshop. It looks into practical design theories and showcases awesome examples. One of the areas of focus that I’ve taken into all my designs are the four major design principles. They include: contrast, repetition, alignment, and proximity.

This post will discuss those four principles as they relate to web design. By keeping these design theories fresh in your mind, you will be sure to design cleaner, more aesthetically pleasing sites.

1. Contrast

Great contrast can leave a very good first impression on a user. Without a focal point, the viewer is generally lost in a sea of equally-sized elements and typography. It’s the designer’s job to create visual elements of significance that guide the user’s experience. You can achieve great contrast on your site by choosing your images, colors and fonts wisely.

Contrast With Images

It’s often very effective to showcase a large illustration next to smaller elements. Here’s what I mean:

The Invoice Machine

This site utilizes a large image to bring in the reader’s attention. Also the monochromatic nature of the site allows the limited use of blue to play a bigger role.

Instabox

Do the eye test on this site. What do you notice first? More than likely it’s the star on the box. Just like The Invoice Machine, they’ve created a focal point using a large image and limited color.

Contrast With Colors

Sprinkling in color at just the right amount is another way to create effective contrast within a website. It can be created using a different color in headers and text copy, as well as within the colors of an image or illustration.

Fatburgr

This site is a fantastic example of almost all of the design principles. For color contrast take a look at the large yellow header versus the smaller light gray copy. Alignment, image contrast, repetition and proximity are all strong throughout.

I Love Typography

Is it any surprise that a website built to showcase typography would give us a great example right in its own header? I love their font choice and how the green color plays nicely off the darker gray.

Contrast With Fonts

If you are trying to create contrast with fonts you should avoid using two very similar font faces and sizes. The similarity of the fonts tends to create confusion and blur the design. However, it can be very effective if you make the font sizes very different, or mix the lightest version of the font in combination with the boldest. Also, you’ll be surprised at the visually impressive combos you can create by using two very different fonts in tandem. For instance a san serif font with a hand-written font.

Fixie Consulting

Wow! I love the typography and colors on this site. Check out all the size and stroke variations on their slogan. I also love the grunge that is sprinkled in, and the limited use of blue.

2. Repetition

Repetition in print design is much more common than it is in web design, however it can be equally effective. Repeating design elements helps create a consistent look and improves branding. In web design a great way to achieve this is by repeating elements in the header and footer. Check out a couple of examples below.

Ten24 Media

Ten24 Media uses a creative grass illustration in both the header and footer.

Silverback

This site is just awesome! I definitely could have showcased it in the contrast section, but it works just as well here because the theme and branding are clearly used throughout. Check out the use of the bananas as bullets, and the forest illustration at the header and footer.

3. Alignment

Alignment plays an intricate role in taking your site designs from looking amateur to professional. I’ve recently become a huge advocate for designing sites using a grid. Doing so cleans up your designs and gives you an awesome framework to work from. If you’re interested in learning more about designing for a grid, check out my recent post (insert shameless self promotion here), Design A Fresh Blog Theme On The 960 Grid.

Black Estate Vineyard

This site is showcased on the 960 Grid website. It’s alignment is consistent and striking. I love the way the main content is left justified and flush in its column, however some of the larger level headings break the rule and shift into the left sidebar. They also do a good job with generous amounts of white space and contrasting sized fonts.

A List Apart

A List Apart features a visually obvious grid. The columns are well defined and contain everything in very readable chunks. Studies have shown that really wide columns drastically reduce readability. Your eyes will get tired when trying to follow text across wide column widths. A List Apart also features a fantastic article that argues, Good Designers Redesign, Great Designers Realign.

4. Proximity

The last principle is proximity. This has to do with grouping like elements together and separating those that are not. It can really ruin user experience if you group everything into one lump text block. That’s why its very important to use header tags and proper spacing.

Envato

This site does a beautiful job of organizing it’s content into three major categories. They are well spaced and clearly defined.

Paradigm Reborn

This site is well structured. The headers are clear and concise. The spacing is good and the content is separated into logical chunks.

Final Thoughts

It’s unbelievable how much better your designs will become when you take into consideration these four basic principles. There are always more things to consider, but a foundation of contrast, repetition, alignment and proximity will improve your designs dramatically.

Your Turn

Join the discussion. What do you think of these design principles? Are there more that you’d like to share?

About the Author

Andrew is the founder and primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

Visit Andrew's Website   Follow Andrew on Twitter