Search

Hilton Design

Category

Web Design & Design for Digital Media

Final PDF

03/03/17

Download my Final

V

*Pitch*

 

Advertisements

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.

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!

Recapping on my website

13/02/17

For our end of year Exhibition I’m thinking on re designing my website as that I have finished with my logo and that I am pleased with it.

Now I cannot remember the last time I have used muse, possibly last year! I need to get a better idea on the functions of the programme and I feel that I will learn more about it at work experience as I have learnt a rather lot about it since I started there, I’m very familiar with the UI but I feel I haven’t had any hands on experience with it for a long time, I will be rusty but I will go to my lecturer and work experience guys for help and advice when needed.

The website is so key to the exhibition because it will be a digital version of my physical portfolio. I’m not sure on how I’m going to make it look like but I will look at a lot more independent freelancers to get an idea.

I’m including this in my FMP category as it’s to do with it but it isn’t actually part of the brief. I have also put it in my Web design category as that this is a recap!

Final look

16/03/16

Here is the final look of my website on both internet browsers Chrome and Safari.

Chrome

Screen Shot 2016-03-22 at 22.59.59Screen Shot 2016-03-22 at 23.02.14Screen Shot 2016-03-22 at 23.02.21Screen Shot 2016-03-22 at 23.02.25

Safari

Screen Shot 2016-03-22 at 23.03.34Screen Shot 2016-03-22 at 23.03.38Screen Shot 2016-03-22 at 23.03.41Screen Shot 2016-03-22 at 23.03.45

Blog at WordPress.com.

Up ↑