Light maker – World of tanks Project

First of all, i chose to go for a different type of idea instead of having the normal tank surrounded around the destroyed tanks. The reason for this is that i wanted to draw it with my graphics tablet but it had some problems so i went with a simpler idea and with assets that i could work with.

For this project i wanted to based the site off something i would like considering i am a pretty avid gamer and i think that my ideas that i am going to provide could make a great world of tank campaign site. So the audience mainly for the website i am aiming for is around gamers ageing from teenagers to even adults who like to play videos games and learn a bit.

Stuff i normally look for in a gaming website:

-I normally look for fan art.

-social media links.

-interactivity.

-a certain theme.

-history or information.


Research & References

To help me create this site i had to look at other sites and see what i thought looked interesting and to see what has been down and what hasn’t.

I looked at the main webpage for WoT to see what type of style they are rocking at the current time.

Screen Shot 2017-03-13 at 10.54.40.png

Now when i look at this site, there is not a lot of cool interactions but there are a lot of news and content for the user to look at, but i feel a bit lost already just look at this page and this is good because i now know to make my site a lot simpler and less confusing for people. One aspect that i did like about the site immediately is the tabs on the right hand side of the site and i also liked the big powerful and epic picture at the top of the screen. It really does motivate to see what this game is about although I’ve played it before and the game itself is long and boring to play. A lot of patience is needed within the game.

One other site that i looked and liked a lot was the Ubisoft website.

Screen Shot 2017-03-13 at 11.40.44.png

The reason i liked this site so much is because it is very simple, it has a nice clean style throughout the site, easy to navigate and it has a nice picture to show what the game is primarily about. When you scroll down there are a lot of information regarding the game and it only shows the interesting side of the game itself. But this site is primarily just about the game and nothing else, i didn’t see anything about social media or anything creative. Other than that this site has got me intrigued with actually thinking about buying the game also i like the fact that Ubisoft is very keen with the community considering it is one of the main tabs at the top of the screen.


Images That I Used From The Internet


Final Designs

For the homepage (front page soon as the user clicks on the link) i thought that i should keep it very simple and with some interactivity in it. So i had an idea of having 2 countries  with their own tanks on their side and the user could therefore click on the specific tank that they like to learn more about it as well as the history of said tank and where it has been or even used in the past.

Possible-homepagebefore.png

To show interactivity on the front page can be hard but i thought that it would be cool and good if tanks from both sides drove drove in towards the centre of the composition from the distance. I felt that it would be best if the site was simple and easy to navigate but has a few tricks up the sleeves to keep people (gamers especially) interested and not bored of the site. I felt like it was a good idea if the site was animated in some way but not a lot to distract people when on the site.

Possible-homepage2.png

At this point i felt like embers would be a perfect fit to be animated. The reason for this is because when you see a tank, you instantly think about war or even a battle and both of hose leaves destruction behind them and when i think of destruction, i think of fire so embers of a fire can show a vague representation about that it is a war game as well as it is quite nice to look at in a small perspective. Also to keep the page looking animated, the flags in the background will be moving as well as there will be smoke coming out of the exhausts of the tanks to show that they are ready to move out on the user’s command. I kept it clear that this is a free to play game considering that soon as you open the browser, the first thing that is there and shouts out the most is the ‘Play for free’ button in the top right hand corner. The reason why i have the whole 2 sides idea is because when it comes to war games, some people like to choose a specific side that they think is cool or better, for instance if i had to choose between the USSR or USA, i would have chosen the USSR, there is no reason behind why i really chose the USSR except that i think they are better than USA.

So once you click on any of the tanks on the front page, it will take the user to another page that will have information on the specific tank you chose.

Once-clicked-on-a-tank.png

On this page, there will be a fully rotatable tank that the user can play around with and understand how the tank is operated. Behind the tank would be the countries flag which will be waving (interactivity) as well as there will still be embers coming off the side of the site, which will be a common thread in all of these pages for this campaign site. One the right hand side would be the specifications and just information for the user to read so that they can learn about the tank a bit more and what armoury the tank is carrying. At the bottom left, there are 4 little boxes that were intentionally going to be the crew but i decided to make it the history of the tank. In the history tabs, the user could click on any of the boxes and it would come up with information about the crew and where the tank has been and when it has been operational. But the reason why it will have information about the crew who actually operated one of these tanks before is because the main idea for the website is to remember those that fought in the wars and to show that without these people who fought in the wars in these tanks, we wouldn’t really be here. Well it really depends on what tank we are talking about because the world of tanks game also uses new tanks that have came out in the past decade so there wouldn’t be much history to it but still would be there to educate people.

When you scroll down the page instead of clicking on any of the tanks, the user would be greeted with a nice and simple page with content on.

a-page-with-content-on.png

Continuing the style with the embers on the side and keeping it simple and clean as well as easy to navigate but has some interactivity along with it. From looking at the current WoT website, i liked the boxes on the right hand side of the site so i thought wouldn’t it be better if that was in the middle of the site instead instead of a lot of news. Continuing down the route of remembering those who fought in the wars, i made sure that the options that were on this contents page are primarily about the wars, educating people and bringing the community together.

For the bottom bit of the page, i felt like that i shouldn’t really change anything from like the actual WoT website because it looks fine as it is but i thought i would keep up with the consistency of the site and change the style.

bottom-bit-of-the-site.png

Throughout the site there is a lot of consistency with the embers, and especially with the selected text. The text i chose to use for the site is Trajon Pro and WarHelios, Trajon pro for the titles and WarHelios for the small text. The reason i chose these 2 typefaces for the text on the page is because they are both easy to read and i think that they suit the style of the site which is war based.

On the official WoT website, they have a social media tab for their own channel but i feel like it would be better if they kept it focused on the community instead. The WoT official social media sites would be at the bottom of the page if the user felt like checking them out or on the top right hand of the site stuck there even with the user scrolling up and down but has a low opacity unless you hover over it.

So to bring the community together a bit more i felt like there should be tabs specifically for people who are in the WoT community whether or not they are already internet famous or not.

twitch-tabtwitch-tab2

Keeping with the same style with the embers and typefaces. So here we would have streamers that would be currently streaming the game live which will show the username of the streamer, how many viewers they have atm and whether they are live or not. This could be used for promotion but i prefer that it wasn’t full of promoted streamers because some promoted streamer are normally rubbishy and not entertaining so it would be best if the developers of the game choses streamers who are entertaining whether they are known or underrated. Once the user hovers over this tab, the embers would start to change colour to what the main colour of Twitch.tv is (purple) and once the user moves the curser away, it changes back to the original colour. An idea that i had would be that the user clicks on one of the selected streams and the live stream would pop up on the webpage itself and will pay for a maximum of 1 minute so that the user could decide to go on the person’s stream over at Twitch.tv on a different internet tab to give the individual support or even just to enjoy the footage hence bringing the community together and having a good time but as well as keeping the user on the site.

youtube-tabyoutube-tab2

And it is pretty much the same for the Youtube.com tab.

I thought that i would do a quick mockup to show what the site would look like on the phone but the problem with phones is that websites normally take longer to load than computer so there would be a lot of interactivity for people on the phone because it could make the site unbearable for the user so having the ember not moving or the tanks would be a better choice just for phone users. For the phone users, if they clicked on play for free, they would be taken to the play store of apple store (depending on the make of the phone) and they would be taken to the WoT phone game which I’m sure they have instead of the actual game specifically for PC/console.

Phone-mockup.png

And to end it off i thought i would just put all the work i did for the campaign site on a showcase page which i could put on my portfolio in the future.

world-of-tanks-a4-website-preview.png

Advertisements

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