Design Template by Anonymous

Visual Design Principles

Hierarchy itself is considered a visual design principle but we can modify the other principles listed below in order to present the importance of a page’s elements.

Breakdown of Each Principle:

1. Size

Size is used to signify the importance of an element, the bigger the more important. Naturally, larger images are more likely to be seen and processed first like main headlines or call-to-action buttons. The human visual field naturally sees more dominant or larger objects first. A perfect example of this is the use of headers and subheaders. The viewer is going to typically view the header first which is why we put the more important information in that element. We then follow this by including a brief description in the sub-header (less important).

2. Color

Color is also another way to signify the importance of an element, but this principle does it in a much different way. Color in a sense, is one of the strongest principles due to its ability to evoke emotions. Brighter colors tend to pop more if they are against a dim background. This draws the users attention and is strategically used by web designers. This affects visual hierarchy because we will use colors with more pop in order to get the attention of the viewer while using colors with less pop for information that isn’t as important.

3. Contrast

Used directly with colors, contrast is used to make the elements themselves stand out. But contrast doesn’t focus solely by color, other factors like size and texture also affect contrast. An example of contrast could be a neon yellow button on a black background. Due to it being much more noticeable, it has a higher chance of being clicked.

4. Alignment

Aligning elements in an organized and consistent way creates a sense of cohesiveness. While on the other hand, aligning elements in an unorganized way naturally catches the eye because it seems off. Although, you need to be very careful because too much misalignment can make the web page seem scattered. How you align the elements of your web page directly affects visual hierarchy because typically, more important information will be placed at the top or abnormally to gain the user's attention.

5. Repetition

By utilizing repetitive design elements you can express to the user that the content is related. An example of this could be using the same styling for your buttons on the navigation. This will ultimately show unity and will help the user travel through your web page.

6. Proximity

Proper organization of a web page is crucial and this is exactly what proximity deals with. By placing related elements near each other, you are showing the user that those items are related. This principle is typically used in order to create a relationship between two different elements. An example of this is a photo with a caption.

7. Whitespace

Whitespace, also known as negative space, gives elements breathing space. By isolating a specific element from the others, you naturally draw the user to view that specific element. Utilizing this space is vital when trying to create a good visual hierarchy because it has a large impact on influencing the users reading patterns.

8. Texture and Style

Last but not least, texture and style allow the designer to add depth to a design. Similar to contrast, textured elements stand out when placed against flat backgrounds focusing the attention onto it. If done right, a good web designer can make the screen have a three-dimensional appearance even though the screen is even two-dimensional.

Summary

Nowadays, most people familiar with technology can decipher a good web page from a bad one, and this largely has to do with visual hierarchy. By utilizing the principles above, any level web designer can make a website with a good visual hierarchy.