In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.
This is a sponsored review or giveaway of a product/service that's particularly relevant to our readers.
Introducing Unbounce
Unbounce was built to solve a very specific problem; to empower professional marketers to build beautiful and high-performing campaign-specific landing pages on their own. That is, without the help of developers or – here’s where templates come in – designers.
Since Unbounce’s primary user-base is marketers who may not be familiar with robust design tools, the landing page builder is designed to be easy to use, with a WYSIWYG, drag and drop interface. That said, skilled designers can also feel equally at home; it’s possible to add custom JavaScript, CSS and HTML widgets and fine-tune page elements to the pixel.
Landing pages are standalone web pages that serve a specific, pre-defined goal for marketers. If marketers are trying to sell a product or service, they may use a landing page to educate the user before directing them to the pricing page. If they’re promoting a new ebook, they’ll need a landing page to gather contact information from their visitors before handing over the file. For both of these campaigns (and almost every campaign!) simply sending visitors to their homepage – instead of a dedicated landing page – would spell marketing failure.
In short, landing pages are designed to push users toward a specific, conversion-centered goal.
Who Uses Unbounce?
Mostly experienced professional marketers. They’re constantly running marketing campaigns and cannot/do not want to rely on their internal developers to build a unique landing page for every campaign. About a third of our customers are part of a company’s marketing team, another third work at a marketing agency and the remaining third are entrepreneurs.
How Are Marketers Using Unbounce?
If Unbounce customers don’t have the design chops to feel comfortable building a page from scratch, they will start from a template or have their designer create a template for them. After they’ve customized a template to suit the needs of their campaign, customers often use the same template for every similar campaign they run.
A/B testing is a core feature of Unbounce. Users can duplicate their finished page, make one change to the design or copy of the new page, split traffic between the two pages and use Unbounce’s reporting to determine which version converts better. A/B testing allows customers to constantly improve their landing pages and marketing campaigns.
Designing Unbounce Landing Pages
This guide will help you design and build a high-converting landing page for the Unbounce platform.
Until March 12, 2014, Unbounce will be offering cash prizes to designers who submit new Unbounce landing page templates to ThemeForest in an event called "Envato's Most Wanted". Designers can get a free Unbounce account to participate in the event.
What We’ll Cover
Let’s quickly run down what we'll cover in this tutorial. Click the links to jump to the required sections.
- Designing Unbounce Landing Pages
- Part 1: What’s in a Landing Page?
- Part 2: Design Guidelines
- Part 3: Page Building Guidelines
Part 1: What’s a Landing Page?
Homepages vs. Landing Pages
Let’s compare the Webtrends homepage (left) with one of their landing pages (right). The homepage is beautifully designed and allows a visitor to accomplish a number of tasks. There are five concepts presented in the main promo area (via a rotating banner), four supplementary messages below that, and a total of twenty eight interaction points.
However, marketing campaigns should be laser-focused, driving users to one single action. When designing a landing page to be used in marketing campaigns, the concept of Attention ratio needs to be considered. Attention Ratio (AR) is defined as the ratio of interactive elements (links/leaks) on the page, to the number of campaign conversion goals (which is one). On this homepage, the attention ratio is 28:1 meaning that there are twenty seven distracting actions and one desired action.
Compare the homepage with one of the lead generation landing pages (right). On the landing page, there is only one action to perform; users are asked to fill out the form and click the CTA button to complete the conversion. This produces a much more focused experience for visitors, keeping the attention ratio at 1:1.
Anatomy of a Landing Page
There are five must-have core elements on any landing page, which can be broken down further into a more detailed list of building blocks:
-
Your Unique Selling Proposition (USP)
- The main headline
- A supporting headline
- The hero shot (images/video showing context of use)
-
The benefits of your offering
- A bullet point list summary of benefits
- Benefit and features in detail
- Social proof (“I’ll have what she’s having”)
- A single conversion goal – your Call-To-Action (CTA) (with or without a form)
The diagram below represents a sample layout. The order and location of the 5 elements will be determined by the story you want to tell your visitors, and may vary from this example. But it’s helpful to look at this for reference as we walk through each element.
Lead Gen vs. Click-through Landing Pages
There are two main types of landing pages: lead generation (lead gen) and click-through.
Lead Gen Landing Pages
Lead gen pages are used to capture user data, such as a name and email address. The only purpose of the page is to collect information that will allow for further communication with the prospect at another time. A lead gen page will contain a form along with a description of what the visitor will get in return for submitting their personal data.
Lead gen flowClick-Through Landing Pages
Click-through landing pages have the goal of persuading the visitor to click through to another page.
Typically used in ecommerce funnels, they can offer details about a product or service in order to “warm up” a visitor and bring them closer to making a purchasing decision. When the prospect clicks through to the following page, they’ll be primed with all the information they require and will be much more likely to buy.
Part 2: Design Guidelines
Design From an Unbounce Grid
At Unbounce we use a standard grid system that utilizes 12 columns, making a 940px container. The example below breaks down the column combinations available. We recommend you use the Unbounce grid for the best landing page design results.
Font Options
Unbounce offers a standard set of typefaces within its landing page builder, as well as a Google Web Fonts set. We recommend that you use the following typefaces when designing for Unbounce.
Google Web Fonts
Below is a list of Google Web Fonts available in Unbounce, please use/download only the following fonts from the Google Web Fonts Library.
- Abril Fatface
- Allan
- Arvo
- Cabin
- Dancing Script
- Droid Sans
- Gravitas One
- Josefin Sans
- Josefin Slab
- Lato
- Lobster
- Merriweather
- Old Standard TT
- Open Sans
- PT Sans
- PT Serif
- Playfair Display
- Quantico
- Ubuntu
- Vollkorn
Standard Fonts
Below is a list of the standard fonts available in Unbounce.
- Arial
- Courier New
- Georgia
- Lucida Sans Unicode
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Sample Landing Pages
Every landing page has one goal in mind; moving visitors to perform one call-to-action, such as completing a form or clicking-through to another page. Below you will find a selection of the most common types of landing pages.
Both simple minimalist designs as well as fully styled examples are shown.
Elements to Avoid
To ensure your page still looks and functions as intended after it’s shared, please avoid using the following:
- Horizontal or multi-column layout forms (Forms must be vertically stacked)
- Galleries, carousels or animated elements
- Custom overlays
- Gradients with more than two stops
- Drop shadows that can’t be cut up as part of an image
- Text shadows
- Designing liquid layouts that expand with the browser (and ensure your page can be center-aligned)
- Layouts that are not center-aligned on the page.
Inspiration
- Check out the Unbounce template library for inspiration
- Read the The Ultimate Guide to Conversion Centered Design or Designing for Conversion - 8 Visual Design Techniques to Focus Attention on Your Landing Pages by Oli Gardner.
- Sign up for The Landing Page Ecourse
Part 3: Page Building Guidelines
How to Build a Landing Page
The translation of a design into a landing page on the Unbounce platform should be executed in a pixel perfect manner. In the example below, the landing page is structured by page sections and columns using the standard Unbounce grid. Export all of your image assets in .png or .jpg format before you begin.
Start With a Blank Page
When building a landing page from a photoshop file, we recommend starting from a “blank page” on the Unbounce platform.
Page Properties
Using your original photoshop file as your guide, set the width of the page in the page properties pane. Assign the background color to the landing page. Upload a background image if necessary. Set the default text color to be the most commonly used text color in your design. Assign the link colour to complete your page properties.
Page Sections and Tree Structure
Now it's time to structure the landing page. Drag and drop page sections onto your page. Typically you would add one page section for each clearly defined vertical portion of your design. For instance, you could add page sections for: the header, content area 1, content area 2 etc., the footer. Then you can set the height of each section according to the measurements in your photoshop file. Once all page sections have been set up, open the tree structure menu on the left, and name each section accordingly. This will make it easier to modify and organize the landing page.
Every new element that is created within the landing page will appear in the tree structure, so make sure you name each new element as it’s added, for future reference and easy modification.
Background
You can assign a background colour or gradient to a page section, or you can upload an image to use for your background. Images can also be tiled. In the example below, a background texture was uploaded for the main area, and another for the darker strips above and below.
Images and Video
Images that you've cut up and exported from Photoshop can now be uploaded and added to the landing page. Drag and drop images using the image tool on the left toolbar, and position them on the landing page according to your photoshop design
Once positioned, remember to name them in the tree structure. To place video on your landing page, use the video tool from the left toolbar and paste your YouTube/Vimeo embed code in the window that pops up. Resize and position it according to its intended size and aspect ratio.
Text
Drag and drop the text tool onto the page. Position each text block according to your photoshop file and insert your copy using the text editor below. You can adjust your copy, font, size, line-height and color to match your photoshop file.
Boxes
You can use boxes as containers for elements such as forms, images or text. Modify stroke, color, and corner radius for the desired visual result, and even turn boxes into circles if necessary.
Forms
Drag and drop your form element onto the landing page. You will be prompted with the form builder overlay window. Choose pre-made fields or create your own. When using the pre-made email field, turn on the “Validate as Email Address” option. Once complete, click to select the form and stylize by adjusting spacing, fonts, colors, width and height in the properties pane on the right.
Buttons
Stylize buttons by color, gradient or by adding a custom image. Rollover states can also be set. Edit the button text and modify the font settings to match your design.
Confirmation Page
If you have a form on your page, a confirmation page will be triggered when the form is filled out. You can access the confirmation page tab in the top-left corner of your page.
Modify the design of the confirmation page to match the design of your landing page. This will reassure users that they have followed the correct path and provide a seamless experience from landing to post-conversion
Set Conversion Goal
Every landing page needs a conversion goal. You can set this by clicking on the “Conversion Goal” tab in the properties pane. If you have a form, it should be set as “Form Submission”.
Final Layout
Once all your landing page elements are on the page, simply drag to reposition the elements to match your photoshop file and create the final layout. Use preview mode to do a final review of your landing page.
Your Essential Checklist
- Verify Page Properties
- Review Tree Structure
- Review Images and Layout
- Review Copy and Fonts
- Test Links
- Test Form and Button
- Review & Set Conversion Goal (if your page has a form)
- Publish Page
Note: Publishing your page allows you to provide a live preview link in template marketplaces.
ThemeForest Approval Requirements
A landing page template should be customizable. The end user should be able to easily swap out any hero shot images or photographic backgrounds. To ensure that the quality of your landing page remains intact and that your page passes approval by ThemeForest, please follow these guidelines:
- Do not edit the source of a text element
- Leave page guides and section guides turned on
- Margins in page sections should be used to create gaps, not blank page sections
- Placeholders are images and easy to swap out
- Any custom stylesheets or Javascrips need to begin with a comment including the author’s contact info and instructions for support
- Your tree structure can have no broken elements
- A form’s button must be properly attached to the form
- If your template includes a form, the Conversion Goal should be set to “Form Submission”
Downloading a Page
Once you’ve built a beautiful, easy to customize landing page template, you’ll need to download it before you can share it with (or sell it to) the world. To download a page, go into the page overview (the section that lists all your page’s variants and stats), find the gear/cog icon in the top-right and click “Download Page”.
A dialog window will appear, which will email you when the file is ready to download. The file will have a “.unbounce” extension. Once you’ve downloaded your file, feel free to rename it as necessary, but leave the “.unbounce” extension intact.
Packaging Multiple Layouts Together
Want to package multiple layouts of the same template? Please steer clear of using page variants for packaging multiple layouts together.
Instead, create each layout as a separate page and download each layout separately. This will ensure you’ve got a functional preview link for each layout and it will reduce confusion from the downloader, as variants are used specifically for A/B testing.
Conclusion
I hope this gave you a thorough introduction to Unbounce and authoring Unbounce templates for sale on marketplaces such as ThemeForest. There's plenty more to learn, however, so if you have any questions please feel free to ask away in the comments.
