C.R.A.P.
We know a good design when we see one. However, it's not easy to objectively point out the qualities in a design. This is especially true when you're not a designer. Marketers and developers often find it challenging to come up with designs that work. To do that end, we may need an understanding of CRAP. CRAP, a design principle given by Robin Patricia Williams, stands for Contrast, Repetition, Alignment, and Proximity. By knowing CRAP, we can consistently produce effective design, whether it's for a website, an app, or anything else.
Contrast
Contrast is all about making distinct elements stand out. Contrast is used to guide a user's attention to specific elements in a design. For a layman, contrast may just be limited to black and white, or a similar combination of other color). But, there is more to contrast than that. Besides differentiated colors, contrast can be established using different element types, shape, size, and more. 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. 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. Contrast can be maintained between discrete elements, especially text, by using a difference in their sizes. To draw users’ attention towards a certain element, keep its size significantly larger than the surrounding elements. Contrast in shapes of elements, too, helps guide users' attention and break monotony in a design. Contrast in shape can be as basic as adding round corners to your rectangular elements, or as extreme as using circular elements together with square ones.
Repetition
Repetition is how we maintain consistency in a design. It helps users familiarize with the way information is presented to them. For example, bullet lists use repetition of circular dots to present information. The repetition of dots help readers scan and read the list quickly. 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.
Alignment
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. Edge alignment naturally positions elements against a margin that matches up with their outer edges. Center alignment places design elements so that they line up with one another on their center axes. Centered alignment can work when there isn't a lot of text. Justification works when the text has long line-length, small font size, and shorter words. Narrow columns and long words can pose readability issues with justification.
Proximity
The principle of proximity states that elements that are associated with each other should be grouped together, and vice versa. Applying proximity, especially in web design, can lead to better user experience.
Putting together these four design principles can improve the quality of a design. Use these principles as a checklist to ensure that your design offers a great user experience.