Website Development

I've began construction of the Web Page from the initial design I have made here:

 During the initial stages the only content was placeholder content. This is common on many web design projects as you are making the structure, rather than organising the content.

The TV Guide is a section I have decided to keep basic. A Schedule should be simple to view, I don't think there is a need to play with the formatting on a key element like this.

As the site begins to take shape, I've began to add more multimedia to the pages. One aspect I am particularly proud of is that the Quick Guide will pull the time table for whichever part of the day it is. From the screenshot you can see it's "Friday Early" which corresponds to the item on the TV Guide page.

Finally I listened to some feedback from my audience about the TV Guide page. In the first screenshot you couldn't see the key, as it was down the bottom. Clearly this was a usability problem and thus I've moved it to the top of the page.

Another consideration to take with this is that I've designed it with the latest technology in mind. In particular the text orientation on the TV Guide is using CSS3, the latest version of CSS (Cascading Style Sheets) which only the latest browsers support. On a non supporting browser they show up like this:

The website can be found here: http://media.jamesy.me.uk/index.php

Website Structure Conventions

All professional websites will follow the same basic conventions. At their purest form it boils down to:

• A Logo / Header section
• Well defined navigation
• Content, using a mix of text and multimedia
• A footer section

It's important to note that these are not part of good User Interface design, you can have all these elements and still have a very bad user interface. These are the core structures that any website needs to have in order to function fully as a website.

You can see these conventions in place on the BBC news website:

Header Section:
Typically the logo will be situated on the left, in this case BBC News. There may also be a graphic, as you can see on the right in the form of the signifier of the red atlas with the white circles. I feel this works well, as all the most important information and links are placed at the top, along with a Search Form. It makes it easily accessible.

Navigation: 
There are 2 typical types of website navigation. In this case, they have gone for a horizontal format as opposed to a vertical list style element. Horizontal can be used on websites where horizontal space is available, as depending on how many links are required, it can appear cramped if there are too many elements.

Content:
As this is a News website I am using as an example, the content will differ compared to a TV Channel based site. However the principles are the same: Text, graphics and other multimedia must be used in balance with one another. Too much text is daunting and hard to read, especially on a screen, whereas too many images can mean either long load times, poor search engine optimisation and makes it difficult for the ever expanding mobile browsing market. Too many graphics can also mean that explanatory text and meaning is lost in a sensory overload, leaving the user confused or frustrated. 


You can see more intricate conventions on this website here: http://netaccountant.net/website-design-for-accountants/web-design-conventions/ as well as further deconstructions.