Landing Page - 1stWebDesigner https://1stwebdesigner.com/tag/landing-page/ Helping You Build a Better Web Tue, 23 Jun 2020 13:59:46 +0000 en-US hourly 1 https://1stwebdesigner.com/wp-content/uploads/2020/01/1stwebdesigner-logo-2020-125x125.png Landing Page - 1stWebDesigner https://1stwebdesigner.com/tag/landing-page/ 32 32 20 Landing Page Templates for New Websites https://1stwebdesigner.com/20-landing-page-templates-for-new-websites/ Mon, 01 Jun 2020 13:00:20 +0000 https://1stwebdesigner.com/?p=152498 Creating a landing page is an essential part of launching a new website. It’s an ideal way to build an email list and keep potential visitors and customers abreast of what you plan to do with your site in the …

]]>
Creating a landing page is an essential part of launching a new website. It’s an ideal way to build an email list and keep potential visitors and customers abreast of what you plan to do with your site in the near future. Of course, the idea of setting up a site before your real site even launches can feel overwhelming. Thankfully, this can be easily remedied by using landing page templates that offer the features and aesthetics you need.

We’ve put together a list of twenty of the best landing page templates around that can be used for launching a new site, fast. You’re sure to find something that suits your needs right here.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month!



StartUps

StartUps Landing Page Template

StartUps is a great solution for creating a landing page site for a new product or service. It’s professional and can be customized to suit a wide range of industries.

Prestige

Prestige Landing Page Template

Another option is Prestige. This landing page template is a great choice for showcasing features and a sign-up form so visitors can be notified when your full site launches.

Apiton

Apiton Landing Page Template

If you plan on launching a new app, the Apiton landing page template is a great choice. Include mockups, features, and a call-to-action.

Zehen

Zehen Landing Page Template

The Zehen landing page template is responsive, looks great on all devices, and can be customized in a wide number of ways, including HTML, CSS, PHP, and jQuery.

Rano

Rano Landing Page Template

Or, you might want to give Rano a try. This template is great for apps and products. Showcase features and a detailed call-to-action that drives customers to sign up.

Moto

Moto Landing Page Template

Moto is another option for announcing or showcasing an app in a stylish way. This one-page layout allows you to go into detail about your company, team members, features, and display a contact form with ease.

Coeus

Coeus Landing Page Template

There’s also Coeus, which is a stylish and eye-catching landing page template made specifically for cryptocurrency websites.

Kwoon

Kwoon Landing Page Template

Kwoon is another option that offers a multipurpose design and layout that you can customize for a wide range of purposes. You can add a portfolio, blog, and other content as you see fit.

Hype

Hype Landing Page Template

Still another choice is Hype. This landing page template makes it easy to showcase your new mobile app. It’s built on Bootstrap, which makes it easy to setup and customize, too.

LeadMore

LeadMore Landing Page Template

Another template you may wish to consider is LeadMore. This HTML landing page template is built with capturing leads in mind and can work well for enticing visitors with details about your service or product to then capture their contact info.

Pacifico

Pacifico Landing Page Template

Pacifico is another option. This template offers a multipurpose design that can be customized to suit a wide range of industries. It’s responsive, comes with six different variations, and includes a video background for added engagement.

FlatBox

FlatBox Landing Page Template

FlatBox is a great landing page template for promoting an app, software or SaaS. Showcase screenshots of your product in action, offer bullet point details of features, and solicit people to sign up.

Condio

Condio Landing Page Template

The Condio landing page template is aimed squarely at the real estate industry. Feature a full width image of a property and add a prominent contact form above the fold. This makes it super easy for visitors to sign up for more information.

Ebo

Ebo Landing Page Template

If you’re planning on selling an eBook in the near future, the Ebo template is a good fit. It’s simple and straightforward but immediately compelling. Add a mockup of your book and a signup form in a matter of minutes.

Steix React

Steix React Landing Page Template

There’s also Steix React to consider. This landing page template is great for startups looking to launch a website quickly. Add mockups of your app or SasS in action, list out features, and make it clear how visitors can learn more.

MyVilla

MyVilla Landing Page Template

Another real estate-centered option is the MyVilla landing page template. This HTML-based option is responsive and mobile-friendly. Plus it’s easy to display gallery photos of properties and contact information.

Brizzle

Brizzle Landing Page Template

If you need something more corporate, consider Brizzle. This landing page template is built on Bootstrap and offers a responsive design and plenty of customizability to suit a wide range of industries and needs.

Parallels

Parallels Landing Page Template

Looking for something more artistic? There’s Parallels. This landing page template is simple but uses colors and shapes to intrigue and engage. By adding interesting photos and graphics and keeping the layout simple, you stand to draw visitors in more readily.

MyClinic

MyClinic Landing Page Template

If you’re looking for something for a health industry site, there’s MyClinic. This template includes the features needed to talk about a medical practice or medical product in a clear and cogent way.

Deoxa

Deoxa Landing Page Template

And last on our list is Deoxa. This landing page template offers a responsive design that can be edited using CSS, HTML, PHP, and jQuery. It also offers a slick layout for any kind of online service. It’s multipurpose and totally functional.

Launch a Product or Service with a Landing Page Template

Whether your website isn’t completed yet and you want to present something helpful to your visitors in the meantime or you wish to build a new website from scratch that’s centered around a call-to-action, at least one of the landing page templates included here is likely to be a good fit.

Take your time browsing these selections and perhaps you could even try a few. Regardless, we hope to have reduced the time needed to find a suitable fit. Enjoy!

]]>
7 Fantastic Landing Page Designs https://1stwebdesigner.com/7-fantastic-landing-page-designs/ Thu, 31 Jan 2019 18:56:04 +0000 https://1stwebdesigner.flywheelsites.com/?p=140389 What is a landing page? Knowing this can help you generate leads and retain more customers when you design a website. Simply put, a landing page is where someone “lands” after clicking on a search result, call to action

]]>
What is a landing page? Knowing this can help you generate leads and retain more customers when you design a website. Simply put, a landing page is where someone “lands” after clicking on a search result, call to action, or advertisement. These pages have one core focus: converting people into customers. Any page on your site can be a landing page for certain search terms.

These awesome landing pages are a great source of inspiration when you’re trying to improve your own. Take a look and see why they work so well!

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!


Spotify

Spotify

If you’re going to make your homepage your landing page, take a tip from Spotify. While navigational elements exist, they’re overshadowed by the huge background banner and noticeable button asking you to register. The pitch may be only three sentences long, but it says all it needs to.

Netflix

Netflix

Netflix opens with an absolutely huge call to action button that’s just begging to be clicked on. When you do, you’re taken to a clean page, free of distractions but for a simple footer. Walking through the sign-up process doesn’t take long, and it even saves your progress if you leave the page.

Mango Languages

Mango Languages

Mango Languages does a great job on its landing pages. The sign-up link is very prominent and posted multiple times on the homepage. Clicking it leads you to a page free of distracting navigation. Just choose your language and sign up!

Web Profits

Web Profits

Sometimes it’s impossible to condense your landing page down to a single action for users to take. The best thing you can do is make the distinction clear, and that’s what Web Profits does. The homepage is very simple with just three distinct links. Click one, and you’ll be directed to a landing page more suited to what you’re looking for. The page may be long, but the inclusion of at least four identical CTAs makes sure there’s always a button in sight when you’re ready to get started.

Google Store

Google Store

Google’s full-screen, animated page already does a great job putting the focus on the products. Click one of the calls to action and you’ll be presented with a page that gets right to the point. Pricing and order buttons are always visible in the header as you scroll through videos and feature lists. And, advertisements for other products are kept at the bottom of the page.

Upwork

Upwork

When you’re creating a landing page, it’s extremely important that you waste no time. Upwork’s sign-up dialogue exemplifies this quality. An eye-grabbing header and title draw your eye towards the Get Started button, which immediately begins walking you through creating a job post and the sign-up process. You may only have a few seconds to grab a visitor’s attention, so make sure you waste no time. This is also a fantastic example of above-the-fold content, with the site features all being below it and the important CTA above.

Facebook

Facebook

If you visit Facebook without an account, they keep their pitch simple. With three concise bullet points explaining what the site is and an obvious sign-up form right on the page, it’s easy for anyone to get started. They also keep the form short and leave the in-depth questions for later, which is a good practice.

Design Great Landing Pages

The best landing pages are concise, have few distractions, and get the visitor to take the action you want them to take. Remember that when you’re designing your next landing page for your email campaign or advertising banner! Make your argument short, compelling and tailored to the audience likely to click on the landing page. Accomplish that and you’ll be converting in no time.

]]>
10 Website Conversion Mistakes and How to Fix Them https://1stwebdesigner.com/top-10-website-conversion-mistakes/ https://1stwebdesigner.com/top-10-website-conversion-mistakes/#comments Tue, 01 Jan 2019 13:49:14 +0000 http://www.1stwebdesigner.local/?p=108728 Conversion is the process of causing something to change from one form to another. In marketing, it’s turning visitors into customers. An important metric in measuring conversion is conversion rate.

Conversion rate = the percentage of visitors to your site who take the action that you desire them to take, whether that means completing a form or buying a product or service.

Many factors contribute to a successful conversion rate. In this article we’ll talk about ten common website conversion mistakes and share the potential solutions to fix them.

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets
Starting at only $16.50 per month!


1. Slow Loading Time

A good conversion rate is closely tied with a great user experience. Loading time is one of those crucial factors that may lead your users to abandon the site even before seeing it. In the information-overload-age we live in, it’s absolutely necessary to cut down the loading time as users are more impatient then ever before.

If your page takes more than 3 seconds to load 4 out of 10 of visitors will abandon it.

“After 3 seconds, 40% will abandon your site.” – Lara Hogan, Engineering Manager at Etsy

Fix: Design for Performance

Optimising your website for all devices will naturally increase your conversion rate. Invest in a good hosting service and they will ensure that your information loads quickly. Make sure that all pages on your website load properly and that all links work.

Lara Hogan, Engineering Manager at Etsy shares valuable tips in her keynote on Speaker Deck. I’ll quickly summarise it for you to take immediate action:

  • Optimise images and use as little graphics as possible as it adds to the loading time.
  • Cut down the number of typefaces you use.
  • Do you really need a sliding carousel?
  • How will images you use affect the load time?
  • Which font weights (if any) do you really need?
  • What can be repurposed?
Tesla has been clearly working on making that first impression an incredible one.

Tesla has been clearly working on making that first impression an incredible one.

2. Bad First Impression

According to research conducted by Google, users form an opinion of your website in less than a second.

“Users perceive and form design opinions even in 17 ms.” – Google

Fix: Define the Style Guide

Make sure you don’t have an outdated layout or design. Stop chasing design trends as they come and go and leave you in a potentially risky situation where your brand might look outdated in the near future.

Establish a brand style guide by choosing common colorse, typefaces, spacing rules, and a formulate a brand voice to unify your future design output. A style guide will ensure that you are consistent across all channels, including your website, email and social media.

Duolingo is a perfect example of a clear and prominent call to action (CTA) button.

Duolingo is a perfect example of a clear and prominent call to action (CTA) button.

3. Unclear Call to Action (CTA)

A website’s function is to ultimately serve as a communication or presentation tool. It’s by no means an end product so you have to define its main or final action with an efective call to action or CTA. The lack of clear call to action buttons on a website wastes the opportunity of turning visitors into potential subscribers, leads and customers.

Fix: Be Prominent

The success of your website is highly determined by the conversion rate, and a prominent call to action goes a long way to ensuring that visitors view it and has an urge to take action. When it comes to the purpose of your website, you basically have three strategic options:

  • Sell products or services
  • Generate leads
  • Establish credentials and build authority

A very simple rule can be applied here. K.I.S.S. – keep it simple, stupid – make your content easy to understand and provide an obvious next step you want people to take.

Be bold and straightforward. Make your CTA as obvious as you can. create an attractive, easy-to-view button to promote what you have to offer, and be sure to place on your site or mobile app prominently.

sdvsdv

Spotify has a super clear unique selling proposition, “Music for now.”.

4. Too Many Features

A vague Unique Value Proposition (USP) and lack of clear target audience can seriously ruin your business at any stage. By pleasing everyone you will end up serving no one and will ultimately fail. Many beginners don’t know how to package their product or service so they make it look good for as many people as possible.

Fix: Define Your Target Audience

Sit down and get to know your user, define your target audience and build a typical user profile also known as user persona. Design for your end user and focus bringing value for your customer. Do not provide features to please everyone, provide just as much as needed to provide value.

Check out this guide on Entrepreneur on defining unique selling proposition.

NegativeSpace provides stunning high-quality stock photos for free.

NegativeSpace provides stunning high-quality stock photos for free.

5. Low Quality Images

Imagery is one of the most used asset in website design and no wonder why picking great imagery can make or break your conversion rate. Cliché looking and studio-shot stock photography has been around for too long and industry disruptors like Stocksy, 500px Prime, Offset have succeeded due to the fact that people are seeking for genuine looking imagery.

Fix: Use Brilliant Photos

There are numerous of websites that provide free stock photos that don’t suck. NegativeSpace, Unsplash, Death to the Stock Photo, PicJumbo, Jay Mantri, just to name a few.

Simply by utilising these natural looking photos you will instantly be perceived as more welcoming and trustworthy brand as your website will not look that generic.

Groove has been growing their user base mostly by driving quality traffic to their valuable blog.

Groove has been growing their user base mostly by driving quality traffic to their valuable blog.

6. Mediocre content

Mediocre content is one of the things that doesn’t attract traffic. Lack of great content on your website will lead to lack of potential leads or customers so try to rethink your content strategy and focus on quality. Listicles and simple roundups don’t add much of a value to your audience as they can probably find the same thing elsewhere.

Fix: Serve Your Audience

Invest time and money in producing a superior content, even if you will be posting less frequently you will still be targeting right people and achieving a better conversion rate.

There is no tool or strategy that will make your content get shared and consumed if it doesn’t provide value and genuinely serve a certain audience. Consistently create helpful and engaging content related to your business and keep showing up over and over again.

Buffer has grown mostly because of their kick-ass content strategy. You can simply copy their model and process of creating content and implement it into your strategy.

Check out the The Anatomy of a Perfect Blog Post: The Data on Headlines, Length, Images and More by Buffer’s Kevan Lee.

Swipes use top rated reviews and press mentions to create a trustworthy brand image.

Swipes use top rated reviews and press mentions to create a trustworthy brand image.

7. A Lack of Proof

People buy from people or organisations they already know about. When starting out it’s incredibly hard to be perceived as trustworthy and get these first customers without having big names associated with your brand. However, not providing any social proof goes against you.

“It takes 20 years to build a reputation and five minutes to ruin it.” – Warren Buffett

Fix: Provide Social Proof

As humans, we’re constantly seeking for approval or reassurance from other people before we make a decision or invest our trust in something. Make sure to provide some proof of what you’re preaching. If you are just starting out you can utilise following:

  • Customer testimonials
  • Quotes
  • Case studies
  • Social media shares
  • Press appearances

Even writing this article I am backing up my decisions by linking to other articles, quoting research results and using quotes from famous people such as Warren Buffet.

SquareSpace has a nice, mobile-friendly website with a clear call to action button.

SquareSpace has a nice, mobile-friendly website with a clear call to action button.

8. Failure to Optimise for Mobile

It’s the middle of 2015 already ignoring responsiveness is simply stupid. Responsive design is a must, not a nice to have anymore if you don’t want to lose potential customers and money.

According to Business Insider, the number of people using mobile devices outstripped people on desktop computers in 2014.

“The number of people using mobile devices outstripped people on desktop computers in 2014.” – Jim Edwards, Business Insider

It is a big fact to skip when designing your website strategy and should definitely consider providing an engaging website experience for your visitors as they move from one device to another.

Fix: Rethink mobile strategy

Human behaviour has changed significantly since mobile devices entered our lives. People use their smartphones or tablets in their beds, on the go, even in the bathrooms. Start with mobile-first approach and then expand to desktop.

If you don’t have budget or time to rethink your whole strategy for mobile make sure you set aside resources to optimise for mobile devices as soon as possible as it may have already affected your traffic. In April, 2015 Google rolled out mobile-friendly update, that simply put favours mobile-friendly websites by boosting the ranking of pages on mobile search results.

Google’s Mobile-Friendly Test Tool – This test will analyse a URL and report if the page has a mobile-friendly design.

9. Ignoring A/B Testing

You can’t simply assume something, build it and expect people to like it. However, this is how many people think and build their businesses. You have to be very critical with every decision you make and back everything up with data. You have to continuously test website elements like the copy, buttons, colors, and format to ensure that everything your website employs is working towards your overall goal, not against it.

Fix: Run Regular A/B Tests

By conducting regular A/B tests, you will get rid of the assumptions that comes with optimising your website for the user. There are numerous blogs that share best practices on running effective tests and dozens of tools that can help you with that. I’ve written earlier about automating your website conversion and mentioned quite a lot of tools you can utilise.

“The biggest mistake is to make an assumption without data – either basing a decision on a personal belief, or assuming that a part of the process is ok, without seeing the data to prove that.” – Al Mackin of Formisimo

However, it’s important to keep in mind that you should only focus on altering one element at a time to avoid clouding the validity of your results. For example, If you want to compare the performance of two headlines, don’t change anything else on the page but the headlines to ensure clear outcomes.

Wake has extremely clean layout and uber clear navigation with prominent call to action.

Wake has extremely clean layout and uber clear navigation with prominent call to action.

10. Confusing Navigation

Navigation on your website is the only way to reach your products or services once visitor opens it. Too many options can paralyse the visitor to take an action and will frustrate them that will eventually end up in abandoning the page. Using slang or technical jargon in your navigation doesn’t help either, it has to be as clear and as obvious as possible so visitors can quickly find what they need. We’re all busy, right?

Fix: Review Information Architecture

Review your whole information architecture and determine what are the most important parts you need to link to. Eliminate secondary and tertiary options as they just create bigger mess and delay user making a decision. Keep menus simple and clean, use understandable wording and once again, test.

Here are some practical ways to improve your website’s navigation:

  • Keep it consistent across every page and homepage.
  • Obvious navigation titles. Use simple and straightforward language to avoid interpretations.
  • Include search. People search a lot, make sure to implement search feature into your navigation.

Conclusion

Conversion optimisation is a long and never ending process that requires a lot of research, hypotheses and tests to see positive results. I hope the top mistakes I’ve identified will help you avoid wasted time and money on your marketing campaigns. I’d like to hear your thoughts and experiences on website conversion optimization.

Now that we have gone trough mistakes, let us take a closer look at how to create a high convertible landing page.

]]>
https://1stwebdesigner.com/top-10-website-conversion-mistakes/feed/ 11
10 Fantastic Landing Page Themes & Templates https://1stwebdesigner.com/landing-page-themes-templates/ Thu, 04 Oct 2018 08:49:41 +0000 https://1stwebdesigner.flywheelsites.com/?p=132596 A landing page is one of the most crucial components to a successful website. It makes a first impression with users and states your case for sticking around. In the age of short attention spans, you’d better put forth the …

]]>
A landing page is one of the most crucial components to a successful website. It makes a first impression with users and states your case for sticking around. In the age of short attention spans, you’d better put forth the effort to engage people.

In general, a well-designed landing page will feature:

While that may sound simple enough, it’s not always so easy to achieve. The good news is that you don’t necessarily have to start your next landing page project from scratch. There are a plethora of themes and templates that will provide you with a tremendous head start.

Here are 10 landing page themes and templates you can use to grab (and keep) a visitor’s attention:

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month!



Appexo App Landing Page

Appexo App Landing Page is a clean, colorful and bold HTML 5 template to showcase your product or service. Based on Twitter Bootstrap 3.x and an 1170px grid layout, the template is also fully responsive. You’ll find six demo pages, smooth scrolling, animations, attractive pricing tables, a slideshow and carousel included.

Appexo App Landing Page

Pixel

Pixel is a beautiful and simple HTML 5 landing page template based on Bootstrap 3.x. It features attention-grabbing video backgrounds that can be sourced via HTML 5 video or YouTube.

The typography here also stands out as it is used to great effect. There are sections for everything you need, including pricing tables, blog posts and testimonials. Also included is a working AJAX contact form.

Pixel

Olli

Olli is a HTML 5 template that will place all eyes squarely on your product. Choose from four slightly different home page layouts and six color schemes. It’s colorful and built to take advantage of strong product photography.

A working order form is included to help drive sales. This Bootstrap 3.x template also includes parallax scrolling, three different product card layouts and integration with popular font and icon packages.

Olli

Minimal

Minimal is a HTML landing page template that is perfect for situations where you don’t need to publish a lot of content – at least not yet.  It’s really meant to serve as an attractive pre-launch or “coming soon” page.

However, it’s anything but bland. Inside, you’ll find the ability to utilize a full-width background image or video slider, along with a text-based slider. You can create something that looks exciting and helps to build anticipation for your upcoming launch.

Minimal

Holo

Holo is aimed at businesses that prefer a highly-functional single-page web presence. This HTML 5/Bootstrap template features powerful animated scrolling effects and lots of assorted jQuery goodies like progress bars, parallax scrolling and a filterable portfolio.

Both a light and dark template is included, along with the ability to easily customize colors. There’s also an AJAX contact form, clean pricing tables and a semi-transparent carousel.

Holo

Inbound

Inbound is a WordPress landing page theme that aims for versatility. Using the included page builder, you’ll be able to create just about any layout you’d like.

Also included is a banner system that enables you to add call-to-action areas to any part of your site. The theme includes 30+ custom widgets for things like pricing tables, Google Maps and image galleries.

Inbound

One

One is a WordPress theme based on Bootstrap 3.x. It comes with three design variations and includes integration with MailChimp to make collecting email addresses a cinch.

The look is quite clean with gorgeous typography and slick AJAX animations. Inside you’ll find a copy of Visual Composer to help with page layout, mega menus, a selection of custom Shortcodes and lots of popular page content sections to get you started.

One

Leadx

Leadx is a WordPress theme featuring seven demo layouts that span a variety of potential uses. Visual Composer and Slider Revolution are included for easy content and layout creation.

The theme is also compatible with top plugins like Gravity Forms and WooCommerce. Overall, the look is very modern and includes parallax scrolling, progress bars and attractive mega menus. There are also several ways to customize things on a per-page basis.

Leadx

Eventry

Eventry is a WordPress theme with a focus on event landing pages. Frankly, the landing page format is perfect for use with conferences and other corporate events. The theme sports four home page variations, along with 10 color schemes to help you get just the right look.

Other features include a countdown timer (perfect for creating pre-event hype), a handy responsive event schedule, a pre-registration form and the ability to get directions to the conference via Google Maps. It’s a beautiful and bold theme with lots of goodies tailored for event management.

Eventry

Conversi

Conversi is all about making those cold, hard conversions. The design of this WordPress theme makes great use of color to draw attention to important content. Included are copies of Visual Composer and Slider Revolution.

Beyond that, you’ll find lots of options to customize the CSS, colors, fonts and more. Other features include pricing tables, an image lightbox and a carousel. The theme is based on Bootstrap and provides two custom page layouts, along with six custom headers.

Conversi

A Smooth Landing

When it comes to landing pages, it’s never a bad idea to go with the tried and true. And that’s where the templates and themes above really shine. They provide you with the tools you need to create an effective page that will accomplish your goals.

]]>
Understanding Website Conversion Goals https://1stwebdesigner.com/understanding-website-conversion-goals/ Mon, 20 Aug 2018 05:17:22 +0000 https://1stwebdesigner.flywheelsites.com/?p=139067 Web design isn’t just an art – it’s a strategy. Every website and every page should have a purpose, influencing its visitors towards a certain goal. Once you understand this, the websites you create won’t just be beautiful, but functional. …

]]>
Web design isn’t just an art – it’s a strategy. Every website and every page should have a purpose, influencing its visitors towards a certain goal. Once you understand this, the websites you create won’t just be beautiful, but functional. They’ll be able to influence visitors, generate sales and please users.

Conversion Goals Explained

Put simply, a conversion goal is the purpose of the website, the action you want a visitor to take while they’re there. Buy a product, click the share button, navigate to a certain page; these are all conversion goals.

In addition, there are micro conversions and macro conversions. A macro conversion is what you’re really after, the purpose of the site. For example, an eCommerce site has to sell products, a non-profit wants donations and a blog needs you to read posts.

Micro conversions are the little things that a customer can do that leads them towards a macro conversion. Signing up for the newsletter means there’s still a chance to convince them. If someone visits a product page but doesn’t buy anything, that’s a micro conversion. Webmasters can use this and other statistics to figure out why a user didn’t purchase the product.

For instance, if you run a WordPress site for your premium plugin, your end goal is for users to purchase the plugin. Your micro goals are for people to share your blog posts, click on the plugin purchase page, or sign up for a newsletter. Your landing page could feature a big download link, but even your unrelated pages, such as blog posts, could have subtle buttons pointing towards the plugin page.

A calendar with a listing of goals.

How to Include Conversion Goals in Web Design

The first thing you need to do is get the information out of your client. They may or may not have concrete conversion goals, or even know what a conversion goal is. However, they do know their website’s purpose. Are they an eCommerce startup? A blogger? A freelancer? An established business?

Ask them what they want visitors to do on their website, and what pages you need to lead them towards. Is there anything specific they’re going for?

There are many ways to design a website around conversion goals. First, you need to make the goal apparent on every webpage, especially the landing page. Users should not struggle to get around, or have to search through menus and dropdowns to get to the right page. Generally, use a simple design without too much clutter.

A call to action, such as “click here to see our products”, is essential. Remember to highlight the call to action or link prominently. You can put it near the top or center of the screen, or use bright, contrasting colors to call attention to it.

Avoid using banners, especially ones placed at the top or sides of a page, as these can be mistaken for ads and ignored.

Finally, don’t forget your visual hierarchy. Research how people view a webpage and put the most important content in those most-viewed areas. Make these elements bigger and more visible, and use space strategically to highlight these areas.

And never sacrifice aesthetics for marketing’s sake. You can mark important areas with bright colors without using garish hues. You can use an eye-catching font that’s bold but fits with the rest of the website. Aesthetics and conversion goals don’t have to be at war; with the right designer, these concepts can fit elegantly together.

A neon sign that reads "More This Way".

Converting Visitors with Great Web Design

With the right techniques, achieving conversion goals isn’t so hard. While a lot of factors go into whether or not a visitor reaches those goals, it’s a good idea to build a website that pushes users towards them. There’s a lot of analytics software out there that lets you set conversion goals, and you or your clients can use the data generated to continue improving and building on your website.

]]>
Landing Pages Guide 101: Create Landing Pages that Work https://1stwebdesigner.com/landing-pages-101/ https://1stwebdesigner.com/landing-pages-101/#comments Wed, 13 Jun 2018 03:00:37 +0000 http://www.1stwebdesigner.local/?p=61945 I am by no matter an expert in landing page creation, but I am doing a lot of research on this topic to become more experienced myself, and I invite you to join me on this journey.

I will share the biggest takeaways here and point you to the right articles and tools – let’s call it Landing Pages 101, Science Of Landing Pages, Anatomy of Converting Landing page, whichever you prefer most.

All the Landing Page Templates You Could Ask For


2M+ items from the worlds largest marketplace for Landing Page Templates, Themes & Design Assets. All of it can be found at Envato Market.

What is a landing page and where it is usually used?

A landing page is a powerful online marketing tool – it’s a unique webpage, also known as a lead capture page, where your task is to persuade visitors to complete a certain action for example:

  • to subscribe to your newsletter in exchange for an ebook or product demo
  • buy your product
  • to register for a webinar

Your main goal is to create a landing page that encourages your visitors to complete a specific action. That’s far from being an easy task, landing page creation is an art, which is very hard to master, and even when you do you still need to do a lot of A/B testing to adjust your assumptions about how your visitors think and to see what works and what doesn’t.

Landing pages are widely used to launch webinars or products, pre-launches, persuade visitors to give you their email address with the help of ebooks, email courses, special discounts.

And as we all known once you have a visitors email address you can communicate with them on a much more personal level, which helps to establish relationships and also encourage them to do what you wish them to do.

In this article, you will be taken through each important step to create a successful landing page, capable of converting visitors into customers.

If I didn’t succeed in explaining what a landing page is read the Wikipedia explanation or this great Hubspot blog article.

Strope inspirational minimal landing pages

(Strobecorp – beautiful and minimal landing page example)

How to use this guide?

This article is separated into sections starting from landing page structure, color usage, copywriting, how to write great headlines, tips on how to improve an existing landing page, templates, tools to use, a/b testing tools, analysis of some of the best landing page examples and more.

Feel free to jump to the sections to learn what you find most important, though if you take the time to read this entire guide section by section, I can assure you, you will know more about landing pages than 99% of the rest of the industry!

Well, now that you know what to expect here, shall we start?

How to know when to create a landing page? Where are landing page used?

You can use landing pages together with:

  • ad campaigns through Adwords
  • guest writing
  • email newsletter
  • product launch
  • product pre launch
  • coming soon page
  • etc.

When you run campaigns it’s not smart to send people to your home page. Usually your Home page doesn’t explain a lot about your product, you need to make it as easy as possible for visitors to do what you want them to do.

If you want to promote your latest product, webinar or ebook, make it as simple as possible. Point them to a special landing page where they can do just that! If you know where your audience comes from, learn about them and make it as related as possible.

When you run special campaigns on a website, for example, a giveaway, greet them and customize your message! Make sure there isn’t any confusion what you want them to do (call to action) and build your landing page around this call to action. Simple is better, remember that!

Milk inspirational minimal landing pages

(Milk Inc. minimal landing page clearly shows how less is better).

Landing page anatomy (step by step parts in landing pages)

Before we start I’ll explain a few terms I will be using:

Visitor – visitors who come to your landing page, potential customers

Product – product in this case would mean an ebook, email newsletter,t raining, webinar, article etc.

Introduction

The best product launch is when you have a product other people will love so much that they will tell other people about it! And your product must be just like that, whether it is for a global audience or a very specific one, the first thing you need is a great product place and the landing page is the place to show it off and explain in simple words why your visitors need it!

Make your product desirable and memorable.

The Anatomy of a Perfect Landing Page

This is a great infographic visually explaining the most important sections of a landing page and how to direct visitors attention.

Anatomy landing pages

Top Page Headline

This is usually the first section a visitor will see as headlines are usually big, and you need to make sure you explain what you’re offering here and what the page is about in a few seconds! What problem do you solve and why your visitors should care about it.

For example in this article the headline is:

Landing Pages Guide 101: Create Landing Pages that Work

You know straight away what to expect, you’re going to find a comprehensive guide on how to create landing pages that work! Make your message as simple and clear to understand as possible! Peoples attention spans are very short, and great products aren’t used, or articles aren’t read just because someone wrote a crappy headline!

Make sure your ad copy targets visitors to the right page to fulfill expectations:

Bonus tip: use the same color palette or graphics on your landing page as in your ad copy assuring visitors that they came to the right place when they clicked on ad. Example from MojoThemes campaign below.

Mojo Themes Cyber Bundle 2011

One Clear Call to Action

Build the whole landing page around your call to action, because it’s the main focus right? You created a landing page to get your visitors to complete a certain action and because of that make sure the call to action is easy to notice, whatever it is – subscribe box, buy button, the form you want them to fill out.

Make sure your call to action is above the fold (basically it’s on the page visitors see without scrolling, approx 500px height). Some minimal landing pages even just put their whole message above the fold, making sure visitors don’t need to do ANY scrolling and keep their message super simple! You must aim for this goal too!

I’ve already mentioned how important it is to have one clear call to action and how you should build your landing page around it, but I wanted to emphasize this and include some more articles you will find extremely useful if you want to know how to create a memorable call to action or how to can improve your landing page to focus more on your main goal:

Shipment inspirational minimal landing pages

(Shipmentapp has no distractions, just one clear call to action).

Clear Headlines

The same way you use your headline you should use subheadlines. Use them to emphasize your message as you explain to your visitor what your product is about. Put the same attention into subheadlines as you put into your main headline because you want your visitor to keep reading, you want to keep them engaged until he is sure your product is what he wants!

Note: continue reading the section about copywriting because the art of headline creation is complicated and requires a lot of learning to master.

Page Content

All the page content should be focused on what your main headline says and a single, focused message and, of course, your call to action. Make sure you list the benefits of your product, not just your product features, you’re the proudest of. When you create page content, you need to think from a visitors point of view. Will they be interested in the features you offer, or how these features will benefit them?

Keep your most important content at the top of the page together with bullet points, because most visitors at the beginning tend to scan a page and you need to grab their attention to get them interested enough to read further.

For example, if:

  • feature is – Create a website without any coding skills
  • benefit is – You can save time by creating a website without any need to learn to program or spending a lot of money to hire a designer or programmer.

Make sure your 3 or 4 most important benefits are immediately clear.

You can also emphasize some of your content by making it bold or italicizing as I have done right below.

Tip: Focus on just three key benefits or ‘pain points’ you solve and no more! This will help your visitor to easily understand what your product is about, and more importantly, how it will benefit them.

Page content is also the place where you tell your story, build trust by showing your experience and address your audience by showing pain points they have and how you will solve them. When you tell this story, break your content up every 2-3 sentences to avoid the page looking cluttered. This is also why you need to use bullet points and numbered lists as I’ll discuss in the next section.

Write your content from a second person’s perspective – “You” addresses visitors much more directly than boring formal text.

Make sure you proofread and that there are no spelling or grammatical errors, your product will look much more professional and trustworthy!

Also don’t put too much text, because research shows 90% of the population doesn’t like to do much reading, which means headlines, images, video, and bullet points will get much more attention, where content may not get much at all.

Slidedeck inspirational minimal landing pages

(SlideDeck’s landing page shows how even with many elements you can still make a landing page look clean and simple).

Use Bullet points and numbered lists

Making use of this formatting will help your visitor understand what your product is about, the value you provide and what your message is. It will also simplify your layout, and simple is always better as peoples attention spans are super short.

Use Images

Images often explain more than words can – why do you think infographics are so widely popular? Infographics bring text together with images that require little to no explanation; I always encourage my readers to use images in articles, because the visual relation is much stronger than textual, as is our memory.

Stumbleupon inspirational minimal landing pages

(StumbleUpon did a very good redesign and their homepage makes great use of beautiful images).

Use Videos

And videos explain more than any single image could, you have a chance to show yourself, let people hear your voice, show them you’re a real person and it’s a great way to explain what your product is about and let your visitor just sit back and listen instead of browsing the page, trying to understand what he sees and whether he needs your product or not.

Social Promotion

If you are offering something of great value then, of course, visitors want to share your great product with their friends right? Make it easy for them and provide social promotion links, but remember to use just the most popular services like Twitter, Facebook, LinkedIn and nothing else. Keep it simple and try to place these links in a way that they don’t distract your visitors.

Here is a great spot to run A/B testing to make sure your social links don’t distract visitors from your main message.

Provide security

When you are asking for visitors personal information, they will often have some anxiety about giving it to you, so you need to make sure you build enough trust!

You need to think like your visitor, why do they have that anxiety? They receive a lot of spam, scams and cold calls from sales people so you need to explain that this is not the case here, right?

You can build trust with:

  • high quality design and strong branding – for example I receive a lot of emails from people asking to check out their service, article, or help them promote it, but when I visit a site and it’s looks crappy and has a terrible logo – I immediately close the page without even reading further! Presentation is so important, your product should look (in)credible!
  • testimonials – once you have grateful clients make sure to get recommendations from them! It’s even better if you can get testimonials from popular people in your industry or get mentioned on popular blogs.
  • 30 day money back guarantee, third-party security certification like SSL cerificate, guarantee seal.

What should call to action forms or buttons look like?

Usually your call to action will be subscribing to an email newsletter or a request to buy the product. It’s a very hard to decide how long your form should be, for example is it enough to just ask for their email, or do you need your visitors name? It’s up to you, but try to keep your form as short as possible, the more input you require from your visitor the less likely they will go through with it. Ask for the least amount of information you need – the less information you require, the more signups you’ll get, simple as that.

It’s even harder with buy buttons because the next step is usually a request for their personal banking or credit card information. I recommend using my personal favorite, Paypal checkout, which is fast and simple and doesn’t require your visitor to share their personal financial information with you.

You can add some fields that will help you learn more about your customer, but make them optional, not required. A better option is to show these fields after subscribing –

Thanks inspirational minimal landing pages

Experiment with button and form size, usually bigger buttons perform better than smaller less noticeable ones.

 

Text on button

The default text is Submit, but studies show that it’s better to use something like Click Here or Go, but you can also take a different approach by making buttons more engaging and relevant to your offering like “Get Your Free Ebook Now!”, “Subscribe for news!”, “Get access now!” or “Download now.”

Posterous inspirational minimal landing pages

(Posterous has a beautiful, simple, landing page and good examples with call to action buttons).

Thank you page

Once your visitor has completed your call to action make sure you show your appreciation by simply saying thanks, offering a cool freebie or by directing them to related information on your site they may be interested in.

On this page, you might choose to give access to your product (if it’s something they can download), give more details and put the download link.

If you chose to not use social promotion on your landing page, you could use it here – ask them to share this offer or product with their friends!

Now you will usually have collected your visitor’s email address so keep them engaged and follow up there. I won’t get into this topic right now as we’ll have a separate section explaining how to make use of your email list.

Colors

You must also have a clear and basic understanding of colors because different colors convey different meanings and are perceived differently. Check these three articles to learn some basics about how to use colors in web design and your landing pages.

How to pick the right font?

I didn’t want to go in depth in this topic, instead I found a good article for you to read if you want to know more.

Tumblr inspirational minimal landing pages

(Fonts can make or break the landing page, Tumblr does it right with professional fonts and effective use of whitespace).

Pricing Tables – How to choose product price and how many options to offer

It’s a scary place to be thinking about how to price your product – you don’t want to price it too low and undervalue your product, and you don’t want to set the price too high and turn people off. How do you decide how many pricing options to offer and how to choose the actual product price?

It all depends on the exclusivity you provide, if you can make it look desirable, you’ll probably have no problem charging a higher price, but your landing page copy better be well written should be very well to create that desire, need, and rush that will convince them your product will help them change their life or business! And yes, if you charge a high price be sure you can deliver – people want to get what they paid for!

I like to think it’s better to set prices higher, and then offer discounts and experiment with your price point. As for the options – I think the best choice is to have one price, one call to action, but if you really need more, don’t have more than three plans. Too many choices will just confuse your visitor and he will turn away! Ah, and if you have more plans, be sure to offer a top choice, which should be the best value, to make it easier for your visitors to choose!

But here I will repeat what everybody is repeating a lot already – do A/B testing, don’t assume anything, just test it and know for sure what works and what doesn’t!

Here are two articles on this topic from SocialTriggers to help you make an even better decision on pricing:

..and a bit of inspiration, how a good pricing table should look and how to differentiate several plans:

Tips on how to create, or improve, your landing page and some useful articles

Here I will again cover and repeat some tips you should really remember again and again while designing your landing page, and if you have already have a landing page, then check these tips to improve your page! For example did you know? “Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.”

  1. Put the most important content above the fold, did you know 80% of web users spend their time at looking at information above the page fold and only 20% of their attention goes below the fold? Ok, admittedly, the research is a bit old and the way people are viewing the Internet has changed, but it’s a huge difference! Most people will view just above the fold, be aware of that!
  2. Simplify your form/ Use a simple button to make the page as easy to understand as possible and the call to action as easy to complete as possible!
  3. Reduce distractions – remove visual clutter, make use of white space, hide navigation, if you have one there and don’t use links which will drive visitors away from your landing pages…every little mistake adds up and results in less sales and completed action steps for you!
  4. Use white space to direct the eye to the sections you want and effective use of whitespace will also make your site look cleaner and more professional.
  5. Optimize landing page for search engines to make use of search traffic as well, which will be huge in the long run!
  6. Only have one call to action on the landing page, but repeat it several times throughout the page if your page is longer. Good practice is to always have the call to action visible as he scrolls. I also want to take this opportunity to remind you not to have long landing pages, however if you have one, then include one call to action at the top, middle and lastly, one at the bottom.
  7. Make sure your page loads fast – people don’t like to wait, attention spans are short and if you, keep them waiting too long, they won’t wait at all. The same way you need to keep your landing page simple, keep your code clean and the images and video optimized.
  8. Use heat maps to see where people are clicking the most, by doing this you’ll also notice sections where people tend to click, but which aren’t clickable – this means you should test your landing page more to make it super simple to understand and help your visitor complete your preferred action.
  9. Put email privacy information right next to the email input box, simple text – “We don’t spam and hate spam as much as you do.” can work wonders and build trust.

Instagram inspirational minimal landing pages

(Instagram’s landing page clearly shows it’s app for iPhone, it’s free and there is one call to action – download app from AppStore).

Here are some related links you should read for some really in-depth knowledge about landing pages:

Copywriting importance, learn art of copywriting

The art of copywriting is actually the art of keeping your readers engaged from the first word to the last. Keep them engaged in your content with bullet points, sub headlines, the artful use of formatting. Make your content flow so seamlessly that before your visitor is even at the middle of the page they desire your product and are already wanting to complete your call to action! It’s a very hard art to master and here are several articles to help you learn copywriting. If you read these articles, when you finish you’ll know more about copywriting than most people do, and that’s a huge advantage over your competitors:

preview_large_headlineimpact.jpg

Templates to get you started:

You can find a lot of great templates online, some you can use right away that will help you kickstart your business! I think templates are great place to start, I recommend a lot of A/B testing and once you’re ready and know what you need, you can hire a designer or a coder to develop your own unique landing page that converts really well! These templates are very cheap and should are perfect to get you started!

Landing page templates from UnBounce – here you’ll find a lot of great templates, you’ll be able to edit in WYSIWYG editor easily without any coding experience! UnBounce has huge experience in this market, so you can be sure you’ll be in good hands to get started.

Unbounce landing pages

Themeforest

Themeforest landing pages

Themeforest is a huge marketplace, selling everything from WordPress themes to landing pages! Even if you don’t end up buying a premium design, these are great source of inspiration! Here is a link to their landing page category, order these by sales to see the most popular landing pages on that site.

A few of my favorites:

Conversation ($10)

Conversion is a premium HTML landing page. Its great structure and clean, professional design, as well as a variety of page templates, allow it to fit to both transactional and reference landing pages.The main goal of a landing page is to convert visitors into customers. Therefore the layout is specially designed and fitted with a variety of features that will make that happen. Coupled with a structure that’s highly customizable, this product will be perfect for your product, service or company presentation.

01_Conversion_Premium_Landing_Page.__large_preview.png

View Demo

Lista ($8)

Lista Landing Page is a premium landing page design for your newsletter or download, even just a service, your choice! Lista Landing Page makes good use of the Z Reading pattern to guide the eye around the design and ultimately convert your visitors in to subscribers or buyers.

01_a.__large_preview.png

View Demo

Integro ($8)

Integro is a Corporate HTML /CSS landing page. It has a clean, professional design with a Definitive Call to Action. Integro is a powerful Landing Page with features like Live AJAX Form Submission, Pricing Table, Lightbox, Tooltips, 2 Types of Galleries and Image Sliders. You get started with Integro within minutes & only handful of Customizations with well documented HTML / CSS / JS & PHP .

01_preview.__large_preview.jpg

View Demo

Online tools you can use to create landing pages

Ok, this is the more advanced stuff! Once you know a bit more about what you need even if you don’t really think that you can code and design landing pages yourself there are a bunch of amazing online premium tools you can use to build your own landing page in no time! Often those tools come together with helpful tips on how to design a landing page and some even include A/B testing! I did a lot of research and these tools are the best ones I found and tested! Get started right now!

Premise

This is a handy premium WordPress plugin create by CopyBlogger Media for easy landing page creation. You won’t have any more problems creating unique pages, which look good and go seemingly with your own WordPress blog. I bought myself this plugin some time ago and I must, say it is easy to use. The tutorials helped me learn a lot about landing page creation and for quick results don’t look any further.

I think this is the best tool for landing page creation without need to hire a designer to do the job, however of course for advanced solutions you still would need to search for help, but for most cases, it’s enough with Premise. In their features, you’ll also find included A/B testing through WordPress and even SEO tools letting you get all the data you could need from your page.

It’s a bit pricy ($85), but if you need to create a lot of landing pages, it is certainly worth the money.

Premise landing pages guide

Unbounce

Unbounce is online software you can use to create your landing pages. Everything is broken down into easy steps: build a page (choose from 276 templates), publish it, drive traffic and check results and in the end do A/B testing and optimize your landing page. This is a good site and if you need a cheaper solution, pick Unbounce – it has a 30 day free trial and the most basic plan costs only $25 per month.

Unbounce landing pages guide

KickOffLabs

KickOffLabs is another popular choice for landing page creation, they are trying to push social promotion into your landing pages encouraging you to be social, which is handy.

Their WYSIWYG editor is also very easy to use, you can easily pick from good color schemes and edit different elements easily. The only thing I think is missing here is advanced features for bigger landing pages with many elements, but if you want simple – KickOffLabs will be a great solution for you.

Kickofflab landing pages guide

Check their dashboard below – everything is there explained in 1-2 sentences, the learning curve is very small. Ah and yes, for one landing page KickOffLabs is free, but for advanced features, you may need to pay as much as $20.

Kickofflabs landing pages guide

Related reading:

Importance of converting landing page and A/B testing

Once you have created your landing page, don’t stop there, you should always be testing – even if you can improve your page conversion rate by 4-5%, calculate how much it could improve your performance in the long run! Don’t make assumptions about what works; I bet you’ll get a lot of surprises through A/B testing!

With A/B testing you can test everything – headlines, content, bulleted lists, video placements, call to action forms, looks, colors, formatting – you get the picture. Services like Amazon have done countless A/B testing and are still doing it all the time trying hundreds and thousands of different tweaks, while this is extreme you should learn from them and keep improving yourself!

Here are several helpful resources I found to help you delve much deeper into this topic:

  • The Ultimate Guide To A/B Testing – Introduction to A/B testing, basic explanations what to test, how to create your first A/B test together with Do’s and Don’ts and real studies.
  • The Guaranteed Way to Radically Improve Your Copywriting – guide from Copyblogger, beginning is little similar as previous article, but here you’ll get explained the magic of A/B testing – guessing game where simple text change increase conversations by 25%! Powerful!
  • A/B Test Case Study: Single Page vs. Multi-Step Checkout – nothing is better than real case studies showing how to do A/B testing!
  • Which Test Won? – this site runs a lot of different A/B tests, puts them online and create inspiring game from it! How good is your gut? Which version performed better – A or B? After you choose you can see actual A/B test results! Sharpen your skills here!
  • An Introduction to A/B Testing – one more explanation about A/B testing taking little bit different approach.

Tools For Landing Page Optimization ( A/B testing) – Measure Results

Ok, this is super important – I know, I know it’s too much at first – so many little things you need to know, be aware of and at the end really you still cannot assume anything! You need to test it! And to be honest for a long time this topic was like rocket science to me! I didn’t know how to get started, A/B testing felt like too complex a topic and too hard to figure out and use…

But not anymore with these amazing tools we can use these days!

These are the most popular choices:

Optimizely

Yes, I joined many Optimizely supporters and think it is the best tool available for now! It’s very advanced, yet very easy to use with everything you need built in for serious A/B testing! I just registered and right away I was ready to do an experimental test!

It is really as easy as they promise on website:

  • Enter your website’s URL below and create variations of your website in minutes.
  • Copy and paste your one-line Optimizely snippet onto the pages you want to test or measure as goals.
  • Start your experiment and learn which variation performed best!

Here you can read more in detail how Optimizely works.

Optimizely isn’t free (starting from $17/monthly), but it has a 30 day trial and I totally recommend it as a top choice for running any tests!

Optimizely ab testing landing pages guide

Heatmaps

Together with A/B testing heat maps also can be very useful to see where people click, scroll on your live version, maybe there is image on your site where people click, but it’s not a link? Maybe in that case you need to make that section clickable or change the image to avoid distractions?

CrazyEgg

This is the most popular heat mapping service, which I use personally. It also has a handy WordPress plugin allowing you to automatically add tracking code, making the whole testing process even easier!

Crazyegg heatmaps landing pages guide

If you were wondering if there are any alternatives to CrazyEgg, there is also a very popular heat mapping service called ClickTale, which is similar, but it has some interesting extra features such as visitor recording, conversion funnels and campaign tracking.

Blogs to read to get even more:

Landing page creation, optimization, A/B testing – all these little bits require ongoing learning if you really want to be ahead of your competitors and improve your conversion rates. It’s very hard to keep track of this changing world all by yourself, but it’s super easy if you know where to search for high quality content! These blogs focus just on these topics and I recommend adding these sites to your RSS reader so you are always the first to know about the newest tests, tools and techniques:

  • Hubspot Blog
  • Formstack blog section about landing pages
  • Socialtriggers offers a lot of unique opinion about email list building and online sale increasing. Each of his articles are very detailed and comprehensive – he doesn’t post often, but when he does basically every article receives hundreds of comments and goes viral.
  • Unbounce blog landing page section

Do you know any more useful blogs or resources about this topic? Share away!

]]>
https://1stwebdesigner.com/landing-pages-101/feed/ 21
How You Can Benefit from Video Landing Pages https://1stwebdesigner.com/video-landing-pages/ https://1stwebdesigner.com/video-landing-pages/#comments Sat, 09 Jun 2018 08:41:56 +0000 http://1stwebdesigner.flywheelsites.com/?p=129243 This landing page is tailored to the action they just performed, so clear and direct calls to action are necessary for impactful landing pages. Targeting ads to lead customers to attractive landing pages is a fantastic way to increase your brand’s reach.

Since Google began giving preferential rankings to pages containing video content, video has become a top way to boost brand awareness. Video content is appealing for several reasons, so leveraging the power of video content in your landing pages is sure to make a great first impression with potential customers.

The Power of Video Content

Video landing pages are a huge trend in content marketing. While most landing pages are generally geared toward encouraging the customer to perform a specific action, such as downloading an eBook or joining a mailing list, branded video content can delight, entertain, and inform potential customers. Video landing pages are shorter, easier to digest, and more attractive to the modern consumer.

While not every user will want to, or have the time to, read text-based content or browse an image gallery, videos can be watched or heard while doing other things, so encouraging a potential customer to watch a video is typically easier than getting them to digest other forms of content.

Video landing pages can increase conversions up to 80%, and site visitors generally linger on webpages with video content up to 88% longer than they would on other sites.

Video content is especially effective for eCommerce websites. Users are also 52% more confident in their purchases from sites with video content. Additionally, users who saw video content on eCommerce sites stayed on those sites roughly two minutes longer and were 64% more likely to make a purchase.

Video Landing Pages vs. Traditional Landing Pages

Digital marketing is constantly changing and remains hyper-competitive. Today’s consumers are so inundated with sponsored content, ads, and other forms of marketing, that most simply tune out anything that resembles advertising.

Modern marketing professionals are tasked with making memorable impressions on consumers, to stand out from competitors and display real value.

A traditional landing page is a great way to show browsing consumers that your content is relevant to their needs and that they have come to the right place to learn more about you and your brand. After clicking your well-placed targeted ad, the customer hits your landing page knowing they are in the right place to take advantage of your offer, receive your free gift, or learn more about your brand.

It’s imperative that value and relevance are readily apparent; otherwise the potential customer will simply think you’ve wasted their time. There needs to be a clear incentive to click on your link, and the results should match the user’s expectation.

When this doesn’t happen, it hurts your conversion rate and your credibility. Once a modern shopper dismisses a brand as unreliable, inaccurate, or irrelevant to their interests and needs, it is extremely difficult to rebuild that trust.

Another major benefit to video landing pages is the fact that Google gives priority to sites with video content. If your site is optimized for search engines, your rankings will improve even more thanks to video landing pages. This additional reach is extremely valuable as search rankings are so competitive.

Mobile First

Many marketers have realized the staggering potential of developing content with a “mobile first” mentality. Mobile content viewing continues to skyrocket as more and more consumers use their smartphones for everything from browsing the web to shopping and paying bills.

As smartphone technology advances, it’s much easier for modern consumers to purchase mobile hardware capable of high-definition video streaming. Consequently, more and more video content is consumed on mobile devices every day.

Another key concept in modern marketing is responsive design. Thanks to the plethora of options afforded to modern consumers specific to internet-capable devices, it’s more important than ever to design your site and your content to respond to various types of devices.

For example, it’s vital to think of thumb navigation when designing your websites, as mobile users won’t be using a mouse to navigate your content. Optimizing for mobile devices is essential to modern digital marketing, and more and more professionals realize the value of investing in video content for their well-designed and thoroughly optimized websites.

Mobile also opens the door to more advanced targeting for marketing campaigns. For example, digital marketers can tailor content based on a user’s geographical location to deliver more relevant content. While this may not be a realistic option for every piece of video content, it’s still vital to remember that geo-targeted content can have profound effects on your conversion rates while building your brand strength at local levels.

Tips for Video Landing Pages

There are countless tools available for developing video content at little or no cost. Virtually any business of any size in any industry can produce high-quality video content, so it’s important to seize this opportunity as soon as possible.

The value of video content has been well-known for years now, so if you aren’t capitalizing on this for your brand, your competitors certainly will for theirs. Consider the following tips for producing high-quality video landing pages:

  • Start now. Again, if you haven’t realized the potential of video content for your brand awareness, your competitors have. It’s crucial to invest in video content for your landing pages sooner rather than later. Your videos will improve with testing and experience, so don’t fret about making your first foray into video content perfect.
  • Don’t let cost sway you. Video content is much cheaper to produce than most marketers realize. Even if you have little to no experience with video production, you don’t need to amaze your audience, just give them something delightful and valuable. Simple videos like company updates, storytelling, consumer success stories, and product demos are great ways to get started with supplying video content to your audience.
  • Know your audience. Well-researched customer profiles are one of the most powerful tools in a marketer’s arsenal. If you have a very clear idea of who you want to attract to your brand, develop video content that will speak to their needs and wants, and answer the questions they likely have about your brand.
  • Consider how the video is optimized. Video content is engaging, but it can also be annoying for some users. Some features such as auto-play might suddenly blast the audio of your video at a customer. Make sure users can play and pause your video, expand it to full-screen, and mute it if they wish. If possible, you may want to invest in closed captioning for your video so it’s accessible to a wider audience.
  • Make it relevant and valuable. If you know your customer base, it shouldn’t be terribly difficult to develop video content they’ll enjoy. Don’t waste potential customers’ time. Offer them a reason to click your link, and then make sure they’ll be delighted with your video content that follows.
  • Follow up. One good turn deserves another, so don’t make one piece of video content into a good standalone experience for your leads. Tie the other content of your video landing page to the video itself and future content. Video series are great tools for building awareness and driving engagement. Users who view your first videos will want to stick around for what’s to come, and latecomers who are delighted with your content will want to go back and investigate what you’ve done in the past.

These are just a few of the ways you can capitalize on the power of video landing pages. The value of well-crafted landing pages and the power of video content have been well-known in the marketing world for years, so it’s crucial to capitalize on the potential a combination of the two can have for your brand, conversion rate, and staying power in a hyper-competitive market.

]]>
https://1stwebdesigner.com/video-landing-pages/feed/ 5
The Anatomy of an Effective Landing Page https://1stwebdesigner.com/effective-landing-pages/ Thu, 13 Apr 2017 12:13:53 +0000 http://1stwebdesigner.flywheelsites.com/?p=126044 Designing a landing page is not a simple task. Why?

  • You need to understand that your design is crucial to making the visitor complete an action.
  • You also need to understand the basic principles behind the actions your visitors make and take advantage of those actions to intelligently place elements within the page.

As all web pages have their specific elements that are vital in facilitating information, a landing page also possesses elements that need to be present to make it more effective.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month!



White Space

What can white space do to your design?

  • It makes it more readable
  • It makes it more clean-looking
  • It improves focus
  • It creates a professional look

good-white-space-website-example

Ways to ensure proper use of white space

  • Ensure proper margins between elements.
  • Break large chunks of text.
  • Use call outs, buttons, dividers, headers and bullets

Proper Placement of Elements

When designing landing pages, the presence and proper placement of elements are two different things. As a designer, you have to understand that your design elements should be placed in the places where they will be most effective.

The Fold

The fold is the term that refers to the specific portion of the website which can be seen upon loading. It means that the design elements that are ‘above the fold’ are the ones seen without the need of scrolling down. Although there are some discussions whether the fold is a gimmick or not, I still find it effective, especially for desktop browsing.

Now why did I bring the Fold topic up? Well, the reason behind is an effective landing page makes use of the “Fold” to properly place items.

the fold

What to put above the Fold

  • A video about your business
  • A greatly written tagline
  • Few salient points about your business
  • A call to action

What to Place below the Fold

  • More details about your business
  • Testimonials
  • Call-to-action elements like buttons and sign up forms.

Tips

  • Make sure you preserve proper white spacing
  • Provide a smooth flow of information between folds
  • Again, break up chunks of content
  • Use icons and graphics

Amazing Images

The use of images is considered to be the best and most effective way of capturing visitor attention. It makes a subtle connection to the visitor, which can persuade him to look at the website.

amazing-image-for-website-example-2

Here are a few guidelines in choosing perfect images in your landing page:

Your Images Should Make Your Landing Page Look Professional

No one would ever want to conduct business with a jester (unless you’re in the clown industry). If you want your business to be taken seriously, you need to use good images to ensure that you mean real business. The use of poor images may seed doubt in your visitor’s mind about company credibility and could result into loss of interest.

Make sure that your images are high-quality and should suggest trustworthiness, reputation and professionalism.

Here are a few great samples:

Your Images Should Be Visually Appealing

Of course, you would want your images to be a real deal.

  • Use images that are visually appealing because it will trigger your customer to respond to your call to action.
  • Never use pixelated images, or images with watermarks in them.
  • Hire a photographer for this part, or take the photos yourself (if you are into photography).
  • Never be dependent on stock images.

Your Images Should Be Simple

The summary of this tip is this: Do not overdo it. Don’t showcase your talents in photo-manipulation or graphic composting. The simpler it gets, the better it will become.

Your Images Should Stay Relevant

When I say relevant, I am speaking of the compliance with a certain theme or motif. Sometimes, companies get too creative with their designs, and that is not bad. But make sure that all the elements you place, even the images, should adhere to the motif of the landing page.

amazing-image-for-website-example

Never Forget a Call to Action

The thing about your visitors is that they want to be told what to do. Each landing page should think of that in order to properly lead the visitors to the product.

  • CTAs tell your visitors what they should do next.
  • Include entering their email addresses, clicking on sign up buttons and more.
  • Placing call to actions in areas of the design where they can be noticed.

For your landing pages, you should always want your calls to action to stand out of the rest. They should be noticed. For example, you can place your call-to-action element over an image and contrast it properly so that I will be noticed.

Also, make sure you do the following:

  • Assure that the call to action is visible at least once in the design. It should stand out over other elements.
  • Use visual cues like arrows and graphics.
  • In case you used more than one call to action element, make sure that they are de-emphasized visually against the primary call to action.
  • Repeat the CTA if you have contents below the fold.
  • Use Correct Colors

Like white spacing, the use of proper colors is also much discussed the world of web design. Color psychology has become a great and influential part in designing landing pages.

There are a few color schemes that are popular. Let’s take a look at them:

  • Blue – blue is greatly used in Landing Pages because it subtly suggests cleanliness, trust, freshness and institution.
  • Green – green is also much sought after because it works well with themes of money and life.

Most landing pages avoid using red, black, and yellow because they suggest a feeling of fear, anger and darkness.

Testimonials

Sometimes, other people’s opinion of you matters more than what you say about yourself. This is true, especially in landing pages. Testimonials have been proven to affect a huge chunk of decisions and conversions.

Think of it, you are on the Internet. Nobody really is sure about your real identity and doubt is bad for business. You have to gain their trust, and build from it to succeed.

website-testimonials-example

That is where testimonials take play. The more others talk about how beneficial and good your product is, the more conversions you get.

If you have solved others’ problems, you will surely be helpful to more people. That is what your visitors think. If you will be able to connect to them using your former client’s experience from your services, it will be assured that they’ll take your product.

Use Videos

I included videos as one of important elements in a landing page because it makes it easier for the visitor to digest the message than reading the copy.

Remember this, most of the people who browse the Internet are too lazy to read your long texts. Want to reel them off your design? Use videos instead.

But this comes with an advice. Make your videos compelling. Don’t settle for lame slideshows with lame music in them. Use talking heads; be creative.

landing-page-with-video-example

Tips on Making Your Videos Effective

  • Decide whether you would want the videos to play automatically or not. Some experts say that auto-playing videos in a landing page is bad because it interrupts the flow of information. But others say that it increases conversion drastically. You have to choose.
  • Do not forget to include a Call to Action. Place a CTA in your video. You can choose if you want it to be permanently visible, or shows at certain points.
  • Create a version 2.0 of the video. What do I mean by this? Well, you should supply a backup video where you can place more content. Sometimes, viewers need more information that you just can’t compress in a 30-seconder.
  • Lead the viewer to the call to action. Remember to lead your visitor to the landing page’s CTA. You can do this by physically pointing towards the CTA or just verbal instructions.
  • Upload it to YouTube. Reuse your videos by adding it to your YouTube account. This will increase SEO and can be seen 500% better on Google than the text article.

Final Words

Upon dissecting the anatomy of an effective landing page, and discussing each element, we may come to a conclusion that the concoction of art and business-mindedness is essential in designing landing pages that convert.

As a designer, you need to keep in mind that these tips are just guides. Creativity has precedence over theory. I hope I helped you with these tips and I expect to see great landing pages with you guys. Good luck!

]]>
How To Create a Powerful and Converting Sales Page https://1stwebdesigner.com/powerful-converting-sales-page/ Sun, 13 Mar 2016 12:04:52 +0000 http://1stwebdesigner.flywheelsites.com/?p=126041 One of the most important elements for any online business is a landing page. a landing page is what converts your visitors into leads. In short, it is the heart and soul of any marketer’s lead generation efforts. The big question, however, is how to design a lead page that actually converts.

A landing page, in the purest sense of the word, is just another web page where your visitors can “land” on or arrive at.

Creating a landing page allows you to target a specific audience, offer them something of value, and convert a higher percentage of your visitors into leads, while also capturing information about who they are and what they’ve converted on.

But how do you utilize this? Or rather, how do you create a landing page that generates high conversion?

A Simple Acronym for Success

If you have done a bit of copywriting or involved in marketing and advertising, you might have heard of AIDA. AIDA is not a woman although the name sounds like one. On the other hand, AIDA is a model – a very popular one. AIDA is actually an acronym used by marketers, advertisers, and copywriters and it stands for:

  • A- Attention,
  • I- Interest,
  • D- Desire, and
  • A- Action

This acronym has been an essential guide for marketers to target their audience effectively. The most prime examples of using this model are car advertisers. Advertisers in the automotive industry are aware that in order to grab the attention of their consumers, they have to use colors, backgrounds, and themes that would appeal to their target audience.

The same principles also apply to web design and here, we will walk through each point and provide examples to help you design a high converting sales page.

Attention

In web design, or even in any industry, two of the most important things to keep in mind when you want to attract someone’s attention for the first time are generating your audience’s trust and addressing their pain.

When it comes to generating trust, it is always our instinct to observe a person we meet  or inspect the place we visit for the first time. Based on that first impression, we begin to form our opinions, prejudices, and fear. For example, it is easier to trust a person in a suit rather than a person in a hoodie.

First impressions may change but it is true that they last as well. This is also the first thing you have to keep in mind when you design or create a landing page.

Are the facts inside your landing page trustworthy? Have you double-checked the information before you put them on your sales page?

When it comes to the visuals and aesthetics, you don’t throw in all the flashy things and colors on your landing page. Instead, keep it clean, elegant, nice, and neat because you don’t want to overwhelm your clients.

Remember, when a client becomes overwhelmed, they become intimidated. When they become intimidated, they run away. So there goes your lead conversion slipping from your hands.

Once you have earned their trust, you can step up to the next level where you have the privilege to address their pain. Keep in mind that your visitor has come across or gotten into your landing or sales page because they have a pain or need. They must have gotten there because of an email or an article they read which is related to what they need or they have searched Google to look for an answer to that need or pain.

“Build Your Own WordPress Site 100% Responsive and Flat”

This headline or ad is intentional and not just thought of randomly because it sounds good. It is, of course, catchy, but mostly it is to address a pain or a need.

Before putting up this headline, we realized that a lot of people want to build their own website – and not just any other site but their own WordPress site, which is flat and responsive. So when the targeted audience see this, the heading will catch their attention and curiosity leading them to know more about what is being offered.

Interest

Attention and interest are different as black and white. Attention piques a person’s interest but it doesn’t mean that when you get someone’s attention, you can keep them interested. Interest, on the other hand, is long term. If you are interested in something, you will be able to do it for a long time no matter how difficult or expensive it is.

Thus, the next step you need to do once you captured your audience’s attention is to keep them interested. How?

By paying attention to your audience’s emotional journey and telling them an authentic story about the success they can have.

Emotional journey is something like a roller coaster ride where you show or address your audience what their pain is – the place where they are in right now- and describe the world where they could be – the world which you can build for them. Then, you show them by creating a bridge between the two worlds. You must be able to show them that you can take them from a place of pain into a place of pleasure.

One example for this is the question we posed in our sales page:

Are you scratching your head  wondering how amateur designers or programmers can make powerful modern websites, and be able to sell it to their clients and making their dreams come true?

Here, we show them their place of pain (scratching your head) and the place they want to be (making their dreams come true). When our audience saw that, they become interested how to be able to get to that place in the future.

In order to hold your audience’s interest further, you need to paint a clear picture of the new reality. For example, you can show them that 80 million sites are being served by WordPress. This sends a message that they can actually build almost everything using WordPress.

The second part of catching your audience’s interest is by telling them an authentic story. The story is basically about the how and why of why you built this product or service. People, of course know that the real reason is to make money. However, when they can see that what you are offering will actually address the problem they have, they won’t need any convincing – and you do this by telling them an authentic story.

One example of an article that tells an authentic story is the article we wrote about “Building a Portfolio Website.” We start the article by stating the reason why we wrote the article, which is a real need – a lot of people want a portfolio website for their personal brand. After that, the article showed the readers how we did it and how they can do it as well.

Desire

The next step in building a successful landing page is Desire. In creating desire for your audience, you also need to remember two points – social proof and added bonus.

Social proof is making your visitor feel safe. After you show them that they can cross from one side to another, they want to be assured whether the bridge you’re creating or using is safe. And the best way to assure them, of course, is to show them the proof that the bridge actually works.

For example, to show your audience that WordPress really works is to show them that WordPress is used by big companies, such as BBC, TED, CNN, Dow Jones, Time, and many more.

Another way of social proof is testimonials. When they see that other people who have used your products and services are saying positive things about what you offer, it will put their minds at ease leading them to open up to what you are offering.

After you assure them, the next logical step is to surprise them. Most, if not all, people love surprises – good surprises to be more specific. Surprises also make your visitors or customers feel that you actually care about them and not just concerned about getting their money.

In one of our sales page, we offer several bonuses to our products and services. Below that, our customers can see what added bonus they can get when they enroll in our courses.

Action

Now to the last and most important step, you need to move your audience to action. In order to do this, there are also two things to remember – easy CTA and minimal risk.

When you want to incite people to action, it doesn’t have to sound like you’re Mel Gibson shouting “Freedom” to rally the Scots to fight against the English. It doesn’t even have to be complicated. In fact, your Call to Action should be simple using words that are familiar to your audience. Do not ask a lot of questions unless it is really necessary. Your call to action should be easy and painless.

For us, our Call to Action is by simply telling our visitors to click the “Enroll in Course” button.

If someone is not yet convinced to take the Call to Action, unleash your secret weapon which is to avoid risk.

It is natural for people to always look for an assurance, something they know they can go back to in case they don’t like the place you’re taking them. You have to make sure that you don’t burn the bridge and there’s nowhere for them to turn or run back into when things don’t work out fine.

One way of doing this is by giving them a guarantee. There are many kinds of guarantees you can create, like a 30-Day Money Back Guarantee. In our case, we give our clients a “Double Guarantee” where we return double what they spend when they do not get results after implementing the product we offer. This guarantee, of course, applies if they can prove that they have really used our products.

Conclusion

Creating a high conversion landing page is not complicated but easy. Just keep AIDA in mind, use it as a guide and you’ll never go wrong.

Now lets talk about anatomy of an effective landing page.

]]>