Dissecting a Web Site

A great way to understand web design is to dissect web design. To begin, websites render differently based upon the device and monitor on which they are displayed. Also, websites render differently based on the search engine that is being used. Since this is the case, we want to always think about what information is presented above the fold of the webpage (where the page ends on your screen without scrolling), especially of the landing page (The landing page is the page on which the visitor lands when he or she types in the URL).

As we take a closer look at websites we will find that most sites have the following elements:
1. Header
2. Navbar
3. Body (Maybe with several columns?)
4. Footer
5. Sidebars

When a visitor lands on a website they want to know where they are. Usually this information is found in the Header. This area often contains the logo/the branding. After knowing where they are the visitor usually wants to then know how to navigate and find the additional information that they are looking for. This is usually found in the navbar.

Yes, we learn a great deal from mistakes. Let’s take a closer look at two poorly designed websites:

  1. www.pennyjuice.com

This website is an example of how type and color can destroy a website.  How so?  The overuse of intense color coupled with use of capital letters throughout this site makes it visually confusing and exhausting to navigate.  Navigate?  Is there even an a bar?  Where am I?  Am I stuck in some land where the teletubbies live?  By the way, who is Penny Juice?

2.  www.jamilin.com

Where should I look?  Is this site for inner balance, outer beauty, skin care or hemp?  Let’s start with the Header.  There is way too much going on!  What is jamilin?  Is it Jami Lin?  Is Jami Lin a person?  The Header has way too many images and too much text.  We get that this site is about beauty so why is a woman holding a house?

On to the Navbar.  Here we see an overuse of color.  The image that is place into two of the links competes with the words.  As we move beyond the navbar we find a 3 column layout that does not line up quite right and has so much going on between background colors, color and size of font, advertisements, etc.

This site is another example of visual overload.

Let’s take a look at some strong web design.  The following website is for the National Park Foundation.

https://www.nationalparks.org/

 

This an example of a strong landing page for a website.  Instantly the viewer know where he/she has arrived.  In the top left corner we see the logo and type for the National Park Foundation.  The landing page features a large image of the Great Smoky Mountains.  The navbar and color choice echoes the blues from the photo whereas the type becomes illustrative with the large statement: WE ARE PARKS, with the rings for trees running through the letters.  Even if the viewer needs to scroll down to reach the footer the top portion of the website clearly communicates to the viewer.

Let’s take a look at another page of this site.

This page is an example of strong use of color and type.  First of all we see elements from the landing page continuing on to this page.  This creates a sense of visual cohesion.  On this page we see type and color used to create visual hierarchy.  MISSION & HISTORY stands out as one of the strongest elements in the hierarchy of information.  From here visually we move back and forth to the quote and image and remaining text.  The text is easy to read with areas of white for the eyes to rest.

Leave a Reply

Your email address will not be published. Required fields are marked *