35
25 Comments

13 Tips For Improving Landing Page Design

01/ Use a colour overlay on images with text
If you're using text on a crappy image, try using it more like a background by overlaying the brand colour at a semi-opaque setting. This will give you the necessary contrast to make text readable. In the example below, I also applied a dark blue drop shadow to the text to further boost contrast.
alt text

02/ Don’t over do negative space
When there’s excessive negative space between elements that belong together, the eye stutters and falls into empty voids instead of easily flowing over connected elements.
alt text

03/ No one likes a word salad
Anyone who has looked at website analytics knows you have a very small amount of time to grab someone’s attention. Get to the point.
alt text

04/ Even text only layouts should be visually appealing
Text only sections of a landing page can be hard to design, especially if you can't see a way to use illustration, icons or photography. Look to your brand colours and typographic details as quick wins to lift your design.
alt text

05/ Icons small, illustrations big
Icons are simple by nature and should play a supporting role. Blow them up big and now you just have a bad illustration. If you’re using an icon with a title, you’ll want the title to pop out first.
alt text

06/ Use letter spacing sparingly
If you’re not an experienced typographer stick to only adding a bit of letter spacing to your all caps titles. Adding extra letter spacing to sentence case text can create issues with readability.
alt text

07/ Watch your line lengths in FAQs
The FAQ section is probably the web's no.1 culprit in terms of egregious line lengths. Optimal line length is between 45 to 75 characters, including spaces and punctuation.
alt text

08/ Show me the value
In this example, the real value proposition was hidden in a barely readable subtitle. There was also an easy opportunity to add authenticity to the social proof by adding the faces of real users.
alt text

09/ No one likes tiny text
On this website, variable web typography was used in the CSS, creating scenarios where body copy was 11px and navigation links 9px. Browser defaults of 16px font size are 20 years old – start body copy at 18–20px.
alt text

10/ Apply the rule of odds
Layouts pack more of a punch with an odd number of elements. If you have 4 points to make, trying saying the same thing in 3 by combining 2 points together. If that's not possible, prioritise your points and cut the weakest.
alt text

11/ Manage cognitive overload
‍Combine and reduce your points where possible. Create contrast in size between titles and copy to improve the visual hierarchy, and use negative space to create a calmer experience when you have a lot to say.
alt text

12/ Use bright colours as an accent
Using bright colours in large areas is going to run you into contrast issues, potentially failing basic accessibility requirements for your text. On smaller elements like buttons, you'll probably need to avoid white text.
alt text

13/ Always check the contrast of grey text
‍Using grey text is a popular technique to create hierarchy between text elements. But this often leads to serious accessibility issues with text lacking sufficient contrast. Use an online tool to check contrast, and increase contrast in font sizing if you need to establish a clearer visual hierarchy.
alt text

Et voilà! All done.

If you liked this article, you may like my newsletter – a bi-monthly email sharing design insights and the startup journey.

And if you're feeling social, a retweet or like on the Twitter thread  would be much appreciated 💙

  1. 2

    Thank you so much for sharing this detailed educational post @PascalAkord!
    I'm sure you spent lot of time drafting these ideas and explaining them with such expertise.

    I would love to ask you if you can recommend any tips or changes for my product website -> https://ruttl.com/

    Eager to hear your thoughts!

    1. 1

      Hey, thanks for the kind words! Yeh no problem, would love to. I'll take a look and give you some thoughts in the next couple of days

      1. 1

        Thank you so much @PascalAkord! Sure thing, excited for your thoughts!

        1. 1

          Hi there, sorry for the late response! I have a few thoughts.

          • the headline doesn't say much. what's the outcome you're selling? I would maybe go with something like "The fastest way to get to the next iteration".
            With a supporting text taken from the bottom of the page, which is very clear at explaining the tool "ruttl is a visual feedback and collaboration tool that allows you to invite clients and teammates to leave useful comments and make changes directly on live websites."
          • Just because the logo is lower case "r", it doesn't mean you have to write your product "ruttl", which looks weird when you start a sentence with it. So I would always write "Ruttl"
          • You could combine two points "better collaboration" and "stay organised" into one point - they're saying a similar thing and they use almost identical images. Use the Better collab heading and subtext from Stay organised.
          • You could do with some social proof at the top of the page somewhere. Maybe you're still getting that together.

          Hope that's useful! Good luck.

          1. 1

            @PascalAkord Thank you so much for giving me this detailed response! It was extremely helpful!

            I've made several changes like you recommended. I would love it if you can check out the new site for ruttl.

            https://ruttl.com/

            The waitlist landing page is gone and now I have the full page ready to view for everyone!

  2. 2

    Awesome article! Thnx for sharing. Cool how these small tweaks can make your page from "meh"to "oh yeah"

    1. 2

      Yeah definitely! I often think it's just a cumulation of getting the small things right that makes the difference

  3. 1

    Printed it and put on my wall )).

    1. 1

      Framed I hope 😂 Glad you liked it.

  4. 1

    Personally, I can see room for improvement.

    Let me explain.

    • Image 1

    The blue background is too light, for that white text, and the contrast is poor.

    • Image 2

    Those pretty long paragraphs should be aligned to the left would be more readable. Also I would choose a different way to display that, is not a great layout for such a long text.

    • Image 3

    It needs more padding on the X axis, around doubles as much and paragraph slightly bigger.

    • image 5

    Text is too long to be centered.

    • Image 11

    same as 5

    1. 1

      @Michael_Andreuzza I loved the way you explained all the ideas!

      One thing I could make out is you used the ">" quote function to create the vertical line but didn't understand how you got the box around it.

      I'm very curious to know - How did you get the greyish background on each idea? Can you help me out on the same?

    2. 1

      Thanks for taking the time to think about each point and respond.

      While in some of the tips I idly tweaked other things outside the point of the tip, I don't intend each tip to represent a wholesale redesign of the layout, but to illustrate the specific point made.

      For image 1 it's worth considering a few things. While it's on a light coloured background, the text is bold and would be about 40px. I also used a very dark blue drop shadow closely set to the type, so while it's not immediately apparent there's a drop shadow it significantly increases the contrast of the type. IMO there is no issue with readability or contrast within this context. It's also worth noting that the point here is to illustrate the difference between using or not using a colour overlay, and I think that's clear.

      Image 2, the point here is to show the difference when reducing the negative space. I'm not making a point about the length of text, alignment or overall layout.

      Image 3, I'm showing the difference between the designs when we remove text. I'm not making a point about padding or the layout overall.

      Image 5, again not the focus of the point, but don't think the centre alignment is much of an issue. The text could do with an edit tho.

      Image 11, disagree that the text is too long to be centred - 4/5 words on avg per line, with a few lines per para.

  5. 1

    Yeah, it think my landing page: www.locospartygame.net has all those :DDD

  6. 1

    I see for improvement though.

    Let me explain.

    • Image 1

    The blue background is too light, for that white text and the contrast is poor.

    • Image 2

    First off, those pretty long paragraphs, Aligned to the left would be more readable. Also I would choose a different way to display that, is not a great layout for such a long text.

    • Image 3

    It needs more padding on the X axis, around doubles as much and paragraph slightly bigger.

    • image 5

    Text is to long to centered.

    • Image 11

    same as 5

    • Image 14

    This is nice!

  7. 1

    Awesome article. Thanks for sharing!

  8. 1

    Great tips thanks!

    Another important one imo: if you're goal is to capture emails, put the form front and center - and don't be afraid to make it biiiig

    1. 1

      Oh yeh, there are so many more! I was just pulling examples from recent homepages I stumbled across while working on our new website. But it feels like there are almost a limitless number of things you could mention.. Glad you enjoyed the article!

  9. 1

    Awesome tips, thanks!

    Tried subscribing to your newsletter but it's getting blocked by anti tracking on Firefox. I'm getting this even with tracking/ad block extensions disabled.

    1. 1

      Oh that's weird! I will look into that.. in the meantime, I can add you to the list manually if you post your email here, or you could DM me on Twitter.

      Thanks for your support :)

  10. 1

    Greta tips - thanks so much!

    1. 1

      Glad you enjoyed 👍

  11. 1

    Hi Pascal,

    The tips are amazing. Visuals are very good. Subscribed to the newsletter. Hope to learn more from you.

    1. 1

      Cheers! And thanks for the support on Twitter :)

  12. 1

    It's wonderful @PascalAkord, especially visually showing Before and After did it's job so well. I tried to find out the mistake first and then read the text. Very useful. Will definitely bookmark this post.

    1. 1

      Thank you! Really glad you found them useful and hope they continue to be a good reference :)

Trending on Indie Hackers
💯 users 💯 days 31 comments Can you give me some feedback? 18 comments HootSuite founder Ryan Holmes discusses product validation platform Kernal 7 comments How to fight back against Google FLoC 6 comments Building in Public for the first time!😲 2 comments 4 content strategy rules I've learned the hard way 2 comments