Mason Weis

Archived Blog

CRAP — Part 4 Proximity

And here we are... the final principle. The "P" in CRAP… Proximity. If you haven’t read my other CRAP posts, I definitely recommend giving them a read before we begin (you can find those posts here, here and here).

Okay, so what is proximity and what does it do for us in design? Essentially, when we’re considering proximity in our designs, we’re considering which elements we group together or put near one another. And why would we want to consider that you might ask? Well, think about this…

We have three elements we need to incorporate into a poster design. Let’s call them A, B and C. If we group A and B together, but put C somewhere else in our layout, the human brain is more than likely to form a connection between A and B while C will be considered its own separate thing. By adhering to the “rules” of proximity, we as designers are helping our viewers understand which aspects of our design are related to one another.

Maybe it’ll help if I stop rambling though and just get to the examples. Today, let’s look at some web design.

http://www.johos.at/#/en/0/0

http://www.johos.at/#/en/0/0

How about this homepage for JOHO’s Bean. This page oozes great design for a multitude of reasons. Most importantly, it follows every aspect of CRAP to its fullest. The contrast, repetition and alignment are all very strong. Take a look and see if you can spot those for yourself.

Back on the topic of proximity though… Take a look at the layout of the web page itself. What have we got here? I personally count 4 distinct “groups.” Let’s break some of them down.

The first group that catches my eye is the “logo” and the associated text that goes with it. Notice how these elements float off on their own. They don’t blend into any of the other elements on the page. It seems pretty difficult to imagine that anyone viewing this web page would confuse any aspect of this group with another. For example, it’s not at the bottom near the sound/language settings so why would it be associated with either of those? (One could argue that the text itself differentiates these two elements, but a good practice would be to design things in a way that ensures people don’t have to put extra effort into understanding your work). Additionally, we know that these elements go together because they’re positioned next to one another. If the elements here were spread out, there’d be no order. And as a viewer, you wouldn’t know that they were related to one another.

The same rings true for the site’s navigation menu (our second group). Notice that these separate diamond shaped buttons are placed very close together as individuals, but as a group, they're pretty isolated. They’re not too close to any other element on the page. They’re their own thing. This, coupled with the repetition in shape, really emphasizes the fact that these elements go together and help viewers know this at a near instinctual level.

By now you should notice that the concept of proximity is a fairly simple one to understand after a basic explanation. While I could go on and on about the additional groups, I’ll turn the question to you, the reader. What are the other two groups on the page? Why are they placed together? Is it effective?

Proximity is a very basic concept, but like every other CRAP principle, it’s incredibly important in building a proper design foundation. While the CRAP principles as a whole aren’t hard rules, keeping them in the back of your mind can and will make your designs stronger (with enough experience and practice of course). They most likely won’t revolutionize your design skills overnight, but hopefully these principles can serve as a nice guide for anyone trying to start designing things.

Before I go I’ll leave you with some more examples, as per usual:

http://taostudiodesign.com  Look for the groups here. What's related? What's its own thing?

http://taostudiodesign.com

Look for the groups here. What's related? What's its own thing?

http://www.alexafalcone.com  What about this one? Consider the navigational menu, for example. They're so far apart!

http://www.alexafalcone.com

What about this one? Consider the navigational menu, for example. They're so far apart!

http://www.theartsourceinc.com  How about something with a little less in the way of images? What are the groups? What  makes  them their own groups?

http://www.theartsourceinc.com

How about something with a little less in the way of images? What are the groups? What makes them their own groups?

 

Welp! That’s the end of my CRAP series. I hope to return to more “regular” blogging next week since I know I’ve been a bit flaky. Expect a “Weekly Inspiration” post for sure within the next week… and maybe more. Who knows?

 

Until next time!

Mason Weis