How to Build a Landing Page

Getting started

New to Squaredance

Brands

Partners

Tracking & Integrations

Technical Docs

How to Build a Landing Page

Once you have crafted an offer and chosen your landing page type(s), you are ready to build your landing page.

Below is a step-by-step guide on how to build a landing page from scratch, followed by templated "scopes of work" you can use to distribute to necessary vendors.

Step-by-Step Guide on Building Landing Pages

1. Gather your assets

You’ll need to gather the assets available to you and/or your designer. Here is a checklist of the bare essentials needed to get started:

Product photos LogosBrand Guidelines outlining your style guide (how to use design elements such as colours and fonts), target audiences, tone, and voice (if applicable)

Other assets are considered nice-to-have, but are strongly recommended if they add value to your offering. Some examples include:

Lifestyle photosCelebrity endorsementsUser-Generated Content Customer reviews and/or testimonials

2. Build a wireframe (optional)

Do you have a very specific vision in mind when it comes to your offer page? Building a skeleton of your offer page can be a great way to communicate your ideas to your designer, decrease the number of revisions needed, and make sure your unique vision comes to life.

If you’re interested in this step, tools like Adobe XD, Figma, and InVision make wireframing easier with free trials and libraries of interactive tutorials.

However, if you don’t have a specific vision or if you don’t have time to wireframe a designer will ideate solutions regardless if provided with your constraints.

3. Source and Gather Examples

Before reaching out to your designer, compile some examples of websites that align with your vision in terms of look & feel, structure, functionality, or more. It’ll be a visual mood board to show them what you’re looking for in addition to your scope of work, which we’ll dive into further below.

4. Write Persuasive Copy

Since the main purpose of a conversion-focused landing page is to sell your product while handling any possible objections, you’ll need to develop sales-driven copy.

Whether you are writing the copy yourself or will be outsourcing this task to an external copywriter, be sure to consider the following:

What sections should be included?

When you browse through a lot of DTC e-commerce websites you’ll begin to see similar patterns in their flow of information. Your page’s flow may differ based on the nature of your product and the landing page type and pricing model you’ve chosen. Be sure to communicate to the writer what flow you’re going with so they can organize and plan their copy accordingly.

Here is a common example of a landing page flow:

Solution-oriented headline > Product offer > Benefits > How it works > Featured testimonials > Risk-free messaging > FAQs

What are the answers to some common questions or objections?

It’s important to handle frequent objections on the landing page in order to prevent customers from leaving before making a purchase. If you’re not sure what those objections are, you can start from reading your customer reviews and check in with your customer service teams to see what are some common concerns. Along with adding an FAQs section on your landing page, try to see if you can incorporate it anywhere else in your copy to increase the chances of consumers seeing it.

What is the narrative you want to tell?

When you’re developing any type of copy, you’ll need to be explicit about the purpose behind the copy so that it’s being written with intention and does not stray away from the main topic.

5. Design Your Landing Page

Once you have your scope of work for your copy completed, you can begin designing your landing page while the copy is being written. You can include filler text in your design and replace the copy with the finalized copy once that becomes available.

If you don’t already have one, you’ll need to partner with a web designer, ideally one who has experience building offer pages for similar businesses to yours. Some of our favorites are ConversionWise and Lifted Solutions.

This is where the assets you’ve gathered and the wireframe (and/or collection of examples) come in handy. You’ll provide these items as well as a scope of work to translate your ideas to your designer. We’ve compiled a basic scope of work below to help you get started, but different designers may require different information, so be sure to have a chat with your designer first to see if they require anything else to support their workflow.

6. Turn your Final Design into a Working Website

Once your final design is approved and ready to go, it’s time to bring the design to life! Many web designers also offer development services, including the ones we listed above, ConversionWise and Lifted Solutions.

Having a one-stop-shop for design and development makes it easier for you as you can skip the extra scope of work and have them take care of the development with minimal instructions as they are already familiar with the design.

However, we recognize not all scenarios are equal and there are situations where having a separate developer is better.

That’s why we created a scope of work for developers further below for you to outline your ideas to a developer.

7. Go Live!

Once your page is developed, it’s ready to take live! Work with your tech team to set up any necessary tracking, pixels, integrations, and take the page live.

Once live, be sure to test, review results, and optimize as needed to ensure your page is performing the best that it can.

Tip: If your internal resources are short, some developers such as CoversionWise also offer integration services so they can take the task of adding your site to an existing platform, such as Shopify, off of your plate.

Summary of Resources Needed

Copywriter: Responsible for writing strategic copy aimed to achieve a specific goal (i.e. conversions) while staying aligned with the brief provided.

Web Designer: Responsible for designing the layout and aesthetic of the landing page while maintaining brand standards.

Web Developer: Responsible for turning a given design into a working website. This person ensures the site looks true to the approved design and runs smoothly.

Implementation Specialist: Responsible for integrating the website into a pre-chosen platform, such as Shopify.

*This is often done internally, but there are developers who can also help with this. Be sure to ask if it’s something they can do before hiring if this is of interest.

Note: Many landing page providers offer design and development services together, which can be easier to manage because you have one main point of contact rather than two or more.

Scope of Work Templates

If you will be working with external vendors for your landing page they will require detailed guidelines on what it is you’re looking for.

Below are templates that you can use as the base of your scopes of work. They include general fields, but you can customize them to work best for you and your vendor(s).

Scope of Work for Copywriters

Website	Links to websites that can be referenced for reliable information regarding the product and brand. Examples include: • Main Ecommerce website • Amazon store site • Third-Party Review sites
Product Info	Benefits, features, and unique selling points of the product.
Tone and Voice	This is required so the writer knows how to align the copy with the brand tone and voice. For example, fun and casual vs. educational and professional.
Point of View	What perspective should the writer take on? Singular or plural? 1st, 2nd, or 3rd? Third Person: He, Him, His She, Her/Hers It, Its Second Person: You, Your/Yours First Person: I, Me, My/Mine We, Us, Our/Ours
Problem & Solution	What’s the problem you’re trying to solve? How does this product/service serve as a solution.
Examples	Provide examples to other landing pages or written material to serve as inspiration for how you want your page written
Sections that Require Copy	Provide a detailed list of sections that require copy and any details that may accompany those sections. E.g. Sections may include the hero section (headline), what it is, how it works, ingredients, and customer testimonials.
Target Audience	Who should this copy be tailored to? Target audience details can include gender, age, occupation, lifestyle, etc.
Additional Details	Other details to consider: • Do certain parts require a list format? • Do certain parts need to be under a certain word count? • Can you supplement information that the writer can reference, such as nutritional facts for a supplement product?

Scope of Work for Web Designers

Website	Link to your brand website or main e-commerce store.
Product Info	Benefits, features, and unique selling points of the product.
Brand Guidelines	Clearly defined rules that communicate how your brand should be represented to the world. Particularly important for design is the style guide which may be attached or separate from the brand guidelines. Here is where you’ll outline how to use the following: • Colour palettes • Fonts • Logos • Graphics / iconography
Style of Page	What look & feel do you want to achieve? E.g. Bold and fun, minimal and professional, youthful and colourful, etc.
Example Designs	Provide examples to other landing pages so designers can take inspiration and follow a similar format, where applicable.
Wireframe, optional	If you have the resources to do so, a visual wireframe outlining where you want certain buttons, text, or how you want certain sections to be organized can really help turn your vision into reality. If this cannot be done but you still have a clear vision in mind, schedule a call with your designer so you can discuss how you want things laid out.
Sections Required	Provide a detailed list of the different sections that you want to include on your page. E.g. Sections may include the hero section (headline), what it is, how it works, ingredients, customer testimonials, and FAQs.
Product Section Details	This section is the most important and most different from the rest of the page, so it will require extra hand-holding. Be specific about how you want the prices, discounts, value-add features, and any other features designed. You can refer to the examples listed in the Types of Landing Pages and Best Practices articles to get some ideas.
Copy for the page	Most designers do not write copy themselves, so if you hired a copywriter separately you can provide the finalized copy to the designer to add to their design. If this is not ready by the time they’re designing, ask them to use filler text in the meantime.

Scope of Work for Developers

Design Files	If you’re using a separate developer, you’ll need to provide them with the design files from the designer before they can begin. Ask the developer what files they’re comfortable working with and coordinate with your designer.
Button Functionality	Where should the call to action buttons link to? Should they scroll to a certain part of the page? Should they link to an external page?
Scroll Functionality	Do certain sections require a vertical or horizontal scroll function?
Integration	Do you require assistance integrating the web design to your current setup? If so, let the developer know what your setup is (e.g. Shopify) and discuss with them how the page will be integrated.