Webpage Structure

The structure of a webpage can become a very complicated, but also extremely vital design area when creating a website. The webpage goes in a certain pattern that makes it more pleasing to the eye of the audience. There has been researched placed into finding out how the audience generally browses a website. Looking below, we can see they results of that test in the image.

heatmap

Understanding the F-Layout in Web Design (2012)

The user browses the page from top left, straight to the right, then moves down just below the initial area, and scans to the right again. Once they have done this, the user starts to scan the page in no particular order. The shape of the scanning is like the form of an ‘F’.

I have implemented this into my website by putting the logo on the top left, and a large product and advert banner just below. This will attract the user into the website and take them to a new product, or allow them to see a sale very quickly.

This method can be seen on a website from Two Seasons ( http://www.twoseasons.co.uk ). They have their sales, new products, and everything that they want the customer to know directly on the front page via a slider, just underneath the main logo.

Capture

Homepage (2015)

I think this is a very good and efficient way of getting what you want to the audience, so I employed the idea to my own website. The top image is a slider, which goes through mulitple images, displaying different things on each one.

image1

The main site has also forgone a process to get the design layout complete. I have used wireframes and site maps to get my ideas down and get the basic structure. It initially started with the idea of going with a bike and technology website, but it developed into a specific bike brand only website.

IMG_20151102_154011

Over time, the website would gain all of those products which would fill out the website, giving the audience a large array of items to choose from. This site map makes it very easy to know what menus lead to where, and how products/pages are accessed by the consumer.

The transformation of the main web page can be seen here, the left is the initial design by using the method of wireframe, and the right image is the final basic design. When I began creating the actually webpage, I added extras, too.

 

References:

Brandon Jones (2012) Understanding the F-Layout in Web Design [online]. Available from: http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design–webdesign-687 [Accessed 5 December 2015].

Two Seasons (2015) Homepage [Online]. Available from: http://www.twoseasons.com [Accessed 7 December 2015].

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s