These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
Source: Vanseo Design
Before we get started with any more tactical aspects of design, it's important to understand the high level fundamental fact that your user scans through your page in a particular order which is dictated by the characteristics and relationships between elements on the page. True, the content of each section matters to a degree, but most of that behavior is subconsciously guided by the visual hierarchy of your page.
Visual Hierarchy is exactly that -- the hierarchy of elements on the page based purely on their visual characteristics. More concretely, it's the priority of how your eye is drawn to different areas of the page. A site without any clear visual hierarchy is like the page of a book -- all text looks the same, so you just start at the top and work your way down. If you squint your eyes, it all has the same shade of blurry gray.
You don't want your users to just read your site from top left to bottom right -- they would get lost in irrelevant navigational information from the very beginning. To encourage them to take a different route, you would probably instinctively make the headlines bigger than the surrounding text and maybe put in some images that are particularly informative. That would be a good start but it's just the beginning of your options.
In this lesson, you'll see how visual hierarchy works and the tactics you can use to manipulate yours so your users consume the content in the most efficient pattern to achieve their goals.
Read Visual Hierarchy from 52weeksofux for a strong introduction to the topic.
Read An Introduction to Hierarchy by Rachel Shillcock for another look.
Your tools for implementing visual hierarchy should be familiar from our previous discussion about high level design elements:
Read Understanding Visual Hierarchy In Web Design by Brandon Jones at Tutsplus for a deeper look at using each of these tools.
The principles of contrast, repetition, alignment, and proximity from the list above form the cheeky acronym CRAP. These in particular define not just the properties of a single element but the relationship between multiple elements. They are cornerstone ideas of graphic design as well.
Read The Big Four: Contrast, Repetition, Alignment and Proximity, a document which covers these principles as they relate to slide design (the parallels with websites should be obvious).
Dive deeper into contrast and read Contrast and Meaning by Andy Rudledge from A List Apart.