Friday, 4 April 2014

Website Design Process - Home Page

Below is the hand drawn wireframe version of the website homepage.


The homepage has to encapsulate a lot of information but also must be clear and easy to navigate. The first element on the homepage and every page is the navigation bar or header. In this case, the header sticks to the top of the page even if scrolled down, meaning the user is never far from navigating to a different page.

The next element is the animated banner. This will show information about a featured program, and in my case will also house a trailer for that show. The schedule is also prominent at the top, visible for the user before even scrolling.

After the main banner we find more information about the channel. 3 boxes hold information about 3 different items, distinguished by the colour of the title. Having this information is good for the user as it still condenses the information for the front page, but without sacrificing it entirely.

Below these are a couple of news items. It is important to keep fresh content on the homepage in order to give the user something new to look at every visit. If the content remained the same, users would have no need to even look at the homepage. 

Below that is the final element, the footer. This is usually just for small links for the sitemap and the company logo. It also grounds the page and is a visual cue to the user that the page has finished loading.

Here is the page in mockup form:


For the audience, the design is clear and clean but still has plenty of information. The schedule is immediate and up to date, the banner is dynamic and interactive, and the information boxes offer plenty of rich text to read. The darkened header tops the page making it feel grounded. 

No comments:

Post a Comment