Why Your Website Redesign Should Look Like CRAP

Wait … what? Are we really encouraging you to make your company website look ugly, disorganized and hideous? Of course we aren’t. Quite the opposite, in fact: if you are thinking about a website redesign then you should think about the design principle that goes by the acronym CRAP: Contrast, Repetition, Alignment and Proximity.

Why Your Website Redesign Should Look Like CRAP!

 

When Something Just Seems Wrong

I visited a potential client recently that got me thinking about CRAP.

It was a brand new restaurant. I joined a colleague there for lunch to discuss some marketing ideas, sample the food, and get an overall feel for the place.

As I sat checking the place out, something bugged me, but for a good long while I couldn’t figure out what it was.

Eventually, I got it: there was something not quite right about the menu boards mounted up on the wall behind the counter. There was nothing massively wrong, but something just didn’t sit right.

After a few minutes, I figured out why: the menu boards were a smorgasbord of colours, fonts, sizes and alignments and it took a bit of deciphering to figure out how they were arranged, categorized and different food options that were available. They were a jumble of visual elements and it was hard to focus on and synthesize the flow of information.

 

A Website Redesign That Looks Like CRAP

The CRAP design principle is a visual hierarchy that helps designers organize information so it’s easy to look at, understand, and process.

Sure, website design tools available today can let you choose any number of fonts, sizes, colours, and layouts, but that doesn’t mean that just because you *can* use them you *should*.

By including visual hierarchy to make your website redesign consistent, visitors will get used to the flow of your site, build familiarity and establish a level of comfort and trust. And people are more likely to engage and buy from people and brands that they trust.

 

Understanding the Visual Design Principle CRAP

As mentioned, CRAP stands for Contrast, Repetition, Alignment and Proximity.

Let’s take a look at those individually and how they can be embraced as part of your website redesign.

 

Contrast

Contrast is having visual differences on your site. Generally, you should have only a few prominent colours on your site. One of them – typically your brightest or the one that stands out the most – should be used less frequently but to direct the viewers’ attention.

On the Sparkitects website, we use dark greys and black as our main colours, but use red for section headers and subheaders to break up the page content. A visitor can quickly scan the page if they’re looking for something specific:

 

Sparkitects - including contrast as part of visual hierarchy in your website redesign

 

Not having contrast in your design would be like walking into a room full of people all talking at the same volume and trying to figure out who is saying something important and who isn’t.

Using contrast helps you point the viewer to the focal point, which should be the most important thing on any particular page.

 

Repetition

Repetition is about using similar visual design elements across your entire website. Repetition breeds familiarity, which makes a visitor more comfortable, which in turn establishes trust. We want prospective buyers to trust what we’re telling (and inevitably selling) them.

Check out the page snippet above, which is from our website design & development page, and now check out this snippet from our content & inbound marketing page:

 

Sparkitects - including repetition as part of visual hierarchy in your website redesign

 

We’ve used the same page layout and the same visual elements including headings, subheadings and icon style. By repeating the same visual elements, we’re giving the user the impression that these individual pages are smaller parts of a greater whole. A viewer can quickly get used to the layout and flow of our site, making a visit to our site an easier experience, and increasing their level of comfort and trust.

 

Alignment

Having a consistent alignment throughout your site helps give a sense of order, and that nothing has been haphazardly placed without consideration for sense and purpose.

This doesn’t mean that everything on your site has hug the left side of the page. Left alignment is the most common alignment because of how we read in Western culture: left to right, top to bottom. But that doesn’t mean that you can’t use centered or right-aligned layouts – just as long as the alignment that you choose is consistent and appropriate for the content. It’ll make your site look cleaner, more professional and easier to digest.

Take a quick peek back at the two page snippets above. Notice that each subsection has precisely four lines of text and the height of the text is just about the same height as the icon to the left of it? That’s intentional. In designing our own site we wanted a nice clean layout where page elements were nicely aligned.

 

Proximity

Like alignment, proximity is about laying out visual elements and content so visitors quickly understand what’s going on and the flow of content and information. Groups of related items should be placed closer to each other; unrelated items should be spaced further apart.

Proximity is one of the easier principles that people apply intuitively. Body text goes right beneath its related header. Captions go right below the images that they’re related to. These are a couple of examples of the proximity design principle that most people follow without much thought, but the pages of your site should extend this same concept so the visitor doesn’t have to spend time deciphering the layout and where to find what they’re looking for.

 

TL; DR

If you’re thinking about a website redesign or even an initial build, pay attention to how visual and content elements are arranged to make it an easy-to-understand and easily digestible experience for your visitor. Using the design principles of CRAP – Contrast, Repetition, Alignment and Proximity – will help build familiarity, comfort and trust, and people are more likely to buy from people and brands that they trust.

If you’re looking for a professional web design company to help with your site build or rebuild, we’d love to help. We bring a strategic online marketing approach to every website design project we work on, delivering bold and beautiful websites that our clients love! Call us today at (905) 456 – 4606 or shoot us an email and let’s get started!

Steve Hartley
steve.hartley@sparkitects.com

My name is Steve Hartley and I am the Managing Partner of Sparkitects. We help businesses succeed with their online marketing efforts. I work with companies on the planning and preparation phase, which is so important in the success of an internet marketing campaign. I think strategically to identify the best tools and platforms to use for online marketing success.