Search

Hilton Design

Category

World of Tanks (FMP)

Evaluation and good design

06/03/17

The visual communication/message of the piece met the need of the brief because I researched strongly into gaming websites and also read the brief very clearly.

I feel that I should have done some market research on free games and what attracts people into buying them. I think I should have put a little more time in to the project on the research side of things.

My strengths in this project were my visuals I believe and the concept of the website. Also I felt very positive about my story making on regards of the response from our client.

My weakness would have been that I didn’t mock the site in muse to try and hook the clients in to liking my work even more. I think static images don’t really excite people but when someone see’s a project like a website functional they then go on to loving it.

I found my time keeping skills were pretty well set out as usual even though it was a tough deadline and I work twice a week I got some great advice from there.

Like I said I do feel that I should have researched more into the marketing side of things as that in the real world designers do have to do it. I should have also downloaded the game and grabbed a feel of it though I did look at reviews and people on youtube and it didn’t really fuss me in to downloading it.

I drew conclusion to the project by showing many people my visuals for some feedback, asking if they understand them. The people I asked were professionals so it wasn’t like I was only asking friends and family.

What I enjoyed the most about this project was creating the visuals for the website, I love web design and I’m constantly learning about adobe muse, the only reason to why I didn’t use it was that it was only a week project and they weren’t asking for a fully functional website.

I have considered the sustainability of my project process and outcomes by making sure the the target audience would react to my idea in a good way. If it were to go further there would be further analytics.

I have considered the ethical implications by taking into consideration the fact that I did not include any graphical content, that I researched and respected the history of some amazing tank battles no matter what countries were involved and also the fact that my story was very personal to back up that the game is not all about blowing things up, that there were real human beings in these tanks dying for our countries and their families.

 

Advertisements

Final PDF

03/03/17

Download my Final

V

*Pitch*

 

Final amendments and pitch visuals

03/03/17

So I have made a few adjustments to my final pitch to make the presentation look clean and very easy to view. I will be talking about what these slides mean and what I have to to change the layouts of the pages if I have.

Slide 1 – More than just a mission

screenshot-2017-03-06-16-23-24

This slide is new but this will be showing as I talk about the story behind my mini movie. I found these pictures portrayed the situation very well with photos captured from the movie known as Fury. The top left image resembles the brother with a lost one with his new tank squad. On the top right shows him kissing the necklace found in the ruins of his brothers tank, the person behind him is of course a memory of his brother. The two bottom images show the action and tactical side of the game. The title is to give off the fact that it isn’t just a mission, it can get personal.

Slide 2 – Landing page

screenshot-2017-03-06-16-23-33

So here is how the landing page looks, pretty straight forward and easy to see still in the same layout as before. Though I have added their slogan to it to keep brand consistency. There is also a call to action to tell the user to scroll down. I hadn’t mentioned previously but this picture will be a GIF showing the embers light up and other parts too like the explosion expands as you scroll down.

Slide 3 – Video slide up

screenshot-2017-03-06-16-23-36

This slide is exactly how I have left it.

Slide 4 – Tank scene

screenshot-2017-03-06-16-23-39

Changed the background to a field as that the story is based in Germany grounds and I do believe they don’t have deserts there! This background will be an animation that constantly moves, the weather will be the main movement as it’ll be raining.

Slide 5 – Tank animation

screenshot-2017-03-06-16-23-41

Here is a quick story board sketch which I put together. This parallax will be incredibly detailed and will be one of the main parts of the web page. as I’ve mentioned in my previous blog it will animate depending on how the user scrolls.

Slide 6 – Fact screen

screenshot-2017-03-06-16-23-44

So instead of the whole letter idea I thought to completely scrap the idea and go on to showing off the historical side of the game with a fact screen that will appear from the explosion of the tank. This fact screen will go through statistics such as how many tanks were made during WWII, How many were made for Britain, How many stayed in tact from WWI.

Slide 7 – Have you got what it takes to be a Hero?

screenshot-2017-03-06-16-23-46

Here will show the banner to again hook the viewer and convince them into playing the game.

Slide 8 – Twitch and gallery

screenshot-2017-03-06-16-23-49

On the left will show twitch videos embedded into the site and on the right will be a gallery acting as a journal of the two brothers’ time in the war together to add more emotion. The background image is of the dead brothers funeral.

Slide 9 – Menu and pinned bar

screenshot-2017-03-06-16-23-51

Here I have designed the top bar as you have probably noticed throughout the whole site it has always been there pinned to the top. The logo from the front page has reduced to just the emblem to again keep consistency and has been pushed to the top left hand corner. The button saying play now for free is still there as that it is a major part of the site. to the right is a “burger menu” that once clicked upon will bring up the side menu as you can see in this screenshot. Once clicked upon the title World of Tanks comes in an engraving animation to again bring life to the web page.

Slide 10 – The scroll out

screenshot-2017-03-06-16-23-54

Here is just a look at the whole page panned out to give a overview of the site.

Slide 11 – Phone version

screenshot-2017-03-06-16-24-00

Here is the phone version as a static one pager, the reason why I haven’t included all the other elements of the site is because it would destroy users data and will show as too much. When I’m on my phone I don’t want to be scrolling forever to find something interesting I want it right there, this is loads of peoples attitude to the web based on mobiles so this is why I have done it. Also I would hope that the video alone would hook people in without the other elements.

 

My second approach to the story

28/02/17

So I’ve been thinking and well with the story it seems a little too depressing and I feel that this wont help them out increasing their audience. So the new idea is as followed.

The video will be 3 – 4 minutes long and will take place during a great tank battle between USA and Germany. The story begins showing a fallen squad with one man left minorly injured, he finds in an emotional scene his brother was killed during the previous battle that he had survived. In a rage he gathers all remaining tanks (8) and sets off to avenge his brothers death. The battle ends up being an 8 v 25, the video will follow the eight tanks that (spoiler alert) finally win the match, there’s a catch though, it will end on a cliff hanger on a one v one last man standing with the main character being the last on the American side. The final clip will be one of the tanks barrels firing but the viewer will not know which one as that from the angle of the shot it was captured will not reveal what team it was. The video will focus heavily on the people within the tanks and gameplay. It will contain gameplay mixed into real life acting or animation (CGI) which will strongly engage the viewer making it seem as if they are controlling these soldiers in the tanks. This will make the viewers seem that the game is leaning more towards a tactical approach.

Once the video has stopped the the web page will then auto scroll to the next page showing the final tank on the enemy team. As the user scrolls the friendly tank will fire a shell (the user won’t see this as that it will be off screen). This complex scroll effect will flow through the animation of a tank blowing up and the user will be able to reverse the action by scrolling back up. This animation will be well detailed to show the quality of the game.

As the user keeps scrolling a panel will fly from the ruins of the explosion and will show a fact screen about some rather interesting statistics of the history of tanks within the war, this will show the history side of this gaming/ educational app.

The user finally gets to the bottom of the one page website where it will then show screen shots and twitch videos of the gameplay. A title will also appear above the social panels saying “Have you got what it takes to be a hero?”

Next I will be going on to showing my idea visually as to how it will look on the web.

Researching real life tank battles

27/02/17

Here I am going to do a little research into what actually happens in real life tank battles to help me build up on my story as I feel it is not enough to hook people in. So here are a few I’ve looked into.

The Battle of Arras (1940)

Not to be confused with the 1917 Battle of Arras, this Second World War engagement featured the British Expeditionary Force (BEF) against the German Blitzkrieg as it advanced rapidly towards the French coast.

Rommel, pictured at center, mistakenly thought he was being attacked by five infantry divisions during the Battle of Arras. (Bundesarchiv, Bild)

On May 20, 1940 the BEF’s Viscount Gort ordered a counterattack, codenamed Frankforce, on the Germans. It involved two infantry battalions amounting to 2,000 men — and just 74 tanks. The BBC describes what happened next:

The infantry battalions were split into two columns for the attack, which took place on 21 May. The right column initially made rapid progress, taking a number of German prisoners, but they soon ran into German infantry and SS, backed by air support, and took heavy losses.

The left column also enjoyed early success before running into opposition from the infantry units of Brigadier Erwin Rommel’s 7th Panzer Division.

French cover enabled British troops to withdraw to their former positions that night. Frankforce was over, and the next day the Germans regrouped and continued their advance.

Frankforce took around 400 German prisoners and inflicted a similar number of casualties, as well as destroying a number of tanks. The operation had punched far beyond its weight — the attack was so fierce that 7th Panzer Division believed it had been attacked by five infantry divisions.

Interestingly, some historians believe this ferocious counterattack was what convinced the German generals to declare a halt on May 24 — a short break in the Blitzkrieg that allowed the BEF some added time to evacuate its troops during the Miracle at Dunkirk.

ref: gizmodo.com

The Battles of Kursk (1943)

After the defeat at Stalingrad, and as the Germans were pushed inexorably back towards Berlin, German planners decided to make a bold, if not futile, stand at Kursk in hopes of regaining the initiative. The overall result was the largest prolonged engagement of heavy armour in the war, and one of the largest single armoured clashes in the form of the Battle of Prokhorovka.

German Panzers and some captured T-34s attack at Kursk.

The numbers are almost impossible to grasp: 3,000 German tanks set against nearly double that figure in Soviet armor. But as German tankers showed time and time again, they could hold their own on the battlefield despite being outnumbered and facing technologically superior machinery (though the Tiger and Ferdinand tanks were starting to close the gap).

The result was, in the words of historian Anthony Beevor, a “slogging match.” One SS tank commander managed to destroy 22 Soviet tanks in under an hour. Russian soldiers approached enemy tanks with “suicidal bravery,” getting close enough to throw mines under the tracks. Beevor writes:

“They were around us, on top of us and between us,” wrote [a German tanker]. “We fought man to man.” All German superiority in communications, movement, and gunnery was lost in the chaos, noise, and smoke. “The atmosphere was choking,” a Soviet tank driver recorded. “I was gasping for breath, with perspiration running in streams down my face.” The psychological stress was immense. “We expected to be killed at any second.” Those who were still alive and still fighting a couple of hours later were astonished. “Tanks even rammed one another,” wrote a Soviet onlooker. “The metal was burning.” The concentrated area of the battlefield was filled with burned-out armoured vehicles, exuding columns of black, oily smoke.

It’s important to note that this was as much a tank battle as it was an aerial battle. While all this was happening, planes duked it out in the skies while trying to pick off the tanks below.

After eight days of this, the attack was halted. Though the Russians won, they lost five armoured vehicles for every German panzer destroyed. In terms of actual numbers, the Germans lost about 760 tanks, and the Russians about 3,800 (for a total of 6,000 tanks and assault guns destroyed or badly damaged). In terms of casualties, the Germans lost 54,182 men, the Russians 177,847. Though lopsided, the Russians prevailed, and as Beevor notes, “Hitler’s lingering dream of securing the oilfields of the Caucasus was destroyed for ever.”

ref: gizmodo.com

Looking at these real life events have given me some inspiration on the fact that it does not matter on the number of units a team has to win it’s about passion and having no fear!

I want to make my story very movie like so I’ll over dramatise the story and will amend my story again in my next blog.

Design idea

27/02/17

As you can see here I’m building the site up visually within Illustrator as it is my preferred program to layout in. The width of the document is exactly the right length for a common sized web page.

screenshot-2017-02-27-22-52-12

 

screenshot-2017-02-27-22-52-24

With this page you can see that I have embedded a youtube video into the background image to add depth to the illustration. I did this through photoshop real quick using the eraser tool and quick select tool. I feel that the hierarchy in this page is well set out as that the user will imminently see the game title then the video, once they’ve watched the video and if thats got them hooked already then they’ll go on to the next object being the link to play the game for free.

screenshot-2017-02-27-22-52-28

Now with these 2 pages they’re a little boring though when I go on to working with the pitch I will make these 2 look as interesting as possible but they are where the animation will take pace of the tank blowing up for then bring up the next page being the letter.

screenshot-2017-02-27-22-52-31

 

screenshot-2017-02-27-22-52-36

Here is the social tab with an image behind that I feel does not distract the viewer to an extent to be put off.

screenshot-2017-02-27-22-52-47

As the user scrolls they’ll notice that at the top the logo shrinks down to just the emblem of World of Tanks so that the brand stays consistent throughout the site. Also the big bright button that wants to draw people in will be in this bar as you can see staying very visible but not too over the top to ruin the quality of the other elements within the site.

There is also a hamburger menu that will open up a side bar to the right linking to all the content on their actual page.

This bar will stay pinned to the top throughout all the “sub pages” (All the pages other the the landing page).

 

My first idea

27/02/17

This is my first initial idea on how I would tell a story to really hit where the heart is. So the Landing page shows a video of someone training to become a tank driver and also shows parts of when they are fully trained showing his great success. I’m still not sure on whether or not to have the video in full screen or on small screen.

Anyway the user will then scroll down to a part where they see his tank as they scroll they notice that the tank then gets blown up, here the user can stop scrolling to see each individual part flying out. A damaged letter flies out of the explosion revealing the next part of the site showing a letter for back home to their wife and kids. The letter will script something emotional and it’ll be along the lines of talking about his great success and how much he misses his family and he can’t wait to see him when he gets home.

The letter then scrolls down to a photo of the American flag folded up next to the note and a photo of him. This will then show as a gallery and a social pad where people can share the experience on Facebook for others to see it and hashtag it with something that would hopefully trend out… not sure on what though at the moment. The gallery will act as a journal kind of thing for the victims that died in the tank.

Research into campaign webpages Pt 2

27/02/17

Carrying on from my previous post I will be looking into a few more web pages.

Mobile strike

screenshot-2017-02-27-17-09-02

Now this webpage has to be the smallest of the lot with just one page and no scroll it is straight to the point though it is not interactive at all in my opinion apart from the video.

The background is a GIF which really isn’t that impressive in quality apart from big Arnold representing the game (probably got paid millions!).

Again though the huge imagery is there to be bold and stand out giving a slight engagement to the audience.

This site is also well responsive though you cant really give them credit for it as it is a pretty simple site. Once the site hits the dimensions of phones it converts the GIF in to a static image and only makes Arnold the spotlight which kind of makes the audience feel like “oh Arnold plays it so I should too!”

Clash of the Clans

screenshot-2017-02-27-17-09-28screenshot-2017-02-27-17-09-23screenshot-2017-02-27-17-09-31

Yet another site that uses large images to portray the quality of the game! (getting old now!) There is scroll effect on this site and it is also responsive, now this is creditable as this site is fairly large. I like the way they haven’t got a nav bar but instead have a hamburger menu for navigation thus gaining more white space. This website would be very good to use as some sort of template though I feel that this again isn’t so interactive.

Hacksaw Ridge

screenshot-2017-02-27-17-35-46screenshot-2017-02-27-17-36-10

Again big imagery to bring power to the web page, this seems to be very necessary and I see why. The images do engage with the user though I feel something else is needed to create depth to put the user in the atmosphere. A good idea would be to bring in layers on the photos and merging them in with some of the content.

Doing this research has given me inspiration for the drawing board! I feel as if I have a keen idea though there may be another in the ruins, I shall talk about this in a further blog.

Research into campaign webpages Pt 1

27/02/17

Here I am going to be looking at other games and movie official sites to get an understanding of how the webpage should layout. I will be doing a few analysis’ of each one noticing bad and good points within them to get some inspiration.

I will also look at common features that I can see within them.

Super Mario Run

With this site it is a little flimsy to navigate through as that the scrolling is very sensitive so it easy to miss one of the very few pages that is within the website. There is no navigation menu which seems odd at the moment but I suppose that with such a small site you wouldn’t really need one. This also makes the user go on to discover every piece of content in a way.

There’s also a big use of scroll effect going on here which is a really cool feature to use to make users feel as if they are interacting with the page.

The images are huge taking up the whole screen making the site visually appetising and really does stick to the branding of the whole Nintendo and Mario scene thus making the site consistent with the overall brand.

Horizon zero dawn

Here for the new upcoming game Horizon you can see that the site has a very sleek feel to it giving it a clean look. Again there is a huge use in large imagery to portray the great quality of the game itself.

Theres great layout for the social links and the scroll effect works in a very professional manner to bring these up.

Unfortunately with this site I feel it may look a bit too boring for the client base of World of Tanks but I will look back to this style of website for possibly my website revamp?

I will now finish this post and extend my research in another post as we don’t want these blogs to drag out so much!

Create a free website or blog at WordPress.com.

Up ↑