Optimizing Web Design with Human Visual Processing

Designing websites and user interfaces have become way easier in the past few years. There are so many tools out there that you can use that makes it pointless to start from scratch when developing UIs (check out our fresh UI compilation). But I’m not here to argue about the death of web design.

Instead, what I will do is try to explain the basic, psychology-based concepts behind the plethora of visual design tools (from the most basic CSS kits to the most advanced premium themes). You’re not just going to use them, but also understand them. I’m confident that this will also make it easier to modify existing ones with success as well.

Let’s look into how the human mind and body works when it comes to processing visual information and how this knowledge is interpreted into designing for the web.

The Principles of Perceptual Organization

According to Gestalt psychology, the whole is different than the sum of its parts. Followers of this school of thought claim that there are a few principles about how the human mind groups objects. These are not simply theories, mind you, but actual practical facts about organizing visual groups.

Below you’ll find some of the laws and the more popular and well-known uses of these principles. You might even be able to find some new ideas for your next design.

Law of Similarity

The first principle states that small objects that are similar are perceived as a group, rather than multiple instances of that same small object. Similarity might be based on shape, color, shading or some other quality. This principle is the basis of pattern design as well as many geometric and minimalistic logo designs.

For instance, this picture shows as a circular logo instead of separate triangles. The triangular shape at the bottom of the eagle makes us think that the shape is also part of the image.

You probably also utilized this law unknowingly when creating a few, same-sized featured content boxes for your website. If you wish to show that certain content elements are of the same importance or share similar information, create a specific shape just for that purpose. This way, your user will immediately associate that particular shape with a particular area of information.

Law of Proximity

According to this law objects that are closer to each other are considered to be of the same group. The same squares, when rendered next to each other in close, regular proximity, create a sense of grouping.

This principle has been utilized to a great extent on the web lately, especially when working with content loops, e.g. on blogs and webshops.

You can immediately group the title, the featured image, the metadata and the excerpt together even without any borders or backgrounds. You might be able to purge unnecessary lines and colors off your design to make it more minimalistic, yet still fully comprehensible.

For your convenience, I’ll quote Wikipedia as well that states:

Law of Good Form

Also known as the Law of Pragnanz or Good Gestalt, this law states that we tend to group objects together if they form a pattern that is simple, regular and orderly. Our mind tries to separate complex and perceptually difficult forms into many groups of simply understandable shapes; this lead to the importance of conciseness.

This is also one of the possible reasons behind the success of grid-based design and this made table- and frame-based (thankfully things of the dark ages of design) web structures so popular.

If you keep this principle in mind you probably won’t end up creating a website filled with complex shapes of content blocks that would be connected in mind via the other laws above. Still, you can group your objects together in an interesting way, e.g. in a diamond- or kite-shape, since those are still perceived as orderly and concise shapes.

Color theory, perception and usage

Color vision and perception of color is largely subjective based on how the viewers’ brains react to the light waves reflected by colorful objects or shapes. The rule is that different people, even without any visual impairments see the same object in different color (you might remember the dress).

Color properties

Still there are three objective properties of color; hue, value and intensity.

Hue is the name of the color as labeled on a color wheel or in a rainbow. There are six (or twelve, depending on whom you’re talking to) basic hues: red, orange, yellow, green, blue, and violet.

Yellow, blue and red are primary, orange, green and violet are secondary hues; also, there are tertiary hues that are the direct mixtures of two primary and secondary hues (e.g. yellow green or red violet).

Value is the lightness or darkness of the color, referred to as high-value for light colors or low-value for dark colors.

Intensity refers to the brightness or dimness of a color; this means that a color with the same hue and same value can still be dimmed or brightened by changing the intensity and creating different color outputs.

The highest intensity of every color is the hue they show on the color wheel (see below), while the lowest is the color grey.

Color contrasts

Referring to the aforementioned laws of similarity, the perceivers’ minds create groups of small objects they view based on similar and different properties — often colors.

When you chose your color palette for your website, especially if you go for a minimalistic approach or if you design a text-heavy content area, e.g. blogs or ads, you should be aware of different color contrasts that might help you find the right color values for the best result.

There are 7 color contrasts according to Johannes Itten, although I’ll only mention 3.

1. Contrast of hue

Yellow, red and blue at full intensity are direct and vivid contrasts. Secondary hues make for less sharp distinction, but still work, just as tertiary hues do, although neither produce as awesome results as with primary hues.

2. Complementary contrast

Two colors are in complementary contrast if when mixed together they create a neutral grey. These are also called strange pairs. If they are adjacent, they enhance vividness and intensity, while mixed together they cancel each other out. Every color has one and only one complementary; on the color wheel, the pairs are diagonally opposite to one another.

3. Light-Dark contrast

If you want to experiment with a single-color website, using different values of the same hue might produce awesome results. Often used in minimalistic web design, you can also produce great results based on light-dark contrast if you want to provide theme color options to your user. This contrast is also used for grayscale design.

If you want to pursue the remaining 4 color contrasts, you can find them here.

Creating palettes and checking for contrasts

Knowing the theory is great, interpreting your ideas is another thing altogether. You shouldn’t worry though, the web provides great support for your color-juggling needs. There are a plethora of tools that help you create custom color patterns based on color contrast rules, e.g. Paletton or Adobe Kuler.

For web purposes, you might want to check contrasts that you chose to use at webAIM, at Jonathan Snook’s site or download an instance of the Color Contrast Analyser by The Paciello Group here.

Conclusion

When you start working with a new theme or start modifying existing ones, try to think of the principles of perception to organize your content and remember to consider the color rules when giving your design its final form and tint.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail