In class I began to sort what I could include in my landing page into different themes. Then using a hierarchy system I decided what would be the most important to include and what should be seen first, right down to the least important aspects.
I began with quick sketches of what my landing page for my commercial brand could look like. I really wanted to have a focus on the typography and maybe some illustrations. This is because punctuation plays a key role within the logo and look of my brand so I wanted this to be consistent across all boards. I took inspiration from my app design, keeping the plan white background with the colour palette being applied consistently through out. I decided to keep the plain background because my colour palette is so bright, I felt a coloured background would be too much and hard to read and work with.
I do like the simplicity of my final design. I didn’t want to overwhelm the user with information as the whole idea behind this brand is to simplify the world of banking. So I took the main five things the brand offers and placed them in a group of colour squares so it is easy and clear to see what makes this bank different. I included the tagline at the bottom so that the tone of voice and language of the brand is consistent as it would have been in the advertisements which brought the person to this landing page.
My next step is to create this using Webflow. This is a completely new programme to me, but I’m hoping I am able to recreate my plan and figma version of my landing page successfully.
I found Webflow quite tricky to use as I wasn’t sure how I could change the positioning of images. I am not overly happy with the outcome as it doesn’t fully match what I had planned to create. Even though it is my first time using it, I did hope, even with the simple design, that I could’ve had a better outcome. I still feel happy with the design but just not with my final product in Webflow. I hope the more I use it the better and easy it can get to use, like the coding process.
https://ciara-fraser-portfolio.webflow.io