Final Touches

And lastly, I finally added the following pages to my website this week:

The Story: brief information on what the show is.
The plotline: information on that the show 'Heroes' is primarily about - its basic plot.
Charactes: features all the 12 main characters in the show.
Episode Guide: List of episodes shown to date and a very brief description of what happens in each.
Links: links to other 'Heroes' websites.
Contact: my contact details.

And now I'm done!

Overall, I enjoyed doing this project, being able to pick the topic was great. Didn't really learn anything new as most things talked about in class were already covered in Digital 2. Hopefully this isn't the case in term 2 as I would really like to advance my skills and knowledge in webdesign.

Final Layout Design

After much editing and playing around with images in Adobe Photoshop I was finally able to come up with a layout I liked!



Chose a red/black/grey colour scheme as I thought it would appeal to both female/male audiences. I really wanted it to be in tickled pink but um yeah, no Brooke, no!

I created an external .css stylesheet to manage all the font types/colours - headers, links, etc to keep it all consistent.

Nice simple layout, with easy navigation running horizontally across the page. Did the image roll overs in Adobe Image Ready. Also sliced it as I wanted to use tables to arrange my content. Centered in the middle.

Did my coding and stuff in notepad, just pure code as that way is the most easiest and quickest for me. Yes, I'm a little HTML coding nerd...

Ideas For Layout

Thumbnail sketches for layout.

I want to design a layout that is simple and effective with easy to find navigation.

Most of these thumbnail sketches show either a one or two column layout with a banner up top.

In the case of the two column layout, the navigation would run down the side - the left side as that is where it would sit more comfortably, people read from left - right so would naturally look there first,

With the one column layout, the links would run horizontally across the top - possibly above or below the banner but its probably much more effective below the banner as its more easier to get to (less scrolling needed).

To sum up what makes good web design.

In my opinion to what makes a good, functional website layout.

1. An aesthetically pleasing layout. Apply all good basic design principles here. Most importantly, using nice colour combinations/choices that are easy on the eyes. No harsh colours like a flurescent pink with a snotty green please.

2. Easy navigation: you should place the links where visitors will be able to find them, not hidden away to the side, somewhere way down the page in a little font size.

3. Good text sizes: Now if your site has lots of written content, don't put it at a small size like this that's hard to read. If you're lucky, visitors will at least read the first sentence, but will then move onto another site . Headers should be big and clear, same with the main navigational links.

4. Quick loading: No one wants to waits for a webpage to take ages to load! Us humans will simply click the 'x' button on the top of the page because we have better things to do than wait all day for a flash/image intensive website to load!

5. Consistent page design: Why? So we know we're still at the same site; don't have to wait for more layout images to load, and don't get confused as to where the navigation and content is placed.

Researching Webdesign/Interfaces

NBC's Official Website: Heroes. http://www.nbc.com/Heroes/

By the broadcasting company NBC. The site has a very formal layout, uses tables, and is quite professional looking.

Banner: The main NBC logo/banner runs along the top of the page with an advert and is then followed a smaller heading/banner with 'Heroes' on it. In the same banner beside the logo, is an animated image to a featured page.

Navigation: The navigational links are found underneath the top banners, and also runs arcoss the page horizontally.

Content: mainly runs in three columns under the heading/navigational links. To the right is another set of navigation to other pages (Next On, Interviews & Downloads, etc.) It is quite busy - jam packed with more featured links at the bottom of the page, along with advertisments to other NBC shows and videos. AS a result of this, the pages take quite some time to load.

Colour Scheme: Predominately a black/dark colour scheme - black background, with grey, blue, white and yellow text in different areas, yellow/gold links.


9th Wonders: http://www.9thwonders.com/

Another official website. This website's layout takes form in the shape of a comic book which I quite like and is really creative. All the layout - background, banner, and main headers are images, which allows for different font choices - in this case comic style fonts have been used over traditional, boring web fonts like Verdana, Arial, Times New Roman, etc. The only thing that isn't a image is the main body text - which allows for easy editing and updating of course.

Banner: Runs along the top as most website layouts have. The layout also has another one running along the bottom the the page.

Navigation: Very easy to navigate. The navigation like the NBC site also runs horizontally along the bottom of the top banner so are really easy to find on the page. The same links are also located on the bottom of the page, so when you finish reading /scrolling down the page, you don't have to scroll all the way back to the top again to click a link to get to another page.

Content: Also runs in three main colums under the main banner, the body text is in the center and additional links and blurbs from other pages are on both the left and right columns.

Colour Scheme: There are a variety of colours used in this site layout, and are used well - due to them all being tonally the same. Mostly warm colours used - reds, yellows and oranges. Easy to read black body text and all links that are not image roll-overs are red. A dark grey background has been used and this nicely lifts the comic book off the page.

Heroes The Series: http://www.heroestheseries.com/ (was unable to get screenshot at the time, layout has nnow changed).

An unofficial fansite. Quite a basic design - boring in my opinion! The layout is just one simple table, containing a basic banner and the content.

Banner: The Banner goes under the main navigational links. And I cant help but notice that annoying big blank space underneath it. Like the page needs any more scrolling than what it's already got!

Navigation: The main links/headers are located right at the top of the page and runs across the page horizontally. Other less important links (mainly news archives - which are really unnecessary) are situated down the right hand side column, next to the main content/body text.

Content: The content, is nicely formatted and easy to read - the font size isn't too small for the eyes, which is especially important when dealing with lots of text/information like in this site. Though this site could probably afford to reduce the font size down a point as it's looking a bit bulky right now.

Colour Scheme: Black text, and red links.


Heroes TV: http://www.heroes-tv.com/

Another unofficial website. Not too bad of a layout, the colour choices seem a bit random though.

Like the usual website layout conventions, the banner is situated at the very top & navigational links run horizontally under this banner.

Decided website topic/theme

Hi John!

For my first website design assignment for Digital 4 I have chosen to create a site for one of my favourite tv programmes, 'Heroes'. It'll feature basic information about the show: its plotline, characters and episode guide, etc. An image gallery would be swell too. :-D

I intend to make the layout in photoshop (did I really need to say that?), and make some fancy image roll overs in Image Ready. I'll probably use Dreamweaver to make the actual webpages, since I am quite familiar with the program, but I'll give GoLive a go as well. I wanna use good old HTML and CSS in scripting me pages.

Yay, so that's it for now. I look forward to learning many new things on the fascinating world of web design - hopefully hard stuff, as I enjoy a good challenge! Oh yeah before I forget, the name is Brooke - Not Stewart! That's my last name. Cheers. :-)