By Gary simon - Jan 04, 2018
So, what is the actual purpose of a landing page? Well, put simply, it's to (a) inform your visitors of the benefits and features associated with your product or service and most importantly (b) make them take some sort of action.
The action they take could be clicking on a button, providing you with an email, making a purchase, or simply clicking through to another page.
Whatever the case, there are some universal principles that apply to all landing pages that determine their effectiveness.
In this tutorial, I'm going to show you my process for designing a landing page in 2018, which admittedly, is not all that different from year's past. ;)
Let's get started!
Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.
Never, I repeat, never go straight into the HTML & CSS process when you're building a landing page. You need to first use a graphics application (I will be using Adobe Experience Design) to create a mockup of the page you intend on building.
Why? A few reasons..
Therefore, I always advocate starting off with a landing page mockup. As mentioned, I will be using Adobe XD, but you can use any other software app for this process. Preferably, it will be one capable of handling vector files like SVG.
As with many of these topics that we're about to dive into, there's a lot of subjectivity here. There isn't a one-size-fits-all solution to the type of background you should use.
There are some universal principles however. Your background should be:
For this project, which is a personal cryptocurrency project that I'm building called Crypts, I'm going to use a very light gray background with a watermark. The watermark will be relevant based on the purpose of my project, which will include a candlestick chart that's rising in value across the entire background:
Just about every landing page should have at least a headline, which is a prominent blip of text that really grabs the users attention. In terms of visual hierarchy, it's pretty much the first thing that you should want your visitors to see.
Secondary to the headline is a subheadline, which provides additional details about your product or service.
My headline and subheadline is:
"CRYPTO + CHAT = CRYPTS"
"Slack meets real-time CryptoCurrency Charts"
Here's how it looks in my mockup:
A CTA (Call to Action) is exactly what it sounds like; you want your visitors to perform some sort of action. In this case, it's to click on a button, which will launch a modal for logging in or signing in.
This call to action button *needs* to stand out from the rest of your content. Preferably, it should use a color that's high contrast from the background and possibly unique to the rest of your color theme.
You want to draw visitor's attention to it. The copy inside of the button is also very important, "Click Me" is terrible! Try to use something relevant based on the action you want them to perform.
In our case, we want them to join up or sign in:
Your landing page should contain some type of media, whether that be a photograph, illustration, or video. In my case, I want to integrate an animated illustration. We won't be animating it in this tutorial (that will be part 2), but I will be designing it.
Adobe XD contains very simple tools for drawing vector graphics. Since my idea is relatively unique, I want to show them a very simplified version of the actual chat user interface, which will remain right-aligned in a second column.
The goal here is to create a simple vector illustration of the UI without containing too many of the actual elements.
This is what I've come up with:
(The full process of designing this illustration is viewable in the embedded youtube video above)
This landing page is obviously a very simple one. In a more real-world scenario, you would definitely want to experiment with long page ad copy vs. simple. You would use split-testing to determine which is most successful based on the given objective.
Other elements that you could include on a landing page, depending on what's being sold are: