Application of Contrast, Alignment, Repetition, and Proximity (CARP) in UI UX Design
Today I am enthusiastic about build my branding as a professional UX designer. Then, when I read an excerpt from the book “Petunjuk Memulai UX dari Nol” (“Guidelines for starting UX from Nol”) written by Wasil (2023), the contents were more or less like this:
According to him, initially to become a professional UX designer, we must be able to build stunning micro-animations on the products we design. But the facts don’t say that. If there are stunning micro animations but they are not balanced with the fulfillment of design principles in the products we design, then everything we have created will be in vain. Because professional UX designers prioritize fulfilling design principles such as Contrast, Alignment, Repetition, and Proximity as well as fulfilling visual elements such as typography and color rather than emphasizing complex micro-interactions.
The principal design consisting of Contrast, Alignment, Repetition, and Proximity is generally known as CARP, which is an abbreviation of these names. There is no need to rush to create stunning micro animation on the product we design, first fulfill the 4 design principals above. Because the goal of visual design is to make a web page or application look pleasing to the eye when displayed on the screen, and by fulfilling CARP, we have achieved what our main goal was.
Contrast
The simplest definition of contrast is a striking difference between one object and another object. The main goal is to create a hierarchy between objects. So the user can know quickly and without thinking too much which object the user should focus on, so that it can guide the users to complete the task more easily.
To create contrast in an object, designers can arrange several visual elements such as color, pattern, size and shape that are different from other objects around them.
The following are the main functions of contrast:
- Create a focal point on a web page or application
- Presents dominant content on a web page or application.
- Create a hierarchy on a web page or application that has many contents.
- Reduce errors or potential errors from users.
Quoted from an article written by Priyadma (2020), to find out whether the contrast level we are using is good or not, we can edit the content to black and white. If the content we create is still difficult to read, then the contrast we use is still not optimal, and vice versa.
Alignments
Alignment is one of the design principles that must be fulfilled when designing a digital product, especially products that have a lot of article content.
The following are the main functions of alignments:
- Alignment plays an important role in arranging the placement of content on a product page so that the content displayed looks neater, cleaner, more sophisticated and fresher.
- Apart from being useful from an aesthetic perspective, alignment can also increase value from a user experience perspective, because by implementing alignment on a product page, users will more easily understand each content displayed.
- The existence of alignment can also make it easier for designers to determine which content is interconnected and how the content is hierarchically related to other content, so that designers cannot simply place content on a digital page.
Repetition
The application of repetition in the process of designing a product page aims to maintain design consistency. Repetition in the design process can be applied to the consistent use of aspects of typography, size, color, shape, spatial relationships, etc. So by applying repetition to the product we design, users can find out which content is related to each other and what level of hierarchy one content has with other content. Apart from that, repetition can also be used as a visual signal to the user that the user is still on the same product.
Proximity
The purpose of applying proximity in the process of designing a product page is to group related content. So related content is placed in the same place and close to each other. The higher the level of connection between content, the closer the placement of the two contents.
The following are the main functions of proximity:
- Make it easier for users to understand the contents that displayed on the product page that has a lot of content.
- Product pages will look neater, structured and clearer.
- Can improve the organization of the content on a product page.
- Related content will appear to be a cohesive group.
The CARP design principle is the simplest design principle and must be fulfilled when a designer designs a product. The main aim of applying these 4 design principles is to make a web page or application look pleasing to the eye when displayed on the screen. Besides that, applying CARP is also can make it easier for users to use the products that we design.
The easier for users to use our product, the higher level of satisfaction, efficiency and effectiveness of our product design. This means, the user experience that we provide on our product is great.
But we should remember, designing a product is an iterative process, there are always changes from the first design to the next design, so the application of CARP to our design will also definitely change until we get the most suitable design to be applied to the product we design.
The more repetitions, it means the more feedback we get, so the better design we produce.
Source:
Travis, David. 2023. https://www.udemy.com/course/ultimate-guide-to-ux/
Wasil. 2023. Petunjuk memulai UX dari O. https://www.halodesigners.com/petunjuk-ux
Priyadma, Ryan Handi. 2020. https://medium.com/belajar-desain/mendesain-lebih-baik-dengan-metode-c-r-a-p-e7d971db311d
