Adding Navigation to Photo Galleries

Photography | February 17th 2010

Photo galleries are the heart of soul of every photographer’s portfolio. They give potential clients an overview of your work, talent, expertise, but also a chance to peek into your personality. The way you structure your photo galleries may offer many insights into your professional profile: organized / disorganized, meticulous / sloppy, tasteful or outlandish. Creating good photo galleries isn’t just about uploading beautiful photos but also about creating an easy, intuitive and intelligent viewing experience for your audience.

Getting Started

Obviously, the first step is to choose a gallery from the ‘Galleries’ menu on the editor. If you’re new to web design, it’s best to experiment with the ‘Slide Show’ gallery first. ‘Slide Show’ is the most common and widespread gallery, and – the easiest one to use. It offers a clean, minimalist layout which lets you see what your photos look like at their most basic.

Choosing Skin

Once again, start with a basic skin before experimenting with the more unusual ones.First-timers will be more comfortable choosing the ‘blank’ slide show. However, even professional designers will normally choose the blank slide show to present their work. This comes from a design philosophy that maintains that ‘the photo is the art’ and that adding shapes to it is at best superfluous, and at worst plain vulgar.

Managing Photos

*Tip: Some people find it easier to delete all dummy photos from the gallery before uploading their own. To do this, click on the dummy photo and hit ‘Delete’.

Adding Navigation to Photo Galleries

*Tip: If you want to re-size a gallery, click on one of the top or bottom far end corners and drag to desired effect.Note that dragging from middle corners will stretch the photos and change their proportions.


Choosing Photo Settings
Click the ‘settings’ button on the bottom menu bar. You’ll see four different options: Auto-crop, Center, Bottom and Stretch. Here’s a little illustration to give you an idea about how each option affects your photo:

Choosing Photo Settings


Adding Navigation Controls
In order to create navigation you need to add a menu to your gallery.

If you’re using a regular Wix page click on a gallery and choose ‘Add Menu’.

If you’re using a mini-page click on the mini page and go to ‘Add Menu / Navigation’.

There are plenty of options to choose from: horizontal, vertical, thumbnail, and controllers (arrows).

Once you made your choice, customize your menu any way you like:

1. From Horizontal to Vertical



2. Change background, background click, and background mouse over colors



3. Change font and size by clicking ‘format’



4. Change text color – default, mouse over and mouse click – by clicking ‘format’



*Tip: Not happy with your gallery’s or menu’s look and feel?Click ‘change skin’ and try another design.

Choosing Transitions

Transitions are the way slide shows move from one photo to another. Here too you’ll find a variety of animations.

*Tip: Always consider the viewer’s comfort. Most people prefer subtle movement and glare-free animations.

Why Using a ‘Slide Show’ on your Home Page is a Good Idea

There are two words that can make even the toughest online business owner break into a cold sweat: ‘bounce rate’.

What is Bounce Rate?

Bounce Rate is a term used in web site traffic analysis. It essentially represents the percentage of initial visitors to a site who “bounce” away to a different site, rather than continue on to other pages within the same site. A high bounce rate indicates that the homepage or landing page you created aren’t appealing enough or relevant enough to draw visitors deeper into your site.

Improving your Bounce Rate

Your home page is the shopping window of your business – your sole opportunity to make a first good impression, stir interest and attract (positive) attention. This can be achieved by using a Slide Show gallery with no navigation controls. Leaving out navigation controls means two things:

1-Visitors are given an appetizer – a sample of your best work – as soon as they land your page. This creates interest and anticipation among visitors to see more of your work.

2-In order to see your portfolio they have to navigate to another page where they can find additional added value.

Here’s an example of a Wix member who made a fantastic home page using a ‘Slide Show’ gallery. Notice that there’s no internal gallery navigation and that you have to click on the bottom menu to see more of his work:

Paulo Ferreira Photography

Paulo Ferreira Photography

*Tip: Use your best photos for your home page. Give your visitors a reason to click their mouse again.

Inspiration

Here are a few websites who make clever and beautiful use of photo galleries. Enjoy!

Adam Young Photography

Adam Young Photography

LE Photography
Adela Rozsivalova Photography


Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>