Invictus Games Design Process

I found the Invictus Racing website extremely enjoyable as it was something completely different to any other project we had undertaken. The short deadline was ideal for me as it gave me pressure as to which I worked at a better rate.

I started off with a blank canvas in Photoshop and used a large image that I was given from Lightmaker to use. As the colours from the image were a bit vibrant I wanted to change this in order for it to fit with my website colour theme therefore I used a hue/saturation effect to tone it down. I then went ahead to make the menu at the top of the page in order for the user to interact and move around the website easily and accessibly. You can see this from my screen grabs below.

From here I went on to make the webpage title ‘Invictus Games’ and also a small little slogan that Invictus Racing has on their current website in order to keep their brand identity the same. This below is the front page of the website officially completed.

Screen Shot 2018-06-01 at 18.31.06

I wanted to make my website a parallax website as most users prefer to scroll down a web page as it gives them a sense of ownership/ control. It is also very hard to get lost in the website as it is just up and down. I then straight after designed the ‘Meet the Drivers’ page as this is a key part of Invictus Racing, the drivers are extremely close with their fans and so want to tell the fans a little bit about them. I designed a 360 degree carousel for each driver with a little detail about each individual. This would be fully interactive and engaging for the user.

Straight after the drivers embedded a video into the website which has a basic run down and introduction of Invictus Racing, who they are etc. This is currently on YouTube and their website so I thought it would be something the users would be interested in.

I started off by using a still image with a play button over the top of it, I then added a gallery just underneath the video section to show off some great photos that Invictus Racing has as a team. They wanted to be seen as professional, fun and positive therefore I only included pictures that fit with this.

As the final part of the website I decided to implement the different aspects of the car, this way you can inform the user about the car that they use in the races, its power, its statistics etc. I wanted to do this in a different way to normal and so I made each special part of the car stand out with an image referencing it, when the user hovers over with a mouse it would enlarge/ lighten up slightly and have the information about it. This is shown below in the progressional screenshots.

I then used this exact same layout and created a mobile version as well, the only issue is that mobile is much more narrow therefore I had to change the aspect ratio of the layout however it all worked well as shown below.

Screen Shot 2018-06-01 at 18.48.58.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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s