BA: Lightmaker


This slideshow requires JavaScript.

This week long project has been hugely beneficial to me to try and get my head around working quickly but efficiently. The brief was to come up with a campaign to promote World of Tanks via a website and an app design. we had to be cautious of our target audience and how we can promote the idea that the game is free to play.

My idea when I saw this brief was to think of giving the audience a taster of ‘what they were missing’. By doing this, I thought it would be more beneficial to educate them whilst they were becoming more interested in the game at the same time without first downloading it.

Overall, my final piece showcases an example of how my target audience can get engaged with the tanks, the game and also learns a lot about war and how machines work. I wanted the campaign to be simple for everyone to navigate and understand, because the target audience will range from young adults and above.

Because I knew various people of various abilities would be playing the game, I wanted to make sure it was as accessible as possible by checking the colours and making sure that the whole design layout was simple enough to follow through easily.

I feel I have met the brief very well. My website and my app design have been mocked up efficiently, showing the basic concept of how it would work through Invision. Moreover, despite I had never used the software before, I feel I had achieved a good outcome considering that I was having to use trial and error to finish my piece.

Because it was only a week-long project, I would have loved to perfect my website and app, making it even more accessible with more buttons and pages to help link everything more clearly. I would have also liked to perfect the layouts more by including clearer systems and diagrams. Nevertheless, the whole layout sticks to the theme and it is easily accessible by everyone, as well as promoting the fact that it is free to play. Despite this, I am proud of what I have done for my work and the extent of it in the short space of time there was provided.


Making my homepage and my app design.  

To make my website it was quite a difficult process. Following from the sketches that I had drawn to give me an idea of how it would look, I began by doing the initial homepage of where you first come in. I wanted to keep to a relatively simple theme that would appeal to my target audience, and to set the mood and atmosphere as they were experimenting with the campaign.

I started out with watching a video from Youtube of someone playing the game themselves to give me a few pictures to put in my website as reference. By doing this, I can show how it would look to my target audience if they were to see the webpage for the first time.

Complimentary colour matching

Complimentary colour matching

Colour scheme

Colour scheme

I did some testing for colours, and looking at their current website(s), I can see that the colours are quite basic. To keep to this occurring theme, I wanted to do the same. I went for a set of four colours that helped to compliment each other as they stood next to each other on the page. The contrast with these colours helped to give the pages a little bit more definition.

Invision screenshot in action

Invision screenshot in action

I wanted to make my homepage look as detailed as possible, because I wanted to try using my website on Invision, a site where you can mock up your work to make it look (almost) like reality. Because of this however, I needed to ensure that I thought about every step as if I were on the real site.

The biggest challenge for me was making sure that everything that I wanted to link, linked smoothly and effectively enough for the audience (Lightmaker) to understand my concept. To make sure of this, I included small add-ons such as changing the colours and images as you ‘hover’ over the button to make it look like there is additional movement on the screen.

This slideshow requires JavaScript.

Because I only had a week to complete this, as well as the app, I had to make sure everything was kept minimal, but done thoroughly enough that the process ran smoothly. It was important that I labeled all of my work carefully so that I did not get lost as I was making it, and that I could keep referring back my step-by-step process to make sure that everything made sense.

Making my designs using Invision was a lot simpler than I thought it was. Making my website was fairly straightforward, because I had been considering each step the whole time whilst I was designing. I wanted to make sure that everyone could also see the website clearly enough, and so I did turn the monitor greyscale and to the colour blindness mode. By doing this, it was clear for me to see if there were any colours that were combining too much to see easily, making it easier for me to adjust them quickly and effectively.

This slideshow requires JavaScript.

To make my app it was a little bit more difficult than the website. This was because I had to make sure that everything still looked and fit to the theme on a smaller screen. Knowing that screens do adjust, I wanted to make sure a website on a wide screen can adjust to a website on some of the more narrow screens. Overall, this really helped with my thinking process throughout, and ensuring that I kept on reviewing my work as I was going along to make sure that everything looked how I should, and that everything was easy to read and understand. 

Designing my pages in Photoshop to help me get the right alignments for the pages and mock ups

Designing my pages in Photoshop to help me get the right alignments for the pages and mock ups

Lastly, my biggest challenge was trying to make my website as one page, and using anchors and screen overlays to fully get my website across to Lightmaker. Unfortunately, Invision do not supply a part that allows you to move images over a certain part of the screen and it will only show up in that area as you hover over it.

This was a big setback, as it meant I could not show the full potential of my website using the anchor points I had also wanted to include. Therefore, I decided to continue doing a separate website page to show them how I would have wanted the website to purely navigate, rather than focus on the buttons themselves.

My website and app campaign is simple, easy to read and navigate. I feel I have done a lot of effective work in the past week to show this, and considering that I had never used Invision before until experimenting quickly in the time frame I had, I felt I had delivered my campaign well despite this.

Elements used for my website.

Further Ref sources of images:

Design sketch for WOTX.

I did a quick sketch for how I would like my website campaign to look like. The idea of it is that the pages are going to be linked, and they will all be anchored. What this means, is the navigational process will be extremely easy.

The whole point of the campaign is to inform the audience what all of the tanks are and giving them a taster of what it is like to play the game before they download it. The story will be told through the history of the tanks and the soldiers that work inside it.

 How the campaign will work, is it will run on its own separate domain, but it will link with the original website. I want to ensure that everything has been carefully thought through with this project. Because digital design can easily leave certain parts out, I want to make sure each ‘page’ is thoroughly done.

  • The initial homepage will be a video that has sound effects of people talking in the game within the tank. The video will show snippets of different scenes, from joy riding to battles in various tanks and the view will be like the audience is playing the actual game. The homepage will have the button to start the free trial as well as the option to try the ‘tank tester’ that follows the trail of the tank. As you click on a button from the menu, the tank will suddenly divert and the page will begin to appear until it is fully shown.
  • The menu will be hidden at the top on the side there will be the funnel where the bombs are shot. If you click on it, the menu will shoot out like as if it were a real gun. The funnel will have an ‘X’ on it, so you can close the menu if you wish to do so also. The menu will have a homepage, about, tank testing and contact button. It will be kept very simple and easy to navigate. On the menu also, it will include the link to go to the original WOTX site also.
  • The about page will consist of facts about the game purely to give the audience some information. I want to keep this as minimal as possible to allow the focus to be driven to the testing page.
  • The testing page is the primary focus of the campaign. When you select it from the menu, 9 flag buttons will appear, and when you hover over one, half a face of a soldier from that region will appear, and when you click on it, the flag will appear again and it will direct you to the next anchor page. The flag will now stay on one corner to help you keep track of what you’ve selected.
  • The next page will show a map of the game, with circles going around to represent all of the tanks, which will be ranked in a clockwise motion. When you hover over one of them, a faded picture of that tank will appear but the blueprint will be more apparent, and when you select it, the tank will come together in an animated version.
  • The next page will show the information about the tank, the soldiers in the tank, and all the advances you can put on the tank, which will adjust the factual information about it. Once you are happy with your selection, you can click on the button to give you a pre taster of what it is like to be in the game with your selected vehicle.

The last page will show you what it is like to play the game. You will have 3 lives, and you have about 5 minutes to make a target. By having a 5 minute mark it will give the audience a taster of figuring out the game and the controls, and when it is up and they have failed/succeeded, it should encourage them to want to try again and downloa

App design trends.

I wanted to take a look at mobile app design trends as well as website design trends. Because I will be using my concept for mobile apps also, it is important to see the differences in the trends and how websites work differently according to what screen they are working with.

I have noticed that looking at different apps, the navigation is becoming more invisible. To free up space, this has been done. Looking at a few existing apps on my phone such as Unidays and Urban Outfitters, you can see on the homepage that it is full of information, and the navigation is located by a small symbol in the corner, which expands if you click on it.

The grid systems for these retail apps also are very basic. Because the focus is for primarily the products that they want to sell, a simple navigational system works better for these types of apps. What I like about the minimalistic approach is the flexibility you can have with adjusting your app design if you wish to do so.

Diffused backgrounds are a trend on mobile apps. Although everything on apps have to be kept minimal and simple because of the small layout, adding a diffused background can help bring out the app a little more. I had a go on my iPhone app for the weather, and the background changes according to what the weather is saying. The image is kept very simple however, which allows you to read the text clearly still.

Card design is an effective way of dividing content on a website without going off track of where you are. Personally, I feel that this design is very effective if you are trying to present information such as what is shown above, however, it would not be useful for app designs that need to be kept simple.

Material design is essentially using shapes to layer ‘over the app’ in a flat-3D way. It gives mobile apps more dimensions, alongside with the rest of desktop viewing screens. Google Home is probably the most popular example of this, being the creator of this trend; they implement it well on their homepage. The appearance is clean, fresh and it adds dimension to the flat-minimalistic approach.

Looking at these app design trends, it is clear that these are based on accessibility as well as aesthetics. For my app design/design for mobile desktop, I will consider how it will function as well as making it look appealing. Because it will need to be accessible for everyone.


Military tanks.

Tanks were invented in World War I for military necessity, which gained huge amounts of popularity due to its immense size, power, force of destruction and speed; it was classed as one of the biggest weapons around.

The first tank invented was called Mark I (pictured above), initiated by Winston Churchill, Swinton and Maurice Hankey. The tank was a rhomboid shape weighing 26 tons with an average speed of 3.7 mph. the tanks made a significant impact on 15th September 1916 as they plowed through no-man’s-land, reducing the amount of casualties. After that, other countries began creating their own versions, rapidly enhancing the aspects from each one.

The war of tanks went on to World War II, where some tanks were weighing then over 54 tons. This competition for creating the biggest and best tank continued to grow, as they showed power through dominance and destruction.

What makes the game so popular with this in mind is that the game is all about control and planning to become the best out of everyone else. As you play more battles, you get better equipment and more advanced tanks, and so on.

What I will need to consider for my target audience, is to try and inspire them to want to play and grow their tanks, ultimately to become the best by competing more. Because the game is free to play, I want to emphasise that this is essentially a great deal, and if you wanted to ‘cheat’ your way up, you can buy the credits, which would be more appealing to some.

Because tanks are far more complex than people may realise, in the campaign website, I want to give people information about them and the possibilities of what you can do with each one if you were to build that tank.

The whole process of the game is a learning strategy, and by teaching the target audience before they have signed up, it will make them want to put the tanks into practice, which also gave me the idea of possibly including a preview on the website campaign. This way, it will lure the audience in, but after the preview is up, it will make them want to buy the game to find out more and to play more.

Website trends for 2017.

I wanted to have a look at what website trends were currently going around for research. I noticed as I was researching, the websites I was finding seemed more interactive than ever. I was noticing other trends such as bolder and more dynamic font usage, as well as more colour across the pages. Making a website accessible for all different devices also are increasingly becoming more important, especially as people browse the internet using all different devices other than a computer screen today.

Melville design showed the trend of an ‘obvious chaos’ within the website, changing the pictures as you scrolled. This type of trend I think is a nice effect, however it would not mix well with people who may need specific easy grid systems such as those who are visually impaired.

 Residente give the example of extremely diverse composition and very interactive media. The website I found whilst I was going through it was a little bit confusing. Although the whole concept idea is nice, I feel websites are moving away from the minimalistic trend and are gradually moving towards more complex pieces. Personally, I feel this could be quite a challenge to accomplish well, especially if there is a lot of information presented on one site.

‘Loose components’ is a trend that is emerging also very quickly. As you scroll across the page, it appears that objects are not stuck in place, but they move according to your navigation. Romain PSD uses this example for his app. The movement works really well, and if the images were not to move too much, it creates a nice addition to a website design without the extra design ‘fuss’ that may not be needed on a web design page.
Asymmetry was a trend that was a huge influence back in the 20th Century. The style reminds me of the old school posters with big bold graphics scattered across the page. Similar to the ‘obvious chaos’ look, I feel that it would not be easy to navigate for those who are visually impaired because of the miss-shaped grid system.

Our Roux is shows one of my favourite trend examples currently shown. The use of clean slides going across the page and the clear bold typography is a perfect example of minimalism with a modern twist. One critique I would have with the website design, is you have to scroll across to see all of the examples. The issue with this, is it can make it difficult to scroll back as the website is quite sensitive to interaction because of this. If it were to be improved, I would have all of the examples as part of a simple one-page grid system to make it easier for everyone to see and navigate.

National Geographic provides a very easy navigational process. The page about the bears gives a clear description about the bears, using animation and videos between the anchored pages. The only difficulty I had with this process was there was no option to quickly scroll to a specific area of the anchored pages.

Because the page itself is very long, it can make the process quite challenging, not knowing when you’re reaching the beginning or end entirely; there is no option to take you to the top easily enough.

Nevertheless, the appearance of the website is very fresh. I love the anchored styles, and it is something I would possibly like to consider for any future projects, as it shows a lot of information cleanly on one page without too many navigational processes.


Interactive websites.

I had a look at a few interactive websites, and I came across the Scars of Honors website. The website takes you through the story of the characters through interactive animation, enabling you to have to scroll to keep the animation moving.
What inspired me about this website for my project, was that every part of the website was animated to make you feel like you are playing the game, however before you get to any conclusion, an overview of the character, their weapons etc. were thoroughly gone through, educating you before you move to the next step.

Other examples including Make Me Pulse presented anchors on the page. Anchors are a really fresh method of website design to showcase large amounts of information onto one page, with very easy navigation. The idea of the anchors to use for my website design would be a good idea, especially if the campaign is to inform the audience about the game.

Because the game is so extensive with a huge amount of detailed information about the structures, tanks, players and so on, having anchors to direct you to the appropriate section would be a good idea, rather than the page constantly refreshing.

I want my website to be based heavily on animation and interaction, because interaction tells a story in itself knowing that the website is more than a flat surface image. The animation side would also follow closely behind the interaction and the story telling, considering that each ‘tank’ has its own story, from the people within to what it is made of and where it came from.