Oftentimes you can create a snappy design that just doesnt seem to work it looks nice and all, but theres something about it, something you just cant quite put your finger on, that stalls it dead in its tracks. Well explore four areas that may just solve the problem or at least help you get pointed in the right direction.
1. Contrast
If something has strong contrast, it means it stands out better from the page, or from other items on the page. In a nutshell, contrast works something like this:
As you can see illustrated above, the most common way to increase contrast is through colour (black on white works better than light grey on white, for example), through size, or through other treatments. But it can also be done visually by reducing the number of items that compete for attention and putting the primary focus on the main stuff although this might apply a bit more to websites or ad pages that have many items, or where the real estate is more valuable and more information is presented at one time.
It can also be applied to type treatments, the size of the item in question, and even something as small as line thicknesses.
A good rule of thumb is that if they are not the same, make them markedly different.
However, there should always be a measure of consistency with what contrasts you use for certain areas on the page simply, dont jumble up your contrasts to such an extreme that some content is harder to read or it hurts your viewers eyes, and keep contrasts the same (or very similar) in given sections of a page.
Contrast is key to differentiating among sections of your website, as illustrated:
2. Repetition
Repetition aids in the understanding of content (visual or written) through organization. Repeating these elements not only helps the viewer to understand their relationship to each other but also to the page as a whole (and subsequently understanding relative importance within the page) as well as its importance within the site. Knowing what importance to put on key areas helps the viewer organize the content in his mind.
Defining key elements through repetition makes the experience coherent and unified whether the experience is browsing your website, reading a brochure or looking at a business card.
For example, if we were to style all copy on the page at the same font size and weight, wed certainly have repetition but there would be no sense of importance on key areas. (see Contrast, above as well) Weve learned to style redundant items like navigation, footers, etc., to be a certain size and weight and other areas to be heavier, visually. This marked consistency in the former areas comforts the viewer by telling his brain that these items are unchanging and reliable (important for navigational elements) and the content can have his attention without needing to re-examine each page every time it loads. In this example, we use repetition to our benefit and it aids in navigation and understanding. It wouldnt work that way if every single item looked the same. (unless, of course, our site, by design, needs to be this way in which case we find other, more subtle ways to inform the viewer of primary and redundant areas) The greater the similarity between or among elements, (typically) the more gravity is given to subtleties, as shown below:
|
|
|
These subtleties would be lost on a busier, more graphically intense site but work well on these sites that are already a bit minimal to begin with. For example, on Amazon.com these subtleties in main navigation would be missed more often than not and that would result in a drop in sales volume and revenue for the company. Individual elements of good design, as illustrated, compliment itself as a whole.
Example
Notice how the Amazon index page breaks up information and content sections using good use repetition for each component or type of item:
3. Alignment
Each item or element on the page should not just be placed at random. This doesnt mean that every single item must be aligned with every thing else, or even aligned with something else but should contribute to the coherence of the whole. What youre looking for is a visual connection between or among the elements on the page.
Alignment can help increase an items visual weight on the page, and therefore the importance the viewer puts on it.
This can be used to increase contrast as well pull quotes are a great example of how bumping out of regular alignment can draw attention without throwing the users train of thought. By aligning more strictly most items on the page (or redundant items like navigation) and letting a main feature pop out of this alignment, we are contrasting that item with the others on the page, and thereby increase its visual weight and the importance the viewer puts on it.
Example
Take a look at how Amazon accomplishes this on their product info pages (I pulled up Simple Minds Graffiti Soul album):
4. Proximity
It goes without saying that if we have two related elements on a page (eg: a picture that accompanies an article) we want to keep it close by its article, and preferably close by the part of the article it relates to specifically.
Proximity is one of the key ways we determine relationships and organize information.
For example, some business cards have both a business name & number and a personal name & number. Nowhere on the card does it specifically say that the number under the business name applies to the person, and the number under the person is the generic business number. We know, by their proximity, that if we dial the first number well reach the front desk and if we dial the second well reach the person whose name is on the card.
Example
Take a look at Amazon.com again. Notice the bottom links and screen size information for the two Kindle models:
We wouldnt think for a second that the screen sizes would apply to anything other than the Kindle models they are shown under, respectively. The power of proximity is one of suggestion. Without actually saying two pieces of information are connected, you are able to reduce visual clutter and present material more intuitively.
Items placed closer to the primary content on a site we know are related to the primary content or are at least of greater relational importance to that content. Relevancy is implied by the proximity of one item to another: We increase the likelihood of a relationship the closer these items become.
|
|
|
Its Design Theory
Its important to understand that these are principles of design theory common sense, if you will. They arent hard and fast rules, and sometimes we can bend a principle a bit more on one project than we do on another. Its all in the design at hand. That said, its really about common sense although sometimes having a good eye for this type of stuff can make a big difference.
These four principles are a good starting point to break down any design and see if it needs to be tweaked or worked with a bit. And its easy to remember (work out the acronym for yourself: D)
Here they are again, simply:
C ontrast
R epetition
A lignment
P roximity
Ex. 2. Practice & Have Fun. With each of these four principles in mind, grab a small notebook and spot areas in common visual designs that can be tweaked or worked with whether theyre your projects or not and write down ways they can be improved. After a little while, itll be like second nature looking at things this way and youll also notice an upgrade in your own design work.
