Mood board:

Before sketching, I decided to gather landing page examples to give me an idea of the composition I needed to follow.

Desktop - 1.jpg

https://www.figma.com/file/bub3xChl97wtLN9L6KZhT3/Landing-Page-Moodboard?type=design&node-id=0%3A1&mode=design&t=6gwHXGXxXsXbNX6s-1

I noticed on all of these landing pages, the first thing that catching my attention is the main headline. This is accompanied by a hero image, either covering part or all of the top of the page.

The call to action buttons are obvious in order for you to want to click on them. All of these are coloured brightly, making it easier to bring your attention towards it. It is useful to find when you’re met with it, soon after opening the website.

It’s important to use images that are related to the topic of the product of service, allowing to show what the benefits of using the particular service.

Since, you’re only showing one page you must sell your product across as much as possible, so the viewer will be inclined to pick yours over a rival.


Sketching:

unnamed.jpg

With having a clearer layout in mind, I started by drawing out how I want to lay out everything on my landing page. This gives me a general idea to follow when working on Figma.


Low-Fi Wireframes:

Screenshot 2024-04-29 at 11.59.53.png

https://www.figma.com/file/GrCeLkceEGczZQDganchOA/Landing-Page-Low-Fi-Wireframes?type=design&node-id=0%3A1&mode=design&t=mGzyIPIVBtje8Hfy-1

I created my low-fi wireframes on Figma, in order to give me a general idea of the size of the different sections on my page were evenly spaced.

I wasn’t too sure yet what I wanted to include in the last section, so I just left blank for now.


High-Fi Wireframes:

I want to keep my landing page as minimal as possible, yet include all the important information to entice the viewer to set up an account. I used colours from my banking app and my branding colours.