You are browsing:

Design Hot Tips

Landing Page lessons related to the overall page design. When you are further with your design, kick off the Landing Page Design Checklist.

#63 - Design Tips

Add a radial burst behind product imagery

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.

CSS Gradient tool – Wonderful tool I use to generate all my gradient code for Landing Pages. Here is a 1-minute video walkthrough.
Gradient Inspiration – A collection of 100+ Landing Pages I’ve curated featuring colorful gradients.

#67 - Decluttering Tips, Design Tips

Seek hero images with negative space

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.

Unsplash – Free stock image library with tags for “negative space” and “copy space”.
Stocksy – Premium stock image library with a useful “copy space” filter with 3 strengths.
Negative Inspiration – A collection of 1000+ Landing Pages I’ve curated featuring healthy whitespace (often associated with negative space elements).

#78 - Design Tips, UX Tips

Define a visual hierarchy

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:

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.

Visual Hierarchies Explained – Webflow published on visual hierarchies if you would like to learn more.

#80 - Design Tips

Wrap it in a device

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:

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

Devices by Facebook Design – Monster collection of mock-up devices in both PNG and Sketch. Ridiculous this is free.
Shotsnapp – Brilliant device mock-up tool that works in your browser.
Device Mock-Up Inspiration – A collection of 250+ Landing Pages I’ve curated featuring device mock-ups.
Lstore Graphics – Quality device mock-up resource that includes presentation kits and even animated mock-ups.
Supply.Family – The highest quality device mock-ups online. Includes laptops, phones, tablets, TV screens. Prices are premium, which is a good thing as your purchase won’t be overly used elsewhere.
Creative Market – The device mock-ups category is filled with unique options by their community. I always draw inspiration how the mock-ups are presented here. Noting colors and backdrops.

The end.

There are no more Hot Tips to load in this archive.