Visual hierarchy is one of the most important principles behind good web design. It’s the order in which the human eye perceives what it sees.

Page Scanning Patterns

We all read from the top down and most cultures read from left to right. But while that knowledge is important for page design, designers know the task is much more complex.

Studies have shown that people scan pages before reading it to get a sense of whether they are interested. Scanning patterns tend to take one of two shapes, “F” and “Z,” people literally scan the page in the shape of these two letters, so designers make use of this information when designing pages.

Go Big

The biggest text the audience will read first so if you want the users attention, putting big text is a good, easy method.

Space and Texture

Another good way of drawing attention is to give the information lots of room to breathe. If there is enough blank space left around a button, or the spaces between lines in a text block are wide, then these elements will be more readily visible to readers.

Typeface Weight and Pairing

Typeface selection plays a massive role in visual hierarchy. A typeface’s attributes include a lot of things like: weight (the width of the strokes that compose its letters), style (like Serif and Glyphic Serifs), width (how wide a font is, can be font width or character width), and many more.

In some cases, the aim is to present lots of information equally. You can do this easily by setting it all to the same size and weight however this would look very boring.

Colour and Tint

Bright colours stand out so much more than dull colours or grayscale. While lighter tints appear more distant and thus fall lower on the hierarchy than richer, darker ones.

Direction

The majority of page layouts are typically designed vertically and horizontally, this is because it is the easiest to read. Doing the opposite and breaking the rules is also another way of making something stand out. Text that is arranged on a curve or diagonal will automatically stand out against surrounding regular arranged text.

Categories: Posts

Leave a Reply

Your email address will not be published. Required fields are marked *