A guide to designing consistent landing pages more efficiently
A landing page is a standalone web page that potential customers go to when they click through from an email, ad, or other campaign. Landing pages serve a specific purpose in a specific moment of a campaign to a target audience. Here are some cases where you would want to take the landing page approach:
Audience segments - if you can divide your audience into different groups, consider creating separate pages for each one to enhance the experience for each group
Products or services - if you offer a number of different products or services, you can create separate pages for each one (or category, if that makes more sense) to highlight the unique benefits of each individual thing you offer
For search engine optimization - having lots of pages helps SEO, with more of your pages for search engines to index for increased chances of visitors making their way to your site
To target long-tail keywords - highly specific keywords or key phrases that tend to be four or more words, making it easier to rank than keywords with fewer words which are more competitive
How a design system helps
To make a landing page work, it should also be on-brand and follow the design of the campaign that it's associated with. A design system for your landing pages can help follow brand guidelines and provide a model for your pages that ensures a consistent level of quality to each page you create. It could also speed up the production of each new landing page, and makes the process more collaborative with shared workflows and assets for your team to use.
This guide is split into the design of a landing page and content basics.
A landing page should have a clear visual hierarchy and value proposition. Once a user is on your landing page, they are encouraged to take an action. It should only contain the amount and type of content that’s needed to prompt users to take the desired action.
Landing page breakdown
The elements of a good landing page, using components in a design system.
Header: logo, navigation
Intro/hero/feature
Primary title/headline
Supporting copy/description
Call-to-action
Social proof
Summary of benefits
Additional features
FAQ's
Real world examples
Added call-to-action
Footer
Mobile version
Scale images down
Collapse multiple columns to single-column
5 core design goals
Relieve pain points - while your campaign introduces a problem and solutions you can offer, the landing page should emphasize tangible benefits from taking action
Design for taking action - the landing page should have a goal related to the campaign, such as: signing up for a trial, making a purchase, registering for an event, downloading content, or watching a video
Show, don’t tell - show the benefits of your product or service with photos, by describing use cases, and with customer testimonials/reviews
Keep the CTA simple - if you have a sign up form, only have a few initial fields, with any added required fields as a follow-up step
Build trust - include contact details and links to support content
Designing with components
Use this hierarchy and introduce it to your team as you design and build your templates.
Content Text areas and content images accompanying text; what's found within HTML elements
Components Standalone elements like buttons that work in various contexts and serve specific functions
Regions Repeated groups of content and components, usually in columns, like a listing of content items
Sections Stackable containers between the header and footer that serve to create an overall layout
Account for variation - utilize how content is placed, and a component's size, structure, and style, to offer components that have more than a single format
Don't make it too rigid - the design system shouldn’t feel like something that stifles creativity; a certain level of hand-crafting is important and to allow for growth
Naming things - use a semantic, standard language of naming across design and code
Using your brand
Refer to your organization's current brand guidelines: a styleguide, logo requirements, etc. Any related design documentation that may be available. And any design patterns that are used for your marketing efforts.
Brand elements to keep in mind:
Mission statement with values and principles
Colors and fonts to stick to including a color palette of common colors to use
Logo usage guidelines
Guidelines for using visuals — photos, illustrations, icons
Development considerations
Make sure your components are mobile responsive
Consider dark mode versions for users that have dark mode set
Use JPGs for bigger photos and illustrations; PNGs for graphics that need transparency
For animation, use GIFs; or, consider a short video without audio instead, it may actually end up being smaller in file size than the GIF!
Be sure to include alt text for all images; be descriptive, try not to repeat the same text
User semantic code for content – for titles (h1, h2, h3, etc), and paragraph tags (p)
Main browsers to test in are Chrome, Safari (especially for mobile), and Firefox
Tracking
Include URL parameters in the link to your landing page to track specific stats. URL parameters are variables that are added to any URL to be picked up by your website's analytics.
Parameters can be as simple as using ref with a value of your campaign name to simply track where the link was clicked from:
https://blocksedit.com/?ref=newsletter-july-2025
Or, it can get more complex, with additional parameters, following a standard UTM format:
utm_medium - marketing channel; sometimes used as utm_source
utm_campaign - name of campaign
utm_content - specific content piece for the link
Form fields
For designing and coding a form, keep in mind modern browser capabilities. Added functionality and styling options have been built in to make it easier to implement and customize fields:
Browser validation - browsers now validate fields, including notifying the user of required fields by just having a required property added to the field
Date calendar selection - browsers now include a calendar to select a date that comes up when using the input type="date" field
Semantic text fields - a text input field can be specified as email, url, or tel that helps with form validation as well as showing a specific keyboard for mobile
Content best practices
The most important part of any campaign is the message it's communicating, the text itself. Your design system should include some guidelines around how content is produced.
General guidelines
Identify your value proposition - what is the goal of this page?
Plan your information hierarchy - what information is most important?
Intro/hero area - keep your main headline, unique sales proposition, and your call to action among the first elements that visitors see before scrolling
Attention-grabbing headlines - communicate your value proposition as clearly as possible
Persuasive body copy - how can you use psychology to create audience-centric copy?
Product or service being used - an effective shorthand for explaining how your product or service works
Social proof that resonates - include testimonials as a way to show authenticity
Call to action - where’s the best placement for your CTA, and how can you make it action-oriented?
Make your CTA specific - use conversational language and let your visitors know exactly what they’ll be getting for their click; avoid bland button text like “CLICK HERE” or “SUBMIT”
Repeat your CTA - place your CTA at the beginning and the end, and even in the middle if you have a lot of content
Keep forms short - collect only info that is relevant to what your visitor is trying to accomplish; make it clear in your copy why the information is needed
Skimmable content
Break up content to make your copy more scannable.
Single-column - in its most standard form, this consists of a headline, a description, usually kept short, an optional image, and an optional call-to-action button.
Two-column - this can be a two-column version of the single-column consisting of title, description, image, and button. Or, an image can go on the left or the right side of the text and button.
Three-column - same as a single-column, but times three! Icons or simple graphics can be used instead of squeezing in images, or no images at all can also work. A secondary style for buttons works best here, or a text link.
Features grid - a listing of items, usually in multiple columns. If a call-to-action is used at all, it should either be in the form of text links for an item, or at the end of all the items.
Call-to-action - standalone section focused on taking an actionable step. This works best at the end of a page to act as a next step, but for longer pages, it can also go in-between content sections.
Testimonial - in the form of a quote followed by the author of the quote. A testimonial can be placed among other feature content sections, or as part of a section with multiple testimonials.
Sharing with your team
Your design system is only as strong as your relationships with the teams who use it. You need to develop trust and allow for it to evolve by encouraging participation in its development.
Talk to people who will be using the system - find out what they need
Get help with gathering assets - this also helps develop a shared understanding of how to measure quality components
Be open to feedback - if something is unclear, talk through and get feedback on how to improve
Make it easy - provide a point of contact, support ticketing system, discussion forum, etc
Provide good examples - show examples of how to be creative with structure. Encourage “off-roading” to evolve system. Consider examples from other organizations to help show ways to utilize a system without feeling boxed into a boring design.
Maintain your design system - maintain updates as your design system gets adapted by your team and your marketing evolves
Landing page CMS
If you're considering using a CMS for your team to build out web pages, look for ones that take the components approach to building. Many modern CMS's do this and even allow drag and drop editing for your components.
Your design components tool
This guide has been put together by the Blocks Edit team. Having a design system of reusable components for your organization to use, Blocks Edit makes your components visually editable. So anyone on your team can build emails and landing pages on their own while ensuring they are following brand guidelines throughout the process.
Content
Components
Regions
Sections
