A great home page layout makes the web page more interesting to look at because the viewer’s eyes will want to dance around in the page. It’s definitely easy to get lost on a home page and we want your viewers to enjoy the experience.
Just Breathe
People underestimate how important it is to give your layout white-space. By giving your users/viewers time to digest each section while clearly separating them at the same time, allows them to really take it all in; here are some tips to keep in mind:
- White-space emphasizes how impressive a photo is and gives it intrigue.
- Use the right amount of white-space:
- Too much: the user will have to scroll through or “get stuck at” empty space.
- Too little: the user might start feeling claustrophobic if things are squished together.
- Our website as an example, the Home Banner:
- On the left-side is a big photo that showcases one of our clients’ website on a laptop, smartphone and tablet. There’s a good amount of space between it and REM’s logo. Never over-crowd logos, they need space all around!
- Notice how the white space makes it really easy to read the headline, which is the 1st heading.
Layouts
Make your layouts dynamic, symmetrical and appropriately proportional. This will show that you as a company are structured, organized and thoughtful. Your layout will determine the home page’s information hierarchy. Here are some ways to accomplish this:
- Vary your layout throughout; use columns to put multiple items in a row.
- Use a grid. In our website’s case (and in most of our clients’ website’s case), the grid is based on 12 columns. Notice how we use 3 columns in some areas such as the buttons below the banner, the featured portfolio and the blog teaser.
- Maximize the use of your browser’s/device’s screen size, while still having proper white-space. Using our website as the example, notice how the angled grey background, large photos and Google Map take up the full width of the browser.
Headings
We often talk about headings, especially when it comes to having AODA compliant websites. On the home page, it keeps your viewers engaged and when sized correctly the end result is a sequential experience that your viewers will subtly perceive. Some things to keep in mind:
- Heading 1: biggest, stands out and as I’ve mentioned, the very first thing at the top that clearly states what we provide: web design and development. Important and useful for SEO.
- Use the correct sequence for SEO and AODA purposes (For more information, read this blog post about “AODA – Colour Contrast and Headings”)
- Headings in a home page are very useful for separating sections.
For our website, the headings start off the following areas:
- “We Provide Web Design & Development” introduces the website and attracts, using big imagery.
- “We build exceptional websites…” some vital text for SEO and to give users more of an idea of who we are, who we serve and what we do.
- “Some of our Featured Work” with highlighted projects.
- “Blog” teasers of our blog posts.
As you can see in our three-part series there is a lot that goes into designing your home page – it’s the most important page and we truly want to make sure that we support you and guide you through the process. It is a lot to stay on top of, and our designers are here to help organize and guide you through the process.
We want you to succeed; we sincerely love it when you do! So, if you’re looking to change up your existing website or looking to design a new one, feel free to reach out to us! We’re here to help.
