Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

My problem is that I have an element in an iOS app that is represented with a variable number of images (2->5). For 2, 3 and 4 images simply using something like this works great.

What would be the perfect layout for a gallery of 5 images.

share|improve this question
add comment

1 Answer

up vote 11 down vote accepted

There are various approaches to this problem, but largely you need to consider the use of whitespace, grouping, and symmetry to create a balanced impression, as well as whether one or two of the images might reasonably act as primary images.

Websites like Google and Flickr generally tend to resize some images to fit nicely into a row, but when your row only has 2 or 3 images in, there's not that much choice (if any) in the sizes you can use whilst aligning the top and bottom edges nicely (although auto cropping may be a possibility - see further down).

So with 3 images you might have choices like these:

  1. This layout uses 3 square images of identical size which is the most sensible way to arrange 3 items with equal weight. It's a pleasing and balanced format and a common one for artists - eg triptychs of paintings or photographs.

    enter image description here

  2. Compare this with a layout where one image is a primary image and the two secondary images are arranged so as to align top and bottom. You can mix and match square or rectangular images (whether portrait or landscape)

    enter image description here

For 5 images you actually have more choice if you can resize some images:

  1. You can have the one primary image:

    enter image description here

  2. Or you can have two primary images (either landscape or portrait orientated layout):

    enter image description here

  3. Or the same thing works for all square images too - or even two rectangular (top/bottom cropped square) top images and three lower square images.

    enter image description here

  4. If you need to keep all the images the same size you could opt to introduce a sixth spacer element:

    enter image description here

  5. Finally, you could opt to overlay the fifth over the intersection of the other four, as you would commonly find on postcards - but this depends how central the content is generally within your images:

    enter image description here

For me personally - I prefer the two primary images in the top row most pleasing, such as these examples:

Using 5 uncropped images:

enter image description here

Or if feasable, auto-cropping the smaller images as required in order to keep the core content, but when the user clicks on an image to view it, you obviously would show the full image

enter image description here


An interesting little diversion here is that if you want 2 squares on the top and 3 on the bottom each with edge length L, and you can choose the gap D between each image, such that D = 0.236 × L then you will end up with the ratio of the edges of the top squares to the bottom squares being equal to the golden ratio.

That would look something like this - which does actually have an odd kind of beauty about it - once you get over the chunky spacing relative to the examples above.

enter image description here

share|improve this answer
    
Thank you for your answer! 3 looks like the best solution in my case as we have square images. –  Moxy Oct 12 '13 at 17:33
1  
@Moxy - I added an update for if you're using squares... :-) –  Roger Attrill Oct 12 '13 at 18:24
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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