Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Best Practices for Great Landing Page Design @allisonhaag

49 267 vues

Publié le

Read the full post: http://bit.ly/1O3hZ2Z

One of the easiest ways to increase conversions is with a great landing page. Discover the best practices in landing page design in this detailed guide and SlideShare.

Publié dans : Design
  • What are the best natural remedies for hair loss? ▲▲▲ https://bit.ly/2N8ZrEt
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Protect your brain from memory loss with brain pill. find out more... ➤➤ https://bit.ly/2GEWG9T
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • How I Cured My Acne? Ex Sufferer reveals secret system For Lasting Acne Free Skin  https://tinyurl.com/ybbtmvh8
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Holistic clear skin Secrets, Eliminate blemishes in weeks acne cure e-book reveals all ♥♥♥ http://scamcb.com/buk028959/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Odd carb trick burns up to 1LB per DAY.. How?? .. ◆◆◆ http://t.cn/AiYhcpeJ
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Best Practices for Great Landing Page Design @allisonhaag

  1. How to Design a Killer Landing Page A Detailed Guide @teachablehq @allisonhaag LET’S GET STARTED
  2. Hi, I’m Allison Content Marketer & Designer @teachablehq @allisonhaag We make it easy for over 5,000 people to teach their own online courses.
  3. This page looks awesome, right?
  4. It converts at 20-30% (depending on the source)
  5. Do you want to build your own similar looking landing page and create your own online course? GET STARTED NOW FOR FREE
  6. Curious how we designed our landing pages?!
  7. I will explain! Curious how we designed our landing pages?!
  8. In this presentation, you’re going to learn the best practices on how to create landing pages that convert, look awesome and support your brand
  9. Before we get into it, let’s define a landing page
  10. “as a single page with a specific target: getting visitors to complete an action.” Wix.com defines a landing page AKA CONVERSION
  11. Don’t confuse it with a homepage…
  12. A homepage should appeal to multiple audiences. It’s the place where anyone can see your product
  13. As a website with one target audience and goal We define a landing page AKA CONVERSION
  14. I think you’re getting the idea… Your goal is to get your target audience to sign up for your offer
  15. Sign up for your newsletter Subscribe to your blog Download an ebook Attend a live webinar Enroll in a course LIKE… I think you’re getting the idea… Your goal is to get your target audience to sign up for your offer
  16. CONVERSION RATE People who completed your goal People who came to your page MATH! =
  17. What is your offer? Before you start, have an answer to these 4 questions:
  18. What is your offer? What are the benefits? Before you start, have an answer to these 4 questions:
  19. What is your offer? Why does your audience need your offer now? What are the benefits? Before you start, have an answer to these 4 questions:
  20. Before you start, have an answer to these 4 questions: What is your offer? How do they get your offer? Why does your audience need your offer now? What are the benefits?
  21. The answers to the questions create your unique value proposition
  22. They tell your reader… what they get from you when signing up
  23. They tell your reader… why they can’t live without your offer what they get from you when signing up
  24. They tell your reader… all while creating a sense of urgency in an easy to convert landing page why they can’t live without your offer what they get from you when signing up
  25. Sounds complicated, but it’s not! Image source: Flickr
  26. Here are 46 tips to make building your landing page EASY!
  27. Teachable 1 TIP Products to build a landing page Instapage Unbounce (instapage.com) (unbounce.com) (teachable.com)
  28. Copy, images, layout: everything supports your conversion goal Headline Subhead Benefits Social Proof Color Typography 2 TIP ABC
  29. A great aesthetic supports your brand goals and can lead to future conversions
  30. COPY Write copy in the voice of your audience 3 TIP
  31. Copy should be about the visitor COPY 4 TIP
  32. What are they getting from your product? COPY How are you solving their painful problem?
  33. Keep copy: Clear Concise Engaging Persuasive COPY 5 TIP
  34. Keep copy: Clear Concise Engaging Persuasive COPY 5 TIP Don’t confuse your audience about what they’re getting from your offer
  35. To captivate your audience, use D Bnonn Tennant’s hypnotic words: COPY 6 TIP YOU BECAUSE IMAGINE
  36. COPY For more writing advice, Teachable’s Content Marketer & Writer, Ashley Hockney, wrote a great post about her 10 Tips for More Powerful Copywriting READ THE POST NOW
  37. Your headline needs to say what your landing page is offering COPY: HEADLINE 7 TIP
  38. Your headline needs to say what your landing page is offering COPY: HEADLINE 7 TIP
  39. Your subhead is a more detailed explanation of your headline COPY: SUBHEAD 8 TIP
  40. COPY: SUBHEAD 8 TIP Your subhead is a more detailed explanation of your headline
  41. In the benefits section, address how you’re solving your audience’s pain points COPY: BENEFITS 9 TIP
  42. In the benefits section, address how you’re solving your audience’s pain points COPY: BENEFITS 9 TIP
  43. In the benefits section, address how you’re solving your audience’s pain points COPY: BENEFITS 9 TIP Unsure of the pain points? Check out Teachable Co- Founder, Conrad Wadowski’s post explaining how to find them READ THE POST NOW
  44. Use a list to showcase how you’re solving the pain points COPY: BENEFITS 10 TIP
  45. Use a list to showcase how you’re solving the pain points COPY: BENEFITS 10 TIP
  46. Focus solely on the benefits of your product COPY: BENEFITS 11 TIP
  47. You need to first sell your audience first on why they need your product (aka how it solves their problem) COPY: BENEFITS
  48. Including all of the features of your product can confuse or complicate their purchasing decision, which can cause them to not buy at all COPY: BENEFITS
  49. If you’ve enjoyed these tips so far, check out my detailed blog post: Best Practices to Create Great Landing Page Design READ THE POST NOW
  50. Include testimonials… COPY: SOCIAL PROOF 12 TIP
  51. COPY: SOCIAL PROOF …data…
  52. COPY: SOCIAL PROOF …social proof
  53. The more people see that others are interested in/ used your product, the more likely they will convert COPY: SOCIAL PROOF
  54. Have a clear call-to-action button CALL-TO-ACTION 13 TIP
  55. CALL-TO-ACTION
  56. Michael Aagaard points out that there are two main elements to a CTA CALL-TO-ACTION
  57. Michael Aagaard points out that there are two main elements to a CTA The visual cue to the audience of where to click CALL-TO-ACTION DESIGN
  58. Michael Aagaard points out that there are two main elements to a CTA The visual cue to the audience of where to click CALL-TO-ACTION Answers the question of why click the button DESIGN COPY
  59. Enclose your CTA in a rounded shape CTA: DESIGN 14 TIP
  60. Enclose your CTA in a rounded shape AKA MAKE IT A BUTTON! CTA: DESIGN 14 TIP
  61. Give your CTA 3D elements CTA: DESIGN 15 TIP
  62. Like changing color/shade when hovering over the button CTA: DESIGN
  63. Contrast matters! CTA: DESIGN 16 TIP
  64. Your CTA needs to stand out from everything else on the page CTA: DESIGN
  65. Size is important CTA: DESIGN 17 TIP
  66. Make the button larger than the other elements CTA: DESIGN
  67. CTA: DESIGN 18 TIP Include extra white space around the button to make it stand out even more
  68. Product complexity determines CTA placement above or below the fold CTA: DESIGN 19 TIP
  69. According to Kissmetrics… CTA: DESIGN The more complex the offer, place below the fold Product/offer complexity CTAplacement Complex Simple BottomofpageTopofpage
  70. According to Kissmetrics… CTA: DESIGN If there is limited information needed to make a decision, above the fold The more complex the offer, place below the fold Product/offer complexity CTAplacement Complex Simple BottomofpageTopofpage
  71. Be descriptive when writing CTA copy CTA: COPY 20 TIP
  72. Tell the reader exactly what will happen when they click the CTA button CTA: COPY
  73. CTA: COPY 21 TIP SUBMIT SEND AVOID
  74. CTA: COPY TRY SIGN UP LEARN MORE ENROLL NOW REDEEM OFFER DOWNLOAD NOW REGISTER FOR WEBINAR
  75. Include a thank you page THANK YOU PAGE 22 TIP
  76. It’s a bonus page! Use it to… Introduce other products, a blog, an online course THANK YOU PAGE Give a bonus piece of content (they’ll love you for it) Attend a live training webinar Follow your social networks Ask them to sign up for your newsletter +
  77. Have a clear visual hierarchy to make your value proposition obvious DESIGN 23 TIP
  78. DESIGN CTA SUBHEAD HEADER SOCIAL PROOF SUPPORTING IMAGE
  79. DESIGN Like this landing page design? Sign up on Teachable to create your own school for free! GET STARTED NOW
  80. Use a simple, clean page design to make your value proposition obvious DESIGN 24 TIP
  81. Use white space to… DESIGN 25 TIP …allow the viewer’s eyes to move easily around the page
  82. Use white space to… DESIGN 25 TIP …allow the viewer’s eyes to move easily around the page …emphasize what’s important
  83. Limit off-page navigation links They direct your viewer off your page and away from your main CTA DESIGN 26 TIP
  84. Consider psychological color implications DESIGN: COLOR 27 TIP Icon: Flaticon
  85. Youthful Optimistic Energy Urgency Courage Warmth Trust Security Aggressive Excitement/Fun Feminine Romantic Tranquility Sexuality Soothing Calming DESIGN: COLOR What characteristics do you want your brand to exude? Creative Friendly Luxury Truth Loyalty Coolness Wealth Health Balance Relaxing Easy-going Environment
  86. DESIGN: COLOR Black makes Squarespace look sleek and high-end
  87. DESIGN: COLOR Yellow portrays Geico as friendly and optimistic
  88. Tailor color choices to your audience’s preferences DESIGN: COLOR 28 TIP
  89. DESIGN: COLOR For a female-focused audience… (Stick to softer tints)
  90. DESIGN: COLOR For a male-focused audience… (Go for bolder shades)
  91. Research color palettes for inspiration DESIGN: COLOR 29 TIP Icon: Flaticon
  92. My favorite sites: Adobe Color DESIGN: COLOR
  93. DESIGN: COLOR My favorite sites: Colour Lovers
  94. DESIGN: COLOR My favorite sites: Coolors
  95. Make sure colors don’t impair readability DESIGN: COLOR 30 TIP
  96. Easy to read Hard to read DESIGN: COLOR
  97. DESIGN: COLOR 31 TIP Use a light colored background with dark text
  98. Use a light colored background with dark text DESIGN: COLOR 31 TIP (or vice versa)
  99. DESIGN: TYPOGRAPHY 32 TIP
  100. DESIGN: TYPOGRAPHY 32 TIP You will have less problems with browser compatibility
  101. DESIGN: TYPOGRAPHY Sans serif (best for mobile reading) Verdana Geneva Arial Helvetica Tahoma Trebuchet MS Lucida Grande Serif (inspires feelings of trust) Georgia Times New Roman Palatino Times Monospace Courier Monaco Courier New Best fonts to use:
  102. Use one font to reduce clutter on the site DESIGN: TYPOGRAPHY 33 TIP
  103. Use 12pt font for body text DESIGN: TYPOGRAPHY 34 TIP (It’s the easiest to read in the least amount of time)
  104. For an older audience, use 14pt font DESIGN: TYPOGRAPHY 35 TIP
  105. For headlines, use 17-25pt DESIGN: TYPOGRAPHY 36 TIP
  106. Make sure there is enough space between each line to give the text room to breathe and be read easily DESIGN: TYPOGRAPHY 37 TIP
  107. DESIGN: TYPOGRAPHY 37 TIP Make sure there is enough space between each line to give the text room to breathe and be read easily
  108. Include an image of your product OR a captivating image supporting your offer IMAGES 38 TIP
  109. IMAGES Image of offer/product
  110. IMAGES Image supports offer
  111. We are visual beings IMAGES Image source: The Next Web
  112. Visuals entice your reader to stay on your page and learn more about your product IMAGES
  113. Use images with people IMAGES 39 TIP
  114. IMAGES We are drawn to faces, especially the eyes
  115. IMAGES When the eyes are looking in a certain direction, we follow the line of sight. This is a psychological trick that influences the power of suggestion
  116. Use eyes to focus attention on the important parts of your landing page IMAGES 40 TIP
  117. Use directional cues to point out where to look next IMAGES 41 TIP
  118. Use directional cues to point out where to look next IMAGES 41 TIP
  119. The 13 ULTIMATE Free Stock Photo Sites (All free for commercial use) @allisonhaag for your Presentation or Online Course @teachablehq IMAGES 42 TIP To find your perfect visual, check out my list of The 13 Ultimate Free Stock Photo Sites FIND YOUR IMAGE NOW
  120. If the background is an image, make sure the text is legible by darkening the photo IMAGES 43 TIP
  121. IMAGES Or try adding a box behind the text
  122. White text over most images is usually the easiest to read IMAGES 44 TIP
  123. Use video to explain complex offers IMAGES 45 TIP
  124. Conduct A/B Tests A/B TESTING 46 TIP
  125. A/B TESTING We recommend A/B testing every element using Optimizely or Visual Website Optimizer
  126. Phew! That was beefyImage source: petakidas.com
  127. Download the slides to remember these tips when you’re creating your own killer landing pages! GET THE SLIDES NOW
  128. Thanks for staying with me until the end! For more, follow us on Twitter Happy Designing!

×