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.


Understanding dynamic content

Dynamic content is what I am going to use for my thematic online photo gallery. It basically means a website that regular updates it’s content, there are many examples of this on the web. Since dynamic content can include text, images, sound and video I can show examples of each different version.

It has been used here by YouTube to create a personal experience of videos that you may be interested in based upon history and likes;
It is also used to produce results to a user specified search term such as “uptown funk bruno mars”;

It is also used by social media platforms to create a personalised experience with tailored content. You can see examples of this here;


InVision – Final Verion Prototype

Creating my design using InVision, a live prototyping tool was very useful as it allowed my design to appear just like a functional site. Having designed the site to be the best of my ability, I didn’t feel by simply show the images did it justice, therefore I exported every possible combination of my design which came to a total of 19 because of the amount of different sections. I then used ‘hotspots’ to link certain parts of the image to another image, therefore, I have created a prototype of my design which is usable and ready to show to clients. Once I had got to this stage, it allowed me to discover issues that I had not found previously, firstly the text is not bold on the “Fluorescent Lightbulbs” in the peace side of the budget section.


Secondly when you scroll through the 10 most profitable companies in the US, I have missed the logo from number 5.


These are two small issues that I could easily go back to resolved. In line with simpleness the section in which you would purchase tickets works really well, but it doesn’t allow the user to confirm the price or ticket amount just after putting their card details in, this would maybe make a better experience for the user.

This also meant I was able to view the site from mobile devices on the web. I have been able to see a couple of instances where the design doesn’t work and may have to be re-imagined for mobile devices. The first example of this is the contrast of text over images, because the screen size is smaller and the text only slightly darker than the background image, it becomes a little harder to read.You can see this here;


Another mobile issue is the size of the buttons are a little too small to press on the mobile version, therefore would become a usability issue for the user, and would take away from the overall experience. You can see this here;


The actual working prototype is available here for your viewing pleasure;

Fourth Design Stage

This final design stage was basically for me to iron out any small details that I disliked about my design, to allow it become the perfect design without any flaws. To begin this I added the last bits into the design that I thought were required. The first one was the images of the president Bush and Kennedy, I decided I wanted to make them look even more liker a picture so I thought the best way to do this would be to frame them in an old fashioned Polaroid, you can see here the old and the next version of these sections.

2 13 4

The next change was at the end of the page, I currently had a page making the customer aware that there was an exhibition and how they could get involved, you can see the old one here;


I decided that the whole purpose of the site was to get people to go to the exhibition, therefore I should try to drive sales as much as possible. I did this, by building into the page, a way of purchasing the tickets that didn’t take them away from their current experience, and was easy and simple to finish. The reason for this is that I found in many purchasing devices, in an application, there are in-app purchases, so I thought I should take full advantage of it and implement it into my design. You can see examples of in app purchasing here;

12 14 13

So the original page has lost the prices of the ticket prices but has had the arrival of a “Buy tickets” button;


The next three steps are as simple as possible to make it easy for the customer to complete the purchase without too much hassle;

7 89

instead of boring white boxes I have opted for a design that fits in with the page, with the text inside the boxes so the customer is aware that it is indeed a text box. To make the customer aware of how easy the experience will be I have added a steps section at the top of the page so that they aware of how much more they need to do to complete the transaction. With total of just 9 boxes to fill in, the form is super simple and escalates the potential customer to a customer really quickly, without taking them away from their experience therefore giving them no chance to forget or think against the decision of purchasing the tickets.


For the final page, I have opted to use emotive language rather than sales talk like “Your sale is complete” the reason for this is because of the overall experience I want the user to have, and I believe this way it is much more immersive by making it more of an experience than just spending money. I have added an image in the background of a few important politicians looking smug with the caption “It’s time see the truth for yourself” indicating that they do not represent the truth, this would follow the sort of bias perspective the exhibition is giving the viewer. I have also told the the viewer that they will receive a starter pack, again language is important in being consistent with the overall experience for the user, rather than saying they will receive the tickets in an envelope, they will receive a starter pack which contains other information about getting involved with the exhibition campaign, which would raise awareness of the exhibition & website generating more profit for the exhibition owners, which is, other than informing the user, the overall aim of the site.

Next important step was to start arranging the content using a grid so that it has consistent layout throughout the design. I found a 12 column grid which I arranged vertically, and the duplicated it and made it horizontal, I therefore had a modular grid with which I had to be able to layout my content the way it needed to done. you can see this grid here;


Next, I created vertical guides within Illustrator to split the page into eighths, I did this so that I could have multiple ways of scaling and position objects within the design. This meant my design was consistent throughout and you can see these guides with grid on top of design below


This meant I had a grid for the sizing of objects and the vertical positioning of the objects within the design while I used the guides to align the content horizontally.

Next was an easy but time consuming stage of going through the entire design resizing, reshaping and reorganising the entire design to make sure it fit in the grid. This meant the design had a much better hierarchy and the content flow was much better and allowed the viewer from get from to the top to the bottom much easier. You can see the grid on top of the final design here;


I also redesigned the interactive sections to fit the grid and you can also see these here;

30293031 27 28  1626 25 24 23 22 21 20 19 18 17

I also added in couple of addition faded images to give it consistency with the other sections and you can see all these here;

32 34 33

The Final Design is here;Mockup

Facts About Iraq War

This is the facts that I will be using in my design, the links are available.

A lot of the information used is from YALE & HARVARD studies,

It will be my job to present this information in a user-friendly way


$640 Billion estimated spent on Iraq war

How it COULD BE spent;

$30 Billion/Year is need to end world hunger

$20 Billion to end homelessness in USA

$10 Billion top provide world clean water – 40% of the world don’t get clean water

$70 Billion/Year to provide free healthcare in USA

$63 Billion/ Year to make higher education free for all

$118 Billion to put a solar panel on roofs of every property

$200 Billion Free internet worldwide.

$40 Billion for a 1 week, all inclusive holiday to Europe for every US citizen

9B 15 Fluorescent Light bulbs for each us household



How it WAS spent;

6M/10B = 1650 Missile Launchers

1.3M per soldier x 100,000 soldiers = $130B

114M/12B = 100 Stealth Fighters

Destroyer Ship 1.4B x 62 = 87B

Submarine 3B x 30 = 90B

515 Helicopters 70M/36B

42 Surveillance Hawks 10B

15 Aeroplanes 34B

3B to arm soldiers with guns, ammo and grenades

80B Research, Development, Testing & Evaluation

62B = 10,000 Tanks


$401 Billion from the TOP 10 arms-producing and military services companies

“This work begins with keeping our economy growing and I encourage you all to go shopping more” – George Bush, Day after 9/11.


2.5 million barrels per day – Oil

$30.10 per barrel on month of invasion

$752,500,000 per day





Total Iraq’s killed = 179,240

Total Americans killed = 5,272

Total killed = 184,512

1 American 34 Iraqis deaths

2,996 people died on 9/11

52 people died in London underground bombings.

References: – song – bush shopping

Featured Image; .jpg