Visual Hierarchy in Web Design

In a previous post, Lisa discussed re-vamping your site to give it a strong store front for your business.  In that blog, she began discussed asking yourself the following questions: What are my call-to-actions?  What are my goals for the visitor?

One of the most important first steps is to decide on your business objectives.  When people visit your website, what are a few key pieces of information that you feel it is important that they notice?  This information should include the things you feel are the most important for them to know about your company and your services.

Thinking Web Design for Potential Customers

You should also ask yourself what your end goal is during their website visit.  Do you want them to just collect information, or would you like to encourage them to take action, such as requesting an estimate or scheduling an appointment?  Typically the latter is more ideal, because be by encouraging the visitor to take action so that you may convert a website visitor into a lead and later into a customer.

Once you have decided what your purpose and goals are, you need to create a visual hierarchy for your reader.  The things you want to attract the most attention to (the things you have decided are the most important) should be the largest.  Once you have your reader’s attention, you can provide them with more detailed information using smaller text (the same can also be done with the images on your website).  The idea is for the viewer to not necessarily be aware of this on a conscious level, but to lead their eye along so that they are focusing on the items of most importance.

An example of a website that has done this well is Frey Construction.

frey construction madison wiUpon opening the website visitors are greeted with a slider showing multiple images with the intent to grab their attention.The key to this slider is having every image actionable. Visitors get a good feel for where the image will take them once clicked by the use of text with the graphics.

At the bottom of their homepage visitors are drawn to multiple images (Hail Damage, Windows, Gutters, Siding, Etc.).  When clicked, each area leads to a separate landing page. These landing pages provide the visitor with more detailed information and photo galleries of relevant work. This area also allows for flexibility by being able to easily update the images and what pages they click through to. By having the option to easily change the order in which they appear we are providing possible customers with the most updated content.

On the top of the page there is a call to action for the Request a Free Estimate page.  The image used for this CTA is consistent across multiple areas on the home page.

Once you have a visual hierarchy in mind, how do you decide where each item should be placed on the layout of your site?  In my next blog, I will talk about where to place each item on the site for maximum effect.