Client Project YCA: Feedback 3

I received some more feedback from my lecturer and my peers for my project. These comments were mainly aimed at my introduction splash page:

• The 2 buttons on the front aren't positioned very well. Perhaps be better to try a different layout to make it easier for the user to use.
• The main title on the splash page is hard to read! The font doesn't stand out and disappears ino the background
• The user may or may not understand the terminology to "start desktop" from "start tablet". 

Finalised simplified splash page navigation

Client Project YCA: Development 6

Font changes

On Facebook IMPs, my peers suggested me to use some different fonts. These are the ones I've incorporated into my design. 

On google fonts, I chose "Ms Bedford" because it looks timeless, classical and yet elegant. I went with gold color font for the timeles feel.The"Signika Negative" was chosen because it was a stronger contrast to the title font than what I had before. I used this similarly on the splash page. 

Ms Bedford font

Signika Negative font

Client Project YCA: Development5/Feedback

Slider Customisation 

I've added a linear gradient CSS3 to my slidebar divider to make it easier to use. It now corresponds to the colors of the tagclouds. I think this works well. 

However, I need a bit of code to remove the bit of default browser padding.

1st Idea

I've tried various re-positioning of the textvalue before I came up with my final design.

2nd Idea

I managed to move the slider to a fixed footer position by googling: fixed footer, position fixed solution. I think this makes the most sense. 

Finalised Idea

Client Project YCA: Splash development

Dreamweaver Development

From my initial Photohop design I've been implementing my website on Dreamweaver. I've decided to go with the last design. I've also found that a button as well as the hyperlink is useful user interface-wise because it becomes more obvious:

In my latest version, I have replaced the image based title to a text based one. It was much simplier to align it in the middle with "text-align: center" as opposed to paddng the image. Also the text would be great for SEO, searching for those words.

Client Project YCA: Splash page

Photoshop Mockup designs

I want to make it vibrant and look aesthetic. The different colors is a continuation of the theme in my main artefact. This helps to establish a consistency throughout the design. The colors are a "key" to the different time periods. The concept for the splash page is

• Splash page is: EXTERIOR 
• Main artefact interactive timeline: INTERIOR  

I'm going for contrast and positive and negative space in my splash page.

Photoshop mock-up 1

I like this design far better, the black is a good contrast to the background while being able to see through to the picture of Nottingham Theatre. Notably, the instructions/enter links; I got this idea when I thought about interface design on Flash games. e.g. Neopets. It just makes sense.

Photoshop mock-up 3

A variation of the previous design, I do believe this one works well. 

Photoshop mockup 4