Your homepage should be the welcoming mat for your entire site. Its design alone should let people know what you are about and what you will deliver. It should set the tone for every page that follows and connote a level of professionalism commensurate with the content you offer. A clean layout is necessary for almost any homepage and every site should be easy to navigate, but there are specific design concepts that apply to specific types of websites.
Informational sites, those that deliver information or take a more educational approach to what they offer to the world, need to be designed in a way that inspires confidence. People who visit a site seeking information should be given the impression that the work is professional, accurate, and trustworthy. Perception starts with design and so, in the next several sections, the layout for an information-based website is discussed.
White Space
More important than the content itself, or at least of equal importance, is the all-too-often-forgotten white space. Carefully planning the voids that surround your content allows visitors the chance to digest and comprehend information in manageable chunks. Well-placed white space can improve comprehension and increase the “stickiness” of the material your present.
Start optimizing white space by looking first to your paragraphs and their headers. Manipulate margins as needed to make these anchors stand out. To really capture a reader’s attention, apply spacing beneath major text elements so that they are easy to read while scrolling. You need to think of white space as an active part your site and as a component that makes it easier for readers to enjoy what you are presenting to them.
Consider Image Placement
Images and video are almost a necessity for any website, even one that primarily present material as text. At the very least, your site should have a logo and a few illustrations. These need to be placed before any information is placed so that you can understand how you are going to work around them. Images should be used to catch attention so that visitors will read what surrounds the images. Think of them as visual magnets that draw the eye and then put your most important, compelling content around the images in way that it is hard to miss. Do this right, and readers will get hooked on your content.
No Sliders
Sliders were cool for a short period, but they were never really great for information-based sites. Now, design is moving away from sliders almost completely because they are ineffective. It turns out that sliders are distracting and can actually confuse users by presenting less important information in a way that is difficult to consume. In fact, research suggests that sliders may hurt conversion rates. Even the shape of the slider can hurt your website as a result of something called “banner blindness.” Banner blindness refers to the fact that users tend to ignore anything in the shape of a banner, automatically, because they associate the shape with ads. That means sliders are useless and take up space that could be used for a thousand other things.
The rise in the popularity of mobile browsing has also relegated banners to the trash heap of the Internet. Given that 55% of Internet usage is conducted from mobile devices (a number that is expected to rise), it doesn’t make sense to waste space with widgets that don’t look good and frequently don’t work at all on mobile devices. When you add this fact to the above study results on preference and consider that slider damage search ranking, it becomes perfectly clear that sliders are a no-go.
Use Drop-Down Menus
Drop-down menus can hurt SEO, so they aren’t for every site. Having said that, drop-down menus can really help to clean up a site and organize it when it contains a lot of information. You will have to make a judgment call when it comes to utilizing drop-down menus, but consider that they are convenient, handy, and intuitive for many users. Those CSS drop-down menus are possible, JavaScript (through jQuery, MooTools, etc.) is still the best way to go.
Content Views
Think of content views as windows to the information that you want to present. You need to plan these windows out because how clear they are, how large they are, and how they operate is going to influence how easy your content is to access. In some cases, views may take up a whole page and in other cases they may simply take a up a small portion of the page. Plan your views to display your content in the best possible light.
Remember mobile devices when planning views. If you have a separate mobile site, then be sure to optimize for the small screens found on most devices. If you don’t have a mobile version of your site, then consider building on. There is no good way to display a full-sized webpage on a mobile device and users won’t tolerate the attempts.
Navigation Ease
If the information on your site isn’t easy to find, rest assured that people will not go looking for it. You have to make everything accessible and that means spending a lot of time on your site navigation. The more content you have, the more robust, clear, and redundant your navigation needs to be. For instance, if you have six or seven tiers of information, but your navigation only allows for simple back and forth movements, users may need to click back “up” through several tiers before they can click back “down” to information they are looking for. Such navigation is cumbersome. At the very least, give users navigation that is closely tied to a logical folder structure. Then they can keep track of where they are and jump around as needed.
The Bottom Line
The more information you jam onto your site, the more planning you need to put into it. Start by designing the larger aspects of your website on paper or a whiteboard and avoid sitting down to code until you have a solid master plan. It is easy to get bogged down with details about link color or image borders when coding and forget about overall site design. Simply put, you need a blueprint that you can refer to as you create your homepage so that the design stays manageable and appealing to users.
