So we’ve talked about typography on the web, but what else goes into making a website strong? The navigation, the content, and the layout are all major components that go into the overall aesthetic of a website and help differentiate between strong and weak pages.
Let’s start by evaluating a poor website. Bear Rock Junction is a local business from where I live, and overall their website could use some help. http://bearrockjunction.com/
The navigation is located at the top of the page and, aside from being a little lack-luster in design, the titles of it are pretty straightforward and descriptive. However, there are two sets of navigation that become a little confusing. There are white links on the blue background which almost overshadow the main black-on-white tabs above. Also, the home button could be discarded if the logo was made into a link for home navigation instead.
The layout and the content of the page could use some improvements as well. The hierarchy of the pages need a little more work and clarity to distinguish between important information. There is contact information located at the top of each page that could probably be moved to a better spot, such as to the footer or a contact page because it is distracting from the navigation, banner, and logo.
The content gets the point across, but pictures are scattered and information is all over the place. The pages would benefit from better organization and location of information. Also, I’m not quite sure what’s going on with the home page, but when you scroll over the content, it becomes active like a link. Some content should be combined in a better way to reduce the amount of pages and overall confusion of the layout.
The whole aesthetic of the website feels very basic and beginner without much nod towards design, other than some vibrant (nearly blinding) colors thrown in there. Some smarter font choices should be made and the whole site needs to be designed in a more pleasing way to keep it from being overwhelming.
On the opposite side of the spectrum, we will look at another local Lehigh Valley business, Paisley Peacock, as an example of a strong website. http://paisleypeacockfloral.com/
When you first arrive at the homepage, it immediately has a more professional feel to it and you know what it’s all about. There is not a lot of content on the home page as the images tell the story. We are greeted with a scrolling banner and pictures that are used as links, thus showcasing the flowers and the work that they do.
Simple navigation is located at the top of the page with drop-down menus that specify further categories. The menus are hidden when you are not scrolled over them so that they don’t take away from the rest of the content on the page. The logo acts as a link to the homepage, and additional navigation is located on sidebars of the other pages. Also, there is a small link at the bottom of each page that directs you right back up to the top, preventing endless scrolling.
With a clear sense of hierarchy and the content in an appropriate font, the whole site has a consistent feel. It’s clean and simple with the colors of the flowers standing out, keeping it from being overwhelming like the other website.
Many more factors go into making a good website, but without a strong layout, content, and navigation, the pages are hard to get through.