Table of Contents
Every element existing in layout is some type of content. In order to avoid creating complete chaos and burning the content inside it, we should try to organize it. This can be done through various ways and approaches. Still, no matter which one will you use its crucial to remember what is the core message you want to communicate through the content. Let’s discuss available option to organize your content and bring some sense to it.
Design with content in mind
One of the biggest mistakes in design, and elsewhere, is to let the design has the final word. This is something to be avoided at all costs. It is not the designer nor the design itself what forms the layout. Even though single page layout can look great, it is the content what dictates how the layout will look. This might look like a nobrainer, but it is easy to fall into this trap – designing every page in the same fashion.
“To a man with hammer everything looks like a nail.”
Sure, this is not the case of someone who specializes on this particular type of layouts and takes only projects requiring this approach and type of layout. This is about specialization on certain form of design. In the previous paragraph we were talking about designer who approach any design with same approach, not caring about the differences at all. As the saying goes:“To a man with hammer everything looks like a nail.”
The same applies to less experienced designers. They will often try to manipulate and transform the content in such a way to suit their needs. It seems almost logical because it worked in previous project. So, why don’t give it another shot? However, this manipulation is a huge mistake and will be visible immediately to anyone looking at the design. Please, avoid this “one size fits all” approach. It is often better to go the harder way than otherwise.
“Content is not just the text written on the page.”
Importance of elements
When talking about the content, we should broaden our view for what the content actually is. We are not describing only a text in the paragraph, video, audio record or an image. We should think about content more in a sense of a bigger cloud containing all the elements present on the page. It includes also elements such as headers, navigation, sidebars, footers, etc. This makes it much harder to grasp full view and turn the layout into chaos. Don’t be discouraged by it.
When we see the content and all its elements in this way, we will have greater chance to create design that will elevate the content to new level, instead of suppressing it. In every design, there is one specific goal to be achieved. It can be providing user with information (blog, newspaper, magazine, news feed, information panel, etc.), enabling user to get something done (money transaction, writing shopping list, chatting with friends, watching video, selling or buying objects, etc.) and so on. These are the focus points.
Focus point is something we should build upon. It is something to keep in mind when creating the design. In other words, focus point is the one thing with the highest priority, the most important part of the content. Everything else is additional. Without it, design would loose its purpose and function and became a piece of decoration. Always ask yourself:”What is the goal of this … (page, product, service, etc.)?” and make it stand out. How?
“Remember, hard on the training ground easy in the battle.”
Dominance, visual hierarchy, whitespace
In layout, there are some rules you can use in order to focus user’s attention the specific elements. The most relevant of them is dominance, visual hierarchy and whitespace. All of these factors can help you bring the right piece of content under the spotlight. Let’s quickly discuss each of them.
Dominance
If you have two elements in your layout, they will be equal or one will exert some level of dominance over the other. That’s it, no hard science. Important is that the more dominant element will naturally attract the eye and get our attention as first. This effect can be even empowered in such a way the element will appear to exhibit a control over the less dominant, smaller, element. Remember, the more dominant element in the content has greater visual weight than other present elements. It will also have some control over them.
Sure way to increase the dominance of element over another is by increasing its visual weight – making it different. To achieve this you can manipulate with the most common characteristics and attributes of visual weight. These are size, shape, color, value, depth, texture, density, saturation, orientation, local white space, intrinsic interest, visual direction and perceived physical weight. Your goal is to have only one dominant element.
Visual hierarchy
What visual hierarchy does is to enable visitors to scan the information on the page. This will help you communicate with them quickly, effectively and without any unnecessary noise or distractions. The main goal here is to allow visitors understand the key points and main message of the content (page) in just a few seconds. This will require you to make the most important information stand out in some way. You should always think about the user as someone who will give you only couple seconds before leaving the page for good.
Visual hierarchy was created from gestalt principles. These principles are similarity, figure, proximity, closure, continuity and symmetry or order. If we take a step back to dominance, you will find out the most dominant element in the content uses contrast that is an opposite of similarity. Similarity and contrast are indeed the best ways to achieve a hierarchy in layout and highlight certain elements. It is also worth mentioning that in the ideal world, visual hierarchy will match hierarchy of the content.
Whitespace
A lot was said about whitespace and I already tried to debunk some myths circulating around this design element. Maybe it is caused by the power whitespace has that is the reason it is so often misused or misunderstood. Still, whitespace is another great element that will help you organize the content in the layout. Remember that whitespace include every negative space in the layout – margins, paddings, space between lines of text and so on.
Since theory of behind whitespace requires much deeper understanding, I don’t want to address it here in full degree. For more information on this subject it will be best for you to go ahead and read the Whitespace – Mastery of the (in)visible post. For the rest of you, one good rule of thumb to follow is to use more whitespace than less and use your eye as a guide. Following this, you will less likely to make a mistake.
Another two approaches are either to use rule of thirds or fourths or your base font size suggested by Nick Pettit. The point of following the rule of thirds or fourths is to use 2/3 (3/4) for the content than distribute the rest (1/3 or 1/4) around the content. This rule is often used in composition of paintings and other forms of arts. Second one, font size based, is to start with whitespace equal to your base font size and, if necessary, add up. So, if you use 16 pixels as base, use the same value for margin around the elements of content.
Test, test, test
In the end, no matter how much effort will you put into it, the most important part of the process is to test everything and test it often. This can be done the best through A/B tests with real users, if you have this option available. Another way is to use analytics on the page and watch for factors such as bounce rate, heat maps, engagement, social sharing, click-through and so on. When it comes to content, the best is to always involve someone not familiar with that subject and let that person review it.
Conclusion
When talking about content we should understand what the content really is. It is not just the copy written on the page, but the page itself. Every element of the layout is inseparable part of the content and we should treat it in the same manner. Knowing the importance of elements is crucial for organizing your content. Dominance, visual hierarchy and whitespace are important design elements you should not be afraid to experiment with.
