Basics of Web Authoring and Design

What is Visual Hierarchy?

Visual hierarchy is arguably one of the most important principles behind effective visual design. Since design is all about visual communication, an effective designer must be able to clearly communicate your information to viewers. Since people are not data processors, but rather visual thinkers, they organize what they see into "visual relationships." Visual hierarchy draws upon the principles of how these visual relationships are formed by users to create ways of establishing a visual hierarchical structure to your webpage. This is because it has been shown that information that is organized with a hierarchy in mind will always be more effective at communicating information.

Purpose

A content filled webpage requires users to easily be able to navigate and location content on a webpage. Visual hierarchy allows designers to easily visually present the order of their website to users by drawing attention to different parts of the page.

Visual Hierarchy Tools

Size

Size is defined as the surface area of a form. It is one of the most powerful tools of organization.

Practices

- correlate the size of an element to its importance

Color

Color refers to the hue, saturation, and value of different elements within a webpage. Color is a multi-fuctional tool: it can work both as an organizational tool and a personality tool.

As a organizational tool , color can be used to group certain elements together and categorize it into a hierarchy.

Practices

- group similar elements with similar colors to create an easy way for users to understand the layout of your website

- follow an organized color scheme to help create consistency in your hierarchy organization

As a personality tool , color can be used to bring an emotional appeal to your webpage.

Practices

- use different aspects of color theory to create an emotional response in users that will make the website appeal to them more

Contrast

Contrast refers to shifts in text, size, or color between different elements. It can be used to show the relative importance of elements.

Practices

- make more important elements contrast with their surroundings

- follow an organized color scheme to help create consistency in your hierarchy organization

Alignment

Alignment creates order between elements. The use of alignment in web design has many benefits: it can provoke interest from your users if used in unique ways; it can give importance, such as things that are placed at the top-right of the screen which users are used to being the location of official or pertinent information. Alignment creates start and end points on a page and if used correctly can lead your viewers from one section to another. When a single element breajs out of the established alignment, it calls attention to itself and its importance.

Practices

- make more important elements contrast with their surroundings

- follow an organized color scheme to help create consistency in your hierarchy organization

Repetition

Repetition assigns relative meaning to text.

Practices

- use headers for main topics

- follow an organized color scheme to help create consistency in your hierarchy organization

Proximity

Texture is the quality of the surface of a shape, it is how a surface feels or is perceived to feel. You can create a texture that will become a pattern by repeating an element throughout your site. Texture can be created visually within a website to attract or repel interest to or from an element.

Practices

- use headers for main topics

- follow an organized color scheme to help create consistency in your hierarchy organization

Density

Practices

- use headers for main topics

- follow an organized color scheme to help create consistency in your hierarchy organization

Style

Practices

- use headers for main topics

- follow an organized color scheme to help create consistency in your hierarchy organization