{"id":36253,"date":"2016-03-17T15:28:27","date_gmt":"2016-03-17T15:28:27","guid":{"rendered":"https:\/\/vwo.com\/blog\/?p=36253"},"modified":"2025-04-17T13:35:10","modified_gmt":"2025-04-17T08:05:10","slug":"crap-design-principles","status":"publish","type":"post","link":"https:\/\/vwo.com\/blog\/crap-design-principles\/","title":{"rendered":"How to Use C.R.A.P. Design links with Principles for Better UX?"},"content":{"rendered":"\n

You know a good (or a bad) design when you see one!<\/p>\n\n\n\n

However, you cannot always objectively point out the qualities (or the flaws) in the design, especially if you\u2019re not a designer.<\/p>\n\n\n\n

As marketers or front-end developers, you might often find it challenging to come up with designs that effectively engage your target audience and nudge them to take the desired action. <\/p>\n\n\n\n

Download Free: Website Redesign Guide<\/span><\/a><\/em><\/h2>\n\n\n\n

What might help here is a thorough understanding of CRAP<\/strong>. C.R.A.P., a design principle developed by Robin Patricia Williams, stands for C<\/strong>ontrast, R<\/strong>epetition, A<\/strong>lignment, and P<\/strong>roximity.<\/p>\n\n\n\n

By leveraging CRAP, you can consistently deliver effective designs, whether it\u2019s for a website, a landing page<\/a>, a checkout page<\/a>, an eBook, or just a banner ad.<\/p>\n\n\n\n

These design practices<\/a>, when applied together, more often than not lead to brilliant designs that delight users and get them clicking. <\/p>\n\n\n\n

This post elaborates on each of the CRAP principles to help you understand what goes behind crafting engaging designs that improve your UX and conversion rates<\/a>. <\/p>\n\n\n\n

However, you cannot always objectively point out the qualities (or flaws) in design, especially if you\u2019re not a designer.<\/p>\n\n\n\n

Even as marketers or front-end developers, you might often find it challenging to come up with designs that effectively engage your target audience and nudge them to take the desired action. <\/p>\n\n\n\n

What might help here is a thorough understanding of CRAP<\/strong>. C.R.A.P., a design principle developed by Robin Patricia Williams, stands for C<\/strong>ontrast, R<\/strong>epetition, A<\/strong>lignment, and P<\/strong>roximity.<\/p>\n\n\n\n

By understanding CRAP, you can consistently deliver effective design, whether it\u2019s for a website, a landing page, an eBook, or just a banner ad.<\/p>\n\n\n\n

The four design practices<\/a>, when applied together, more often than not lead to brilliant designs that delight users and get them clicking. <\/p>\n\n\n\n

This post elaborates on each of the CRAP principles to help you understand what goes behind crafting engaging designs that improve your UX and conversion rates<\/a>. <\/p>\n\n\n

Mastering CRAP: the design principles that elevate UX & conversions<\/h2>\n\n

Contrast<\/strong><\/h3>\n\n\n

Contrast is all about making distinct elements stand out and is used to drive a user\u2019s attention to specific elements in a design. It is defined as \u201cthe state of being strikingly different from something else in juxtaposition or close associatio<\/em>n\u201d<\/p>\n\n\n\n

For a layman, contrast may just be limited to black and white (or a similar combination of other colors). But, there is much more to contrast. Besides differentiated colors, contrast can be established using different element types, shapes, sizes, and so much more.<\/p>\n\n\n\n

Here\u2019s how you can create contrast in a design:<\/p>\n\n\n\n

Color<\/h4>\n\n\n\n

Color contrast is one of the most fundamental design principles that most of us are familiar with. Even so, its application can still prove to be tricky in some cases. <\/p>\n\n\n\n

This contrast can be established using a combination of colors<\/a> that lie opposite each other on a color wheel.<\/p>\n\n\n

\n
\"RGB
Image source: study.com<\/a>
<\/figcaption><\/figure>\n<\/div>\n\n\n

As a thumb-rule, high contrast is required between the text and the background colors. However, having contrasting colors for multiple elements can make a design look messy sometimes. <\/p>\n\n\n\n

Moreover, contrast is not just about using complementary colors but you must also ensure that participating colors in a design don\u2019t strain users\u2019 eyes.<\/p>\n\n\n\n

Below is an example of bad contrast using complementary colors:<\/p>\n\n\n

\n
\"Bad
Image source: plural sight<\/a>
<\/figcaption><\/figure>\n<\/div>\n\n\n

Below is an example of good contrast using different shades of the same colors used in the above example:<\/p>\n\n\n\n

\"Effective
Image source: plural sight<\/a>
<\/figcaption><\/figure>\n\n\n\n

A quick way to know if your design has optimum contrast is by looking at its grayscale version.<\/p>\n\n\n\n

This can be easily done by using any popular image editing tool. <\/p>\n\n\n\n

Here\u2019s a sample:<\/p>\n\n\n

\n
\"Contrast
Image source: slideplayer<\/a>
<\/figcaption><\/figure>\n<\/div>\n\n\n

White Card Courses used VWO to test their home page color scheme and hypothesized that having contrasting colors for important page elements such as the header, hero message, and the CTA button<\/a> would help in effectively directing visitors\u2019 attention to each of them. <\/p>\n\n\n\n

Take a look at the control and variation from the A\/B test<\/a>: <\/p>\n\n\n\n

\"White<\/figure>\n\n\n\n

As a result, the variation successfully beat the control by recording a 32% increase in visits to the payment page from the home page, and a 20.9% increase in clicks<\/a> on the payment page. <\/p>\n\n\n\n

Among other factors that played an important role in this experiment (including tweaking messaging and adding trust badges), contrast had a pivotal impact on the page\u2019s performance.<\/p>\n\n\n\n

Upon analyzing the results, the team figured that the use of similar color schemes for all three critical homepage elements was causing a barrier in grabbing visitors\u2019 attention towards each of them specifically.<\/p>\n\n\n\n

Upon using a contrast of colors, not only was this barrier done away with, the three sections got their identities that demanded attention as soon as someone landed on the page. <\/p>\n\n\n\n

Size<\/h4>\n\n\n\n

Contrast can be maintained between discrete elements, especially text, using different sizes.<\/p>\n\n\n\n

To draw users\u2019 attention towards a certain element, keep its size significantly larger than the surrounding elements.<\/p>\n\n\n\n

Below is an example:<\/p>\n\n\n

\n
\"Contrast
Image source: 3.7designs<\/a>
<\/figcaption><\/figure>\n<\/div>\n\n\n

Incidentally, we, at VWO, realized that the text on our blog was lacking contrast in some areas. Specifically, the h4<\/strong> text and the paragraph <\/strong>text didn\u2019t have much size contrast. Take a look:<\/p>\n\n\n

\n
\"Vwo<\/figure>\n<\/div>\n\n\n

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.<\/p>\n\n\n\n

Here\u2019s how it looks now:<\/p>\n\n\n

\n
\"Vwo<\/figure>\n<\/div>\n\n\n

The contrast in size can also be effectively used in designing your call-to-action (CTA)<\/a> buttons. A large-sized CTA can attract appreciable attention from users.<\/p>\n\n\n\n

Here\u2019s a CTA button that is rather large in size compared to its complementary text below:<\/p>\n\n\n

\n
\"CTA
Image source: YETI
<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

Shape<\/h4>\n\n\n\n

Contrast in shapes of elements helps you guide users\u2019 attention and break the monotony in a design.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Infographics<\/a>, particularly, use contrast in shape to good effect. They incorporate elements with dissimilar shapes to illustrate information.<\/p>\n\n\n\n

Here’s what Conversion Scientist Brian Massey has to say about the role of data-backed design in CRO.<\/p>\n\n\n\n

\n
<\/div>