Establish Visual Priority on Your Website - dummies

Establish Visual Priority on Your Website

By Lisa Lopuck

If you’re designing a new website for a client, this client may be so close to the subject matter that he can’t decide which things are the most important on a website. Their inclination is to make everything big and include as much detail about each item as possible. As the designer, you have to help them create a descending order of importance. If you make everything the same size, everything competes for the user’s attention, and nothing stands out.

Compare the two following illustrations. In the top illustration, it’s impossible to determine which section is the main point of the page. Because everything is the same size, no visual priority is established. No one particular element looks more important than another element, and so your eye naturally starts at the top left and works its way down, regardless of whether the designer intended you to consume the page elements in that order.

The key to achieving a balanced, well-prioritized layout is to focus on one thing at a time. Decide which elements are the most important and give them a larger share of the screen space, as in the second figure below.


Implementing the “big, medium, small” strategy in web design

When designing a web page, consider it divided into three sections — a big section for the most important stuff, a medium-sized area for the next most important stuff, and the rest of the page for the less important stuff. By thinking of the page in terms of areas that have “big,” “medium,” and “small” visual importance, you automatically limit the amount of detail you can include for the less-important things on the page. For example, if the Founder’s Story area is one of the least-important items on the page, you may leave out a picture and just use a short heading and lead-in sentence that leads to another page with more detail.

[Credit: © Holiday River Expeditions ]
Credit: © Holiday River Expeditions

Using a “big, medium, small” strategy prevents you from giving the same visual priority to everything on the page. This not only allows you to guide a user’s eye around the page in a prescribed manner, it also helps make the page easier for the user to read and navigate. It’s a win-win.

Breaking up a web page into manageable areas

Sometimes you can’t avoid the fact that your web page has a lot of stuff going on. For a news-oriented website, for example, breaking the page into a few different areas that you can design separately helps to organize your layout. By using color fields and rule lines to break up the page, you create the illusion of more space because each section operates independently for the eye to digest.

The Red Bull site conveys a lot of information effectively by using three main sections and rule li
Credit: © Red Bull
The Red Bull site conveys a lot of information effectively by using three main sections and rule lines to break up the space into visually digestible chunks.

Designing around the fold line on websites

If you are a print designer, you’re probably familiar with the term fold line. The term refers to the spot where a brochure or newspaper or other kind of printed item folds in half. Anything above the fold line is immediately visible; everything below it is hidden until the viewer unfolds the paper, or performs a similar action. On the web, the immediately visible portion is pretty small because of the screen size. The point where your web page gets cut off from view — requiring people to scroll — is called the fold line.

Another way that the web differs from the print world is that the fold line is never quite the same from one computer to the next. Some people have large monitors; some are viewing the web through mobile and tablet devices; and some people purposefully make their default font size settings bigger or smaller. This means you have to design for the worst-case scenario or decide that your site will only cater to certain-sized monitors. The worst-case scenario is a viewing area of about 800 x 600 pixels. Accordingly, to accommodate most users, you must place the important stuff within the first 800 x 600 pixels. Otherwise you run the risk of viewers not being able to see them.