How to create the perfect homepage design.

Created on
April 26, 2019
Graphic Design

Your homepage design is special, or at least it should be. This is the face of your brand, and the first thing your web site visitors see whenever they lookup your brand. It is true that your homepage is technically a landing page, but let’s make a distinction between your homepage, and the rest of your web site landing pages.

The reason we need to make this distinction is because your landing pages are designed to target specific marketing campaigns at a granular level, while your homepage needs to be a “catch-all” design that encapsulates the most important things you want people to instantly know about your brand in a very broad way, while at the same time routing your visitors to the various important (high-level) landing pages to your main products and services/offerings.

Landing pages often target specific keywords for products, services, or even audiences. It might be helpful to think of your homepage as the entrance to a retail store, and the rest of your landing pages as shopping isles (or specific sections of isles).

So, what kind of information should we put on a homepage? Here are some ideas:

  1. Promotional Video – Videos are a great way to quickly explain to visitors what your web page is about, and they also help your web page rank in search engines (since they often prioritize video content). Sometimes, visitors don’t want to bother reading through your entire web page, so a nice big “play” button is an attractive way for visitors to quickly learn about your brand.
  2. Clear Branding – More often than not, a homepage is the beginning of a sales funnel. This means that it does not have to be a hard-sell. In fact, it’s better if it isn’t. The role of the homepage is to instantly convey your brand identity, and guide the visitor on how to find your other content, which will go into deeper detail about whatever products/services/content brought happen to interest them. So, your logo and slogan should be clearly visible to assure the visitor that they have arrived at the right place. It should also instantly explain to the visitor what your web site is about, so they don’t have to waste time trying to figure it out. Nothing is worse than landing on a web site and having no idea what the web site is promoting, or what purpose it serves.
  3. Informative Content – While having an innovative/progressive look is perfectly fine, your homepage is not the place to push the envelope when it comes to design innovation. Remember, this is about usability, clarify, and guidance. Web site visitors often need a standard navigation system. If you innovate too much, they may not know how to “use” your web site, which will cause them to lose interest, and “bounce” off your web site, which not only causes loss of business, but also hurts your search engine rankings, as that is one of the metrics that affects your rank. Basically, keep it simple, clear, and helpful.
  4. Succinct & Visual – When someone lands on your homepage, they are not looking for long-winded articles about specific topics. They just want to understand what the web site is about, and use it as a jumping-off spot to discover other content/offerings on your web site. As such, keep your deeply researched content and white papers for other sections of your web site. Avoid long paragraphs, write in short sentences, and tailor your content to visitors that are in a “scanning” mode, as opposed to being in “research” mode. Whenever possible, reinforce your text content with informative visuals to help visitors understand your points at a glance.

To recap, your homepage is only the beginning of a sales funnel, and thus must be instantly identifiable, clear, succinct, and helpful in finding additional resources to guide your web site visitors to a successful outcome.

Common homepage design mistakes

Now that we’ve discussed some do’s for homepage design, let’s go over some helpful don’ts.

Excessive content – Okay, so content is king, right? Yes, but not on your homepage. One of the surest ways to scare a visitor away is to make your homepage into one long-winded text-heavy rant about your company. Small business owners are often so thrilled about their mission and their offers, and they’ve got so much to say to their audience, that they fail to realize that they’ve got about three seconds to grab the attention of the visitor.

Too flashy – This mistake is also pretty common. Showcasing videos, interactive media, animations, and photos can be great, but not if it overwhelms your audience. Incorporating too many elements in your web site, can make it confusing and slow… two great reasons your visitors to leave and never come back, or at the very least make a B-line to your competitors.

Lacking calls-to-action – The best way to get what you want is to ask for it. This is true for web sites as well. You need to place buttons in strategic locations on your web pages to encourage your audience to take actions, such as fill out a web form, purchase a product, or make a donation. If you don’t create calls-to-action (CTA’s), nothing will happen. If your CTA’s are worded wrong they also won’t work. So many web sites lack CTA’s, put them in the wrong places, use the wrong colors, or use the wrong words. All of these mistakes can cost you dearly, so part of your plan for building your sales funnels has to be planning out your CTA’s.

Does my web site have to be beautiful?

You’ve seen your share of terrible web sites online, right? Well, let’s first establish that a “terrible web site” is not always ugly. There are some beautiful web sites out there that are absolutely terrible. Conversely, there are some ugly web sites that are highly effective at achieving their purpose.

How can this be? Well, that’s because at the end of the day, web design is about functionality and service, not about beauty. Great aesthetics can be used to your advantage to increase the effectiveness of your web site, as well as your credibility. However, they are a means to an end.

Web design is a time-consuming endeavor, and it is hard to imagine anyone spending the time, effort, and money to build a full-fledged web site for absolutely no reason. Even the simplest of blogs is time-consuming to develop and grow, because the ultimate reason for a web site’s existence is to accomplish some kind of purpose. That purpose could be selling products/services, getting leads, growing a following, supporting a cause, or any number of other valid reasons for engaging people online.

Graphic designers have a tendency to forget this, and are prone to creating beautiful, but ineffective designs. They forget that great web design is not only about creating beautiful web pages. It is about serving your audience in the best possible way. If your web site’s purpose is to sell products, then it needs to make the visitor’s journey as easy and seamless as possible to find exactly what they need at the time they need it, and making the research and buying process as simple as possible.

The same goes for any other purpose for building a web site. If you’re trying to get leads, then you have to build sales funnels that start with very helpful text-rich informative content, and lead to other pages with a more persuasive bend, and ultimately link to a sales page that captures the lead at the end of your funnel once your prospective customer is convinced you might be a good fit as a service provider. This takes thought. This takes empathy, and it also takes testing.

So, the beauty of your web site can certainly help you build your brand, but the aesthetics need to work in harmony with, and in service of the business goals of the web site. In other words, a web site’s effectiveness is much more important than its beauty or glitzy features.

The main question you have to answer is, “Does this web site accomplish the purpose it was designed to fulfill? Does it do so both for you, as well as for your audience?” If the answer to any of these questions is a “no,” then you need to reexamine the design, and focus on how you might rethink the layout and graphics to increase the effectiveness of the web site.

Graphic file formats in web design

So, what kind of file formats should you use in your web design? Here are a couple of options:

  1. JPG - With a 24-bit palette and 16 million colors, JPEG is a fine choice for photos requiring a good amount of color detail. On the downside, this format is “lossy,” which means that while the JPEG’s are compressed for faster download, they also cause a loss in image quality. Generally, this is only visible when zoomed in, so the trick is create a compressed JPEG for the exact image size that would look great on your web site. Just be aware that you cannot stretch these images beyond that maximum image size, because they will appear blurry and pixelated.
  2. GIF - This image format is great for logos and line art, because they can be compressed without any visual loss in quality, as long as the image does not require hundreds or millions of colors to look good. In other words, if an image has few colors and tones, you can achieve much better compression with a GIF than you can with a JPEG. While GIF’s can also be used for photos, they are less effective than JPEG’s in compression, and result in larger files, which yield slower download speeds. GIF’s are also great if you need to have a transparent background, or if you need an animation. If you’ve ever heard the phrase “animated GIF” that is what it means. GIF’s can include animation.
  3. PNG - This file format is best for photos that require transparency. PNG’s can achieve great compression results, and what’s interesting about them is that unlike the GIF format, PNG images can support partial transparency. For example, pixels can be 50% transparent, as opposed to the “all-or-nothing” transparency of GIF pixels. It is important to note, however, that the PNG graphic format does not support animation.

In short, use JPG’s for most photos. Use GIF’s for simple graphics, transparency, and animation. Use PNG’s for photos that require full or partial transparency.

We’ve covered a lot of information in this blog post, and for small businesses without an IT department this can sometimes seem overwhelming. If you are doing your own web design, we hope this information has been of use to you. If an outside vendor is managing your web site for you, perhaps this information can help you to make sure they are doing a good job, or improve your communication.

A lot is riding on your web site’s performance, so it’s important to pay attention to be detail-oriented when it comes to measuring and enhancing its performance. If you need any help with any of these issues, please do not hesitate to reach out for help. We may be able to guide you in the right direction.

Ready for your next project?

Get a free estimate!

Start now!
No credit card required, no commitments.

Clients who inspired us.