1

I am putting a slider on a client's site, and want a caption and call-to-action in a 'floating' box to the side, like this:

enter image description here

They were concerned that they will have issues finding proper images with this format (that the image will require a focus in the left 2/3 of the image, and that the aspect ratio might be too wide). We don't want to make the aspect ratio of the slider bigger, so we will likely go with this format:

enter image description here

They like the aspect ratio with this option, but the problem now is that it looks like the caption area is not related to the image at all (especially with other content above and below the slider). What is the best way to indicate that they're related? I've considered a simple triangle/arrow, but there must be a better way of going about it.

1

So you want to create feel of commonality between blocks. It is clear visual design task. Experiment with some Gestalt principles to solve it. Some options are:
gestalt principles

You also could combine the options to find the best solution.

  • Thank you for the Gestalt link and for making the diagrams! :) – Nathron Jun 22 '13 at 23:33
1

I think one of the best ways in this context is to use colours from your overall colour scheme to make this message stand out, so if the page is mostly blues with a hint of yellow, make the caption area blue with some yellow writing (maybe not all).

Additionally, making sure the image and text are linked in some semi-obvious way always helps, although being completely obvious can lack creativity and appear cliche.

If you can alter the design slightly, you can have the image take up most of the container, with the caption box overlaid with transparency, that would give a feeling of the caption being attached to the image with the background showing through slightly.

You can see a work-in-progress example of this here.

I haven't gotten the individual slide messages to stand out quite as much as I want yet, but I'm working on it.

1

An arrow indicator should do the trick. If you do not want to put the arrow inside the box, you can have it attached on the edge of the box for the same result.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.