7 days of unlimited video, AE, and Premiere Pro templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Photo & Video
  2. Photography

How to Show a Photo Portfolio on Your Website

Read Time: 7 mins

In this lesson, the eighth in a series from Chamira Young's course The Photographer's Portfolio, you'll take a look at a handful of web photography portfolios learn the effective elements and strategy behind each one. 

Choose a Clean Design with Simple Menu

When you land on Chamira Young's homepage, you'll see a clean design and may recognise some of the images used as examples in previous lessons on selecting images for your portfolio. There is a simple menu on the left hand side of the home page.

Choose a Clean Design with Simple MenuChoose a Clean Design with Simple MenuChoose a Clean Design with Simple Menu

Use Bottom of Page for Contact Info

At the bottom of the page there is a basic menu and contact information including a link for Facebook. This bottom footer is repeated on every page of the website.

Use Bottom of Page for Contact InfoUse Bottom of Page for Contact InfoUse Bottom of Page for Contact Info

When you click on the Travel + Nature gallery, you'll see that there is a simple menu at the top of the page.

Provide a Menu on Every Page

Keep your menu simple so that people can easily find their way around your siteIf they're not able to figure out the navigation, chances are they're going to leave the site.

Provide a Menu on Every PageProvide a Menu on Every PageProvide a Menu on Every Page

On the upper left hand corner, there is basic navigation information so that people know exactly where they are within the site. These are also known as bread crumbs and they keep people from feeling disoriented.

Provide a Menu on Every PageProvide a Menu on Every PageProvide a Menu on Every Page

Choose a Reliable Portfolio Site or Theme

This site was built with Zenfolio, photography websites that makes it easy for photographers to showcase their work and control the layout and size of their images. Other services will do that as well. 

Offer Multiple Viewing & Navigation Options

Offer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation Options

If images are shown in smaller thumbnails, viewers should be able to click on the image to get a bigger view of it. There should also be simple navigation like arrows on either side of the image to move back and forward though the portfolio.

Offer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation Options

When viewers are done with the larger view, they need a simply way to return to the smaller view. This X in the upper right corner provides an easy exit back to the smaller view. 

Offer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation Options

If viewers want to move from there to the original gallery, the homepage or see all photos, clicking the breadcrumbs we mentioned before will allow them to do so. Giving viewers the option to view images from the gallery page as a slideslide show is also very helpful. 

Offer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation Options

For example the button on the right hand side of the gallery page will take them to a completely full screen mode, where they can cycle through the images. When they're done with that, they can select X up in the corner, and they're back in the gallery.

Offer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation OptionsOffer Multiple Viewing & Navigation Options

The point is to make viewing images as simple as possible. You don't want visitors to be distracted by the design of your site.

Contact Page

Provide a simple contact page, where visitors can send you an email message, fill out a contact form, as well as contact you on various social media. 

Four Other Web Portfolios Worth Viewing

Jess Hooper

Jess Hooper offers a simple home page where right away you're able to focus on the images. There's basic navigation on the left hand side as well. When you go to one of the galleries, you'll see that she still keeps the simple theme going so that your eye is drawn to the images.

Jess HooperJess HooperJess Hooper

On this site you simply use Previous and Next to move through the images in each gallery or you have the option of seeing all the images at the same time when you click Show Thumbnails. 

Jess HooperJess HooperJess Hooper

Olivia Johnston

Olivia Johnston is another photographer who uses a nice clean design on the home page that gets us engaged with her images immediately.

Olivia Johnston Olivia Johnston Olivia Johnston

Her website is responsive as well, and so you see that the image actually resizes with the browser window. Again, this is important because most likely people will view your work on several different devices. Not just a laptop, but probably a tablet and maybe even their phones.

Olivia JohnstonOlivia JohnstonOlivia Johnston

Each of her portfolios are constructed slightly differently depending on the story she is telling, but they all provide images that can be seen in larger size, easy navigation using arrows and she includes text under each project so that you have a little bit of background on the portraits.

David Bode

David Bode website dedicates maximum space to this images and provides arrows to the left and right of the images so you can cycling through them and study each image one by one. He offers a simple menu at the top that allows you to access three distinct portfolios: his portrait, commercial or product gallery.

If you scroll down you can access these same three portfolios. You will also notice he has social share buttons in his footer as well.

David BodeDavid BodeDavid Bode

If you head over to portraits, you'll be taken to the images in that gallery, but first he offers a brief description of his service that adds a personal touch that allows the viewer to get a sense of him as a photographer.

David BodeDavid BodeDavid Bode

When you scroll down, you're taken to the images in his gallery.  When you select an image, you are taken to a large version of that image. From there you can cycle through all the images using arrows.

David BodeDavid BodeDavid Bode

Brett Gundlock

Brett Gundlock is another example of a photographer that uses a simple and clean style to present his portfolios. When you land on his page you are featured to an eye-catching selection of his images.

Brett GundlockBrett GundlockBrett Gundlock

There is a menu at the top of the page where you can select a portfolio from his commissioned work or his personal projects. Depending on the subject you choose, you will be treated to large photos which dominate the screen or photos combined with text which gives a background of the images.

Brett GundlockBrett GundlockBrett Gundlock

As is the case with the other portfolio sites featured here, when you click on an image you are treated to a larger view of the image and under each you can click on the words Previous or Next to back and forward between images or click the X in the upper right hand of the screen to go back to all the images in the portfolio. 

Brett GundlockBrett GundlockBrett Gundlock

As you can see from the selection of web portfolios featured here, the type of web portfolio you create depends entirely on your style of photography and your personal branding, but the important features that all effective web portfolios have in common are:

  1. Simple and clean layout
  2. The focus is always on the images
  3. Navigation is simple, easy and logical
  4. Contact details are provided

Next Steps

Discover more lessons on how to make a photography portfolio.

Free Video Courses: Follow Envato Tuts+ on YouTube

Want to get more great tips on everything related to photography? Follow Envato Tuts+ on YouTube and access FREE courses like "Photoshop Retouching for Beginners". Learn the secrets of Photoshop image retouching with Abbey Esparza. 

More Resources for Photographers

Here are more top tutorial and resources for Photographers to try from Envato Tuts+:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Photo & Video tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.