Week 4 – Planning the site.

So, in week 5 we need to present a layout and site map for the website. We also need to define an audience and purpose for the website. So, here goes…

My website will aim to target a fairly lay audience, who may not have any specific or detailed knowledge of science. I want to produce infographics that make scientific information and statistics both visually and conceptually engaging.

I’m thinking of keeping the layout of my website quite simple, as I think the main feature of the site should be the actual infographics.

Here is a very simplistic flowchart of the pages I’m going to include;



Here is the timeline that I’ve given myself for the next few weeks in order to complete my website;

•Week 5 – Finish food and Climate change infographics and place on pages.
•Week 6 – Top 10 infographics on page
•Week 7 – Space infographics.
•Week 8 – Check links and rollovers/ troubleshoot.
•Upload website.
And here is a very simplistic wire frame view of what each of my pages (apart from the homepage) will potentially look like;
Screen Shot 2013-07-02 at 22.32.07

In order to properly plan my pages I need a consistent theme – and part of this will be a colour scheme, which should unify the pages. This website (http://webdesign.tutsplus.com) includes some very useful tutorials on web design theory. So, I’ve been using this as the basis for planning my own website.

Using a variety of contrasting colours I can help to focus the viewer’s attention on specific elements on my page. I have chosen to use a dark grey background colour for all of my pages. Mainly because this fits in with the chalkboard concept of my page. As I’ve discussed earlier i need my background to not be so bright/ vibrant that it detracts from the design element of the website. In order to focus the viewers attention on the conical flasks on the homepage ( this is important as they are the links to the subsequent pages) I have given them a contrasting white outline.

I also used a really useful website to help me to chose a colour scheme. I felt that just having a completely grey/ black/ white (achromatic) home page would be a little uninteresting. I’ve decided that rolling over the conical flasks and title will provide some colour. Each category of infographic will then have an assigned colour. In order to chose which colours were to be used for the rollovers I used Kuler ( a website which allows for the easy creation of a colour scheme). I wanted each category to have a sufficiently different colour that they could easily be identified as separate, so I picked a compound colour scheme (which is shown below).

Screen Shot 2013-06-03 at 19.21.31

So far I have a mock-up of the homepage. Each of the links (the conical flasks and the title page will hopefully change colour as you roll over it. Hopefully the contrast between the dark grey of the background and the white outline of both the flasks and the title will help to draw a reader’s attention.


The initial homepage is above. Rolling over the title will result in the change shown below. The background changes from grey to black in order to help the title become the focus of the page. The conical flask elements also change from having a white outline to a grey one so that the viewer’s attention is kept on the title element.

ImageImageAbove is the result of rolling over the climate change flask. The title disappears to make room for a label informing the user of the nature of the link. All of the other elements are de-prioritised by switching to a grey outline.


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