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!!

Assignment 6 (Part 1) – Logo & Identity Strategy

Design Practice

Our 6th assignment was was divided into two main parts, the latter of which would be a joint project with the Authoring Principles module. The first part was to create a logo & identity strategy for a fictional company from a choice of three.

My choice of company was “Sound State”, which had the following description:

Sound State is a soon-to-launch independent music label for aspiring new artists. An integral aim of the company is to find and sign-up the best up-and-coming talent. They require an identity that is fresh and current and communicates to music industry professionals and musicians alike. Consider how the brand might use its online presence to achieve its core aims and objectives.

My first step was to research imagery associated with the phrase “Sound State”. I then looked at different types of typography & uses of the letter S in other brands & logos, as seen below:

Sound-Associated ImageryS Typography

At this stage I had a few ideas for what route I would take with the design of the logo & wanted to explore the idea of colour I had in my head at this point. The below images best illustrate the colours & feelings I had in mind:

Colour Research 1Colour Research 2

I then began sketching out basic ideas for the logo based on the items of research which interested me most. Vibrating strings, waves, and use of simple S shapes were all areas I looked at while sketching, as shown below:

Sketches 1Sketches 2

At this stage I decided to play around more with the ying/yang symbol as I felt I could achieve an interesting juxtaposition of the separate “Sound” & “State” ideas by using this symbol. The final sketches & first digital concepts created in Adobe Illustrator (Ai) are shown below:

Sketches 3Digital Concepts 1

I received feedback from classmates & the module lecturer at this stage. People very much liked the use of the ying/yang symbol overall but the main point of concern was that the treatment of the “Sound State” text, especially how easy/ difficult it would be to read if the S shape in the symbol was used as the beginning of the word “Sound”.

Interestingly, someone pointed out that the black, red & yellow Ai concept on the top right reminded them a little of the Toucan from the old Guinness ads! Happy coincidence!

I developed the concepts a little further at this stage until I was happy with a strong final logo.

Final Concepts

The finished deliverables for part 1 of this brief are shown below.

Part 1 - Deliverables

Again, I feel I didn’t quite give myself enough time with this assignment, resulting in a particularly stressful few days in the run up to the submission date!! However, overall I was happy with the logo & identity I had created for “Soundstate”. I was also happy that I had learned how time-consuming & intensive the process is to achieve a successful final design. Yet more lessons learned!!

The second phase of the project would build on the work carried out so far.