13 tips for improving landing page design:
1/ 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.
2/ 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.
3/ 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.
4/ 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.
5/ Icons small, illustrations big.

Icons are simple by nature and should play a supporting role. Blow them up a 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.
6/ 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.
7/ 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.
8/ 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.
9/ 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.
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.
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. ‍
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.
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.
Et voilà! All done.

I hope some of these tips will prove useful. If you enjoyed this, please show some love with a like or retweet 👍

I also write a monthly newsletter, The Emissary, sharing design insights and the startup journey. https://www.blogofpascal.com/newsletter 
You can follow @pascal_jbarry.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:

By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.