Landing Page – Web Design Ledger https://webdesignledger.com By Web Designers for Web Designers Thu, 15 Feb 2018 18:54:47 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 https://webdesignledger.com/wp-content/uploads/2015/08/cropped-Web-Design-Ledger-512x512-Pixel-32x32.png Landing Page – Web Design Ledger https://webdesignledger.com 32 32 Best Fashion Apps for Men https://webdesignledger.com/best-fashion-apps-men/ https://webdesignledger.com/best-fashion-apps-men/#respond Thu, 15 Feb 2018 18:54:47 +0000 http://webdesignledger.com/?p=43643

In this glorious/terrifying digital age we live in, there truly is an app for everything. We’re talking ordering pizza, operating a drone, learning a new language, even checking out what it would look like if we were to merge faces with Danny Trejo (pretty unsettling, FYI). There are literally millions of downloadables floating around, a […]

Read More at Best Fashion Apps for Men

]]>

In this glorious/terrifying digital age we live in, there truly is an app for everything. We’re talking ordering pizza, operating a drone, learning a new language, even checking out what it would look like if we were to merge faces with Danny Trejo (pretty unsettling, FYI).

There are literally millions of downloadables floating around, a handful of which claim to be able to help us refine our style, but which ones are actually worth having?

To save you from cluttering up your smartphone finding out, we’ve compiled a rundown of the apps we think no stylish man should be without.

Instagram

Instagram isn’t just a place to share pictures of your lunch or funny snaps of your dog – this platform is filled with fashion and style inspiration for men of all ages and tastes.

Not only have global brands flocked to the social media network since its inception back in 2010, but the very best menswear bloggers, street style photographers and publications like us can also be found amongst its millions of profiles.

Available free on iPhone and Android.

 

Depop

eBay is great and all, but for those who find the process of making a listing a tad arduous, Depop might just be your new best mate.

Best summed up as an Instagram version of the auction site, simply take a few quick snaps of the item you want to sell, fill in some basic details, and your clothes will be listed as images in grid form for all to see and buy at the push of a button.

Available free on iPhone and Android.

 

Read More at Best Fashion Apps for Men

]]>
https://webdesignledger.com/best-fashion-apps-men/feed/ 0
5 Examples Of Awesome And 5 Examples Of Awful Landing Pages https://webdesignledger.com/5-examples-of-awesome-and-5-examples-of-awful-landing-pages/ https://webdesignledger.com/5-examples-of-awesome-and-5-examples-of-awful-landing-pages/#comments Mon, 07 Aug 2017 17:15:14 +0000 http://webdesignledger.com/?p=41607

In an absolute sense, landing pages are any web page where a visitor can arrive at or “land” on as a response to clicking on a search engine optimized result or an online advertisement. Regardless their types (click through or lead generation), the only purpose of the landing pages is to convert the visitors to […]

Read More at 5 Examples Of Awesome And 5 Examples Of Awful Landing Pages

]]>

In an absolute sense, landing pages are any web page where a visitor can arrive at or “land” on as a response to clicking on a search engine optimized result or an online advertisement. Regardless their types (click through or lead generation), the only purpose of the landing pages is to convert the visitors to the next stage of their buyer’s journey.

Although their goal is simple enough in theory, in reality, designing an efficient landing page that really converts, requires some detailed planning, creative designing, and testing.

There are few core elements that a successful landing page should include:

  • Simple design – including here the hero shot (images/video showing context of use)
  • Unique Selling Proposition (USP) – the main headline, a supporting headline, a reinforcement statement and the closing argument
  • The benefits of your offering
  • Proof – including social proof and trust indicators
  • A single conversion goal – your Call-To-Action (CTA) (with or without a form)

Although you have to follow the best practices for designing a successful landing page and you will find many trends related to this subject, there is no “right” way of doing this.

Regardless of what conversion you hope to get, it’s always helpful to check out some examples of great and also of awful landing pages, in order not just to get some inspiration from the best, but also to learn from the mistakes of the worst ones.

Keep in mind, I don’t have access to the analytics for each of these landing pages, so I can’t tell you specifically how well they convert visitors, contacts, leads, and customers. Also, for shorter pages, I’ve shown the entire page; for longer pages, I only displayed above the fold. You may need to click through the page to see some of the points I discuss.

 

The Good Ones

Many marketers and designers know the basics of a great landing page: clever, simple and attractive design, easy navigation, impactful copy and clear call to action. Anyway, an excellent landing page has to have the right mix of all of these elements.

Here are five examples of companies that do it well:

1. H. Bloom

H. Bloom is an online floral arrangement service that allows their customers to subscribe for having custom tailored bouquets delivered at home or at the office or for scheduling a complimentary design consultation. Its subscription landing page is a pleasure to look at, first because of using a high-resolution image and of a lot of white space that allows the visitor’s eyes to breathe.

Also, this landing has all the great conversion elements laid out: the benefits of the service and what customers will receive if they subscribe, the above-the-fold form superimposed over the image and even the bright orange “Submit” button. There are a few more images and information below the fold, but all the key information is listed.

 

2. PeekCalendar

An app for managing your time on the go, the PeekCalendar landing page uses images and two calls to action. Although this may distract the visitors from the purpose of the landing page, both CTAs are simple enough not to conflict each other. As powerful use of images and putting the call to action at the top of the page are effective strategies, we can find both of them here.

The page gives viewers the option to watch a video about the product or download the app. The background images show people using the product. While scrolling down, the page has logos and links to good press about the app, enhancing social proof and also the benefits the users will get.

 

3. Litmus

Email marketing platform Litmus has a great landing page for subscribing to its newsletter. The call to action is the first thing you can see on the above-the-fold white background, along with the snappy headline “Keep up with the latest in email”.

The subhead clearly communicates the benefits of the visitors after taking the action and all you have to do is to enter your email address.

Bellow the one-field form, Litmus has some trust indicators and a colorful list of newsletter archives.

 

4. Airbnb

Airbnb gives us another great example of an excellent landing page. For converting the website’s visitors into hosts, the company offers some enticing and personalized estimated weekly average earnings based on your location. If you want to get an even more customized appraisal, you can enter some additional information about your potential accommodations. Scrolling down, the landing page has listed the benefits the visitor can get if he becomes a host. If you’ve already used the website for a some of your travels and you visit the page knowing how the things work, the clear call-to-action at the top of the page makes it easy to convert on the spot.

 

5. Shopify

Like the other landing pages listed in this post in “The Good Ones” category, Shopify‘s trial landing page keeps things as simple as possible. The user-oriented headline is short and impactful, followed by the sub-headline that includes a trust element, like the number of users, for example. Also, the page relies on simple bullets, not paragraphs, to communicate the trial’s details and benefits. There are only a few fields you need to fill out before you get started. All of this makes it easier for you to get to the point: selling online with their tool.

The Awful Ones

As I mentioned in the beginning of this post, your landing page must be focused on a specific purpose and have a clear call to action. If you try to mix too many different elements into a landing page, it’s no surprise that things can go wrong and you don’t get the results you hope for.

Anything, starting with using too many colors, poor contrast, disengaging copy or just not understanding what your audience needs and wants can destroy your communication efforts and sent the visitors away from your landing page instead of making them go further with your website.

Oh, how does an awful landing page look like? Let’s check the examples listed below:

1. Chase

For a large bank, with sleek advertisements, Chase’s landing page for credit cards looks pretty bad. It is cluttered and some specific pages, as the sign in for existing customers, signing up for the new ones, using the token and learning about different credit card offering have irrelevant calls to action.

In terms of design, the page doesn’t look too bad, but it could look better if they would focus on just one goal. In terms of functionality, multiple calls to action could perform well and be efficient, but only if they don’t conflict each other and confuse the visitors.

 

2. Novum Publishing

Taking into consideration how many information related to design trends for online communication there are out there, Novum Publishing’s landing page is surprisingly outdated. Because the first impression always counts when it comes to your website’s conversion rate, having a fresh and up-to-date design is one of the key elements for a landing page.

Even if there is nothing wrong with the content in the top paragraph, its actual placement is a distraction from the sign-up form listed below the fold. Therefore, switching these two elements would be more beneficial for this landing page.

 

3. Lowes

Home improvement retailer Lowes has an issue of trying to get too much from one single landing page and see what finally gets. Its landing page includes a bevy of calls to action, which could easily overwhelm the visitor.

Instead of putting all on the same wall and see what will stick, it’s more efficient to have more landing pages, each of them being streamlined around a single goal.

 

4. Marketo

I’m sorry to put this on the list of the awful landing pages, but there is real room for improvement here.

First of all, there is too much content here and therefore the page looks cluttered. The bolded text “Download The Definitive Guide To Digital Advertising to learn:” explains what the visitor gets if he downloads the guide, but it should be further up the page. Most viewers will start reading from the top and they might be bored before they reach the bullet point section, especially because it’s below the fold.

Also, the contact form is too intense. Maybe this comes from the desire to get as much information as they can about their audience, but having lots of section to fill is labor intensive and might determine people not finishing the signing up process. Contact forms should only ask for necessary information like an email address and a name.

 

5. Office Furniture

I think this is one of the worst landing pages I’ve ever seen. It’s so much clutter here, that I don’t have any idea where I’m supposed to look. First, this landing page really needs some white space to make the content and images more digestible for the viewers. Second, it needs a clear direction for the visitor.

One positive note – when scrolling down, you’ll find on the right side the customers reviews, which is an encouraging social proof.

Bottom line

Landing pages work or don’t work for many reasons, but they are effective when they speak directly to your audience.

Trying to do too much with a single page is almost always more overwhelming than impactful. Therefore, before designing a landing page, you should set a clear goal and follow the best practices for doing this.

 

Read More at 5 Examples Of Awesome And 5 Examples Of Awful Landing Pages

]]>
https://webdesignledger.com/5-examples-of-awesome-and-5-examples-of-awful-landing-pages/feed/ 2
How to optimise your landing pages for multi-channel marketing https://webdesignledger.com/how-to-optimise-your-landing-pages-for-multi-channel-marketing/ https://webdesignledger.com/how-to-optimise-your-landing-pages-for-multi-channel-marketing/#comments Fri, 26 May 2017 14:35:57 +0000 http://webdesignledger.com/?p=40669

Building a high-converting landing page isn’t easy. Unfortunately, it’s not any easier when you’re designing a landing page for a multi-channel marketing campaign, with multiple devices, platforms, and points of origin to take into account. But despite all of this complexity, many of the same simple values still apply. Here are a few tips to […]

Read More at How to optimise your landing pages for multi-channel marketing

]]>

Building a high-converting landing page isn’t easy.

Unfortunately, it’s not any easier when you’re designing a landing page for a multi-channel marketing campaign, with multiple devices, platforms, and points of origin to take into account.

But despite all of this complexity, many of the same simple values still apply.

Here are a few tips to help you optimize your multi-channel landing pages, following four of the most essential tenets of landing page optimization – a singular purpose, a clear offer, minimal resistance, and a structured journey.

Stick to just one goal

You’re trying to optimise a landing page for prospects from multiple marketing channels. So you need some kind of all-in-one wonder-page, right?

Wrong.

If you’re looking for a page that can cater to every type of casual visitor, then what you’re really thinking of is a home page.

An effective landing page is one that’s designed with a singular purpose.

It doesn’t matter if your prospects are arriving on different devices or have been led there from different platforms. They should all be there for the same reason, and your landing page should be focused on encouraging your visitors to take the one action you need them to take.

So to get your landing page as focused as possible, make sure you:

  • Remove all unnecessary links. Ideally, the only thing left that can be clicked should be the call to action (CTA) that takes them where you want them to go next.
  • Craft a concise and clear headline. Your visitors should immediately know what you’re about, what they’ll get and how they can get it.
  • Keep your landing page simple and uncluttered. Your prospects’ eyes should automatically be drawn to the relevant information and the CTA without any mental effort on their part.

brand-generatorThe graphic design tool Brand-Generator is a great example of a landing page that’s been distilled down to the bare minimum. There’s nowhere to scroll, and minimal text and a small explainer video other than the headline, sub-header and the CTA.

There’s just one extra place to click that doesn’t continue the sales pitch – the Log In button – but it’s clear that they’ve worked hard to make that link as close to invisible as they can.

In other words, they’ve designed their landing page around a singular goal, with an absolute minimum of options or distractions. Whether their visitors are arriving from an email campaign, a Google search or a TV advert, there’s only one thing for them to do: test out a heat-map of their own website.

Match your messages

When it comes to multi-channel marketing, you should always follow the three Cs – choice, consistency and continuity.

Your prospects should be free to choose which channel they use to engage with you, and they should be able to continue their journey with your brand by switching channels without being inconvenienced.

But what’s perhaps most important is that your multi-channel marketing efforts are consistent.

If your adverts and email campaigns are promising “flexible project management software”, but your landing page headline is talking only about “collaboration tools”, your visitors are going to think they’ve arrived at the wrong place. They’ll go straight back to Google to find one of your competitors, instead.

Similarly, if you’re running a pay-per-click (PPC) advert to capture browsers who are searching for “cloud accounting app”, you’d better make sure that both your advert and your landing page include those keywords in their headlines and copy. If not, they’ll bounce – and you’ll have just paid for a wasted click.

Here are a couple of examples to show how much of a difference a simple thing like message matching can make to a prospect’s journey.

A quick search for “landing page builder” brings up a handful of adverts.

First up is Leadpages. Their advert in the search engine has the headline “Build Landing Pages”. A little dry, but so far, so good – the advert nearly matches the exact keyword phrase we were searching for.

landing-page-builder

Following the link, we find a landing page with the headline “The #1 Landing Page Builder”. It’s a perfect match, and we instantly know that we’ve arrived at a place that can give us what we want.

lead-pages

They’ve even added a little internal consistency within their own landing page, with a CTA button that matches the page’s headline: “Start Building Pages”. At that final critical moment of decision, we’ve been reassured of what we’re about to do, and what this landing page is offering us.

At every step of our journey with Leadpages – PPC advert, landing page headline, and CTA – we’ve had a consistent set of messages, confirming what’s been previously promised, using almost the same wording that we used to search for it.

It’s not just a case of avoiding confusion. This consistency makes us feel more confident in the landing page that we’re dealing with – Leadpages has managed to gain our trust.

On the other hand, the same search also offers us an advert for Easymarketer, with the advert headline “Master Email Marketing in 2017”. That might have something to do with what we’re looking for, but it can hardly be called a match.

Following that link, we arrive at a landing page with the headline “Builderall Email/Funnel Builder”.

BuilderallAside from the word “Builder”, this headline bears no resemblance to our search terms, and isn’t even close to the headline on their own Google advert.

It’s not immediately clear that we’ve arrived at a place that can give us what we want. We’re confused, possibly annoyed, and we’re ready to go back to Google.

Make it mobile-friendly

With more than 50% of all online sales coming from mobile devices, you need a landing page that can keep those mobile users happy.

Unfortunately, there’s a whole lot more to designing a mobile-friendly site than just getting the font size right.

Perfecting a mobile-friendly version of a landing page is a complex discipline, but there are a few critical points that any designer should keep in mind.

First, a mobile-friendly landing page needs to be fast.

According to Google, 53% of mobile visits are abandoned if the page takes longer than 3 seconds to load – which means that a slow landing page is a crippling disadvantage to your conversions.

So keep your page lightweight.

Remove unnecessary images or scripts, and reduce the size or resolution of your images as much as you can – anything you can do to reduce the number of megabytes standing between your prospect and your desired outcome.

If you’re not sure where to begin, you can use Google’s handy site-tester to get a mobile-friendly score and a few suggestions for improvement.

Second, a mobile-friendly landing page needs to be thumb-friendly.

We all know what it’s like to struggle with a fiddly link on a mobile device – and if your visitors have to zoom in on every button or link, they’ll quickly back out to find a competitor who’s more accommodating to fat-fingered customers.

According to Google’s recommendations, the average pad size of an adult finger is around 10mm wide – and that means your tap targets need to be at least 7mm in size, with no other targets within 5mm.

Finally, a mobile-friendly landing page needs to be concise.

No matter how much you’re in love with it, that killer twelve-word headline you spent hours crafting might simply be too long for a mobile device.

Similarly, the average mobile user isn’t always browsing in the comfort of their own home. They’re on the move, with little free time and a myriad of distractions around them. So your online sales pitch needs to be brief: cut down the copy and the headline to the absolute minimum.

Control the journey with the fold

You’ve got a fast-loading site that’s been tailored to work well on different devices. Your graphics and links have all been adjusted, and your copy has been trimmed down to cater to the typical short attention span.

But there’s still one essential element of your visitors’ experiences that you haven’t addressed yet – the precise journey they’ll go through as they arrive on your site.

When everything you include in your landing page has been chosen to aid the conversion process, it can be hard to decide what should be relegated to the area below the fold. It’s not an exact science, and there’s still plenty of debate about the importance of the fold. But in general, it’s usually a safe bet if you:

  • Keep everything above the fold simple and inviting. Get your offer across to a new visitor immediately, without any other distractions.
  • Push dense text or complicated information below the fold. The last thing you want to do is overwhelm a prospect within the first few seconds.
  • Put your call-to-action (CTA) at the place where your visitors are most ready to commit. That might be above the fold, below the fold, or both. Don’t let the fold dictate where you put it – let the overall journey of your sales pitch decide the best place.
  • Use directional cues to encourage scrolling. It could be an animated arrow pointing down, or even a simple “find out more”.

WorkflowMax‘s landing page, for example, hasn’t followed the stereotypical approach to the fold.

workflow1They know that project management software isn’t something you just sign up for within the first few seconds.

Their prospects need to learn a little more about how the software works, or even to see it in action to get a feel for it. So to the right of the headline and imagery – where you might normally expect a sign-up form or a CTA – they’ve included a huge and highly clickable link to watch a short video.

workflow2The sign-up form and CTA are actually found immediately below the fold, represented by the horizontal red line below.

The natural progression is to arrive on the landing page and watch an introductory video showcasing the software’s features, and then be presented with a sign-up form after you’ve already been warmed up to the product.

And just in case there was any confusion about what to do after the video, the border of the main background image above the fold has been shaped into a downward-pointing arrow – an inoffensive and unobtrusive cue to move further down the page.

Of course, in a multi-channel marketing effort, you can’t rely on presenting the same above-the-fold experience to every user without a little extra configuration.

Your prospects will be arriving from all sorts of devices, and all sorts of screen resolutions. So make sure you test out how your landing page looks on different screens with tools like the Responsive Design Checker and the Fold Tester.

Putting it all into practice

Sadly, there’s no guaranteed formula for improving conversions on any landing page. The variables are too numerous, and human behaviour is far too erratic – and things only get more complicated when you’re dealing with prospects from multiple marketing channels.

With that said, you’d do well to keep the following rules of thumb in mind:

  • Pick a single goal and stick to it. It could be gathering email addresses, getting visitors on board with a free trial, or closing a sale. Stay focused and keep it simple – don’t let too many options distract your visitors away from the purpose of your landing page.
  • Always be clear and consistent. Make sure your headlines, offers, and CTAs all match up to the messages you use in your other platforms and channels. Confirm and reassure your prospects, and you’ll build trust and confidence in your business.
  • Make it easy for every user and every device. No matter where your potential customers are or how they’re engaging with you, you need to make it quick and painless to move from interest to action.
  • Plan out every step of their journey. Your job is to make your visitors feel comfortable and informed enough to commit to your business – not to overwhelm them at the start or blast them with a demanding CTA as soon as they arrive.

It’ll be a long journey to fully optimise a landing page, and you’ll need plenty of testing along the way before you arrive at the best combination of tweaks.

But with enough time and diligence, you’ll start to see the results of a multi-channel marketing campaign that really converts – and a landing page that’s doing most of the work for you.

 

About the Author:
Danny Molt has been involved in design for almost 25 years working with some of the top uk design and marketing agencies. Having launched several companies online and offline, he is currently head of digital marketing strategies for Print-Print Limited
You can contact him at on Twitter @DanMolt

Read More at How to optimise your landing pages for multi-channel marketing

]]>
https://webdesignledger.com/how-to-optimise-your-landing-pages-for-multi-channel-marketing/feed/ 1
The 19 Best-Designed App Landing Pages https://webdesignledger.com/19-best-designed-app-landing-pages/ https://webdesignledger.com/19-best-designed-app-landing-pages/#comments Mon, 02 Jan 2017 17:15:28 +0000 http://webdesignledger.com/?p=39269

Almost all mobile app developers have a website that describes what their app can do. Some of these websites are beautiful and unique. While some websites use photography as a background, others use typography, color gradients or even video backgrounds to leave their visitors speechless. Do you need some inspiration for your landing pages? I’ve collected 19 of the […]

Read More at The 19 Best-Designed App Landing Pages

]]>

Almost all mobile app developers have a website that describes what their app can do. Some of these websites are beautiful and unique. While some websites use photography as a background, others use typography, color gradients or even video backgrounds to leave their visitors speechless.

Do you need some inspiration for your landing pages? I’ve collected 19 of the best-designed app landing pages that keep readers craving more.

 

01. Saurochat

Saurochat kept their design simple yet complex through their color-changing gradient and the rounded shape of the overlay. We also like the font that they chose and the word placement.

 

02. Primer

Primer not only surprised us with their color-changing gradient, but also with their inter-changing objects in the background. We also think that the shadow positioned behind the phone mock-up was very well placed and quite genius, giving it that 3D look.

 

03. Square

Square‘s page has clearly organized headlines, which kind of read as answers to frequently asked questions. There is plenty of white space (giving it a clean, simple, and modern appeal), succinct text, and matching, relevant images.

 

04. Coin

Coin displays its product’s positioning and differentiation through a visual journey of the Coin card. Just check out that fun animation — what a great way to represent how a product works.

 

05. Moovrs

Moovrs show us their predominant color through the wallpaper color overlay and in the background of the phone mock-up. We also like that the image is a cut-off rectangle because that gives it it’s unique style.

 

06. Facebook Messenger

Messenger includes a laptop view of the app in the background, making it clear that Messenger is a cross-platform app that can be used anywhere.

 

07. Vee for Video

Vee for Video shows off with their beautiful and colorful geometric background. They have rounded icons and some color overlay photos, but for the most part, they kept the geometric aspect.

 

08.Seattle Cider

Seattle Cider has a really cool, interactive display that tells the story of how cider is made from start to finish, while users scroll down. It’s a surprising and delightful user experience that goes above and beyond the typical product page. It doesn’t just display the products, it shows where they came from, and how.

 

09.NeuBible

NeuBible has all of their bases covered: a striking hero shot, clear messaging, and a prominent download button. Combined with a gorgeously designed app, these three features may help NeuBible convert the masses.

 

10.Orangina

Orangina has animated images and bold colors that fit in perfectly with Orangina‘s bold, fun personality.

 

11.Qapital

Qapital is notable in the fact that it takes a visual approach to a market that is usually appealed by practical messaging and conservative imagery. Large images dominate the splash page to reflect the app’s interface. Qapital does an excellent job of making finance feel exciting: a very tall task.

 

12.Mango

Mango’s website exudes friendly, approachable, and helpful brand personality. The video couldn’t be more delightful. I mean, a guitar-playing mango in a top hat? Yes, please.

 

13.Rizon

Rizon displays a clean design and clear messaging. In a nice touch, Rizon’s logo mirrors the app’s main screen, which lets the user know what hour the best photos are taken (“The Golden Hour”). Visitors are prompted to sign up through a centrally located button and a straightforward preview of the application.

 

14.FiftyThree

FiftyThree surprises us with their simplistic design. It is so smooth and easy to understand just exactly what they do. We also like the clear fonts that were used.

 

15.Bellroy

Bellroy presents an interactive section that shows how the skinny wallet will fill up in comparison to a different wallet. As users move a slider back and forth along a line, both of the wallets fill up with cards and cash, visually displaying the very problem Bellroy’s skinny wallet solves.

 

16.Mylo

Mylo has done the best job this year, implementing an auto-play feature along with a narrator (defaulted to mute), which clearly details the app’s value.

 

17.TriplAgent

TriplAgent comes with a color gradient background. We like the design of the city guides. They are simple, striaght and to the point, and with a clean font, we give a thumbs up to them.

 

18.Oreo

Oreo also took a unique design to this page. Even though the cookies themselves are monochrome, the page is wonderfully colorful. From the videos, to the backgrounds, and to the graphics, we love all of their color choices.

 

19.Panik

Panik staggers us with a dark background and an iPhone that displays how their app works. They also put their included features. The logo looks pretty nice with a on button instead of just the letter I.

 

And that concludes our 19 favorite app landing pages. Did we miss something? Leave us a comment with your favorite landing pages below.

Read More at The 19 Best-Designed App Landing Pages

]]>
https://webdesignledger.com/19-best-designed-app-landing-pages/feed/ 2
How to Build a Landing Page That Converts https://webdesignledger.com/build-landing-page-converts/ https://webdesignledger.com/build-landing-page-converts/#respond Wed, 28 Dec 2016 16:00:33 +0000 http://webdesignledger.com/?p=39185

Are you looking for the best and proven solution to build a professional web presence for your business or personal project? Ask any marketing specialist and he will tell you that a well-built landing page is exactly what you need to make people talk about you. But how to build a landing page that will […]

Read More at How to Build a Landing Page That Converts

]]>

Are you looking for the best and proven solution to build a professional web presence for your business or personal project? Ask any marketing specialist and he will tell you that a well-built landing page is exactly what you need to make people talk about you. But how to build a landing page that will convert accidental visitors into loyal customers? How to generate new leads for your business? How to design a powerful landing page? Let’s cover all of these aspects in one blog post.

A landing page is a place where the online story of your business begins. A landing page is the first spot that the users come across when looking for some general information about your business. This is the simplest and the most effective way of engaging the audience and inviting them for a productive dialogue.

What are landing pages all about?

  • A landing page represents one message that you want to deliver to your audience. It promotes a specific product/service/action and demonstrates all benefits of using it.
  • The design of the landing page should be clear and simple. It should stick to one point and provide for a simple comprehension of the content. The main objective is to captivate the users’ attention and arouse their desire to learn better about you and try your offers.
  • A landing page is intended to make viewers click.
  • A landing page is a single page made up of several clearly defined blocks that target to represent one message in a captivating, effective way.

Web Developer Landing Page Template
Depending on the way a landing page is designed, we can judge the potential success that a business standing behind it will attain. The more user-friendly a landing page is designed, the higher chances of triggering the users’ curiosity you have. It’s not a rocket science to build a professional landing page. Let’s consider the most effective tips on how to get started right and appeal to a wider audience.

Tip #1 Keep the Page Clean, Well Structured

The primary goal of a landing page is to make a clear presentation of a business it represents. In order to make it easier for your visitors to convert, it should have a simple and intuitive design. So that even first-time visitors will find it easy to come across the necessary piece of content effortlessly.

What makes the design of a landing page effective? These are the clever use of colors and bold, quality images that will look razor sharp on any screen. Call-to-action buttons and subscription forms (it depends on what specific goal your landing page pursues) should be put front and central. The key converting elements should look contrasting within the interface. CTAs should be painted in bright hues. Headlines and subheadings should look outstanding as a user scans your content.

A cool example of a landing page design built in clean style is Web Developer Landing Page Template. Suited for launching landing pages representing web design studios and freelancers, it features a well-structured, quick-to-scan design. CTAs and icons look contrasting to the background. The theme also makes clever use of whitespace, which adds a balanced touch to the layout.

 

Web Developer Landing Page Template
Tip #2 Make a Powerful Headline

A landing page should clearly communicate its objective. A headline is probably the first thing that your visitors will come across when reaching the page. That’s why a headline that makes a clear statement will help them better understand your objective. In addition to pushing the main value proposition in the headline, you can explain different aspects of certain software or offer in subheadings. When thinking about the main texts of the landing page, keep in mind that you are limited to 8 seconds only to convince the audience that your offer is truly worthy of their attention.

Let’s take a look at the following example. Car Repair Responsive Landing Page Template represents services provided by an auto repair company. It makes use of a bold headline and a set of subheadings that represent different aspects of the business. In the header of the page, there is an integrated appointment manager. It welcomes the users to make a request in a simple and intuitive manner.

 

Car Repair Responsive Landing Page Template
Tip #3 Make It Trustworthy

A landing page needs to have a set of trust signals, which will make your business look reliable in the eyes of your visitors. What elements are we talking about? These are blocks with user testimonials that are easy-to-locate on the landing page. The word of mouth is known as one of the most effective marketing “assistants”. People tend to trust fellow-shoppers far better than a well-written marketing text by the top specialists of your company. Other trust signals that you can opt for are star ratings, “likes” and “shares” that people leave on your site or share with their social media followers, respectively.

Consulting Landing Page Template features a clearly visually defined block with user testimonials, which accompanies a block with team members and a list of company benefits. The testimonials are organized into a carousel slider, letting your clients look through the feedback left by several users at a time.

Consulting Landing Page Template
Tip #4 Keep Forms Short & Clear

As a person reaches your landing page, he/she can be asked to fill in a certain form, which will be of use to you for certain marketing purposes. It’s clear that you need to collect as much data about your clients as possible. Still, it is of tremendous importance to keep those forms as short as possible. The more fields you ask them to fill in, the less likely they will get to the last question and complete the necessary conversion.

The following landing page includes a simple inquiry form made of three lines only, which increases the chances of attaining the desired action from your visitors.
Real Estate Responsive Landing Page Template

 

Tip #5 Make It Mobile-friendly

These days any web page should adjust to a variety of screen resolutions on the fly. People have shifted from desktops to handheld devices, so the way your landing page looks and feels on a touchscreen plays a predefining role. A mobile-friendly landing page will double your conversions and keep the users more engaged.
Thanks to the availability of a huge variety of pre-designed landing pages, there is no need to create a separate version of your site for mobile phones and tablets. Travel Agency Landing Page Template is one of such pre-designed responsive solutions. The theme runs on Bootstrap framework, which will scale all data provided on the page up and down to any screen size possible.

 

Travel Agency Landing Page Template
Tip #6 Know Your Audience

What kind of users do you target? Is that male or female audience? Are those adults or youngsters? The design of your landing page is heavily dependent on the way you answer these questions. Different people react to the same design elements differently. One of the aspects that we want to highlight is the color scheme of your landing page. Women are known to enjoy designs built in warm colors far better than the ones built in cool hues. Men, in their turn, enjoy more neutral, clear and concise web design style. That is why a landing page built in cool hues will be a perfect match for them.

As the name implies, Maria’s Bakery MotoCMS 3 Landing Builder targets the users who have a sweet tooth, i.e. women and kids. More often than not ladies make sweets and bake something tasty at home. So, building such a landing page in warm hues is a clever move.
Maria's Bakery MotoCMS 3 Landing Builder

Ready-made Landing Page Designs for a Quick Start

How lucky we are to have an abundance of pre-designed landing page templates to choose from! Intended to be used by people of different backgrounds and of all skill levels, they allow you to get started with a landing page of your business or personal project in the shortest period of time. As a rule, landing page templates are designed to suit a particular purpose. These are fully editable and can be adjusted to match your personal requirements to the fullest.

For this blog post, we have hand-picked 5 landing page templates, which are developed as per the latest web requirements and can go live out-of-the-box.

Webinar MotoCMS 3 Landing Builder

The theme is best suited for presenting online education projects to the web community. Featuring a sleek and stylish design, it looks very trendy. The header includes a large hero image with bold CTAs atop of it. Neat fonts enhance the content readability. Texts make a perfect balance with images, making the data easier to browse. The theme is integrated with a drag-and-drop content editor, making it possible even for non-tech savvy users build versatile pages effortlessly.

 

Webinar MotoCMS 3 Landing Builder
Traffic School Landing Page Template

Here is one more pre-designed landing page template best suited for educational purposes. It features a clean and minimalist design. The layout makes clever use of whitespace, bringing the content to the foreground. The theme’s header is pre-loaded with a simple booking form, which welcomes the users to get the first lesson for free. Counters provide for clearer content presentation.

 

Traffic School Landing Page Template
Business Responsive Landing Page Template

This business landing page will appeal to the male audience the most. The dark-colored design looks professional and reliable. Clear and concise style brings emphasis to the highlighted data/benefits of a business that the page represents. With the purpose to bring the users’ eye to several featured messages, the header is pre-loaded with a responsive carousel slider.

 

Business Responsive Landing Page Template
Home Repairs Responsive Landing Page Template

The theme is designed in flat style. Bold hues make the design an eye-catcher. Designed with attention to details, the theme provides online visitors with a seamless and intuitive browsing experience. A simple booking form is easy to reach in the header. A list of services is organized into a grid-based list and enhanced with neat, recognizable icons. A separate block with user testimonials is intended to grow the users’ trust. Contact details are accompanied by a built-in Google map widget, letting the online audience reach you with ease.

 

Home Repairs Responsive Landing Page Template
Job Seeker Landing Page Template

The theme is intended to become a rock-solid starting point of online CVs. Job portals can also make use of it for an impressive and user-friendly presentation of their services to the web community. A couple of CTAs are put front and central in the theme’s header. Success stories are intended to grow people’s confidence in your business. A simple contact form and contact details make it possible to reach a person/company standing behind the landing page straight away.
Job Seeker Landing Page Template
*** If you need a wider selection of professionally built, responsive landing page templates, please follow this link.
If you want to customize one of those templates, it’s really easy to do, but if you don’t have enough time, you’re free to apply to TemplateMonster’s Service Center.

Here we go. We hope that the aforementioned tips will come in handy to you when building or redesigning a landing page. The conversion-oriented theme that we have showcased today will grow your business popularity in the eyes of the web community and grow people’s trust in what you are doing. Go check this out by yourself.

Read More at How to Build a Landing Page That Converts

]]>
https://webdesignledger.com/build-landing-page-converts/feed/ 0
Boost eCommerce Sales Using These 5 Research-Backed Principles https://webdesignledger.com/boost-ecommerce-sales-using-these-5-research-backed-principles/ https://webdesignledger.com/boost-ecommerce-sales-using-these-5-research-backed-principles/#respond Fri, 11 Nov 2016 15:16:51 +0000 http://webdesignledger.com/?p=38470

Did you know that 99 percent of people who visit your eCommerce store won’t buy on their first visit and that many won’t return again after that? Or did you know that for every $92 spent on attracting visitors, the average online business spends just $1 on converting them? These statistics and people’s ignorance on how […]

Read More at Boost eCommerce Sales Using These 5 Research-Backed Principles

]]>

Did you know that 99 percent of people who visit your eCommerce store won’t buy on their first visit and that many won’t return again after that? Or did you know that for every $92 spent on attracting visitors, the average online business spends just $1 on converting them? These statistics and people’s ignorance on how to boost conversions, explain why many eCommerce businesses struggle.

You don’t need specialized knowledge to boost sales on your eCommerce store. Likewise, you don’t need to fork out money to pay conversion experts. Instead, these simple — really, super simple — tips that are grounded in research, will boost sales on your eCommerce store significantly.

Attune Your Usage of Color to Your Demographics

From a design perspective, we tend to underestimate the role that color plays on conversion rates. For many people, the choice of what color to use in their products and design is left to personal preference and desire, when in reality using the right color combinations can boost sales.

According to a study that analyzed 100 brands and studied 450 non-color blind participants, it has been proven that color can influence the likability and familiarity of people to feel toward a brand. Another study that observed the role that color played in marketing and decision-making found that people make up their minds within 90 seconds of interacting with people or products, and that up to 90 percent of their assessment is influenced by colors.

What’s more important to note, however, is that the colors that work best for men might not be welcomed by women — so it is important to attune your colors to your demographics. Colors can also influence how your brand is perceived, and as a result boost sales — a good example of a company that gets color right is Cadbury, who successfully uses the purple color to communicate luxury. You can use the color blue to communicate trust and integrity; Facebook and Twitter are major examples of companies that use this color.

Research has shown that both male and female are more likely to prefer the color blue, but while women largely favor the color purple, it won’t work with an audience of men. The graph below shows color preference for both men and women.

male-and-female-color-preference

Image credit: Helpscout

Anchor Your Offer for Easy Comparison

Often times you try to shop on Amazon and see something like this:

chromebook-anchoring

To the untrained eye, there’s nothing special about the above listing. However, take a look at the “List Price” and the “Price” and you’ll notice a difference — including a “list price” creates the impression that you’re getting a bargain, because the main price is automatically anchored to it. What’s especially surprising is that the very same laptop costs $179.99 on Target.com (Yes, it’s cheaper!), yet research points to the fact that the Amazon listing is likely to result in more sales. Why? Anchoring!

Often times, when we want to make a decision, we try to look for a reference point — an anchor — that we can use to judge our decision. In this case, by showing people a list price of “$199.99” and an actual price of “$184.86,” people feel that they are getting a discount and rush to buy — in reality, however, the product is much cheaper elsewhere. By introducing the “list price” option, Amazon is making it the “anchor” instead of having people anchor the product based on the price of their competitors.

Anchoring is a very powerful technique, and if used correctly, it can powerfully boost your ecommerce sales.

Use Security and Trust Seals

Often, the decision of many people not to buy from you has nothing to do with the quality of your products or the persuasiveness of your copy. It’s a trust issue, and this often poses a serious problem compared to others.

If people don’t trust you, they will never buy from you. There’s nothing you can do about that.

According to a study conducted by Econsultancy/Toluna, 48 percent of people are wary of performing online transactions on sites without a trust seal. This makes sense, especially when you consider how often major websites are hacked these days.

If you have no trust seal on your website, add one and you’ll notice a dramatic increase in sales.

Besides using a trust seal, you can also make people trust you more by using testimonials, featuring customer reviews (both positive and negative), having an about page and having your phone number displayed prominently on your website.

Start a Blog

I’m actively involved in the Website Setup project, where we teach people how to set up a blog (for good reasons!), so I can’t resist including this. And this is for two key reasons:

  1. 99 percent of people won’t buy on their first visit to your site. Blogging serves as a means to educate, inform and keep your products in the mind of people who choose not to buy immediately.
  2. Businesses that blog generate 67 percent more leads than businesses that do not blog. They also experience better search engine rankings, better bonding with users, and are able to more easily inform users about the benefit of their products — all these contribute to more sales.

If you don’t have a blog for your ecommerce store yet, starting one will most certainly boost sales. However, your approach needs to be a bit different from the traditional “blogging” approach. Here are some tips:

  • Capitalize on product reviews: due to a blog’s ability to easily rank in the search engines, creating product reviews and publishing them on your blog will ensure better rankings for your product reviews, eventually generating more sales.
  • Do comparisons: Do you have an eCommerce store that sells computers? If yes, a simple comparison of “Apple vs Mac computers” on your eCommerce blog can be a great sales driver. People will tend to refer to these comparisons, and it will also rank in search engines. By linking to the products you compare in your store, you’re more likely to experience a sales boost.
  • Publish more content: Statistics show that businesses that publish 16 or more blog posts monthly get the most results from blogging — in fact, they get 3.5 times more traffic, and as a result, a lot more sales than businesses that publish less than four blog posts monthly. As an e-commerce store, the volume of content published could be one of your biggest assets.

Limit Choices

As an eCommerce store with hundreds or even thousands of products, it sounds like the best thing to do is showcase relevant products to people at every stage of the buying process. However, research shows that this isn’t effective. In a study conducted at an upscale supermarket, psychologists Sheena Iyengar and Mark Lepper found that limiting choices displayed to people from 24 varieties of items to just six varieties was able to boost sales by up to 10 times.

If you have a store with a lot of different variety of products, where it is virtually impossible to limit choices, you can still capitalize on the fact that limited choices boost sales by doing the following:

  • Feature your most popular products: What are the five most purchased product in a particular category on your eCommerce store? Showcase these products in a special section and make it easy for users to find them; instead of being confused with possibly thousands of products, they easily see what resonates with others.
  • Feature products with the most reviews: By featuring products with the most reviews, you let users decide. Even if there are a thousand products in a certain category, reviews show people which ones people like best. This allows you to use a combo of social proof and limited choices (in terms of what other people think is best) to boost sales.

Showcase your top picks: Sometimes, maybe you feel certain products will do better than others due to some other information you have. Showcase these products in a special section for every category; include no more than three to six products as top picks.

Conclusion

There are many ways to boost eCommerce sales – whether it is through the right use of color to communicate a message about your brand or by using elements of trust to get more people to buy from you. Hopefully, the above tips help you boost eCommerce sales.

Read More at Boost eCommerce Sales Using These 5 Research-Backed Principles

]]>
https://webdesignledger.com/boost-ecommerce-sales-using-these-5-research-backed-principles/feed/ 0
How to Create Responsive Guides in Adobe XD https://webdesignledger.com/create-responsive-guides-adobe-xd/ https://webdesignledger.com/create-responsive-guides-adobe-xd/#comments Mon, 23 May 2016 22:59:00 +0000 http://webdesignledger.com/?p=35434

In this tutorial, we’re going to learn how to create guides for responsive design, in Adobe Experience Design CC (Adobe XD). The Steps (1-12) 1. Create a new document 1920 x 1080 from the Start Screen. 2. Create a shape that is 100% height, and 1170 pixels in width. This shape is going to represent […]

Read More at How to Create Responsive Guides in Adobe XD

]]>

In this tutorial, we’re going to learn how to create guides for responsive design, in Adobe Experience Design CC (Adobe XD).

The Steps (1-12)

1. Create a new document 1920 x 1080 from the Start Screen.

2. Create a shape that is 100% height, and 1170 pixels in width. This shape is going to represent the maximum site width that we will be designing for, and should be centrally aligned to the artboard. Give this rectangle a grey colour for now. Go to Object > Lock to lock this layer in position, so that we don’t select it by mistake when working through the steps to follow.

3. Create a thin vertical rectangle, that is 100% height and 15 pixels in width. This is going to form our site margin, and should be positioned on the inside left edge of the main rectangle. Duplicate this shape, and also position a copy on the inside right edge of the main rectangle. Give these shapes a slightly different shade of grey, so that we can easily distinguish the different shapes/elements, whilst working on the layout.

create-responsive-guides-adobe-xd-1

4. Create another vertical rectangle that is 100% height, and 67.5 pixels in width (70 pixels if you design your grid without the left and right margins). Colour this new shape black, and position this alongside the shape created in Step 3.

5. Create another vertical rectangle that is a different shade of grey to the two shades already being used by the other shapes, and position this alongside the shape created in Step 4. The three rectangle shapes should all be lined up alongside each other, with no gaps in between.

6. Using Shift to select these three shapes (excluding the main rectangle). Next, click on the Repeat Grid button in the Property Inspector on the right-hand side.

create-responsive-guides-adobe-xd-2

7. Your shapes should now have a set of green guides around them, allowing you to drag the slider on the right, until it touches the edge of the right margin that we created in Step 3.

8. When using the Repeat Grid Tool, Adobe XD automatically creates a gutter (spacing) in between the different objects that are being repeated. By selecting and clicking inside this space (the gap in between objects) you will see some pink guides appear, that allow you to adjust the gutter spacing. For this tutorial, reduce the spacing here to zero, so that there are no gaps between our shapes.

9. Once the gaps have been reduced, select the green right slider again, and drag this out to the right, until it lines up with our right-hand margin as before.

create-responsive-guides-adobe-xd-3

10. Double-click the Repeat Grid group, select the first 30 pixel shape that we created, and adjust the colour to white. You will see that all of the other clones of this shape also change in colour.

11. Use your mouse to drag over all of the shapes that we’ve created (the main rectangle should still be locked), and in the Appearance menu on the right-hand side, adjust the opacity to between 2-5%. Lock these layers, as we did with the main rectangle in Step 2. Keeping the opacity of the responsive grid less than 5%, allows it to still be visible enough to work on, but doesn’t interfere too much with any design elements that are being created, and you can even set the guides to 0% opacity to hide them completely.

12. Start designing an awesome and responsive site!

create-responsive-guides-adobe-xd-4


Download Adobe Experience Design CC (Adobe XD).

Read More at How to Create Responsive Guides in Adobe XD

]]>
https://webdesignledger.com/create-responsive-guides-adobe-xd/feed/ 4