The last stage of the branding process to bring to completion is the landing page. I felt confident going into the digitalisation of the landing page as I had completed thorough sketches and wireframes of what way it will look.

Type Scale: Major Second

I felt that it was important to establish a type scale for this landing page as there is a lot of text to arrange and a certain sense of hierarchy to consider also. I chose the major second ratio as I felt there wasn’t too dramatic of a step between each size which is important for legible web content.

Creating a Grid Structure and Creating A Low-Fi Version

I created both a square grid and a column grid to act as a guide to align my content. I focused on spacing the most as I didn’t want each component impeding each other’s clear space. I added some visual elements such as the photos of the app interface to ensure I was leaving enough space but for the most part I was solely focusing on containers and text at this stage.

Illustrative and Visual Elements

I really focused on creating a visually striking landing page for the brand. To achieve this I wanted to incorporate a lot of illustrations and images and merge the two in most cases.

Hero Image:

I kept many parts of the hero image which I visualised in my sketches, however I did change some elements. I decided to include some hands to reinforce the fact that these were based on a usable interface. I think this makes it a more dynamic and interesting hero image. I also included a hand holding a phone showing the interface the illustration was based on which I feel is quite a nice allusion to the illustration within the picture.