Callout Bands

Callout bands are often integrated into a website when there is an interesting concept or message that we want to highlight on the page.

Module One

Interactive Graphics

Often used to highlight features of a product, show components in a system or identify areas on a map, these interactive graphics add visual interest to a site.

Criteria

  • SEO

    Little to no impact.

  • Responsiveness

    Graphics scale and interactive elements are simplified to plain text for smaller devices. Larger images with lots of callouts will not translate well to small screens.

  • Cost / Complexity

    This style of band is highly customized and costs correlate to the complexity of the individual layout and graphics.

  • Required Assets

    Requires a main image or illustration and text for each area to be called out.

  • Required Text

    Text descriptions for individual elements and a brief paragraph or sentence explaining the overall graphic.

callout band example

Play Module

Module Two

Custom Graphics

This option represents a simpler, static representation of a graphic with highlighted points and custom iconography on a faded background image.

Criteria

  • SEO

    Minimal due to limited text, but graphic can be optimized for image SEO.

  • Responsiveness

    Image scales down for smaller devices.

  • Cost / Complexity

    Layout is straight-forward but custom iconography and image treatments can increase cost.

  • Required Assets

    Main graphic, background image and iconography.

  • Required Text

    Text for highlighted features and title.

callout band example

Module Three

Layered Graphics

Layered graphics are often used when you want to show a unique image in the foreground with a separate image in the background or overlay other graphical elements onto an image like the architectural line drawing shown here.

Criteria

  • SEO

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

  • Responsiveness

    Image layers scale and text adjusts to fit available screen space.

  • Cost / Complexity

    Dependent on graphics and desired focal point in the band.

  • Required Assets

    Background and foreground images.

  • Required Text

    Any text to be overlayed in graphic area.

callout band example

Module Four

Collage of Photos

Collages are a classic approach to placing multiple images in a small area.

Criteria

  • SEO

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

  • Responsiveness

    Elements scale for smaller screens, images disappear for mobile devices.

  • Required Assets

    High quality images.

  • Required Text

    A simple text heading and descriptive paragraph.

callout band example

Module Five

Historical Band

Another approach to a callout band with full image on one side and a small collage on the other.

Criteria

  • SEO

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

  • Responsiveness

    Elements scale and stack for smaller screens, full image disappears for mobile devices.

  • Cost / Complexity

    A simple and cost-effective way to include images.

  • Required Assets

    High quality images.

  • Required Text

    A simple text heading and brief paragraph.

callout band example

Module Six

Informational Band

This is an example of a standard band applied to many websites featuring a background image and text box to provide information on a product, service or solution.

Criteria

  • SEO

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

  • Responsiveness

    Elements scale and stack for smaller screens, background image disappears for mobile devices and is replaced with a solid background.

  • Cost / Complexity

    Simple and cost effective.

  • Required Assets

    High quality image, any desired iconography or graphics.

  • Required Text

    A simple text heading and brief paragraph.

callout band example

Module Seven

Informational Band 2

Customized graphics and iconography.

Criteria

  • SEO

    This particular callout band integrates customized graphics and iconography to introduce a concept with specific callouts in a visually appealing way.

  • Responsiveness

    Text, icons and buttons scale and stack for smaller screens, background image disappears for mobile devices and is replaced with a solid background.

  • Cost / Complexity

    Dependent on graphics and iconography.

  • Required Assets

    High quality image and iconography.

  • Required Text

    A simple text heading, brief paragraph and callouts.

callout band example

Module Eight

Image-Based

Another approach to showcasing an image with a paragraph of text in a band to provide information on a product, service or solution.

Criteria

  • SEO

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

  • Responsiveness

    Elements scale and stack for smaller screens.

  • Cost / Complexity

    Simple and cost effective.

  • Required Assets

    High quality image and any desired iconography or graphics.

  • Required Text

    A simple text heading and brief paragraph.

callout band example

Module Nine

Layered Boxes

Often used to organize a lot of information and present it in a less overwhelming way, these layered boxes add a unique interaction to a site.

Criteria

  • SEO

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

  • Responsiveness

    Text and background image scale and interactive boxes are simplified to a single box with links for smaller 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, any desired iconography or graphics and information for boxes.

  • Required Text

    A title and descriptive text for each box.

callout band example

Module Ten

Illustrative

This particular callout band integrates a standard image and text lockup with a simple animation to engage visitors and provide information in a unique way.

Criteria

  • SEO

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

  • Responsiveness

    Elements scale and stack for smaller screens, animation does not play for 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 graphic or illustration and information for animation.

  • Required Text

    A title, brief paragraph and content for animation.

callout band example

Module Eleven

Image-Based

This option allows you to apply a real life screenshot of a computer screen onto a stock photo to incorporate a relevant image without needing to do photography.

Criteria

  • SEO

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

  • Responsiveness

    Elements scale and stack for smaller screens.

  • Cost / Complexity

    A simple and cost effective way to achieve a relevant photo without needing to pay for photography.

  • Required Assets

    High quality screenshot image, quote and iconography.

  • Required Text

    Paragraph of text and quote.

callout band example

Module Twelve

Interactive Graphics

Another approach to incorporating interactive graphics in order to highlight features of a product, show components in a system, or identify areas on a map while adding visual interest to a site.

Criteria

  • SEO

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

  • Responsiveness

    Elements stack, graphics scale and interactive elements disappear for smaller devices. Larger images with lots of callouts will not translate well to small screens.

  • Cost / Complexity

    This style of band is highly customized and costs correlate to the complexity of the individual layout and graphics.

  • Required Assets

    Requires a main image or illustration and text for each area to be called out.

  • Required Text

    Text descriptions for individual elements and a brief paragraph or sentence explaining the overall graphic.

callout band example

Request More Information

  • I am interested in