Hot Tip #03 is to use fewer images but also better images.

Good imagery builds trust, and trust is the foundation for conversions. When it comes to your visuals — spend the money!

Dona Rita

Logoswift

Invest in a photoshoot of your team, your product, your food. The ROI on a professional photoshoot is pretty much guaranteed.

Hot Tip #05 is when in doubt, double the padding.

Whitespace isn’t just breathing room for your content, it’s breathing room for your potential customer.

Digestible content improves focus and clarifies what you’re offering.

Brenner Cycles

If your Landing Page feels overwhelming, double the padding and I think you’ll be pleasantly surprised.

Hot Tip #07 is to avoid center-aligned or justified paragraph text.

When applied to long paragraphs, these two alignments can be difficult to read. This can result in fatigue while browsing Landing Pages with a lot of content.

Let Neil deGrasse Tyson take us through it:

---

🚫 Center-aligned

We think scientific literacy flows out of how many science facts can you recite rather than how was your brain wired for thinking. And it's the brain wiring that I'm more interested in rather than the facts that come out of the curriculum or the lesson plan that's been proposed.

✅ Left-aligned

We think scientific literacy flows out of how many science facts can you recite rather than how was your brain wired for thinking. And it's the brain wiring that I'm more interested in rather than the facts that come out of the curriculum or the lesson plan that's been proposed.

---

🚫 Justified

You have people who believe they are scientifically literate but, in fact, are not. And I don't mind if you're not scientifically literate, but just admit that to yourself, so that you'll know, and perhaps you can take a first step to try to eradicate that. You have people who believe they are scientifically literate but, in fact, are not. And I don't mind if you're not scientifically literate, but just admit that to yourself, so that you'll know, and perhaps you can take a first step to try to eradicate that.

✅ Left-aligned

You have people who believe they are scientifically literate but, in fact, are not. And I don't mind if you're not scientifically literate, but just admit that to yourself, so that you'll know, and perhaps you can take a first step to try to eradicate that. You have people who believe they are scientifically literate but, in fact, are not. And I don't mind if you're not scientifically literate, but just admit that to yourself, so that you'll know, and perhaps you can take a first step to try to eradicate that.

---

A good rule-of-thumb is that any paragraph with more than two lines should be left- or right-aligned.

Hot Tip #10 is to create a text color hierarchy.

The biggest tell a Landing Page was built by someone with little design experience is black text with maximum contrast on a white background:

Soften the blow with an off-white background and a subtle grey/color text hierarchy:

Some time spent here goes a long way towards creating a more pleasurable reading experience for your visitor.

Hot Tip #13 is to highlight your Unique Selling Proposition (USP) among your features.

A grid/list of 12 features can be overwhelming for a visitor who is learning about your product/service for the first time.

Begin with your highlighted USPs:

Emphasize the benefits of choosing you over the competition.

Hot Tip #19 is to set a max-width for your typography.

100% width paragraphs are very difficult to read on bigger resolutions.

Typography optimization can get very technical but try aim for 55–100 characters per line (CPL). The Landing Page Hot Tips email drip has ~60 CPL. Real easy to digest. This this Ebook is ~75.

Hot Tip #22 is to consider a color scheme.

A carefully crafted Landing Page color scheme stands out and takes effort. An effort your visitor will assume carries over to your event, product, or service.

Kenkashi

Ackee

Bond

Owltastic

Hot Tip #28 is to space using ratios.

For example, set a base size of 8px, then define your padding using multiples of 8:

Tiny gaps = 8px
Small gaps = 16px
Medium gaps = 32px
Big gaps = 64px

Using ratios aligns your content better and tightens up Landing Page design.

Hot Tip #29 is to add personality.

👩‍🎤 A portrait of the person who developed the service.
📑 The desk where these posters were illustrated.
✍️ Even adding a subtle animation of your signature.

People want to support people, and these little touches give visitors a glimpse of the human behind the Landing Page.

Hot Tip #36 is to align with a grid.

Layout grids keep your Landing Page tidy by positioning within constraints.

Hot Tip #37 is to add a splash of color.

A burst on a Landing Page can command attention and add excitement.

1.1.1.1

Linear

Angle

And when excited, we tend to try new things.

Hot Tip #38 is to invest in an icon library.

Having a go-to icon pack can speed up Landing Page development and keep the aesthetic consistent.

Hot Tip #44 is to tighten your big typography.

Font Kerning and Tracking is a tricky subject as not all typefaces need it. That said, it’s a good idea to experiment with your bigger fonts.

Kerning is adjusting the space between 2 letters in a word. Tracking is adjusting the space between all the letters in the word.

Here is a Font Tracking example:

Reducing the spacing between characters in your big intro copy can really tighten your Landing Page design.

Hot Tip #45 is don’t neglect Retina optimization.

Simply put, Retina Displays have higher density pixels, needing a bigger version of the imagery to appear crisp.

Haptic

Clear infographics and crisp app screenshots leave a wonderful first impression, especially if your target market is designers.

Hot Tip #48 is to keep brand capitalization consistent.

Landing Pages with different case variations of the brand name look unprofessional and can be confusing.

✅ Starbucks
🚫 Star Bucks
🚫 starbucks
🚫 StarBucks
🚫 STARBUCKS

Avoid ALL CAPS if you can. And once you've chosen a case style, stick with it to ensure it's consistent throughout your Landing Page.

Hot Tip #49 is to keep vertical spacing even.

The vertical padding between your Landing Page section dividers is often overlooked:

A simple yet consistent spacing rule, applied throughout the long-scrolling page, can really tighten up the design.

Hot Tip #54 is to consider dark mode.

There is something remarkable about a Landing Page with a strong, dark color scheme.

Midnight

Tilda Zero Block

Play

CSSConf Argentina 2018

If your design feels conventional, why not dabble with a dark color scheme for 30 minutes to see how it feels.

Hot Tip #56 is to increase the contrast of your CTA button text.

A common design mistake by beginners is keeping the global link color the same throughout Landing Page elements.

This can lead to low contrast CTA buttons:

By integrating a text color that’s highly contrasted against the button background, you can create striking CTA buttons:

Hot Tip #59 is to consider font smoothing.

Simply put, adding the CSS font-smooth property to a font will trim it down very slightly.

While this effect won't look great on all of your Landing Page typography, it's particularly effective on 'chunky' fonts.

When applied correctly, it can really help polish your typography.

Hot Tip #60 is to liven with illustrations.

Illustrated characters, devices, and elements can really bring a Landing Page to life:

I was going to keep this is a secret but the commercial license for the Hot Tips Ebook fire illustration was $4 on Creative Market. It completely changed the way the product looks and feels within the Landing Page:

Character illustrations are currently on-trend in SaaS Landing Pages. I’d argue they are becoming generic but definitely still work to brighten a stale page:

Qoals

If you have the budget, aim to commission custom illustrations from a designer. If not, these resources are a good place to start:

Hot Tip #63 is to add a radial burst behind your product imagery.

With only a few additional lines of CSS code, you can add another dimension to your Landing Page design.

The CSS Gradient tool can help generate the code for you online:

Here is the Hot Tip (Pre-Sale) Landing Page without a radial burst:

Here is the Landing Page with a radial burst:

With the addition of a drop-shadow on the image, a background radial burst can really add depth to the design, bringing your product imagery to life.

Hot Tip #67 is to seek for background images featuring negative space.

Negative space refers to the area of an image surrounding the main subject or object. This can be intentionally shot and cropped to provide a beautiful canvas for your copy — helping prevent overlapping elements:

If you know your way around Photoshop, start by expanding your hero image canvas to the left or right. Then fill the newly created blank space using the Content-Aware fill option. It’s honestly magic.

Hot Tip #78 is to define a clear visual hierarchy.

Step back from your Landing Page, squint your eyes, and take note of the content that appears most prominently. Is this prominent content more important?

A visual hierarchy orders content by significance and also suggests the order to follow. If all content was of equal size and weight, we wouldn’t know where to start. Naturally, we want our introduction headline text to be the most prominent as it’s where the visitor’s journey begins:

Heavyweight

A visitor’s eyes are also trained to follow a Z-pattern:

1 - 2

3 - 4

Note how you probably followed a Z-pattern when looking at the above image:

A good rule-of-thumb is to increase the prominence of your more important content while decreasing the less important.

Hot Tip #80 is to wrap your screenshots in a device.

A device mock-up, with a subtle drop shadow, can really bring your digital product to life:

Calmaria

Klokki

If your software caters for multi-device usability, consider showcasing the screenshots within a family of devices. This emphasizes the remote-working possibilities too:

Clover

Shopify Free Trial

Hot Tip #81 is to set a maximum width for your content.

Hot Tip #19 referred to setting a max-width for your typography — but what about defining your Landing Page container width?

UIBoost

Audiences differ but over 20% of my Landing Page desktop visitors use a 1920px wide monitor.

W3Schools’ stats also indicate bigger resolution browsing is on the rise.

Containing your Landing Page with a max-width will keep elements from floating on big resolutions, preventing a rugged reading experience.

Hot Tip #90 is to alternate section background colors.

Consider a slightly darker or lighter background color for every alternate Landing Page section. This design tip will also help contain section content better as a visitor scrolls.

Adivo

Sizzy

To add spice, why not experiment by separating sections using wavy lines (above) or diagonal lines (below).

Wirize

We Ain’t Plastic

Hot Tip #91 is to bring it to life.

Skeuomorphism is the design concept of making digital items resemble their tangible real-world counterpart.

If you are selling a book, consider using a book mock-up template to bring it to life in your Landing Page:

I grabbed this book template from Creative Market and it made a huge difference to the Hot Tips Landing Page design.

Selling a print? Why not put it in a frame and overlay a leaf to really bring it to life:

Creative Market

Pre-selling property? Give it life with an aerial view of the desk and the beautiful plans strewn across it:

Skylark

Another trick to bring your offering to vibrant life is to add a subtle drop shadow behind the image, product mock-up, or browser screenshot:

Ackee

The above subtleties aren’t noticeable at first but collectively mold into a beautiful Landing Page design, like this: