Simulated Project - Final Product

Well its all finished now so here are a few screen shots of some of the different pages showing you what I have done on each page.



As you can see home page has the music player. I have only added that on this page. The general layout is with the image at the top, menu beneath and information at the bottom not forgetting a menu at the bottom including an accessibility page.



The File Sharing Page



As you can see at the bottom of the pages I have the menu incase the css style is switched off, the logo in bottom left shows that I have tested all of the pages with the W3C site.



I have added some simple imagery to represent what is in the text.



As you can see I have included my flash quiz which I have mentioned in previous posts.



I added an accessibility to explain to users how to make the text bigger/smaller

Simulation project - Imagery

One of the main points that I stated in my proposal was that I was to incorporate imagery into my website however rather then finding the images online I thought that I would actually create my own images being that this is a 'copyright' project.

So with the help of my friends and a very good camera I created these images below that you may have seen in other designs of my blog but I wanted to show everyone that I was the one who shot these images.











I was initially going to leave the photos as they were but when other people looked at the images they all said that there was something missing. When I went back home for a few days my mum said that she really liked the logo. As there was no appropriate place to put my logo within the site I decided to incorporate it within my image. Other people also said that when searching the site they were unsure as to which page they were on, so I have added a few words making it clear to the user which pages they are looking at.

Simulated project - Interactive elements

As I stated in my proposal (even though you cannot see it) I intended to do a couple of interactive elements for the micro site. From looking at different campaigns questionnaires were the best source of interactive elements so... if it worked then I'm going to use it.

I managed to find some quiz questions that I found online which you can find here they're basic knowledge but it works with the website.



As you can see I have incorporated my logo into the quiz however changed the colours to signify whether the answer could be right, wrong or both.



From user feedback I received some positive comments. The main issue with questionnaires was either they are too descriptive or too long. Having kept the questionnaire to five questions the user will not lose interest.
I did also provide the user of three options. If the question was answered wrong then the user cannot proceed but can try again until they get the answer correct.



This is one of my interactive pieces I still need to work on the music player but thats one piece done.

Simulated Project - The start of the web designing

So I have researched into the brief, created some ideas, wire frames, more designs ideas, recieved user feedback, talked to David and made my ammendments so now I can finally start creating my CSS template. As you can see below I have added some curves to the main content box (from a user opinion) but this is only the beginning stage. Having shown my peers my first outcome I will intend to create an internal box, also with curves to give it a more symmetrical view.

I will also have to work on the imagery becasue if the user switches the screen off then only blank boxes appear (obviously text has not been inputted).



This is a screen shot of my design on a computer screen with a resolution of '1920 by 1200' I have been working on my laptop (13inch screen) and it still look good even though you have to scroll down vertically you do not have to horizontally. So overall the site is comming along nicely.

Simulated Project - Design Ideas take 2

Ok going back to my wire frame ideas I then moved onto creating a photoshop design, basically what the wire frames would look like with imagery and text. Below are the four designs that I created.









As you can see from these four designs there was an improvement from the previous designs. I managed to get feedback from some potential users, asking them on what they thought was the ideal design, the majority of people that I asked agreed that the top design and bottom were the most successful ideas.

In my opinion I like all of the designs however the middle two designs was not what I was looking for, I wanted a simple design because of the brief stating that it was a micro-site. if the brief wanted a bigger site then I would have probably opted for the middle two designs because the layout in which I designed for them have the room for more information and interactive elements.

The two designs that I chose are basic but I feel that that is what we need for a micro site. after consideration I finalised my idea to the bottom design, my main reasons for this was because I felt that it would suit all monitor sizes and because the layout has been used in other websites so it has proven to be a good layout.

Having talked to David about my designs he pointed out to me the colours were too bright, which looking at it now I agree with. In my proposal I quoted that I was going for a 'light hearted' approach, how does bright red represent light hearted? So I opted for more pastel colours which work well in the design.

Simulated Project - Design Ideas

So I just had my presentation with David and when showing my designs it suddenly occurred to me that I haven't actually uploaded any designs onto my blog!! So I would like to present to you my first initial designs.







As you can see from these first three designs they were not very successful, I was trying to think of designs before I had even thought of an initial layout. Having grasped inspiration from other websites I thought that I could create an idea that would immediately work. I was very wrong.

The designs that I created here I feel are too 'square' they do not look like a website page. As you can see in my previous blogs I moved onto designing some wire frames which helped me choose my final design idea but I just wanted to show you that I did attempt some designs.....but they were not successful.

Simulated Client project - Wireframe design

When I first saw the brief and it was said that our propsals were to include our wireframe designs I immediately thought 'wireframes are not that useful'.... I was very wrong. I initailly started designing straight away however I found it difficult to grasp a layout idea so, I went back to the beginning and gave wireframing a chance.

After looking at a number of different sites I managed to grasp the idea that wireframes were not just the starting point of a design but there were more reasons as to why we should use them before our design proces:
- With a wireframe you can provide the client with mock-ups from the word go, saving you time on working out designs, plus it will give your client an insight on your ideas.
- More collaboration - by getting your wireframes ready you can discuss with the client whats important for the site. Clients have also employed you to do the designing, the creative aspect of the process maybe a bit daughting for them so having wireframes, a clear and simple layout will provide the client with an easier outlook on their potential site.
- Creating simple wireframes gives you time to focus on different aspects of the site rather then the desiging i.e. what you want from the site, how visitor will react etc.
- Will make the designer think more about the composition rather than the colours and imagery hence, improving your design skills.

I found some useful information on the Grace Smith website so take a look it may give you some inspiration.
Below are my wirframes for the client project, as the designer I will pass these onto my supervisor (client) and get their opinion on what they like.