Composing a Full Width Slider Image in Apollo

full-slider-example

One of the biggest challenges in working with an extra wide, banner image is composition, especially when captions are designed to overlay the image itself.

Without pre planning, key parts of the image can be obscured by the text box, negatively impacting the power of the image and its’ role of building narrative and dimension to the text of the page.

In the image above, we can see how this occur.  The boy on the left is partially obscured by the caption box, which is highlighted in yellow. That’s the standard size of the caption box in the Apollo theme. Apollo, however is flexible – a content box could conceivably take up a much larger space using the Excerpt text box instead of the standard text excerpt (which is limited to fifty words.) The slightly shaded yellow area represents the entire visual area that could potentially be obscured by a caption box.

In addition to the caption box, an additional challenge in composition is presented by the previous and next arrow buttons. While usually not a major hindrance to photography, it can provide an issue for graphic design, as the buttons can obscure text and graphics within a banner designed for the slide. Above, you can see where these buttons would appear in green.

The transparent PNG attached below was created by Web Services to assist content managers in framing their images for the available space. Use the PNG to overlay your images in photo processing and editing software to see where potential problems might occur before uploading to the site.

Photo Credit: elyse patten via Compfight cc

About the Author

 Avatar

Jeffrey Stevens

Jeff Stevens is the Assistant Web Manager for UF Health Web Services. He focuses on user experience, information architecture, content strategy, and usability.

Read all articles by Jeffrey Stevens