Business benefits
Create a combined draft of your copy and visual page elements for review by your clients or internal stakeholders using a wireframe tool.
Potential tools to use for wireframing include:
- Balsamiq, which is easy to use but only allows for minimal customization and a quick and dirty look for $12 per month.
- Figma, which is fairly intuitive but has a medium curn, with high customization abilities and a detailed look and free plans available.
- Sketch, which has a significant learning curve but allows for high customization possibilities at a $99 one-time fee for Mac users only.
Start your wireframe with a new artboard, using the approximate dimensions you expect your sales page to have.
Use your website’s dimensions for your audience’s preferred medium, including desktop and mobile design. Check with your web designer or developer on the size you should use. Some tools, like Sketch, have an option to create a responsive web page using most common mobile and desktop sizes.
Position each piece of copy on the page in a way that follows the F-shape pattern digital audiences use to engage with content.
Size each piece of copy on the page to create a visual hierarchy that draws your audience’s eyes to the most important pieces first.
As established by Fitt’s Law, objects become more accessible and noticeable the bigger and closer an object is. Assign larger sizes to headlines, call-to-action buttons, and other important page elements to make sure your audience notices them quickly and easily.
Align the visual order of your page with your sales page messaging hierarchy and flow.
Treat any text as both a design element and basic information, ensuring that it both looks good and functions well in helping to convince your audience to take action.
Minimize the amount of clutter around your copy by keeping the number of page goals to a minimum and removing distracting elements.
Hick’s Law establishes that every additional choice on a web page increases the time to take a decision. Too much noise can confuse your audience, making them less likely to convert.
Establish a clear typography for your copy to maximize readability like using a higher-contrast font and a font size of at least 16px.
Studies show that bigger, higher-contrast fonts are easier to read, while extreme line heights impede readability. Follow these guidelines:
- Use a font size of at least 16px.
- Choose at least 1.5 line height.
- Reduce the lengths of your lines to a maximum 900px.
- Keep your paragraphs to no more than three to four lines.
- Maximize legibility with maximum contrast.
- Break up walls of text by organizing copy in chunks, using subheads, using a ragged right text alignment, switching up alignment of copy chunks, using relevant images and icons, and using bullet or ordered lists.
Use a tool like type-scale.com to test out different font-size schemes.
Ensure that icons and images serve as directional cues around your copy and pull your audience towards the most important points like arrows or eye magnets. Remove or adjust any unintentional directional cues that point away from your copy.
For example, the human eye is drawn to human faces, pointing gestures, and outlines. Placing an image of a face on your sales page can help if it points your audience towards your call to action, or hurt if it distracts them from the same call to action.
Create a clear color contrast of your copy compared to the background, imagery, and buttons.
Contrast tells your audience’s eyes what to focus on. If contrast is too low or poorly controlled, our ability to distinguish between elements or characters is dramatically reduced, which impacts our ability to read text.
Reserve high-color contrast for CTA buttons and page goals. Use dark overlays on images to ensure the copy on top is readable, and test the contrast of your page goal or CTA with a “squint test” to see what elements your mind focuses on when you cannot read exact copy.
Share your wireframe with stakeholders and your page developer or designer for feedback and implementation.
Last edited by @hesh_fekry 2023-11-14T10:13:42Z