Your guide to landing pages

Welcome back. Last week, livestreamer Asmongold caught some heat for saying “content creation is hard.” As a content creator myself, this got me thinking : What really is hard? For context: I’m a former combat Marine, father of four, startup founder, and content creator. Some of those roles may sound harder than others. But in reality, all of them are hard. Suffering is relative.

This week, I challenge you to bring that perspective to your design work: When you empathize with users’ relative suffering, you become a better designer.

—Tommy (@DesignerTom )

The Wireframe:

• 5 tips for a standout landing page
• How to never run out of landing page ideas
• What’s the deal with Bento grids?

How to Craft a Killer Landing Page

You’ve heard it before, you’ll hear it again: A landing page is a sales pitch. It’s where you take a user from exposure to action. And its effectiveness? All about UX.

Today, I’m sharing the basics of building a landing page, plus 5 tips to level up your landing page game.

Must-have landing page components

All you need to build a landing page? One objective and five core sections.

Start with your objective. What action are you hoping the user will take? Are they signing up for a free trial? Booking a consultation? Purchasing a product? Have one goal.

…And commit to that goal in your five core sections →

Hero section. The hero section is the linchpin of the landing page. It includes three key elements:

1. The headline, which emphasizes the value you’re offering. As Erik Kennedy explains in his course, Landing Page Academy , “It’s the most succinct statement for the greatest value for the greatest number of your customers.”

2. The subheader, which sells an outcome by clearly, concisely explaining what you offer.

3. The call-to-action or CTA, which prompts immediate momentum—like booking a session, filling out a form, or making a purchase. The key to a compelling CTA? Get crystal clear on what the user gets when they click the button.

• For example: “Download my free guide” > “Click here”
• Pro tip: Use first person, like “book my free consultation,” to increase conversions, suggests web strategist Wes McDowell.

Benefits section. This is where you highlight the main features that fulfill the promise made in the subheader above. Add simple illustrations next to each benefit.

Social proof. Introduce credibility—testimonials, stats from successful users, third-party reviews (like Trustpilot), notable clients’ logos…you get it. And with limited space, specificity is your friend.

FAQs. This section addresses potential concerns by presenting 5–7 questions and answers. Pick common questions that can proactively push back on objections.

Final CTA. The user has all of the info they need to decide whether they want to take action. A final CTA button offers this opportunity.

5 tips for a standout landing page

Tip 1: Add a stunning brand logo section. Brand logos are an effective opportunity to flex credentials without relying on testimonials. Here’s how I seamlessly incorporate brand logos into my landing page design:

• Don’t waste time scouring Google Images for brand logos. Instead, use BrandFetch ’s Figma plugin or website.
• Open the PNG or SVG versions of your logos and set a Color Overlay to white or black.
• Choose a maximum width and height for the container of the logo, then resize the logo within.
• Put the logos on a contrasting background, set opacity to 80%, and boom.

Tip 2: Experiment with a spicy layout. Here are three of Erik Kennedy’s favorite ways to do just that:

• Explosion layout: This collage of design elements includes varied colors, angles, and sizes.

• Sweeping layout: Take advantage of the full canvas of the screen with an illustration or photo.

• Half-and-half layout: Split the screen right down the middle. Fill each half with contrasting elements, like header text, imagery, video, etc.

Tip 3: Add in some tasteful animation. Today’s landing pages are chock full of scroll-triggered animations. While these may draw attention, ask yourself: Are they guiding the user—or detracting from their experience?

Large-scale animations may not always be the best fit. But tastefully incorporating small-scale animations or microinteractions can be a powerful way to indicate a change of state, guide user attention, and convey quality. You could try:

• Hover effects
• Confirmation animations
• Sliders or accordions

Tip 4: Change the layout of your product card. A flat rectangle is not stopping customers in their tracks. Try a perspective layout with lighting effects instead—here’s how .

Tip 5: Lean into the power of a frame break. When you let imagery bleed out of its frame, it creates a sense of deliberate clutter and playfulness to liven up a dull layout.

The takeaway: The true key to a standout landing page? A marriage of great copy and design. Focus on communicating your objective first—then accentuate your message with visual showstoppers.

Poll: Would you be interested in a landing page primer course?

EDUCATION BY UX TOOLS

Our book teaches you how to make faster design decisions.

It's been read by more than 3,000 designers at companies like Adobe, IBM, Spotify, and Microsoft. Read their reviews here.

It includes:

• A 3-pillar framework for swift, informed design decision
• The Eisenhower Design Matrix: a lens to balance research vs. speed
• How to gather and weigh crucial information for informed simplicity
• Techniques to analyze your industry, competitors, and customers

Grab it here to learn these methods to become the fastest designer on your team.

News, Tools, and Resources: Epic Landing Pages

• Check out this great collection of expert analyses of SaaS landing pages.
• Never run out of landing page ideas. This post shares dozens of landing page tips.
• Here’s why you might want to try the 12 column layout.
• In this video , legendary designer Vitaly Friedman shares how to elevate web design.
• Erik Kennedy and Ridd dissect four landing pages on this great podcast episode .
• Get inspired by Godly’s collection of top-tier landing pages.

Got a great tool, podcast episode, idea, or something else? Comment below and tell me what’s up.

Case Study: Clerk.com’s Bento Grid

Bento grids are all the rage in 2024. Named after the Japanese meal box, Bento grids aim to convey a “balanced meal” of product features. They fit a ton of content into one viewport and are a lot of fun to design.

But there’s a catch: Bento grids offer little in the way of visual cues or hierarchy. And without direction, users can suffer from Hick’s Law (the time it takes to make a decision increases with the amount of information).

So if you want to give Bento a try…here are some tips for making it work, with examples from Clerk.com :

1. Group related content. Clerk has clearly defined sections separated by headers. It follows standard landing page sections, using the boxes as a visual aid to the narrative.
2. Don't use the same size for every box—let varied sizes emphasize certain product features.
3. Create a sense of visual hierarchy. In Clerk’s testimonial section, a quote from the CEO of Stripe is visually prioritized with a bright blue contrast.

Thanks for reading! Has a landing page caught your eye recently? What elements made it stand out? Comment below and tell me more.

See you next week!

Enjoying this newsletter? Let us know here.