Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Landing Page Design in 2018 - Tutorial

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!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Starting with a Mockup / Prototype

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..

  • It's quick and easy.
  • It provides you with a visual of exactly what your landing page will look like in the browser.
  • It's easier to make changes without adjusting code.

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.

Establishing a Background for your Landing Page

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:

  • High contrast in relation to the foreground content.
  • Never contain large graphic files like high quality JPG's -- it takes too long to load.
  • Never contain distracting elements.

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:

Landing Page Headline & Sub Headline

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:

Call to Action

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:

Supporting Media

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)

Conclusion

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:

  • Testimonials
  • Trust factors (How can visitors trust you?)
  • Media exposure (Showing logos of those who have covered the business/service)
  • Site seals
  • Comparisons of competitors

 


Share this post




Say something about this awesome post!