CRAP Robin Patricia Williams, the legendary educator , author and overall intellectual badass, proposed a system of fundamentals so that you could analyse your own design and find where you could fix it.

Here is an excerpt from the book where she tells you why .

"Many years ago I received a tree identification book for Christmas. I was at my parents' home, and after all the gifts had been opened I decided to go out and identify the trees in the neighbor-hood. Before I went out, I read through part of the book. The first tree in the book was the Joshua tree because it only took two clues to identify it. Now the Joshua tree is a really weird-looking tree and I looked at that picture and said to myself, "Oh, we don't have that kind of tree in Northern California. That is a weird-looking tree. I would know if I saw that tree, and I've never seen one before:

So I took my book and went outside. My parents lived in a cul-de-sac of six homes. Four of those homes had Joshua trees in the front yard. I had lived in that house for thirteen years, and I had never seen a Joshua tree. I took a walk around the block, and there must have been a sale at the nursery when everyone was landscaping their new homes —at least 80 percent of the homes had Joshua trees in the front yards. And I had never seen one before! Once I was conscious of the tree—once I could name it—I saw it everywhere. Which is exactly my point: Once you can name something, you're conscious of it. You have power over it. You own it. You're in control"

Don't you want to be in control, you fellow miserable designer? Well , here we go. CRAP signifies 4 core heuristic principles for you to check your designs with. They are, Contrast, Repetition, Alignment, Proximity. Sounds familiar right? But have you thought of them together? If you use these principles to evaluate your designs, It leads to a better design more often than not. Lets get in to details

Contrast

Haven’t we all received an answer sheet from our teacher with a red ink underline all over ? Why did she do that? Well . Contrast. She increased the contrast between your right answers and wrong answers. Didn’t your eye just jump to those underlined parts? See? Again contrast. Increasing contrast between dissimilar elements is a foolproof way to communicate to the viewer that these elements are not about the same stuff.

Tip #1: In typography to maintain contrast, skip a font weight or double the font size . Look at the following examples and see.

Tip #2: In colors, using opposing colors from the color wheel is a good thumb rule. But to really check if those colors work, make your design grayscale and see if the contrast you wanted is there.

Tip #3: Count the points of contrast. More differences, more contrast. Make sure that the contrasting elements have at least more than one point of contrast. Look at the following example. The first two sets have one point of contrast. The third set has two points of contrast.

Repetition

Repetition means familiarity. Most of the comfortable parts of our lives are repetitions or familiar. We go back to home because it is familiar, or repetitive. It is not an error but a comfort. Knowing everything about what they are , where they are, who they are. This simple analogy applies to UI design as well. Once you have sold a part of the UI design to the user, use that for anything similar. It is familiar and thus more friendly. Use repetition where and only where you want to tell your user that they are similar. If not, bring contrast.

Tip #1 Repeat similar visual style to guide the eye. Amongst, contrasting elements, repeating visual styles would grab the users attention more effectively. Look at this stay detail page by Airbnb. Look how your eye wanders from the Title, to the type to the price. Even though the entire view has a lot more information in this, a similar typeface guides your eyes to the most relevant or sought after details.

Tip#2 If you are using shadows, think about all the shadows. As in, think about where the light is coming from. Make sure that all your shadows in the UI are made from a single light source. See ? repetition

Alignment

Haven't we all liked how and when parades marched together in unison and rhythm? Isn’t it much easier on your eyes than a crowd that is mingling within themselves infinitely? Alignment is the answer. By default, nature doesn’t care about alignment. Alignment is a conscious choice brought in by humans to their actions. It makes us notice choices, and also tells us that nothing is placed arbitrarily.

Tip #1 In some cases, top, bottom, left, right and center alignment is not the answer. You’ll often run into cases where elements are aligned perfectly, but do not appear to be due to the uneven distribution of visual weight of an element. In these cases you’ll have to use your eye and adjust the alignment according to what looks best. It's often called optical alignment.

Proximity

How do we read? How do we figure out from a potentially infinite array of letters, to form words and sentences. How do we know that they are the words that we are supposed to read? Proximity. We write in a way the letters that make up a word are in close proximity so that the reader knows how to read them.

Proximity tells us how to group elements to make sense of them rather than their individual sense. Proximity helps us separate visual elements or puts them together. It is a visual tool that we are subconsciously already familiar with.

Look at the example below. The two sets of information are given in the same view, even though there is no distinguishing separation other than spacing, we are so clear on which information belongs to which set.

Armed with these guidelines, you can go through your designs when you are unsure and see where you missed something. These principles will definitely tell you why your eye is twitching. But there is also another part. This is just a set of guidelines for you to check yourself with. These are not rules set in stone. You can break them when you want, but if you don't have a solid reason to break one, or more of these, your design will stick out like a sore thumb. Ie. When you break one of these rules, make sure that you have a solid good reason to do so. Are you ready to go CRAP with your design?

---