Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Ditch the Margins

Whoa says thumbnails have to be spread out? These sites decided to embrace closeness and squish the pictures all up against each other. The result is an impression of a single object made up of many parts. It’s not only highly space efficient, it’s quite attractive.

This technique is obviously best to use if you don’t need to add a lot of contextual information to each image, though the hover event does provide a good opportunity for some additional text or graphics.

Shankar

screenshot

Egopop

screenshot

Free Faces

screenshot

Analogue Digital

screenshot

Elliot Lepers

screenshot

xMind

screenshot

Vary the Vertical Height

When you vary the vertical height of the images in the gallery, the result is a much more organic looking page. Though the is still governed by uniform rules, the layout doesn’t feel as rigid as with a typical grid.

This is obviously the perfect solution for displaying images that just happen to have different heights, but should also be a consideration whenever your overall page theme is relaxed or free flowing.

404 Not Found

screenshot

Paul Mitchell Kelly

screenshot

Just Sean

screenshot

Vertical Grain Design

screenshot

Don’t Be Square

Squares are boring! If you want your gallery to break the mold, try experimenting with different shapes for your thumbnails. The typical second option is circles, as you’ll see below, but as the first example shows, it’s definitely effective to go even further and do something all your own.

Arnaud Beelen

screenshot

Sellected

screenshot

Center of Attention

screenshot

Passion About Design

screenshot

Keenan Wells

screenshot

Crooked Pictures

CSS3 makes it easy to create lots of great visual effects. One recently popular image treatment has been to use CSS transforms to rotate the images in a gallery, an effect that’s often partnered with an animation on hover.

The result looks a lot like pictures hanging crookedly on a wall or polaroids spread out on a table. Here are a few different variations of the effect.

Mooreish

screenshot

Broke Design

screenshot

Born In the Barn

screenshot

Shadow Games

CSS box shadows are a fairly simple property to work with. Just set your position and feathering and you’re ready to go. Many developers have discovered recently though that by combining shadows with transforms and pseudo selectors, you can achieve a ton of different and impressive results.

The shadows that you apply to your gallery can change the overall feeling of your entire page. Check out the shadows below and how they give the illusion of actually reshaping the image.

CMYK08

screenshot

Signature Creative

screenshot

Bronco

screenshot

Calabriae Studio

screenshot

Chase Farnum

screenshot

Dribbble

screenshot

Atelier

screenshot

Other Inspiring Galleries

Toni Digrigio

screenshot

Andrea Ives

screenshot

We Are Mostly Serious

screenshot

Blacktie

screenshot

Ben Bate

screenshot

Andre Kreft

screenshot

Leeds Graphic Designer

screenshot

Anderson de Paulo

screenshot

Barnt & Arnst

screenshot

James White Smith

screenshot

Ketch Studio

screenshot

Who’s Guest

screenshot

Media Rain

screenshot

Chris Arbini

screenshot

Sumit Paul

screenshot

Found Colour

screenshot

Hoban Cards

screenshot

Split

screenshot

A Punkt Hella

screenshot

Kubi Media

screenshot

Cuban Council

screenshot

Elegant Seagulls

screenshot

Froot

screenshot

Arts Code

screenshot

Mathieu Clauss

screenshot

Show Us Yours!

Now that you’ve seen our collection of some of the most interesting galleries around, it’s your turn to share. Leave a comment below with a link to any galleries that you’ve either built or simply found inspirational.