Visuals And Usability Of A Website

Published in

Writing For Web

7 min readJan 10, 2016

When we see something we like, our eyes widen up so we can let in more light and see more of it. This is an involuntary reaction. It just might be this moment, this fraction of a second, when we make the decision to like or dislike something. Your goal is to make the reader’s pupils dilate as soon as he sees your ad or site. You never get a second chance to make a first impression. And while people can change their attitudes, they usually make the ultimate yes/no decision at the first glance. Then they just try to find ways to justify that decision and/or be blind to the negatives. A layout that is easy to the eyes is also inviting. Use wide margins, white space, the right colors and short paragraphs. The layout should catch the attention but not in a way that causes the reader to “notice” it. You know what I mean.

Francisco Inchauste wrote about designing for the mind, pointing out many details that enhance the visuals of your site. For example, the more in balance and symmetry the content is, the more beautiful it is. Specific sizing and positioning of the elements (usually done by using grids) and grouping together things like shapes or colors will help to achieve this. Remove all clutter and concentrate on the essentials, the things that truly matter. The first eyeful is the prime selling space of your website. Now, the first screen does not mean the first page, it is just a part of it.

Contrast (between texture or color) attracts and holds attention. This can also be repetitive elements like black-and-white lines that create a visual rhythm for the eyes to follow. Visual metaphors (for example, Shakespeare’s line “Juliet is the sun”) are difficult to come up with, especially because they mostly work on an unconscious level, but they can definitely attract your reader.

The Effect of Colors

Warm colors of red and yellow focus our minds on physical comfort like warmth. They also evoke feelings of optimism, energy and creativity. Warm, bright colors visually enlarge objects and make them seem closer. Gold and brown colors express classics, luxury, expensiveness and tradition. Red colors are usually associated with error messages so be wary before using it for other purposes.

Cold, bright colors like silver, lavender and grey encourage contemplation and have a calming effect. They are fresh, modern and professional. Cold, dark colors like purple, green, turquoise and navy give a feeling of stability. They emphasize the content and are often used as accompanying colors. Purple is the color or loyalty, activating the imagination and images of grandeur, something out of ordinary. Green is serene, peaceful color and it conveys the idea of growth. Neutral colors like black and white help create contrast and bring out other colors. They support their neighbours and can make beautiful combination with almost any color. Black is credible, white is clean and pure. Using them together might create quite beautiful and timeless combination.

(TIP: if you want to keep all this in mind more easily, consider printing out these color meanings & symbolism charts by Art Therapy Blog.)

Colour psychologist Angela Wright says that the color itself is not as important as its intensity. Bright, strong colors stimulate and lighter colors with low saturation sooth. According to her, red affects the body, blue affects the mind, yellow affects the emotions and green affects the balance between the mind and body. Therefore, blue colors might help you to be more creative. Yellow can make you more optimistic, red stimulates you physically and green helps you feel balanced and calm. When you combine more than one color, you get the effects of both of them. Choose a few main colors and spice them up with others. Wright talks about the effects of colors like purple (encourages deep contemplation), orange (focuses our minds on physical comfort like food and warm), pink (nurtures) and brown (solid, reliable and supportive).

Kissmetrics surveyed the color preferences of men and women. They noticed that blue is the most popular color for both men and women. The most unpopular color for men is brown. For women it’s orange. However, some big companies (Fanta) use orange with great results, as you can see from a nice infographic about the usage of colors in marketing, published by Small Business Trends.

Usability

Whatever you are designing, remember the golden rule: make everything as clear as possible. Don’t assume people understand what you meant. Make sure they understand. Most people come to see your content by following a link through social media or Google search. This means they don’t necessarily start from the front page. Despite this, people should not feel at loss. Make sure the navigation, visual hierarchy and clickable content are all easily observed and understood. Remove everything that is unnecessary. After the user has checked out your content, guide them to a new one or to your homepage. From your homepage, the user should easily see what the site is about, where they can go from there, what they can do and why they should stay for a while.

Always remember that web users are impatient and demand instant gratification. They don’t make optimal choices. They glance at each new page, scan some of the text and click the first link that catches their interest or vaguely resembles the thing they are looking for. In fact, there are large parts of the page they don’t even look at. You can answer to this behavior by focusing the user’s attention to specific areas of the site with a moderate use of visual elements. Guide the user from point A to point B to create a better sense of orientation and built trust between you and the user. You can use steps like 1–2–3, large buttons, animations, and so on. Keep a balance with legibility, readability, typography, symbolism, color, texture, and so on.

Typographic hierarchy

Choosing a font is one thing and possibly something you have no say in. (If you do, this guide will help you to get started. Choose a simple, easy-to-read typeface. If it’s easy to read, it’s easy to process. This will minimise the perceived effort needed to accomplish the task. And remember to check out the free options Google Fonts, Font Squirrel and DaFont have to offer before buying or renting fonts.)

Typographic hierarchy, on the other hand, is something every content creator should take an interest in. Typographic hierarchy creates an order of importance, allowing the reader to easily see what they are looking for and navigate the content. It guides the reader’s eye to where the section begins and ends and what are the most important words. This is especially important on a webpage which also contains interactive content and you have to guide the user to see what activities and information are available.

A few basic methods for creating a visual typographic hierarchy include the size, weight, color, position and type contrast. Mix and match these with each other to see what combination works best for your content. Remember that related items should appear closer to each other than items not related. Remember this when creating the spaces between paragraphs: not too wide a gap, yet not too tight.

Three levels of content should be enough for your needs. The headlines and biggest type is on the primary level. Secondary level contains the subheads, pull quotes, infographics and info boxes. Tertiary level is the main text and often the smallest type (but still large enough to be readable). You could think, for example, that the product name goes to the primary level, the pricing info goes to the secondary level and information and specs about the product goes to the tertiary level.