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. With shared workflows and assets, your team can follow brand guidelines be more efficient. 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 writing focused on defined messaging principles, and following best practices
Fixes design and code debt with a reusable framework for increased efficiency and speed
Communicates expectations clearly to team members with guidelines to refer to when questions come up
Saves time to focus on other aspects of your marketing
Acts as a backup for when teams change (as people come in, or leave), with a shared repository of gathered knowledge
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
Forms 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.
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.
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
