Identity: Website beginning

After designing the logo, I have now gone on to making the many formats for the brand in order for it to establish itself (as said in the brief). I thought that the next stage should be a website as this is a large platform for a business and I think that it would give me scope to explore the colour palette of the brand as well as making an interesting composition with all of the elements that I have already made.

BrandingWeb1

I wanted to follow the stereotypical grid layout for the website because I think that this would suit the young target audience. I have used a lighter shade of grey for the background as I think that this is bold and works for a consistent theme for the brand. The logo is centred at the top of it which I think works well in this instance.

The navigation bar which is underneath this is in a completely different style of typography; a sans-serif. I have chosen a sans-serif as this because it contrasts against the type of the logo, and when I have used the same font I don’t think that it worked because it made the logo stand out less. I developed this by separating each ‘button’ with the ship wheel graphic that is also featured in the logo. I really like how this has turned out because it has made a clear navigation for the page as well as a consistency for the identity of the brand.

Smartphone Layout: Opening

Smartphone1

To begin the Smartphone layout of the website I wanted to look at some of the existing apps and how they use layout to stay interactive but keep the navigation easy. I have created this first page which will be displayed when the website is first opened to give a quick show of what it’s about and show that it is in-keeping with the desktop website. I have continued with the shard theme which will still be moving and on separate layers to create perspective, though as most of the smartphones are interactive now, they won’t be moving with the cursor/user because this wouldn’t work on this format. Therefore, I will incorporate different interactive aspects to keep the audience engaged and to make it fun for them while still creating continuity between the two formats.

Website Mock-up

Here I have created a mock-up of one of my website pages to see how it would work in context. By reflecting on this, I think that most of the pages within my website look professional and work for the target audience. The interactivity also shows throughout this mock-up as you can see how it would work, plus it looks visually interesting and catches your attention. I am happy with the overall outcome, though in retrospect I would like to have created a quick animation to display how the navigation works; however, I think that I have conveyed this clearly and the website has still fulfilled the brief as well as my own personal targets of making it professional with a consistent aesthetic.

iMac 5k Retina Office Mockup with Items

Website: Composition

WebsiteP27 WebsiteP28

Similarly to Neptune, I wanted to experiment with the layout and composition of the facts. I wanted to see if the facts would work on many of the pages to create continuity between them. I still feel like they are overpowering and it makes the page look like too much text so I will decrease this so that it’s easier to read for the audience. I couldn’t decide on which colour worked better for the type because they are both easily readable, but I think the dark grey works better because it blends in with the space background which makes it feel less overpowering. The white also seems to be too bright. Further imagery would look great here, and maybe interactive 3D elements to display these to create more of a perspective and an exciting composition.

WebsiteP29

I have divided up the text here again by using the two different colours and I think that it works better than one block colour, although as I have said previously I still feel that it’s not working. This could be improved by shorter facts which engage the young side of the target audience that it is being aimed at, while also appealing to the large part of the audience to be interactive and displayed interestingly.