A guide to designing your web pages for consistency, scalability, and collaboration
A web page takes many different forms. The homepage, landing page, product page, blog post, etc. Each page serves a very specific purpose for the user, and is among other pages that make up a website. A design system is a set of tools, and resources that help your team scale production. It helps solve the following problems:
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 not having to reinvent the wheel each time by reusing components, keeping focus on the writing and messaging, and following best practices
Fixes design and code debt with a reusable framework for increased efficiency and speed
Saves time to move on to other aspects of your marketing
This guide is broken down into three aspects: design, content, and how to effectively share your design system within your organization.
A web page should have a clear visual hierarchy and value proposition. Once a user is on your 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.
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
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 web 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
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
Accent color - using accent-color in your CSS, in the :root, defines the color value for selected radio buttons and checkboxes, along with other form fields that have an accent color
Radio button and checkbox size - you can now set the width and height of a radio button or checkbox to match the size of other fields
File upload button styling - the button that comes along with input type="file" can now be styled to match your design using input::file-selector-button
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.
Writing guidelines
Use these general tips to develop the rules around your writing approach:
Identify your value proposition for a focused goal for each page
Plan your information hierarchy to identify information that is most important
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
Be creative in the mechanical elements (headlines, call-to-action buttons, etc)
Make sure your call-to-action is action-oriented
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.
Skimmable content
Feature sections on a page highlight ideas in short-form content. They provide a format for content to be skimmed through and usually include a call-to-action, or links to further explore the idea. These different forms of content sections can be mixed and matched depending on the information needed on each page.
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.
Landing pages
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
Forms
Forms are useful for collecting information from visitors, getting specific details to help with following up. The first thing to keep in mind is to only ask for fundamental information. No one enjoys filling out forms so keep them short!
Landing page form - 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
Contact form - should consist of a text area for the question/comment message along with a means to reply back to the person reaching out
Feedback/survey - helpful for your product or service, allowing customers to share thoughts on their experience; questions can be in the form of multiple choices or as open-ended text areas
Newsletter sign-up - an email address is all you need for a newsletter sign-up, with a good intro explaining why users would want to sign up and what they can expect from the newsletter
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.
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:
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 pages and emails on their own while ensuring they are following brand guidelines throughout the process.
Content
Components
Regions
Sections
