Web Design
Principles 1 & 2 : Intuitive Structure & Visual Hierarchy
To Do:
- Use the Working Document for notes on design principles you started in the last ePortfolio Design Quest.
- As you watch the videos in these ePortfolio Design Quests, and then read the material, make notes to yourself about what is and is not working in your ePortfolio design.
- You will be sharing this in one or more of our F2F sessions.
Design Principles
(Intuitive Structure & Visual Hierarchy)
Principle 1:
Intuitive Structure
How intuitive is the structure of your site? How easy is it for your clients to find their way.
A Web site must have a highly intuitive structure and should be simple to understand so that users would not have to think which way to go. It must be self-explanatory in an obvious kind of way. Don’t let any question marks or queries come up and make the navigation intuitive and simple. The structure must be free from a lot of cognitive load so that visitors don’t have to wonder how to move from point A to point B.
Once your audience arrives where you want them to go, what then? Think of the structure of the site a choreographed experience.
How Intuitive is your site? Is there ever a question about where to go to find what you intend.
How might you improve on the intuitive structure of your site?
Principle 2:
Visual Hierarchy
Visual Hierarchy makes the audience's experience intuitive through visual organization.
Visual hierarchy is the order or sequence in which our eye moves and perceives the things it sees. When it comes to a web page, the visual hierarchy can be referred to the sequence in which our eye moves from one topic/content/block to another. When designing a web page, a designer first needs to identify the order of importance of the various topics and then place them in such a way that the visitors first view what is most important and then move onto the others in a hierarchical manner.
There are a few ways provided here create a visual hierarchy:
- Size hierarchy – As the name suggests, size hierarchy is the kind of hierarchy in which the most important content or image is of the largest size on a webpage, followed by the second most important content or image in the second largest size and so on. The distinction in sizes should be such that a visitor would view the items in the order of importance, and the pecking order of things is obvious.
- Content hierarchy – Besides the hierarchy of size, which is one of the best ways to create the order of importance, another way you can incorporate this principle is by creating a hierarchy of content. You can place content in such a way that the human eye first travels to the content that is most important, for example, the business’s objective or purpose and then moves to the less important content blocks in a hierarchical order.
- Notes about Luenendock's visual Hierarchy:
- Content hierarchy is probably not as powerful a means of controlling audience attention as is size hierarchy. Interest in content will vary from user to user.
- Striking elements: There is a third means of guiding attention, which is to make an element striking or different from other elements on the page. If all of the elements on the page are green, and one adds a red element, then regardless of size, that element will take the attention.
What about your site:
Have you successfully choreographed your audience's experience using visual elements and hierarchy?
How might you improve on the visual hierarchy of your site?
