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

Maintains consistency with on-brand visuals and messaging
Team can understand decisions made while having to make less of them as they refer to a single source of truth
Improves workflow by reusing components and following best practices
Fixes design and code debt with a reusable framework for increased efficiency and speed

This guide is broken down into three aspects: design, content, and how to effectively share your design system within your organization.

Using components

Focusing on content

Sharing with team

Design using components

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.

Breaking components down

Use this hierarchy and introduce it to your team as you design and build your templates.

Sections
Stackable full-width horizontal containers between the header and footer, used to create an overall layout
Components
Standalone elements like buttons and titles; should work by themselves in a range of contexts
Regions
Groups of content and components; arranged a specific way, usually as columns
Content
Text pieces and images

Don't make it too rigid

A design system shouldn’t feel like something that stifles creativity. Don't make it too rigid, a certain level of hand-crafting is important. It should allow for greater creativity within a set of guidelines. The long-term benefit is that a designer can take greater care and give better thought to solving each solution instead of rushing to put together something that comes along.

Example landing page

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

Creating a component

Define a component as a functional unit that has a purpose and is not part of the library already
Give it a descriptive name that everyone using the system can understand and agree on
Be sure to test accessibility — color contrast ratio, content voice-over, etc

A good component is

Purposeful - all components solve a specific problem
Reusable - components work for multiple use cases
Flexible - they work in many different contexts

Improving your dev workflow

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, and GIFs for animations
Be sure to include alt text for all images; be descriptive, try not to repeat the same text
User semantic code - header for titles (h1, h2, h3, etc) and paragraph tags (p)
Main browsers to test in are Chrome, Safari (especially for mobile), and Firefox

Boilerplate template - build on top of standard layouts and components
Starter responsive page template →

Focus on content

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.

What to keep in mind

Identify your value proposition - what is the goal of this page?
Plan your information hierarchy - what information is most important?
Attention-grabbing headlines - how can you communicate your value prop as clearly as possible?
Persuasive body copy - how can you use psychology to create audience-centric copy?
Social proof that resonates - what benefits, influencers, or companies you’ve engaged with would make page visitors go from skeptics to believers?
Call to action - where’s the best placement for your CTA, and how can you make it action-oriented?

Rules and guidelines

Brand

Refer to your organization's current brand guidelines: a styleguide, logo requirements, etc. Any related design documentation that may be available.

Brand elements to include:

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

Copy

Use these general tips to develop the rules around your writing approach:

Consider the type of message you're sending and whether to add more personality to it, or to get straight to the point
Use a conversational tone as that is usually what's expected from your brand
Write in your own voice at first and tune to your brand in the revision
Be creative in the mechanical elements (headlines, call-to-action buttons, etc)
Read out loud for flow and catching errors

Guidelines

Static components answer the how. Guidelines educate on constraints: workflows, habits, and best practices.

What to have in your notes:

Purpose of each component and the user experience thinking
✅ Do's, ❌ dont's, ℹ️ info worth noting, and any content limitations
Keep it simple and flexible (especially at the beginning) by not making too many rules
Use visual examples and screenshots where needed

Best practices

Ensure your messaging matches - send people to a page that matches their expectations with landing page copy (and design) that follows the ads you’re running in search or social.
Intro/hero area - keep your main headline, unique sales proposition, and your call to action highly visible. They should be among the first elements that visitors see before scrolling.
Compelling, benefits-driven content - a feature is a specific quality of your product or service, while a benefit describes a positive impact that the feature has.
Show product or service being used - photos and videos showing your product or service in a real-life context helps visitors imagine themselves as your customer. It’s also an effective shorthand for explaining how your product or service works.
Provide social proof - include testimonials as a way to show authenticity. You can humanize these testimonials by including personal details, like full names, job titles, place of residence, date of purchase, biographical details, portraits, or even video.
Break up content - use headlines and bullet points to make your copy more scannable.
Repeat your CTA - place your CTA at the beginning and the end, and even in the middle if you have a lot of content.
Make your CTA specific - avoid bland button text like “CLICK HERE” or “SUBMIT.” Use conversational language and let your visitors know exactly what they’ll be getting for their click.
Consider an FAQ’s section - Provide a Frequently Asked Questions section, usually towards the end, to make your argument and remove any remaining doubts before visitors reach the end of the page.

Include people in the process

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
Include link to docs in other processes - company-wide demos and emails, 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.

Documentation setup

Documentation as a web page is the best way to go when developing your design system:

Format that anyone can access - everyone can always go to the same URL
Centralized - updated without too many versions that need to be passed around
Easy to maintain - designers, developers, and organizers can make updates

Some examples of design systems presented as web pages:

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.

Landing page design system