Initial War Site Design

So for my design, I already had researched and arranged the content I wanted to to have on the page (you can find the earlier post with the content on here, I knew the general theme I wanted to go for, it was time to get my initial ideas down on paper. Having completed research on grid layout I knew it was important that my content could be presented using a grid. Here you can see the initial designs;

1 2

You can see from these designs I have started to split the screen into two, left & right, war & peace. You can start see that by using the different sections, I can change subject or style quite substantially without it reflecting on the flow of content. This seemed to break the page down into bite size chunks which made it easy for the viewer to digest. Using larger than usual images and fonts draw attention to the text, therefore the impact is the facts not the design.

Something that is shown in this initial design though that I decided not to carry through was the droplets of blood. This is something I thought worked well in a the design of a website about fracking (which iI wrote about in this blog post ) where you follow the water droplet down into the ground. Basically it was going to represent the blood split from the wars I was discussing in the design. I thought it wouldn’t work in my design though because I wanted edge slightly away from the flat appearance of the site by adding faint images of war in the background, and I didn’t think that would have worked well with a flat designed blood droplet.


Current interactive experiences

I am creating an interactive experience online for the user too learn more about the lesser known facts about war. To help me in the process of creating this I am going to research and try to understand how to best capture the user within an interactive site. Parallax scrolling is what we have been told to focus on so I will be looking for mainly interactive parallax scrolling sites but I will also look at others.

Screen Shot 2014-12-30 at 11.52.16 is a great example of parallax scrolling being used for a an exhibition website.  It uses images with a flat colour overlay to create a texture on which text is placed upon. The texts itself is kept to a minimum and maximises the potential effect white space can have,  this creates intrigue into the content. There is a section at the bottom of the page where you can select the different designers so that you can see you can see one of their pieces of work and the option to buy it. Again this causes the user to want to see the exhibition so they can see more of the art. This is almost what is required for my brief for creating a interactive user experience, and a very good inspiration for me to start my research.
Screen Shot 2014-12-30 at 11.55.48 This website is making good use of modern design techniques and that’s what makes it stand out the most. Flat colours, parallax scrolling make it simple enough to use, there are different sections which all have different bikes and colour scheme. The purpose of the site is to actually sell the artwork which they feature on the site, and this isn’t actually obvious when you are looking at the homepage, it’s only when you click on the shop i con you realise they’re for purchase.
Screen Shot 2014-12-30 at 11.53.49 Is a brilliant sales site for basically a box of stuff to help you learn beatboxing. The entire site can be navigated with the keyboard as it is also parallax scrolling. It’s main interactive feature is the one which you are greeted with as soon as you land on the site, a virtual set of beatbox noises which are linked up to an image of the instrument they represent and they can be clicked on or there is also a keyboard button that represents them. The target audience would be captured by this experience because as a music lover they would be able make the beats themselves with the keyboard and then if they are sold can go and buy the DVD.

Screen Shot 2014-12-30 at 11.54.29 Is another excellent site that tells a story to it’s users with video, sound and parallax scrolling. Story makes the daily lives of many much more interesting finishing at the office and driving home, but instead it’s a spy mission to steal some documents from an office and get home safely.  It’s a completely immersive experience that allows the user to actually get lost in a story rather then just viewing the webpage, it’s a clever sales technique that helps to connect emotions with a product which is what Sigmund Freud started back in the 50’s.