Web Design System How to Make Landing Page & Templates

if you want to learn How to Make Landing Page and need some Templates this is a great help for you.

Page templates

These templates are created for the landing page and the documentation page of some components of the American web Design system. Each of these pages is flexible; You can add or remove components or subcomponents to suit your needs. These templates are a great starting point for models or to try a design system to see if they are good suited to you.

Template 1: Landing page

The intended page is intended to provide the first person’s impression of the agency or program. Often, they will reach from somewhere else without many contexts, such as search results or email to a colleague. Next, the landing page should be clear and be shared and placed in context.

Web Design Examples 2020

How to Make Landing Page

When to use

  • If you are offering a new program to the public through a marketing or promotional campaign, the landing page is a good place to refer to links. It can be built on a minimum version of a campaign without overwhelming readers.
  • A landing page can be a good model for the web design home page. But do some research first. What do you have to say? What do users need to know? Find out these things it is important to know what you have to say about your organization before you settle on the home page design.

When to avoid

  • Do not use the landing page web design for the standard internal page content. The same things that help people to understand the basics quickly can become distracting for people who are looking for more depth.
  • Do not attempt to include forms or lateral navigation on a page such as this. Those are visually complex components, and the landing page works best without much complexity.


  • If you use the landing page to encourage users to continue a basic call to the procedure, consider getting rid of the head. The less distracting people are from the more important task, the more often they will do so.
    For instructions about specific components, see the pages for individual components.
  • Do not create additional content only to populate the web design template. You can remove individual components (such as media block) or subcomponents (such as individual menu items in the header) from the template while it is being applied. This release gives you a wide idea of a number of things that can include your landing page. But don’t make the page more complicated than you need it. If you are unsure, meet the users to see what they need to know.

Components used in this template

  • Extended header
  • Hero feature
  • Typography — Merriweather headings and Source Sans Pro body
  • Graphics list
  • Media block
  • Grid
  • Headings
  • Buttons
  • Medium footer

Component definitions

  • Feature hero: The hero features are used at the top of the landing page to help set the tone for your site content and help users understand what your brand is all about. The Hero feature offers a callout that provides a high-level overview of the content on the site, and often refers to the image of the hero who sits behind it.
  • Graphics list: The graphics list is used to display a number of related items and their images in a network style.

Template 2: Documentation page

The Documentation page displays information about a particular theme, topic, or idea. People often arrive here after visiting the landing page or after searching for a specific piece of information, the pages of documents do not need to provide as much information in the context of more introductory pages. The version should be clear, focused and concise.

Basic header

When to use

  • If you are providing detailed information about a specific topic or topic that has already been placed in the context of the landing page. Some topics that can be nicely represented in this type of pages include guides or how TOS, technical documents, and software descriptions-in short, any subject requires in-depth interpretation.

When to avoid

  • Do not use a Documents page to submit users to your agency or organization-the landing page is best suited for this purpose. The level of detail in document pages can overwhelm users who become familiar with your organization.

Guidance (How to Make Landing Page)

  • Use an exact address to quickly connect to your page’s purpose. If the content of the page is particularly complex, you might consider using a subtitle to further clarify its meaning.
  • Write a brief copy. Favor short sentences (and paragraphs) over longer, use clear language, avoid terminology. Remember, copying blocks don’t need to be exhaustive.
  • For instructions about specific components, see the page for individual components.

Components used in this template

  • Basic header
  • Typography — Merriweather headings and Source Sans Pro body
  • Grid
  • Headings
  • Side navigation
  • Documentation layout
  • Medium footer

You Might Also Like

Show More

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top button