I think this brief was very interesting, Working with a live client is very exciting and brilliant experience for industry.When we were delivered the brief the main points I took from the client was that they were interested to see something interactive with some moving elements.
They also made it clear that wanted a new angle for the new site therefore this is where I wanted to start rather than thinking about the design or software first.
I started to look into the ways I could make the call to action very prevalent but also make the audience feel involved and find a way to make them more interested.
Through research of the game I discovered 3 main elements to the game and decided that I would accentuate these 3 main points –

  • Community – I named this Global Domination to make it a stronger point
  • Historical Accuracy – Wargaming prides themselves on the accuracy of this game
  • A Soldiers Story – This will show a story line to the game and give a more emotional connection

    I showed these points different through having a large header image for each one to make it visual and for the audience to gain an understanding for what each one in tailed.

    When it came to creating a live website I decided I would use Muse as this works nicely along side my other adobe software.

    I created a page for each element to make it easily navigable and clear and also to separate each elements clearly.

    I created some GIFFS to include the moving element of the site – I used photoshop for this as they would only be simple imagery and it is easily translated to muse.

    I created 1 that shows my concept of having a counter for how many people are on the page to give that community feeling.
    The other one I created is to show the accuracy of the tanks by having animated pop ups of each element of the tank as a lot of the gamers would be very interested in it.

    As you can see in my blog I pulled all the elements together to create 3 fully working pages.

    I was really pleased with my finals and thought that it worked really well. I think it fit the brief and looked clear and easily navigable.

    I also made social media and youtube as a prevalent element as this is a modern reliance for the audience and this will help keep audience involved and updated.

    The final presentation of my concepts was to show them in different mockups and also I spoke through the different aspects whilst showing the website on the large screen – This worked well and gave the client an idea of how it looked whilst being used etc.

    I was pleased with my final and thought it was effective. I enjoyed this project as it challenged me and also gave me some more web experience which I felt I needed as I hadn’t done this a lot yet but I am really pleased with how it turned out and think that it was a fantastic experience to present to a real client.

    If I had longer I would have included some more moving elements and possible 3D video on the front page to grab attention.

    Overall I enjoyed this project and thought it worked nicely as a final product.



I presented my finals as mockups so that the client could see how it would work in other prototypes – I am pleased with how these came out!

I learnt a lot from the feedback from the presentations from light maker which I think is invaluable as this will be another one of our jobs as designers and it is important to get information about presenting skills.

The main feedback that I noted from them was –

Always stand up in a presentation
Never say “I think” – Try to say through my research etc
Never write down exactly what you will say just carry notes

You can see my live website here – http://worldoftanks.businesscatalyst.com


Ipad MockupIphone MockupLaptop Mock up

Building The Website

I chose muse as my software of choice due to the fact that I felt like I was more used to it because it was adobe and I could cross over with other software I use.

I started by building my pages – I just made simple pages that would like from the master.

Screen Shot 2017-03-07 at 12.20.23.png

In the master page I placed in a white version of the logo and put part of the image I used as other background just to make everything more cohesive and added the footer and the social media tabs – I chose Bebas new as the font as it gives that big bold look that the tanks make you feel.
Screen Shot 2017-03-07 at 12.50.53.png

I then designed the home page – Taking inspiration from my research into websites I created a custom shape and clipping mask in illustrator and then exported as a PNG and placed in and turned it into a button for the pages – I did this to show the main points and make them more obvious!

Screen Shot 2017-03-07 at 12.59.19.png
I then added the free to play call to action and made it large and clear.
As you scroll down the page I added in the youtube link – This will always update with there most recent youtube video – This will keep players involved and updated.

Screen Shot 2017-03-07 at 13.02.53.png


This page is simply to giff I made so I just inserted this into the space – I think the header and footer ties nicely.

Screen Shot 2017-03-07 at 13.03.47.png


Screen Shot 2017-03-07 at 13.04.56.png

Again I just inserted the art work I had already created into a page and again added a large call to action to the piece and the colours, Type and backgrounds work well together in my opinion .


This page shows the concept that the audience would not be able to finish the story until they had signed up – This is a really useful device and I think it works really effectively.

Screen Shot 2017-03-07 at 13.06.07.png

Element Development

I started of by making the moving elements for the site as I knew this would take the longest amount of time of everything.
Screen Shot 2017-03-07 at 11.52.51.png
I started of with the historical accuracy element – I went into photoshop and started to build the elements – I designed a background and layout and took one of the tanks and gathered information from the existing website and from the assets we were provided with and chose the background based on what tanks made me think and to give that hard dark elements of a tank being build and chose this chunky metal look.

I then added the name of the tank etc – I then opened timeline in photoshop and just started to build the tank information around the tank and set a simple giff to get them to pop up as the person scrolls onto the page.

I did this by added the information on separate layers and opened each layer in a separate frame so they pop up and stay in position of 10 secs.
I tested different times but this felt most natural.

I tried to add a little puff of smoke with each fact but this did not show as much as I would have liked and if I had more time I would have done a more smokey faded effect but this is hard to do as a giff as they can be quite jumpy.

I then exported this as a giff and it was really to place into my site so moved on the my next task as I only have 4 days and had to work very quickly.

Screen Shot 2017-03-07 at 11.53.02.pngFINAL GIFF

Historal-Accuracy Final.gif


The next job I wanted to complete was creating a GIFF to give the perception of it being the amount of people on the site – This was only to demonstrate to the client – With more time I would set up so that showed it with the real number of people.

I did this by just changing the number in different frames so it flicked through the numbers so it showed an increasing number of people on the site.

Again using the same background effect and same type faces and colours as I will use in my site – I put different timings in the give the feel of it being real time and people logging on and it changing.

Screen Shot 2017-03-07 at 12.15.15.png

This is the final giff and I am pleased about these and think they will work well together in the site.


Concept Ideas

The lightmaker I started by making notes of the conceptual side of this brief – Thinking about the different ways you could advertise the game to the audience. I think when speaking to clients it is always good to gain an understanding for what the stage the client wants to be at upon presenting your ideas – The client was very very keen to have more concept than finals.
I started of by focusing on the different elements of the game and wanted to pull out some Unique Selling Points to insure these where at the for front of my designs.
From my research into the standing website and also the game itself I decided to jump straight in as this is a quick project! I choose 3 unique selling points of the game..

1. Community aspect – I wanted to make this aspect stronger therefore called it “Global Domination”
2. Historical Accuracy/ Tankopedia – This is something that the game prides themselves on that all there tanks are very accurate to real life.
3. The story of the soldier to make it personable and give an ethical side to it so that it is not all weapons and killing, This gives people an emotional connection to the game.


I then had to work out the way in which I would do this.

The main call to action would be “FREE TO PLAY” element so this would be the element to include – Also they mentioned they want to make it modern and work really well with the way we interact knower days so it was important that it worked not only on desktop but also on iPhones and also to add social media into the page.

They said they would also be interested in moving elements.

I think this would work really well so this is something I will do in my designs.

I had the idea to have a constant digital timer showing how many people where playing the game at one time – This would make the player feel as if they were part of the team and would hopefully make people more inclined to join in.

I really want to include the moving element to the page – I think a cool way to do this would be to show the tank spinning or popping up facts about the tank – This would be something I would be interesting to put on the website to give that Moving, Interactive side.

Lastly I had the idea to play a video to the audience that showed the emotional side and the “soldiers story” BUT I wanted it to stop half way at a pinnacle part of the story and then that the audience would have to sign up to finish watching – This would give the company information and build there email list for promotions.

Other Website Inspiration

This is the first website I found that I thought was really effective due to the fact it is broken up really nicely by the white space between each image and text section. I think this works really nicely. I also like the fact that the buttons are not divided by lines or buttons there just space in between and I think it works really nicely by making it clear yet still simple and modern.

Webpage reminder.jpg

I think this is really effective with the stacked effect – I like the way the top image stretches across to a full screen image as this is defiantly a trend within web design at the moment – I think this draws attention to the top of the page where you want your audience to look, I like that it has a hierarchy and that the imagery is more thin so that it draws the eye to the middle –  I just think the stacked effect works really nicely.


I love love love this example – It has so much that inspires me in this webpage.
I like the image at the top and really like the geometric swift feel – I think this could actually work really nicely to connote speed for the subject matter. I think that this will work really nicely – I think it also works how the have placed a darker hue over the image to make the logo and title stand out more.

I also love the menu and think it stands out nicely.


Exsisting Webpage

This is the home page for an existing website for the World Of Tanks game at the moment – As you can see the imagery is a heavy part of the website. This is because a game is something that people like to be visually involved with and like to be part of the 3D imagery – Reading along the bottom I think that it is powerful that they have every element covered.
The Historical Accuracy is really interesting for people who are more interested in the logistical side of things.
Global domination is something that works really nicely as an interactivity side of things – It insures that people feel like they are part of a larger scheme – this is something I would like to include in mine.
Free-To-Win, This accentuates the selling point – I really like this website although it feels very linier and static for something so action packed and mellows it out rather than giving the action packed feel I gathered they are looking for.

I like the fact that the game is simplified into 3 unique selling points – I think this might work nicely in my webpage and I could use these elements really effectively – I would consider breaking these down into pages so that you could research further into each section as I felt like I wanted to click on each one and read more – This could work nicely.

I think the button at the bottom works well – They use quite dark colours through out and then this pops right out – That really interesting.

Screen Shot 2017-02-27 at 13.39.48.png

This is the gallery section of the website which I think works nicely to demonstrate the quality of the graphics as I feel this is something gamers are interested in when deciding to play a game. I think this also shows the quality of the game and also how it might be to play – This is something I will consider including.

Screen Shot 2017-02-27 at 13.40.13.png

This is navigation of this webpage is simply and works nicely – It is a running long website rather than a page by page which I think works really nicely – It reminds me of a remote so it is quite an intuitive navigation I would say although I feel it come have done with being slightly larger.

Screen Shot 2017-02-27 at 13.40.20.png