I already discussed the site map with the project stakeholders in my previous meetings and they approved. Next, it was onto wireframeing some of the atomic elements and global components.
Atomic elements cannot be broken down any further. An example might be, H1 Text, paragraph text or a logo.
Components are made up of atomic elements, but their relationship with each other groups them together into single components. Some of these components I knew would be global (show up consistently on each page) and some would be page specific. I like to start with the global components first.
The header consists of three elements, Logo, Value Proposition and Call to Action. These three elements make up the header component and will show up consistently on every page. The logo is a clickable link that leads the website user back to the homepage. Value Proposition is a clear statement that tells website visitors what this site is about and how they unique. The call to action is a phone number. The goal of this site is to generate leads, so why make it difficult for users to find the phone number when they are ready to act?
The primary navigation is the menu users will interact with to find information they are interested in. As mentioned, I had developed a site map, so I had a good idea of how I wanted the navigation to flow. This site is not going to be hundreds of pages, so I decided to eliminate the use of drop-down navigation. I personally don’t like to use. If there are sub pages, I like to include them within their specific section, so they are always displaying to users. I don’t like to keep making users hunt for things. I also don’t like creating more than seven menu items in the primary navigation and is this illustration; I was able to make six menu items work.
You’ll notice that the homepage show a different color that the other buttons because the homepage is active, or currently being viewed. The other five buttons are inactive, but change color on hover.
Today I covered global components and next will discuss other components including: sub-navigation on internal pages, style guide, and all of the other components that make up the homepage wireframe.