Assignment 6 (Part 2) – Webpage Template Designs

Design Practice

The 2nd part of assignment 6 carried on from the logo & identity strategy phase & required the creation of at least 4 webpage template designs for our chosen company. This would be a joint project with the Authoring Principles module, with the webpage templates being used as guides when actually creating the pages in HTML. The main part of the brief was as follows:

Part two of your brief involves the creation of four webpage template designs for html implementation. Your website design must match the needs of your chosen company from Part One of the brief. Your templates may include:
Login page, About page, Profile page, Gallery page, Listing page

My first step was to follow on from the research carried out in part 1 & research existing sites, looking for features or functionality which would work on my webpage design. The main points of this research are highlighted in the image below:

Website Research

At this stage I had an idea of how the site might look so I began roughly sketching possible layouts for the pages. I then started creating mock-up designs again using Adobe Illustrator, see below:

Web mock 1

With the shiny, red menu buttons I felt the first layout design was quite unique without being difficult to read or navigate. My major concern was that it was a little “busy” or “overdone” so I tried a different approach. I also wanted to try out having the navigation menu on the side of the page so I tried that next.

I preferred this layout but felt it was now a little boring & bare. I also preferred the more elaborate banner image as it was much more imposing & reminded me a little of the Ministry of Sound for some reason. This played with the idea of “Soundstate” being a political or governmental organisation which I liked for some reason! At this point I tried to add more to the design, see second image below:

Web mock 2Web mock 3

As with the previous part of the assignment, I received feedback at this stage from classmates & the module lecturer. Some classmates liked the banner image & the fact that the menu buttons looked a little like menu options from a computer game!

However, the opinion of the lecturer & the general consensus from classmates, was that the whole layout was far too busy & should be stripped back. On reflection, I agreed with them but didn’t really see it at the time. Lesson learned here, always take a step back & don’t get too precious with your work!

I took their advice & stripped the whole thing back with the following results:

Web mock 4

Immediately I felt I had over-simplified the design & that it had lost any sense of identity. I was happy with the clean & straightforward layout however, so I didn’t want to change that.

In the end, to give some identity back I added something very simple but very obvious: I used the main logo image with opacity turned up as the background! The finished templates are below!

The final section of the brief was to prepare the webpage templates for HTML implementation. This involved creating slices of the images which would be used in the creation of the webpage, including their “rollover” or “hover” states. This was relatively straightforward for me as my templates were not particularly complex. I simply needed the background image, the banner image, & the images used on the “News” & “About Us” pages. Everything else could be created using HTML, styled with CSS & controlled with JavaScript.


For this part of the assignment, while I followed the same steps as I did with the first part, I wasn’t entirely happy with the end product. I also wasn’t satisfied that I took the right approach to the brief. I feel I could have spent more time researching & building up an idea of how the site should function first. I also still feel that the end design lost a lot of the character I imagined for it initially.

Having now completed the Authoring Principles assignment, I am glad my templates were relatively simple as it meant that creating the web pages was less time-consuming overall. However, had I researched site functionality in more detail at the beginning of the brief, I could have saved myself even more time & created something of higher quality!

Even more lessons learned!!


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s