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.
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.
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.