A page about space.

The next page that I’ve been working on is a page combining some images of space and associated facts.

There are an abundance of really interesting facts that I could’ve chosen for this page. However, I needed to make sure that my facts were both suitable and interesting for my lay/ non-scientific audience. They couldn’t be overly complicated and I knew that it would help if they were of a nature that could be easily visualised. For instance the fact that the moon moves 3.8cm further from the Earth every year was included as I think most people can easily identify with or visualise the moon and also have an appreciation of what 3.8cm looks like. I also have to be honest and admit that I chose facts which I could find nice images for, as the whole point of infographics is the art of visualisation. Like this one…


This page was (fairly) simple to produce. My title is consistent with the title on my homepage and every other page that I’ve created. I’ve ended up with a page of text/ facts;

Screen Shot 2013-06-27 at 16.31.33

Which becomes this when rolled over with the mouse cursor;

Screen Shot 2013-06-27 at 16.31.40

The only issue that I can potentially see so far is the legibility of some of the facts. For instance the one which runs vertically down the page is quite compressed and thus a little hard to read. Also, I don’t like the way that the individual div boxes make the fact image seem non-continuous. I really wanted this to look like a computerised blackboard which turned into really interesting and engaging related images. I think the lines from the div boxes spoils this effect a little.


I’ve now solved this slight issue and have (hopefully) made the end result of this page a lot more aesthetically pleasing.

In the end I ended up creating the fact board as an image in Illustrator and then slicing it up and creating rollovers (much in the same way as I made my homepage). This now means that I don’t have lines between each fact box. This method also made it much easier for me to make sure my text was not compressed or elongated and would be completely legible. My ‘Space’ page now looks like this;

Screen Shot 2013-07-02 at 20.48.50


The images still appear when the text is rolled over;

Screen Shot 2013-07-02 at 20.54.10


Clicking on each image brings the text back up. As you can see I’ve also added a few more facts and images in order to make the page both more informative and also more visually interesting. I’ve included the middle image (the purple one of light in space) as the middle because, according to some web design research I’ve conducted, the outward moving lines of light should direct the viewer’s eye-line outwards. Therefore, they should notice/ appreciate the other images more.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s