When I first set out to design websites I was a bit lost. I entered the field from the development side and didn’t have a formal design degree. While I’ve always trusted my eye to tell me what was good and what wasn’t, my eye often told me my early designs fell more into the wasn’t category than the was.
When I talk to others first embarking on a web design career, I get the feeling my experience isn’t so unique. The good news is a few basic principles of design can dramatically improve your skills and help take your designs from amateur to professional.
These principles have an easy to remember and ironic acronym. CRAP. Contrast, repetition, alignment, and proximity. Each is simple to understand and incorporate into your design and if you can put them into practice you’ll find your designs improving greatly.
Because these principles are so important I think a series of posts is in order. Consider this post an introduction to that series, with individual posts on each principle to come in the weeks ahead.
I first learned all these principles from Robin Williams (no, not that Robin Williams) book The Non-Designer’s Design Book. The definitions of the 4 basic principles below are Robin’s and the book will go into much more depth than I can in a single post or even a series of posts. If the information here is new to you I highly recommend the book.
While the acronym makes for easy remembering let’s talk about the 4 principles in a different order.
Have you ever looked at a website and knew immediately it was designed by an amateur and not a professional web designer? Even money says all the copy on that site was centered and most of the design elements look more like they were strewn about on the page rather than placed there with a purpose.
The principle of alignment: Nothing on a page should be placed arbitrarily. All elements should have a visual connection with something else on the page.
Consider the screenshot below from the Oxford Garden website
I’ve added some vertical and horizontal lines to the image to help show the alignment. Look at how elements from different parts of the page are still aligned with each other.
For example see how the right edge of the logo is lined up with the right edge of the first column of text at the bottom. That wasn’t an accident.
Why are all the h2s on a given page styled to look the same? Why does a site navigation look the same across pages? For that matter why do good websties maintain a consistent template across the site?
The principle of repetition: Some aspects of the design should be repeated across the entire design
Repetition lets you know certain elements are similar. All your h2s look the same (or should) because they represent the level in the structural hierarchy of your content.
Consider the image below from Matt Mullenweg’s personal blog.
Notice how each comment starts with a similar looking heading. The background color is the same, the links within the comment heading are red. Each post even has an avatar located to the left.
Take a look too at the sidebar. Every heading in the sidebar looks just like the others. Same background image, same font color and size.
The repetition lets you know these items are similar and that repetition also helps tie the design together.
Of course if every element on your site looked the same no one would be able to find anything. Nothing would stand out. You make things stand apart through contrast. Your h1s should look different from your h2s
The principle of contrast: Items that are different should look different.
Consider the image below from the Let’s Make it a Date website
An easy way to see the contrast is the squint test. Close your eyes a little and look at the image. You can still easily make out the different page elements. They contrast nicely with each other helping them to stand apart.
For example the buttons in the lower left. An obvious goal of this page is to have someone click to learn more about the company or to contact them. Because the buttons contrast with the text around them they stand out and grab your attention. You may or may not contact the company, but you should easily see how to.
Have you ever seen an image on a website and couldn’t tell right away which block of text refers to it? Ever looked at a page and had a hard time which elements are related to each other?
The principle of proximity: Related items should be grouped together
Consider the image below from the Arts Design Studio website
Looks specifically at the section marked by Solutions. It may not be clear on the reduced image, but the heading is closer to the blocks below than the paragraph above. Even more look how each block in the section contains its own heading, icon, and text grouped tightly and how the space between different blocks is more than the space within each blog.
That lets you know at a glance which heading and icon belongs with each block of text. You won’t confuse the SEO solution with the Video solution below it. It’s clear where one ends and the next begins.
As I mentioned above this post is meant as an introduction to the 4 basic design principles. In the coming weeks I’ll expand on each of the principles with a full post. My thought is to take a disorganized and amateur design and by applying nothing more than the principles above turn it into something more professional.
Between now and then I have an assignment for you. Don’t worry it’s not difficult and won’t take up any of your time, but if you want to learn you have to put in some work. Think about the contrast, repetition, alignment, and proximity as you travel the web and start to notice them in practice on the sites you visit.
That’s it. I told you it was an easy assignment.
When you come across a site with a design you like see if you can notice the above principles at work. When you see a site with a design that makes you cringe, see if the design is ignoring the above principles. As you notice these principles in action try incorporating them more in your own designs.
Also know that the best designs are often those that find a way to break or bend the rules. But before you can break a rule in a pleasing way you have to understand that rule and why it works as it does.
Absorb the above and I’ll be back next week with a more in depth post about alignment.
Posts in this series
Download a free sample from my book, Design Fundamentals.