Consistent Page Elements

Hero

Purpose:

The Hero section is often the first interaction a user has with a page. It’s designed to grab attention, deliver an immediate value proposition, and guide the user’s next step. A well-crafted hero can set the tone and convey the main message of the page.

When to Use:

Primary Pages: use on landing pages, key solutions pages, or any important page where the message is central.
Conversion-Focused Pages: great for pages focused on driving actions like sign-ups, demo requests, or special offers.

Best Practices:

Concise Messaging: the headline should immediately communicate value, keep it simple and direct.
Clear CTA: always include one prominent CTA. Make it action-oriented like “Get Started,” “Request a Demo,” or “Learn More.”
Visuals: ensure imagery aligns with the message and speaks to the target audience. High-quality, emotionally resonant visuals can boost engagement.
Minimalism: don’t overcrowd the hero section, keep it clean with a strong visual focus and minimal text.
Accessibility: ensure the text contrasts well with background images for readability and includes alt text for SEO and accessibility.

Full Width Text

Purpose:

This block provides ample space to communicate a single, clear message without distractions. It’s useful for setting apart sections of your page and helping users focus on a single, impactful thought or statement.

When to Use:

Key Section Breaks: use it between major sections of a page to draw attention to important ideas or transitions.
Solution Benefits or Key Features: great for outlining the main selling points of a product or service.

Best Practices:

Use Short, Punchy Copy: it’s tempting to write a lot, but brevity is key. A few sentences or a paragraph is enough to drive home the message.
Bold Statements: focus on benefits and outcomes rather than features.
Whitespace: ensure there’s enough whitespace around the text to avoid a cluttered appearance.

Split Image and Text

Purpose:

This block pairs imagery with text to create a visually compelling layout. It’s effective when there’s a need to explain or showcase something that benefits from both words and visuals.

When to Use:

Feature Explanation: when showcasing a feature or service that benefits from both visual representation and textual explanation.
Case Studies or Customer Stories: split text and image can be great for displaying a story where the image ties directly into the narrative.

Best Practices:

Balanced Layout: ensure the image and text are proportionally balanced, neither should overpower the other.
Clear Focus: the text should complement the image, don’t repeat information already in the image.
Mobile Responsiveness: on smaller screens, ensure that the layout stacks correctly, with the image appearing first or after the text in a logical order.
High-Quality Images: make sure the images are high-resolution and relevant to the content.

Split Feature

Purpose:

This block allows you to compare two items side by side, perfect for showcasing features, benefits, or options. It’s a great way to draw attention to the differences or similarities between two choices.

When to Use:

Comparisons: use this block when presenting two distinct options or features.
Decision-making: it’s ideal for decision-oriented pages where users are comparing choices, such as pricing plans or product versions.

Best Practices:

Clear, Focused Content: keep content concise and relevant to each column. Avoid overwhelming the user with too much detail.
Visual Aids: use icons, checkmarks, or other symbols to highlight key differences or similarities.
Logical Grouping: ensure each column presents a complete thought, don’t cut off an idea midway.
Limit Columns: keep the number of options to a manageable number, usually two to four.

Cards

Purpose:

Cards are modular components that group related content into visually digestible units. They can contain text and links (but no images) making them perfect for showcasing multiple pieces of content in one place.

When to Use:

Content Hubs: ideal for blog post listings, product categories, or feature showcases.
Guided Navigation: useful when guiding users through options or content, such as case studies, customer stories, or service offerings.

Best Practices:

Consistent Layout: ensure that all cards follow a consistent layout for better scanning and usability.
Clear Titles: use clear and short titles that summarise the content.
Interactive Elements: cards should be clickable and lead to more detailed content or actions.

Call to Action (CTA)

Purpose:

A CTA prompts the user to take immediate action, such as booking a demo, signing up for a newsletter, or requesting more information. It is a critical element in converting users on a page.

When to Use:

Conversion Pages: always use CTAs when you want to guide users to the next step, whether that’s making a purchase or requesting a demo.
Decision Points: place them at decision points, such as at the end of a feature explanation or after a customer testimonial.

Best Practices:

Actionable Wording: use clear and compelling language that encourages the user to act, such as “Get started” or “Download Now.”
Single Focus: limit each page to one primary CTA to avoid confusion.
Prominent Placement: place CTAs above the fold and after each key section where users might be ready to take the next step.
Colour and Contrast: make sure the CTA stands out visually by using contrasting colours.

Testimonial

Purpose:

Testimonials provide social proof, showing potential customers that others have benefited from your product or service. They help build trust and credibility.

When to Use:

Decision-Making Stages: place testimonials toward the bottom of the page or near CTAs when users are considering taking action.
After a Feature or Benefit: reinforce the value of a feature or benefit by showing a real customer’s experience.

Best Practices:

Authentic Quotes: always use genuine testimonials with real names, titles, and company names when possible.
Highlight Benefits: focus on the outcomes or benefits, not just the product or service itself.
Use Photos: whenever possible, include photos of the person giving the testimonial to increase authenticity.

Full Width Image

Purpose:

This block spans the entire width of the screen, creating a strong visual break or focal point. Full-width images are perfect for reinforcing the page’s theme, breaking up large text sections, or showcasing impactful visuals.

When to Use:

Break Up Content: after long text sections, use full-width images to create visual breathing space.
Set the Tone: Use images that resonate with the page’s message and tone, particularly impactful when showcasing products or people.

Best Practices:

High-Quality Visuals: ensure the image is high-resolution and professionally shot. It should align with the content and brand aesthetic.
Keep it Relevant: make sure the image connects to the narrative and complements the copy.

Columns

Purpose:

Columns allow you to display content in a multi-column format, which can improve readability and organisation, particularly for list-style information or detailed explanations.

When to Use:

Content Segmentation: when you want to present information in categories or groups.
FAQs: a multi-column layout can make it easier to display multiple answers in an organised manner.

Best Practices:

Consistent Column Widths: ensure the columns are uniform in size to maintain visual balance.
Short Sections: keep the content in each column concise to avoid overwhelming users.
Whitespace: ensure there’s enough space between columns for readability.

Accordion

Purpose:

Accordion blocks allow users to expand and collapse sections of content. This helps keep pages clean and organised by hiding detailed information until the user needs it.

When to Use:

FAQ Sections: perfect for FAQ pages where multiple questions can be hidden until clicked.
Detailed Explanations: use when providing additional detail that may not be necessary to all users.

Best Practices:

Clear Titles: use clear, simple headers for each section.
Don’t Overcrowd: limit the number of items in each accordion to avoid overwhelming the user.
Smooth Transitions: ensure the animation between expanding and collapsing is smooth for better user experience.

Table

Purpose:

Tables provide an organised way to display data in rows and columns. They are useful for comparisons, specifications, or detailed statistics.

When to Use:

Data Presentation: perfect for showcasing structured data, such as pricing comparisons or specifications.
Complex Information: use when displaying detailed lists that need to be easily compared.

Best Practices:

Readable Columns: keep column names clear and concise to make the table easy to navigate.
Proper Alignment: align numbers to the right, text to the left, and ensure data is consistent across rows.

Number Focus

Purpose:

Number focus blocks highlight important statistics or figures to emphasise key achievements or results. This block is designed to draw attention to numerical data.

When to Use:

Key Metrics: use it to showcase important numbers, such as user growth, revenue, or success rates.
Impactful Results: ideal for presenting results of case studies or reports.

Best Practices:

High-Impact Numbers: choose numbers that showcase impressive achievements or outcomes.
Contextual Support: provide context around the number to help users understand its significance.
Bold, Large Text: make the numbers large and bold to catch the user’s attention.

Purpose:

The share block allows users to easily share content across their social media platforms, increasing visibility and engagement.

When to Use:

Content Sharing: use when you want users to share articles, blog posts, or any page with valuable content.
Engagement: ideal for pages with engaging content, such as thought leadership pieces, case studies, or infographics.

Carousel

Purpose:

Carousels allow users to browse through a series of images or content in a sliding format. This helps to showcase multiple pieces of content in a small space.

When to Use:

Showcasing Products or Features: when you have multiple items to show, like a product gallery or feature highlights.
Visual Storytelling: perfect for telling a story or showing a sequence of images, such as customer success stories.

Best Practices:

Limit Items: don’t overload the carousel with too many items. Typically, 3 to 5 is a good number.
Clear Navigation: ensure the carousel has clear left and right arrows or indicators to guide the user.

Tabbed Content

Purpose:

Tabbed content lets users toggle between different pieces of information without leaving the page. This layout is useful for showing multiple topics or categories in a clean, organised manner.

When to Use:

Multiple Topics: ideal when you need to present different categories or sections that can be easily navigated between.
Product Details: perfect for showing different features or specifications of a solution without cluttering the page.

Best Practices:

Logical Organisation: keep the tab titles short and descriptive, clearly indicating the content inside each tab.
Easy Navigation: make sure it’s easy for users to switch between tabs without confusion.

Consistent Page Elements

Quick links

Hero

Full Width Text

Split Image and Text

Split Feature

Cards

Call to Action (CTA)

Testimonial

Full Width Image

Related Content

Columns

Accordion

Table

Number Focus

Share

Carousel

Tabbed Content