Example of Creating a Landing Page

Hello everyone! This time, MangCoding wants to give an example of creating a landing page from scratch. We’re going to make a landing page about an Online Learning Course, so let’s get started!

In this article, we will provide a general overview of creating a landing page. The step-by-step details using Figma will be discussed in our next post, so don’t forget to visit our site regularly. For now, we’ll explain the essential sections that are usually needed in a homepage or landing page.

First, let’s open our favorite design software. In this example, we’ll be using Figma.

Next, click on ‘New Design File,’ and a blank workspace will appear.

Create an empty frame in the top left corner, then select the Desktop Frame and choose Desktop 1440 x 1024 pixels.

Then a blank canvas will appear as shown below.

If you are someone who is still learning like us, you can look for design references on Dribbble, Behance, or other sites. Choose a maximum of 3-5 of the best designs to avoid getting overwhelmed when creating your own design. Let’s get started!

First, let’s create the Navbar. Before making the navbar, make sure to set up a grid so that your design remains neat and well-structured.

Creating Navigation

Navigation is the topmost part of a website that contains the logo, menu, and login button.

Creating a Hero Header

A Hero Header is the use of text, images, and other elements such as boxes, circles, triangles, etc., placed in the home section of a website to attract customers.

Creating Features 1

Features are sections that explain the advantages of a product.

Creating Features 2

Course (your main content)

Actually, this is just an addition to make the landing page look more appealing

Creating Testimonials

Testimonials are a section for statements from customers

Creating Footer

Footer is the bottommost part of a website.

And here is the result…..

If you need the Figma source file we created, please visit the link below : link Click Here.

Hopefully, this will be beneficial for all of us. Apologies if the design is not very appealing. You can also get creative according to your own imagination.

That’s the explanation of Example of Creating a Landing Page that Mangcoding can share. Hopefully, this article is useful and provides new insights for you. If you have constructive feedback or suggestions, feel free to leave a comment or contact us via email and Mangcoding’s social media.

Thank you! Good luck trying!