Explainer Bands

Module One

Element Break-Down

This custom design highlights and explains different features of the product and incorporates a unique animation that expands the layers of the graphic as you scroll to add visual interest to a site.

Criteria

  • SEO

    This sample includes various text categories and body copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    Graphic and text boxes stack for smaller screens. Graphic is simplified to a static image.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Graphic or various graphic layers/elements and iconography.

  • Required Text

    Band heading and headings, subheadings and descriptions for each callout.

explainer band example

Play Module

Module Two

Process Explainer

This kind of band allows a company to go into detail about multiple steps in a given process that a potential customer can click through.

Criteria

  • SEO

    This sample includes various text headings and detailed body copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    Band scales and is simplified to just the overall process description for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Graphics or illustrations for each step.

  • Required Text

    Main band heading and description, heading and description for each step.

explainer band example

Module Three

Process Explainer 2

Another approach that a company can use to show multiple steps in a given process, simplified to a single-page band overlaid on a background image.

Criteria

  • SEO

    This sample includes various text headings and body copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    For smaller screens, the band scales and is simplified with no background image; content stacks vertically.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    High quality background image and iconography.

  • Required Text

    Band heading and headings and descriptions for each step.

process explainer example

Module Four

Expertise Explainer

This particular band explains and illustrates various key aspects of the company through incorporating detailed descriptions and illustrations that viewers can scroll through using the arrows.

Criteria

  • SEO

    This sample includes various text categories and body copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    For smaller devices, the band is simplified to just the heading that links to the content. Larger bands with lots of illustrations and callouts will not translate well to small screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Iconography and illustrations.

  • Required Text

    Band heading and headings and descriptions for each page of the band.

explainer band example

Module Five

Expertise Explainer 2

This sample adopts a card-like style to organize and explain various areas of expertise that the company holds and that viewers can scroll through using the arrows.

Criteria

  • SEO

    This sample includes various text categories and body copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    Band scales down for smaller screens so that fewer cards are visible at a time.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Iconography and high quality background image.

  • Required Text

    Band heading and titles and descriptions for each card.

explainer band example

Module Six

Comparative Explainer

Often used to highlight features of a product, this custom design compares two distinct products with interactive elements in a visually interesting way.

Criteria

  • SEO

    This sample includes various text categories and body copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    Text boxes and graphics stack for smaller screens. Interactive elements also stack and must be clicked on mobile devices.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    High quality graphics, high quality images for each interactive element, and background texture.

  • Required Text

    Band heading and description, callouts for each product, and descriptions for each interactive element.

explainer band example

Module Seven

Step-By-Step Explainer

Another approach to showing multiple steps in a given process, incorporating iconography and imagery to make it visually easy to follow.

Criteria

  • SEO

    This sample includes various text headings and body copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    Elements scale and stack for smaller screens, image is not included on mobile devices.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    High quality image and iconography.

  • Required Text

    Band heading and headings and descriptions for each step.

explainer band example

Module Eight

Explainer

This particular band integrates a tab style that helps break up information and allows viewers to click through each tab to see the related images.

Criteria

  • SEO

    This sample includes various pieces of copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    For smaller screens, band scales down and simplifies to images with captions that continuously scroll.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    High quality images.

  • Required Text

    Band heading and captions for each tab.

explainer band example

Module Nine

Explainer

This is another approach to explaining multiple steps in a given process, incorporating lifelike imagery to make it visually easy to follow.

Criteria

  • SEO

    This sample includes detailed copy which could include keywords necessary for on-page SEO.

  • Responsiveness

    Text and imagery scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    High quality images.

  • Required Text

    Band heading and descriptions for each step.

explainer band example

Request More Information

  • I am interested in