There are contexts where a design needs to represent several items, each with inconsistently sized images. One example might be a customer database, where the customer's logo is an identifying feature. These can be very difficult to design for.

Are there any common design 'tricks' for ameliorating the irregularities caused by variations in image size? Any visual elements that reduce the effects of the lack of alignment, or that decrease the impact of gaps caused by rigid grid systems?

For instance, I've seen some designs that handle this by randomly rotating and layering the images for a 'photoboard' effect, but that only works well in particular circumstances.

2 Answers 2


There are times when you just need to abandon the grid and just focus on the placement of the content so that the logos/images are clearly delineated and a person can quickly differentiate between them as shown in this image below:

enter image description here

Alternatively if the logo sizes have huge variations,you can use those variations to create a descending or ascending order or even random look as below

enter image description here

Lastly as Kimberley Dietemann pointed out if these are not valid options,the most feasible way is to re-size the logo to an acceptable grid size and place it on a background and place it in the grid

enter image description here


Stretching or shrinking images can result in unpleasant visual effects. However, it wouldn't be hard to analyze the size of the image, resize it if necessary, and then place it on a black or white background that's always the same size.

For example:

enter image description here

A transparent logo .png could be centered easily. Users could choose black or white based on their logo colors.

(Disclaimer: I'm more of a user research / usability person vs. visual design, so ymmv ;)

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.