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);

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

http://scottlewis.eu/exp/space/

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;

NOTES;

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.

Advertisement

User Journey & Wireframes

The first thing the user sees when they visit the website is a landing page. It contains the Title screen with the quotes “dark magic of the ages”. They then press the enter button below which takes into the main page. This main page contains four different spells which are specified below;

AIR – Invisibility
EARTH – Resurrect
WATER – Breathe underwater
FIRE – Inflammable

When visiting each of these pages they will be greeted with images of the elements, the recipe to create a spell and an example of it being used. This causes intrigue for the user, making them want to find out more and then finally the last option on the main page is the exhibition. The exhibition page contains information about how alchemists created gold from other elements, a booking form and also a way to share the experience with friends on social media.

Alchemy

This exhibition will be viewed by many people both young and old. Needs to be very accessible and have and dictation content that is easy to understand for a wide audience. I need to create a website that not only creates a magical feel and experience for the user but also inspires the user to go to the exhibition, this can be done through use of a really powerful marketing response. I have chosen topic of alchemy because within crates an feel of mystery, with many of their spells relating to making gold from other materials and creating a philosophers stone that extends life that creates immortal human beings. I have read “Alchemy and Mysticism” written by Alexander Roob and “The philosopher’s Stone” by Peter Marshall. Both of these books have emphasised the point of unrealistic spells to further prolong their life. All the elements within the spells are made up of the four elements earth wind water and fire. Below are my initial notes I made;

– Story of the preservation of Lady Tai.
– Charcoal & Mercury Sulphate creates perfect body preservation.
– It was believed that mercury could be turned into gold.
– Adding Mercury to copper would make it look like gold
– It’s a symbol of pure consciousness of the journey of your mind to enlightenment

Fibonacci Sequence

The first part of my research brought my attention to the fibonacci sequence which is all about creating a ‘golden ratio’ I managed to research a lot of companies that all use this sequence when creating their logo. The Fibonacci sequence is the following sequence of numbers (http://en.wikipedia.org/wiki/Fibonacci_number);

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

They are based upon the fact that “each subsequent number is the sum of the previous two”. The sequence created by “Gustav Theodor Fechner” (http://www.banskt.com/blog/golden-ratio-in-logo-designs/). A man by the name of Leonardo Fibonacci then went on to develop this further by introducing the idea that if you divided two sequential numbers you would arrive at the number pie. Using the Fibonacci sequence to create this image of the perfect rectangle.   There are many examples of the fibonacci spiral used in history, nature, our universe and general physics. It is seen as the “universal constant of design”.

I think it is an extremely important part of design that i happen to have stumbled across, as it appears in so many aspects of life without us realising, and I am going prove this.

Universally (http://mathforum.org/mathimages/imgUpload/Galaxy.jpg)

Earth – Hurricane Sandy (https://akbrodie.files.wordpress.com/2014/09/b36ab-fibonaccispiralhurricanesandy.jpg)

Egypt Pyramids (http://img229.imageshack.us/img229/1329/giza9999.jpg)

Spiral Staircase (https://akbrodie.files.wordpress.com/2014/09/a9596-apple-stair-fib-curve-lr.gif)

Faces (http://io9.com/5985588/15-uncanny-examples-of-the-golden-ratio-in-nature)

The Human Body (http://1111now.com/wordpress/wp-content/uploads/2013/10/fibonacci-sequence-in-the-hand.jpg)

A Leaf (https://akbrodie.files.wordpress.com/2014/09/8de58-4707140963_16e4f1d513_z.jpg)

This video very nicely puts into perspective how incredible the sequence really is (https://www.youtube.com/watch?v=kkGeOWYOFoA#t=107). Not only is this all relevant to nature, and certain physics but is also common across many company logos. I will continue my research into logos using this sequence.