Info

The Footer

Figure 3.16. The anatomy of a WordPress home page

Figure 3.16. The anatomy of a WordPress home page

We'll now examine each component in turn, and I'll show you some fine examples of design that should inspire you with ideas about how to implement them in your theme. After that, we'll address the design of each of the page types in our sitemap. By the end of this section, your head will be spinning with ideas, and you should be raring to start on your own theme's design.

The Header

First impressions matter. Being the first element visitors see when they reach a site, the header is crucial to establishing the site's tone and message. A clean, uncluttered header is a safe way to go, but it's far from being the only one, as we'll shortly see.

The header will almost always include the site's branding, logo, and possibly its mission statement. Depending on your site's layout, the header might also include a navigation menu, a search bar, or other elements like links for RSS feeds, social media, login and registration, as well as banner ad spots.

Figure 3.17 through to Figure 3.23 show how versatile a site header can be.

rainfall 0

Home interactive Design Brand Design RainBlog About us Contact us

Brand. Everything. Start right now with us!

Figure 3.17. This header includes the site navigation, login functionality, and a bold mission statement

D FaceDesigns about portfolio blog contact

Hello, my name is Jason. I am a web designer with a passion for making beautiful websites!

Figure 3.18. This header clearly puts the emphasis on the site's mission statement

Figure 3.19. A minimal header containing only navigation and branding is suitable for the widest range of sites

Figure 3.19. A minimal header containing only navigation and branding is suitable for the widest range of sites

Home What we do What we've done Who we are Contact us Blog artificialstudio

Figure 3.20. A much larger header that includes a mission statement and feature carousel

Figure 3.21. An example of a more goal-centered header with a couple of clear calls to action

Figure 3.21. An example of a more goal-centered header with a couple of clear calls to action

Figure 3.22. This header uses color and branding elements to establish the site's personality
Figure 3.23. A more involved header with multilevel navigation and a banner ad spot

Take a moment to note what sets each header apart from the next in these examples. Is the header's goal simply to set the design tone and feel for the site? To convey the site's mission statement? Or is it to encourage the user to do a specific task, like request a quote or share the site with their friends?

The trick is to use the header to highlight content that's important to your own theme goals. Make sure that it works in harmony with your overall mission statement for the rest of the theme. Remember, it's your job as a designer to help guide users to the most relevant content. A successful header immediately tells users where they are and what kind of content they'll find at the site; it should also make it simple to find the most important content. If your header design accomplishes those goals, the rest is just icing on the cake.

The Navigation Menu

All the previous headers shown in this chapter included the site's main navigation. As navigation is such a necessary part of a site, let's spend some time focusing on navigation menus in particular. Traditionally they appear at the top of the page—horizontally—but your theme can incorporate any number of navigation displays, from a vertically listed sidebar to a fancy menu that reveals itself when the mouse hovers over it. Keep in mind that as well as the top-level links, you'll also need to design for the subpages and sub-subpages. Drop-down menus are often a perfect solution for these nested hierarchies; a few examples are shown in Figure 3.24 and Figure 3.25.

Was this article helpful?

0 0
Make Money Messing Around On Facebook

Make Money Messing Around On Facebook

In this short guide you are going to learn exactly how you can start earning money in as little as 24 hours, doing the things that you already do on Facebook! Did you know that social media has become one of the biggest drivers of sales and new customers for businesses? Companies that used to spend millions of dollars on radio advertising, TV commercials and billboard signs, are now shifting huge chunks of their marketing budgets to social media sites like Facebook.

Get My Free Ebook


Post a comment