If you’re a photographer, then you already know you need a great web gallery. Even if you’re not, you might find yourself in need of a great way to showcase some photos, whether they be product shots, event documentation or slick headshots.
But how do you make a web gallery that works smoothly, provides a great user experience and shows your pics off in style? Stay tuned and we’ll walk through the do’s and dont’s of modern web gallery design.
Use Amazing Photos
Your gallery can be as spiffy as they come and it won’t make a lick of difference if the photos you are showcasing are substandard. If you are going to feature photography in a gallery on your website, you better make sure it’s worthy of being seen. A good photograph is well-lit, has a nice sense of composition, and supports your brand’s culture.
If a photo is poorly-lit or washed out, is composed in an unattractive way or seems counter to your brand in some way, don’t use it. No photo is better than a bad one.
Stay Away From Sliders
Sliders used to be all the rage in web gallery design, and we’re still seeing them pop up here and there. Don’t use them! Sliders provide a less-than-optimal user experience, forcing people to hover around waiting for the next slide to appear. Even sliders with navigation that allow you to move through the slides quickly impose an unnecessary delay between page load and the user being able to see the full array of images at their disposal.
If you must use a slider, make sure the navigation for it includes thumbnails of all the photographs included, so that visitors can still get a sense of the whole gallery without manually paging through the thing.
There is one exception to this rule, which involves lightboxes, but we’ll get to that later on in this post.
Get on the Grid
So, if a slider is out of the question, than what to do? In our experience, a grid is the best way to layout a modern web gallery. Whether it be a tiled masonry grid, or standard rows and columns of square thumbnails, a grid provides an attractive way for people see the full contents of your gallery at a glance, while allowing them to dial into a specific image very quickly.
For galleries with tons of content, you can either paginate the grid, so that it loads a whole new page after a certain number of images are shown, or auto-load new images to the grid when a visitor scrolls to the bottom.
After the Click
The default behavior of most browsers when you click on a direct link to an image is to load that image in a new window or tab, all by itself. While this does provide a large view of the image clicked, it fails to deliver a number of features that are available with another solution—lightboxes.
A lightbox creates a pretty environment for display of single images when clicked on a website. Instead of displaying the photograph in a new window, they create an overlay on the current page and display the image there. This has a number of advantages—it keeps the user on the gallery page, allows for greater customization of the image viewing experience and design and lets you add interactive functionality to the experience such as social sharing or the ability to download the image directly.
The one place you should consider using a slider (as I mentioned above) is in a lightbox. Once the visitor has clicked an image, it can often be a good idea to allow the user to then slide from one image to the next within the lightbox.
Alrighty! Follow these easy tips and the gallery on your website will be spiffy and easy to use. Want to make sure that your web gallery is pulling it’s weight? Contact the design team at Solamar, and we’ll get you set.