6 Steps to Create an Effective Landing Page!
By: Adrianna Isom-Owen
Tags: Design Thinking, CSS, Landing Pages, HTML, Design

Section 1: Planning

Step #1: Research

Before you can lay down code for your landing page you need to use thoughtful thinking when envisioning how you want your landing page to look and feel. It is best to also research your user’s behaviors and pain points for the type of website you are creating.

Step #2: Wireframe

Equipped with knowledge, it’s time to transition into our next step: wireframing. This step is easily the hardest for a lot of people, because this is the first time that you are “putting pen to paper” to establish how you want your site to be laid out. A wireframe is a visual template that represents the framework of your site.

For this wireframe, I took a slightly untraditional route and use Google Drawings instead of an established wireframing app or website. I use this method at times, because it’s quickly accessible for me and anyone I need to share my wireframe with and it has everything I need to quickly spin up a low-fidelity wireframe.

This wireframe is just for guidance purposes to form a template for how we want to lay out our page.

Step #3: Picking Colors

My favorite part: colorrrrssss! The best site that I have used to generate color palettes is coolors.co. You should pick a color palette that matches the theme of your site. How do you want your user to feel when they come to your landing page?

For this tutorial, I’m using this color palette:

This palette contains earthy tones which produces calming effects

Section 2: Coding & Content

Step #4: Building the Structure

Now, here is your bread and butter…coding. First, we will start with the HTML for the navigation bar, main content and the footer. You can think of HTML as the foundational structure for a house, it lays out the skeleton for our code.

Below, you will see the HTML for the navigation bar, main content, and the footer:

I made a navigation bar and footer per the wireframe, and for the main content I utilized CSS grid to organize and quickly position the content.

One of the eye-catching elements that was added, is the video that plays in the background. On line 47, is where I have the video tag; inside the tag you can see where I am pulling in the video and providing additional information on how I want the video to run. I choose a video from the site Pexels, it features high-quality videos that you can utilize for your site!

Remember: the HTML is just for structural purposes, the CSS is going to determine your styling for your site.

Step #5: Styling the Structure

In CSS, we will style our HTML code to create the feel for our landing page.

Below, you will see the CSS for the navigation bar, main content, and the footer:

Now, I will go over some of my design decisions I made and the reasons behind the decisions:

Hero Video : For a blog site, I really wanted an impactful hero. Once I saw the video on Pexels it appealed to me as triumphant, earthy, and calming. It matched the aesthetics of what I wanted the landing page to portray.

: For a blog site, I really wanted an impactful hero. Once I saw the video on Pexels it appealed to me as triumphant, earthy, and calming. It matched the aesthetics of what I wanted the landing page to portray. Text Color & Font : Due to the busy background, I needed an easily readable font and a bright color to contrast with the video. I decided to use a font in the sans-serif family because they are simple, clean, and easy to read. Also, all colors on the page are the same bright tan because I wanted to ensure that the text was constantly viewable throughout the loop of the video.

: Due to the busy background, I needed an easily readable font and a bright color to contrast with the video. I decided to use a font in the sans-serif family because they are simple, clean, and easy to read. Also, all colors on the page are the same bright tan because I wanted to ensure that the text was constantly viewable throughout the loop of the video. Symmetrical Alignment : Blog sites are more often very structured. I wanted to keep the same concept by centering all the elements on the page. On line 43 in the CSS code, you can see where I also added additional gap spacing to the grid cells to take up a bit more white space on the page. This still leaves a good amount of room to view the video in the background.

: Blog sites are more often very structured. I wanted to keep the same concept by centering all the elements on the page. On line 43 in the CSS code, you can see where I also added additional gap spacing to the grid cells to take up a bit more white space on the page. This still leaves a good amount of room to view the video in the background. Call-To-Action (CTA) Button: All effective landing pages will have an CTA button because the purpose of the page is to get the user to initiate the service you are providing.

Step #6: Adding Content

You want to add content to your site that is appealing and relevant to your user. For the purposes of making an effective landing page, you should showcase your best work and/or capture the essence of what you are offering on your site in a concise way.

I staged our demo as a blog site, so I made sure to have a section where we could showcase an awesome blog and use a CTA button to ask the user to sign up to view more content on our site.