Designs of website

These are my final designs based upon my research and wireframing stages. These were vital for creating a relevant website that met the brief, I have to tried to use the design techniques employed in the Spotify Year of Music site, to bring mobile web experience to the desktop to create a similarity throughout the devices, you will see all of the designs below for all mobile, tablet and desktop.






Creating a responsive site.

When researching into responsive designs, it was said that images can be most problematic, therefore I decided to create a website based entirely upon images to challenge my skills

I set about creating an in browser experience to allow people to grasp the enormous size and distance of our planet and the others within the solar system.

You can see the website working at different widths here (Note how the distance between the planets gets bigger the wider the browser, this is because the bigger the planets, the distance between them also grows to stick to the actual ratios that have been worked out from nasa statistics);

Schermata 2016-01-09 alle 09.56.09Schermata 2016-01-09 alle 09.56.19

and you can visit the website and check it out yourself here;

I am aware through my research that it is important to check the different browsers, operating systems and devices to make sure my site is available to the largest possible audience.

Below is the html & css code required to make this site work;

Screen Shot 2015-10-06 at 16.26.49Screen Shot 2015-10-06 at 16.26.27Screen Shot 2015-10-06 at 16.26.03Screen Shot 2015-10-06 at 16.23.47


I have used percentages on the divs that contain the images to allow the images grow with the screen size.

Percentages have also been used for the padding between the planets, this needs to be done because as the screen sizes grow, the distance between the planets also needs to grow to stay to the correct ratio. This means the smaller the screen, the smaller the planets & distance, and the bigger the screen, the larger the planet size and distance between them.

Ideas I chose against

As part of my branding, I considered using the iconography for the four elements themselves to fit in with the magical theme, I decided to try and create a rotating image but I didn’t think it looked quite right, and I thought it wouldn’t fit in my marketing scheme so i chose against putting it in. This would be places against a black background so therefore only the icon and word would rotate.elements.gif

Another idea I had was to invert the colours of the elements and let them appear normal when user would hover over them, this could be used as navigation, but I chose not to do this as it didn’t work with the overall theme I was trying to achieve and the marketing scheme. You can see the elements below;