Roll out the red carpet with your homepage
People come to our websites to solve a problem, let’s not make matters worse by forcing them to read the entire works of Tolstoy.
The home page or landing page as it’s often called, is likely to be the first port of call for most of our traffic. A recommendation, business literature such as cards and leaflets, or company vehicles and buildings are what’s guided them to us. We can also throw organic search engine traffic into the mix. So we may never know exactly how they found us.
However: we do know why they’re here. They’re seeking a solution to a problem and came to check us out. Our landing page must convince then we can give them what they’re looking for.
Our shop window or reception area rarely contains full descriptions of everything we sell. We could do worse than creating our homepage with this in mind.
A well thought out landing page will convince our visitors that we can solve their problem in a professional manner. Making all the effort worthwhile.
Above the fold is where the game is won or lost
This is where we live or die and refers to the area our visitor sees before they begin scrolling. Obviously the small screen version will be slightly different. While both contain the banner section, larger device displays may have the added benefit of a card style display.
The banner section on any page has one job: to say exactly what we do, not how wonderful we are. I’m not sure about you, but I’ve never chosen a book because the cover informed me about how virtuous the author was.
Because they haven’t dropped by to say hello, the very first sentence and byline should convince our guests that they're in the right place. Forget putting the company name in huge letters before they begin scrolling.
Besides not caring about where the solution comes from, I can’t imagine they’ve forgotten what they’ve just typed into the browser. So we can leave it to our company colors and logo to tell them where they are.
Recall the saying that first impressions are lasting. It’s our duty to ensure they're not the last. To succeed we have to pull out all the stops and convince our visitors we can help them.
A common homepage format is to use one or two sentences and a graphic to highlight how we can help. Once we’ve peaked their interest we provide links to further discussions, giving them a choice of whether they read it or not.
Overcoming the urge to include as much information as will fit onto the page is the priority. If you’ve read the developing a positive user experience article, you’ll be aware of the effectiveness of bullet lists, card lists have a similar effect.
Card lists, featuring an icon or image, heading, and short sentence or paragraph, fit nicely beneath the banner at the top, briefly outlining the services we provide and outcomes the visitor can expect.
By making full use of the company colors, I also use cards to begin the familiarization process. Some developers feature a full page background image overlaid with the title, but I prefer the banner plus card approach. Having said that, a full size background image behind the title and cards is also a good approach.
From a design perspective, pulling out all the aesthetical stops to greet our visitors is part and parcel of a good landing page. A visitor will more likely click through to the inner pages if we convince them that we are the ones.
By the time our visitors decide on further investigation, they’ve already begun to trust us, and will forgive us easing off the gas, at least where graphics are concerned. In the meantime, we could do worse than treat our home page like an art gallery.
Cards and icons
With the cards I mentioned earlier, I used to worry about finding a suitable icon or image to denote the context of the card. Now I merely treat them as attention grabbers and so design them mainly with the theme colors in mind.
Basic icons can be used, but I like to remind myself that going the extra mile is well worth the effort. In any situation, whether sourcing the icons from somewhere else, or creating them myself, I always try to uphold color scheme integrity.
Creating the icons myself requires a lot of time and effort, so I often restyle and reuse them in a variety of ways on the inner pages. Either by resizing and recoloring, or using them in other graphics.
landing page design: section by section
Here I try to adhere to a policy of one service per section. A visitor needs to know they’ve entered a new section, background color, headings, graphics, and positioning are all options at our disposal.
Landing pages can sometimes contain many sections, as such they can get fairly long. A table of contents, which when clicked will cause the page to scroll smoothly to the section would likely be appreciated by your visitor.
Homepage sections can be broken down into each of the individual services we provide. Or different aspects if there’s only one service. Other important details for an offline business to consider are location and business hours.
The footer section at the bottom of the page is used site wide, as with the navigation at the top. Normally footers contain links to other sections, and may contain graphics, with a section title, which when clicked will lead to a new section.
For single page websites, footers make a natural home for contact details and contact form. Both multi page and single page websites may also add a map, either in the footer, or just above it.
Optional sections are “meet the team” cards, and customer recommendations. The latter, if containing a lot of detail, could be collapsable, only opening fully if clicked on. Team cards, featuring an image and mini bio of the team member, help to show the human side of the business. Both add an aesthetic benefit if done correctly.
Homepage design summary
Limiting our homepage to contain only essential details interspersed with topical graphics and in an appealing fashion, is something that takes considerable thought and difficult at the first attempt. But with practice, it becomes easier. I actually prefer designing landing pages rather than writing huge amounts of text.