I previously discussed global components. In this post I’ll converse about some of the other elements that make AtomicLabz.com homepage. Also, we’ll look at the internal page structure.
Carousel
A carousel is like a rotating billboard that consists of a background image, and text that will lead the visitor into an internal page. This I a great sport for product promotion, upcoming events, hot deals, new arrivals or a featured product/service. The user can navigate back and next using the navigation located in the bottom right. As each picture fades in, a circle in the bottom right changes color showing the user which they are viewing. They can also click the circle to navigate to that specific billboard.
Site Introduction
An introduction sits below the carousel and quickly introduces the customer to you and what your site offers. You need to quickly let the user know what you do. Website users are thinking, “is this where I want to be? Do they have the solution, Can I trust them?” This can be a great spot to introduce credibility factors (sample client list, testimonials, service and product offerings,). It really depends on what your objective is.
You can see the layout nicely flow from a one column carousel to a three column introduction that is pleasing to the eye. In this case we used two of the columns to introduce the client to service offering, client case studies. The third column was a call to action, inviting the user to download a white paper, Driving Sales in a Down Economy.
Subpage / Internal Web Page
Next, it was onto the internal page. The internal page has a consistent structure through the entire website. Of course, the body contents changes relative to the page you are viewing and the right sidebar changes for each section.
The first component in the right sidebar is the secondary navigation, or sub-navigation for all page related to the primary navigation selected. In this scenario, the user clicked on Solutions in the primary navigation, which leads the user to the first page in the solution section, named Lead Generation. In my prototype, I didn’t set the Solution button in the primary navigation to red, although that is how it would look when programmed to let the user know that is the section they are viewing. You also see in the right sidebar that Lead Generation is red (different then the other sub navigation pages) letting the user know which page they are viewing. Throughout every section, the secondary navigation will also remain in the top right corner. Although, if we get to a section that requires searching (i.e. a blog), then I would sacrifice a bit and put a small search box just above the sub navigation.
Calls to Action
The other two components of the sidebar are calls to action. The goal of this website is to collect information from potential clients. To do this we’ve include a white paper download and a sale training newsletter sign-up that lead to landing page stating the value of signing-up.
Today we covered a lot, so I’ll save the Style Guide for the next post as that is a significant component of every design.