VWO Logo
Request Pricing

We tweet useful stuff daily

Related content:

How to Use C.R.A.P. Design Principles For Better UX?

8 Min Read

You know a good (or a bad) design when you see one.

However, it’s not always that you can objectively point out the qualities (or flaws) in design — especially when you’re not a designer.

Marketers and developers often find it challenging to come up with designs that work for their CRO process.

To do that, you might need an understanding of CRAP. CRAP, a design principle given by Robin Patricia Williams[1], stands for Contrast, Repetition, Alignment, and Proximity.

By knowing CRAP, you can consistently deliver effective design, whether it’s for a website, a landing page, an eBook, or just a banner ad.

The four design practices, when applied together, lead to brilliant designs more often than not.

This post elaborates the design practices individually, aiming to help you create better design and user experience.


Contrast is all about making distinct elements stand out. Contrast is used to drive a user’s attention to specific elements in a design.

The definition of contrast as given by Google says, “it is the state of being strikingly different from something else in juxtaposition or close association.”

For a layman, contrast may just be limited to black and white (or a similar combination of other colors). But, there is more to contrast than that.

Besides differentiated colors, contrast can be established using different element types, shape, size, and more.

Here’s how you can apply different types of contrast in a design:


Contrast of color is one of the most fundamental design principles, and the one which most of us are familiar with. Nevertheless, its application can still prove to be tricky for many of us.

This contrast can be established using a combination of colors that lie opposite to each other on a color wheel.

RGB color wheel

As a thumb-rule, high contrast is required between text color and background color. However, having contrasting colors for multiple elements can make a design look messy.

Moreover, contrast is just not about using complementary colors[2].
You must ensure that participating colors in a design don’t strain users’ eyes.

This is an example of bad contrast using complementary colors:

Bad contrast example
Image Source[1]
An example of good contrast using different shades of the same colors used in the above example:

Effective contrast example

A quick way to know if your design has optimum contrast is by looking at its grayscale version[3].
This can be easily done by using any popular image editing tool, e.g. Adobe Photoshop.

Here’s a sample:

Contrast as seen better in grayscale


Contrast can be maintained between discrete elements — especially text — using a difference in their sizes.

To draw users’ attention towards a certain element, keep its size significantly larger than the surrounding elements.

Below is an example:

Contrast in size

Incidentally, we, at VWO, realized that the text on our blog was lacking contrast at some areas. Specifically, the h4 text and the paragraph text didn’t have much size contrast. Take a look:

Example of low contrast in size

We soon changed the font size and style of our heading tags, giving them better contrast against the paragraph text, as well as between themselves. Here’s how it looks now:

Example of contrast in font size
Contrast in size can also be effectively used in designing your call-to-action (CTA) buttons. A large-sized CTA can attract appreciable attention from users.

Here’s a CTA button that is rather large in size compared to its complementary text in the left:

Large-sized CTA


Contrast in shapes of elements, too, helps you guide users’ attention and break monotony in a design.

Contrast in shape can be as basic as adding round corners to your quadrilateral elements, or as extreme as using circular elements together with square ones.

Infographics, particularly, use contrast in shape to good effect. They incorporate elements with dissimilar shapes to illustrate information of disparate nature.

Below is an example:

Infographic example

Repetition is how you maintain consistency in a design. It helps users familiarize with the way information is presented to them.

For instance, bullet lists use repetition of circular dots to present information. The repetition of dots help readers scan and read the list quickly.

Additionally, the repetition of elements is what gives an identity to a design.

Repetition can be practiced with the color, shape, texture, size, and other attributes of the elements in a design.

Let’s take an example of a badly designed website: “Uglytub.com”.

Website with no repetition in design
Although the above website has a lot issues with its design, we’ll stick to talking about the lack of repetition.

The website uses at least 4 different font types, all of which have different sizes. The color of the different text elements, too, is not consistent. The images used are of different styles, ranging from real-life pictures to stock images to a sketch. Now, it goes without saying that putting repetition (or consistency) to these website elements will help in improving the user experience.

There are various websites across the internet that have similar content  as the above example. They are constituted majorly of plain text content and a few images. However, repetition in their design makes them much more comprehensible. Take a look at the below example:

Website With Repetition In Design

The above website, too, contains just plain text and a few images. However, with the repetition of font type, font size, font color, and the style of the images, the website design looks neat and easy-to-read.

Companies build their brand using repetition of design attributes across their physical and digital presence. They use a predefined set of colors, fonts, and rules of application that gives consistency to their appearance across multiple channels. Repetition is responsible in making users recall a brand.

Take a look at the presentation deck below:

Presentation slides deck illustration repetition in design
Image Source[2]
The slides convey a repetition of a set of colors, and the style of text and images. This helps users identify each slide as a part of a bigger whole (or a brand).


Alignment dictates the way every element is placed in a design.

Alignment is a concept that advocates organizing information to create order.

With alignment, no element in a design is positioned arbitrarily. Each element visually connects to other elements, leading to cohesiveness in a design.

The two basic kinds of alignment are edge alignment and center alignment[4].

“Edge alignment naturally positions elements against a margin that matches up with their outer edges.”

Edge Alignment

“Center alignment places design elements so that they line up with one another on their center axes.”

Center Alignment

For text, different styles of alignment are: left, right centered, and justified. Left and right alignment are the most common among them.

Centered alignment can work when there is not a great amount of text. (But, the same style when applied to a big chunk of text can prove to be difficult to read.)

Example Center Alignment in text

Justification works fine when the text has long line-length, small font size, and shorter words. Narrow columns and long words can pose readability issues with justification.

Ineffective justification in text

The following example shows how proper alignment can improve user experience a great deal.

Steven Bradley tried to improve a sample web page that had improper alignment. Here’s the original page:

Website with bad alignment

And here’s the same page with a robust alignment:

Website with alignment

Notice how Steven worked on the logo, too. He aligned the text and the icon in the logo.

Logo given a proper alignment

The new logo also features repetition with two longer lines of text (instead of three disparate sized lines).


The principle of proximity states that elements that are associated with each other should be placed closely (grouped together), and vice versa.

The application of proximity, especially in web design, can lead to better user experience.

An amateur designer might try to utilize the complete real estate of a design, trying to spread elements evenly throughout. Such a design will make it difficult for users to determine elements that are related to each other (and those which are not), resulting in poor user experience.

Here is a simple example:

The Principle of Proximity - Example
Image Source[3]
While both the cards above contain the same information, the way it’s presented is different. The information on the card on the left has been distributed evenly. But, the card on the right has the information placed with better structure; the related information points have been grouped together.

You can notice the law of proximity applied to our own blog. Take a look at this screenshot from one of our previous posts: Law of Proximity used in the VWO Blog

It’s clear how the heading is closely attached to its descriptive paragraph. Further, there is a noticeable gap between the two blocks of text, indicating a dissociation.
WebDesignerDepot says[5], “A website that uses proximity in its architecture and design does not overwhelm the user with information.”

WebDesignerDepot also gives an interesting comparison of two news websites: Los Angeles Times and the Globe and Mail.

It highlights, using the below screenshot, that the LA Times effectively employs the law of proximity. The header, the sections of information, and the ad space have sufficient gap between themselves, giving readers a pleasant reading experience.

Law of Proximity used in LA TImes

In contrast to LA Times, the Globe and Mail looks cluttered. This is mainly because there is not enough differentiation between the different information blocks. For instance, the two ads appearing on the top of the page negate the effect whitespace has in making the website logo prominent. It’s difficult to keep track on information on this web page.

Law of Proximity not emplyed in the Globe and Mail

Wrapping Up

Putting together these four design principles can drastically improve the quality of design. Use these principles as a checklist to ensure that your design offers a great user experience.

Have anything to add to the post? Write to us at marketing@vwo.com

More from VWO on Usability Testing
How To Do User Research To Supercharge Your Optimization Efforts

How To Do User Research To Supercharge Your Optimization Efforts

What Is User Research? Usability.gov defines user research as “understanding user behaviour, needs, and motivations…

Read More
Emma Travis

Emma Travis

9 Min Read
8 Ways to Refine eCommerce Site Search and Navigation for Quick Product Finds

8 Ways to Refine eCommerce Site Search and Navigation for Quick Product Finds

If they can’t find it, they can’t buy it. It’s as simple as that. No…

Read More
Smriti Chawla

Smriti Chawla

8 Min Read
Sort and Measure Method: How To Do User Research from Product Reviews for eCommerce A/B Tests

Sort and Measure Method: How To Do User Research from Product Reviews for eCommerce A/B Tests

 Note: This is a guest article written by Devesh Khanal, Founder of Growthrock.co. Any and…

Read More
Devesh Khanal

Devesh Khanal

9 Min Read
Shanaz Khan from VWO

Hi, I am Shanaz from the VWO Research Desk.

Join our community of 10,000+ Marketing, Product & UX Folks today & never miss the latest from the world of experience optimization.

A value for this field is required.

Thank you!

Check your inbox for the confirmation mail