Gautam Gupta

C.R.A.P. Design Principles to Improve Visual Appeal

It is said that design, like art, is a personal choice. What I may like in a painting, a web page or a mobile app design, you may not like.

Design for me is a personal interpretation of lines, space, color and content.

However, it may be possible to apply a few broad design principles to immediately increase the visual appeal of a design.

Lets take a look at the C.R.A.P Principles, namely Contrast, Repetition, Alignment and Proximity.

Principle of Proximity

The principle of proximity states that related information or items should be grouped together to indicate a relationship. And unrelated items should be separated.

This helps provide structure to the information being presented, thus making it easier for the viewer to recognize relationships between elements and focus on related groups.

Here are a couple of examples.

Principle of Proximity

In the example above, we have list of superheroes and the teams that they belong to. The first list is a simple listing of all teams and their superheroes, and even though the team names are bold, it still take a little time for a viewer to understand the list’s contents.

In the second list we have separated the teams with a line break and also italicized the team names, and now we can instantly make out that there are three separate groups of superheroes in three different teams.

The third list just has some additional indentation for the team members, but again it is an important visual clue which separates the team name with the team members.

There are additional principles at work here – the alignment of the team member lists due to indentation, indicating that they are similar information elements and repetition of the style for the team names which again indicates their similarity in terms of type of information. We will read about these two principles below as well.

For all the programmers out there, if you’re reading someone else’s code, would’nt you prefer the spacing and alignment used in the right-most list?

The next example is about the famous detective, Sherlock Holmes.

Principle of Proximity

Here’s what Sherlock’s business card might look like.

So which card layout would you prefer?

The one on the left looks alright, the information is evenly spaced out, and all the real estate space available on the card has been fully utilized. However, isn’t it hard for the viewer’s eyes to keep jumping around all over the card to take in all the information that is provided.

Whereas in the second layout, the information flow reads like – Who’s business card is this?, What does he do?, How do we contact him? The person’s name and occupation, and his contact details are forming logical groups of information as well.

Isn’t the second card easier to read due to the Principle of Proximity?

Alignment

The principle of alignment states that every item on the page should have a visual connection with one or more items in the design. Even if the connection is through an invisible line.

In our last example, Sherlock’s card on the right is not really following the principle of alignment. The name and occupation is not really lining up or connecting with the contact details. What if we line them up;

Principle of Alignment

Now the elements on the card have an even stronger visual connection, even if it is by an invisible alignment line, although I have made this line visible here.

If an item in the design is not visually connected with the other items, it becomes the odd one out, and might get distracting as the viewer’s eyes will keep trying to figure out why this particular item does not connect with the others. Is there something special about it, which the viewer is not able to understand.

In the above example, some people also prefer the card on the right which is right-aligned compared to the center-aligned one, as right-aligned items are also lining up with the right edge of the card. The right edge gives more strength to the content and alignment compared to the content in the center which has “soft” edges on the side.

Another place where the Principle of Alignment proves itself is the Grid System for web pages.

Principle of Alignment

No guesses, which one of these layouts would be more easy on the eye.

Its not as if the principle of alignment can never be broken, however there should be a very strong reason for breaking alignment, maybe for e.g. one wants to attract attention to a particular item, so it needs to stand out by being out of alignment with the other items.

Repetition

This principle encourages designers to repeat certain element of the design to bring in consistency and familiarity for the user.

The repetitive element could be as simple as the font formatting for the headers and paragraphs, colors used, style of bullets, margins, spacing, etc. Anything which makes the entire document or design look cohesive and consistent.

For a simple example, please take a look at the Superheroes list below.

Principle of Repitition

Using my previous example, I’ve added a few UI embellishments. Please bear with my limited designing capabilities, as I’m actually a non-designer learning about design. 🙂

I’ve added a blue bar on the top, which serves a header; and have repeated the blue bar at the bottom as a footer, even though its is thinner but still is able to add consistency in the design.

I’ve added a yellow star icon which indicates the team leader for the team of superheroes. The same icon is repeated for all teams.

There is a page number added in the bottom right corner, which will continue to be repeated in the same place for subsequent pages, again for consisitency.

I’ve also used the colors Blue, Red and White in this list as all the superhero characters were created in North America, and these colors are there in their flag.

Lets look at some more examples. Here are two screenshots from the Stackoverflow website, of the home page and of the question and answer page.

Principle of Repitition

On the Stackoverflow home page, see the Top Questions section with:

  1. Statistics on the current Votes, Answers and Views neatly laid out on the left
  2. Tags for each question indicating the topics and categories
  3. Last updated info for the question with user details

On the question and answer page below, most of the design and layout elements are repeated.

Principle of Repitition

Items repeated include:

  • The entire header and top menus are repeated as is
  • Job and related questions section on the right are repeated
  • Statistics related to the question are repeated and even more details are provided
  • For all answers user details are repeated each time

As a last example, imagine if the playing uniform colors of a football team member were not repeated for each member? If every team member was wearing different colors? It would be chaos on the field, people would be passing the ball to rival team members by mistake. 🙂

Principle of Repitition

Which is why its so important to have consistency in a design, to avoid any confusion or chaos.

Contrast

By using the principle of Contrast, one tries to ensure that a design is able to attract the attention of a viewer. The viewer must find some element of the design interesting enough to view the design in detail or basically go through it.

Contrast can be created by using opposites like large fonts with small font sizes, opposing colors, thin lines with thick lines, opposing textures, etc. Any opposing element which draws attention.

Here’s the same Sherlock’s card with his name bigger and bolder:

Principle of Contrast

Does the larger name draw your attention? Or is the next example better –

Principle of Contrast

Doesn’t the second version look better due to its higher contrast?

Here’s an example of an old iPod print ad by Apple which has high contrast opposing colors.

Principle of Contrast

Note how one can immediately make out two simple things, the iPod and how the user is enjoying using it. And also there aren’t any other details which distract attention.

The last example for contrast I would like to show is about how text editors and code IDEs these days support Low Contrast and High Contrast themes. Although this may not be directly related to design, but it shows why contrast is important and another of the many ways it is used.

Heres’ a popular high contrast theme called Vibrant Ink.

Principle of Contrast

And here’s a low contrast one called Solarised Dark.

Principle of Contrast

Both are dark themes, however the low contrast theme puts less strain on your eyes and is usually recommended to be used at night, and high contrast themes are recommended during the day.

That about wraps up the introduction to these basic principles of design, hope it has been informative for some of you, like it had been for me.

References

  1. The Non-Designer’s Design Book, by Robin Williams. The idea of the visiting card for examples has been taken from this book, along with the first couple of examples.
  2. The editor theme screenshots have been taken from http://studiostyl.es/
 

Related Articles

#Design

Make it Easy to Scan Your Pages

Nobody is going to spend more time on your site if your data is not relevant and scanable, and if the user is unable to finding the information he is looking for, he would move to another site What we can do: We... Read more
#Design

Why Scrolling is Better than Paging

These days, everyone wants to see information or content with as little 'clicks' as possible So, we should design websites in a way so that users can scroll down to see the content without having to click too often The... Read more