Page Contents
Why would anyone want to use CRAP design principles? If it’s the first time you’ve heard of it, I know what you’re thinking, but don’t be fooled by its name.
CRAP is actually a set of graphic design principles described by Robin Patricia Williams in her book, The Non-Designer’s Design Book.
An effective visual design is one that captures the viewers’ attention in the first few seconds. These simple but essential principles help you create more eye-catching graphic designs that also look more professional.
In this blog post, I’ll explain each CRAP design principle and then show you how to use them to elevate your UX design. So, let’s march on and see what CRAP design is all about.
Want to know more about how to create a better UX design? Read articles about UX.
What Are the Four CRAP Design Principles?
CRAP stands for contrast, repetition, alignment, and proximity. These are the essential principles that each graphic designer should be aware of when creating effective visual designs.
Here is a brief introduction to each of these visual design principles:
1- Contrast: Contrast draws viewers’ attention to your design. Without contrast, your design would lack visual interest, and it wouldn’t lead the viewers’ eyes.
To the average person, contrast may only mean black and white, but there’s a lot more to contrast here. Aside from distinct colors, contrast may be achieved by a variety of element types, forms, and sizes, among other things. These are all included in the CRAP principles that you must consider in your designs.
There are different types of contrast, including:
Color
Size
- Font
- Shape
2- Repetition: Repetition gives your design consistency. It’s essential to repeat some aspects of your design to create a cohesive look. Repetitive elements can be:
- Fonts
- Images
- Colors
- Icons
- Page layout
See how McDonald’s website uses the color yellow and red as repetitive elements.
3- Alignment: Alignment establishes a visual connection between the elements of a design. You must avoid placing the elements arbitrarily for a clean and clear design. Always make sure everything lines up in your layout to show order and eliminate distractions.
4- Proximity: In graphic design, proximity means placing related items closer to each other. This principle helps the viewer recognize the relationship between objects more easily. So, place connected elements in closer proximity and separate the unrelated ones.
Imagine we have an inexperienced designer who doesn’t know about CRAP principles. They may attempt to utilize all of a design’s space by uniformly distributing items. This way, users will have a tough time determining which items are related to one another (and which are not), resulting in a poor user experience.
See how the sections on a resume are spaced apart.
Image credits: Canva.com
How to Use CRAP Design Principles to Create a Better User Experience?
Now that you know the CRAP design principles, it’s time to see how to use them to improve your UX design. I’ll show you how each principle can help you enhance your website’s user experience.
Related Article: These Website Layouts Are UX-Friendly and Bring Conversion
1- Using Contrast
Contrast helps the viewer differentiate between the various elements of a graphic design. It’s also a way to make important elements stand out. So, when designing your landing page, for example, use contrast to make essential elements, such as the CTA button, headline, and hero message, more attractive.
Below is an example of color contrast. You can see how Slack uses yellow in its hero message to make it more noticeable on a purple background.
With this principle, you can drive users’ attention to important elements more effectively, and it helps them easily understand what actions they have to take. Therefore, your web pages’ performance will increase.
2- Using Repetition
Repetition increases your website’s usability and makes everything easier to understand. For instance, the repetition of bullet points on bulleted lists makes a blog post more readable.
Repetition helps website visitors better understand what’s going on and how they should interact with specific elements. Imagine visiting an eCommerce website in which the “Add To Cart” button has a different shape on each product page. Wouldn’t it be confusing? On the other hand, by designing consistent buttons, users will clearly know how to behave towards them.
Here is an example of a website, Bellads.info, that doesn’t apply the repetition principle. I know it has a whole lot of other problems, but it obviously lacks repetition. Nothing seems consistent at all.
Repetition also gives users a sense of recognition. Many brands use this principle as part of building their identity. For example, they include their logo on every page of their website in the same place and use specific color schemes.
3- Using Alignment
Alignment helps you organize the information on your web pages and makes them look cleaner. Properly aligned web pages let users interact with them more easily.
When designing your website, align the texts in a way to make them easier to read and understand.
Compare the text alignment on the two websites below. The first one, Cloud 9 Walkers, uses centered alignment, which doesn’t seem the right choice in this case. The text looks messy, and you can see it impacts readability negatively.
Now let’s take a look at Bookouture. See how the left alignment has made the text more appealing.
4- Using Proximity
Proximity structures your web pages. It helps users identify which elements are related to each other so they don’t need to spend time figuring out how elements are related. They would also find what they are looking for more quickly.
For example, on a shopping cart page, designers group the information related to each product together and separate the different products with whitespaces. This way, customers can review the selected items before purchasing with no trouble.
How to Know If Your UX Design Is Working Out Using CRAP Design Principles?
So, you have put CRAP design principles into practice. But you might be wondering how will you know if your efforts are paying off.
A website visitor tracking tool, such as WatchThemLive, can help you track your website’s user experience. This tool offers useful features like heat maps that show you how people are interacting with your website. Let’s see how to measure the success of your UX design with heatmaps.
By setting up heat maps on your web pages, you can track user behavior and learn how effective your user experience is. WTL heat map feature provides you with accurate data about visitors’ clicking activity. You can see how much people are engaging with the CTA buttons. If they are not getting enough clicks, maybe they need more contrast.
When you know how people interact with each element, you can find out what needs improvement on your website design to improve user experience.
Want to optimize your UX design with WatchThemLive heatmaps? Sign up now and get your free trial!
Conclusion
CRAP design principles are simple graphic design rules. However, they will have a game-changing impact on your website’s performance if used correctly.
Make sure to put these principles into action to make your website more professional and user-friendly. And always remember to measure your user experience to see how successful your design is.
