How to design a landing page with Justinmind

Think you need a landing page that offers a great user experience? Justinmind knows just what you mean!

Sure, landing pages look easier to design than your average webpage. They have fewer elements, after all. But the fact that a landing page looks simpler means each element needs to be just right. You can’t rely on lots of fancy images, special effects or loads of content to get visitors to convert. You have to convince them in a way that is both effective and concise.

Luckily, you can use Justinmind to design your landing page with ease so you can focus on what is really important in any landing page: the actual content. Justinmind is equipped to shape your landing page any way you wish, giving you total freedom over the finished page. But before we get down to how you can build yours, let’s take a look at what a landing page is.

What’s a landing page?

A landing page tends to be the first page a visitor sees when they follow a link from a promotional ad or from Google results. Smartly named, they are the first stop once the user lands on your website.

As pointed out by marketing guru Neil Patel, a landing page is a good way of directing visitors to what they are looking for – instead of leaving them to look for what they want around your website.

The goal of your landing page could be a variety of things. Gathering email addresses, having people download your eBook, getting people to book a visit… There are so many situations in which a landing page would be the best option due to how quickly they can be put together.

Usually, landing pages are created to last for a short period of time unlike regular content pages which are normally intended to exist online indefinitely.

Basic design practices for landing pages

Avoid clutter like it’s the plague. This is true of both graphic elements like images and actual content alike. Remember that you want a landing page that is visually attractive and to the point. The visitor should instantly know what the value proposition is as well as how to convert. Any visitor who is bombarded with elements is likely to abandon your cluttered landing page without even giving it a chance.

Make sure your copy is concise – but not generic. Your header and subheader should already lay down the advantages of converting in a span of no more than two lines in total. Avoid making generic statements that don’t usually offer any value to the visitor, like “Sell more with XXX”.

Instead, go for real upsides, such as “Start selling today with XXX. No processing time, no waiting. Compatible with Android or iOS”. A persuasive and concise landing page is bound to have good conversion – especially when compared to a cluttered landing page.

Design with care. Your layout should guide the visitor’s eyes through your content with ease. You’ll want to test the structure by making a low-fidelity wireframe before jumping to interactions and details. This means leaving plenty of negative space for visual relief and making sure nothing takes the spotlight from the CTA.

How to design a landing page with Justinmind

Right. Now that we all know exactly what a landing page is supposed to be, let’s take a look at how we can make one using Justinmind’s prototyping tool.

Part one: header

Start your high-fidelity prototype with one of the easiest parts of the landing page: the header. It’s the perfect place to insert a brief and persuasive value proposition so users feel like they can get something from your landing page. We went with something fairly simple in its design – remember: you most definitely don’t want a crowded header scaring visitors away.

The only elements you’ll need are a header title, a paragraph, a button and an image. This being the top part of your landing page, your button will serve as an anchor that will lead the user straight to the bottom of the landing page, to the CTA.

Inside the tool: to add this event, simply create a new Event on that button. On the pop-up, determine that the Event will be On click and the action ought to be Scroll to.

Once you got that set up, simply select the CTA button in the same window to make the CTA the anchor destination. Lastly, you need to establish a vertical direction, with a swing easing. You can adapt the duration of the effect as you wish – we chose 900 ms.

But that’s not all. Select the button and add a second Event. In the popup, choose On mouse over and the action Change style. To make the button change its color, while the mouse is over it, select Background and Color – any color variation will do the trick.

Part two: benefits display

This is where it gets interesting. We’ll use a Dynamic Panel in order to create a space that is a perfect spot for laying down the advantages of converting. These could be what benefits come with your product, or what problem is solved. So we can give the user a better experience, we want to also add visual aids that will make clear which panel is being shown at all times.

Stretch the panel so it takes up an entire section of the landing page. Within the panel, you can insert anything you like – we inserted 3 different panels within the Dynamic Panel. We went with a simple image, header text and paragraph. Right above the Dynamic Panel, add a text for each panel – since there are 3 panels inside the Dynamic Panel, place 3 texts and small rectangles beneath each text.

The great thing about this setup, is that the visitor of your landing page is able to click on each of the texts above the panel in order to see each panel – in this case, the three main benefits of our product are the absence of commitment to the brand, new movie release times, and multi-device responsiveness.

Since all visitors will automatically see one of the panels by default, you want to Hide the rectangles below the other texts of the remaining panels. By adding an Event for the texts, we make a menu that will help users surf through the panels. The Event is On click and the action should be Set active panel. This way, you can link the text above with their respective panels.

Separately, you want to add a new event, that will make the rectangles beneath the text disappear and appear based on which panel is being shown. As this is an additional Event based on an Event that is already prepared, click on the Do link located on the Event menu, on the top right of the screen.

This Event should be On click and the action is Show. That way, when a user clicks on the New Movie Releases text, they will be shown the 3rd panel, and the rectangle will appear. Similarly, a separate action is to Hide the other remaining rectangles.

This example also stipulates that all these actions take place simultaneously, as opposed to in order. To mimic that, simply click on the icon in between actions and change them to WITH previous.

Repeat this process for all the panels in this section of your landing page.

Part three: packages and pricing

Our landing page has a section that displays three separate rectangles, which are perfect for elaborating on your products or services – as well as their price and any differences among each option.

For the sake of practicality, we will use one individual Dynamic Panel for each package option. This is because with Justinmind, Dynamic Panels make it easy to add Events and other interactions.

Go ahead and place your text and button inside each Dynamic Panel. Justinmind allows you to duplicate whole elements with ease – so feel free to add in the basic elements and duplicate them if you don’t feel like adding each element individually. Once you have all three panels built, select one and add an Event.

This Event will be On mouse over as opposed to on click. The action you want is Change style. Remember that it’s important to add this Event to the whole Dynamic Panel and not any of the elements inside of it!

The style to change is Shadow. You can edit the properties of that shadow to fit your own brand – in this example we used a 90 degree angle, with a 8 px distance and blur of 39 px.

We will also add a second Event – aside from a shadow under each option, we also want the Dynamic Panel to move slightly upwards whenever the user hovers the mouse over it. Following on the steps from the previous interaction, add an Event to the Dynamic Panels: On mouse over and Move.

The specifications in the popup allow you to dictate by how much the panel moves by axis Y and X. Given that our movement is vertical and not horizontal, we set the X to Current. In contrast, the Y axis will experience change – set it as Offset. This will allow you to establish how many pixels you want the panel to move (we are using a -10 px difference).

If you want to save time, create the first Dynamic Panel and make sure you have all the events setup, then go to the Events menu and copy the settings of the Dynamic Panel. This will allow you to paste that Event onto the other two panels in a matter of seconds.

Our Event has a duration of 200 ms, to ensure the movement isn’t too sudden or abrupt.

Part four: signup/conversion

The bottom part of our landing page is dedicated to conversion. This is where visitors can sign up to receive your emails or download your app, for example. All you need is a large rectangle that will clearly separate the space of conversion, and some text that will point the visitor to the functionality of the button below.

“Create your account now” is a perfect example. Right underneath the text, you want to add one or two input fields – you can have as many you like. The real star, however, is the button below the input fields.

We decided to add an interaction to the button, so that this button offers the same user experience as the first button, on the top of your landing page.

Much like we did for the first button, we want to add an Event to change the color of this button. Add an Event set to On mouse over with the action to Change style. Select Background and Color, choosing a color that suits your design.

Part five: floating button

A floating button is a button that follows the visitor no matter where they are on the page. To add a button for a chatbot, customer support or just about any type of floating button out there, follow these steps.

Even though this is a button, make your button a Dynamic Panel so we can add events more easily. Insert your icon inside the panel, and take a look at the properties of the panel, more specifically, the position of the element.

Check the box that reads Display pin position options and notice that beside each axis on the right-side drop-down menu you have the option to pin the position to any place you wish.

For this example, select Pin to the right on the X axis and determine a margin of 60 pixels between the panel and the limit of the landing page. On the Y axis, select Pin to bottom and give an equal margin of 60 pixels between the button and the bottom of the page. Now, you can insert a link or code of your choice onto the button.

Wrap up

Landing pages are powerful allies when designed with care. And if you’re going to have a landing page, it might as well be a page that lures its visitors in, shows them the real benefits without letting anything get lost in translation. With Justinmind, you can offer your visitors a properly thought-out user experience – giving them a taste of your actual product. Time to design a landing page that converts!