15 Tips: Creating the Perfect Photography Portfolio Website

Showcasing an image based portfolio on a website can be a tricky task. It’s usually a lot different than a normal client or business website. With a normal website, there is usually a consistent structure, which includes a header, a navigation menu, sometimes a sidebar, and usually a footer. However, when showcasing photography, there are no limits. You don’t need a navigation bar, header, or footer, if you don’t want to have them. The more creative you can be, while still focusing on the main goal of your site, the more attention you’ll gain.

Note from the editor: Today we’ll be taking a peek at a very special niche inside web design: Photography portfolios. Owen Conti is an author from our sister site, Phototuts+, and he’ll be walking us through some useful tips for creating a great portfolio. He’ll be speaking with photography in mind, but just about any image based portfolio (illustration, graphic design, painting, or even web design) can benefit from these tips… so we hope you enjoy them!

Tomorrow we’ll be rounding up some of the best 30 photography and image-based portfolios on the web right now!

---

Introduction

Your online photography portfolio is intended to either attract clientele or show off your photos and images. Some people choose the latter, adding bits of text to each photo they post, creating a photo blog. That type of site is not intended to attract clients and bring home the cash, but instead be a viewing gallery for whoever stumbles across it.

Photo portfolios typically have two or three main sections:

1. The gallery
2. A contact section
3. Sometimes an about section is included

Those are the three main sections to a photography portfolio. It allows the client to see your work, if they like it they can either read more about who you are, or get in touch with you. Although it sounds simple, there are many questions and concerns that can arise, such as:

• What size should the photos be?
• Should I compress them at all?
• Should I use Flash or HTML5?
• Should I use an automatic slideshow?
• How many photos should I include?

Throughout the rest of the post, we will go through 15 tips that can help reduce the concerns you may have about your photography portfolio.

---

The Common Thread: What do all great portfolios have in common?

All great portfolios have three major details in common:

1. The first is a narrowed down selection of your best, and only your best, images. I say a narrowed down selection because I, personally, hate going to a photographer’s site to have to sit and wait while 50 photos load, and then somehow I have to navigate through them. I’ll touch more on this later in tip 7.
2. In addition to your best images, great portfolios include a method of contact for the potential client. You’ll never gain any leads from your portfolio if the viewers can’t get in touch with you.
3. The final detail all great portfolios have in common is that they all use high-resolution images. Despite load times, when it comes down to your portfolio, you want to show off the best quality you can. I’ll expand further in tip 5 below.

If you include these three simple details into your photography portfolio, you’re already off to a great start!

---

15 Tips For Your Portfolio:

1. Consider Your Target Demographic

   Your portfolio needs to reflect your target demographic, whether it is a couple looking for a wedding shoot, or an agency looking for a commercial shoot. If your portfolio gives off the wrong image, you won’t attract any of the clients you want.
   Think of a wedding photographer’s portfolio, typically white, clean, and easy to use. This is suited towards the target demographic of a wedding photographer: typically younger couples (sometimes females are in charge of certain decisions) with dreams of the perfect wedding. Typically speaking, weddings are full of white, with beautiful flowers and rays of sunshine. If you want to attract wedding clients, you need your portfolio to resemble a wedding.
   At the same time though, if you primarily shoot fashion photography, chances are you shoot hip, trendy subjects and that is what your target demographic is looking for. Have your portfolio reflect that. It sounds too simple to over think, but you’d be surprised what some people surround their best work in.
   
   http://www.olivialaurenphotography.com/

2. Sketch Out a Layout

   Sketching out a layout before you even touch the mouse is a common practice amongst web designers, and it should be no different for your portfolio. The reason why I found sketching to be helpful is so that I don’t lose focus of what my intentions are. If we think back to Tip 1, we want our portfolio to be targeted specifically to our demographic. This includes colors, layout, navigation, icons, typography, everything. If you sketch out your idea while it’s fresh in your mind, you won’t lose track of it or have any other ideas write over it. It’s an easy way of sticking to your original plan.
   Remember though, it’s okay to deviate from the plan if it’s for the better of your portfolio. If you end up thinking the thumbnails would be better off three wide rather than two, then go for it. Try to stick to the sketch as much as possible, when possible. It’s there to assist you, not cement you in place.
   
   Sketch Your Design Before Touching the Computer!

3. Add Support for Dynamic Content

   When sketching your site, remember to add support for dynamic content. Imagine you decide you want to pull your Flickr feed to your portfolio. Well sure it looks good when there’s 12 photos, but what about when there’s 21 or 36? How will your portfolio look with an odd number of images compared to an even number, like you sketched it out to look like?
   These are the type of questions you have to ask yourself as you sketch out your layout. How can I add more images to my layout without cluttering the design? Is pagination an option? Will I only be able to keep XX amount of images visible at a time?
   I can’t tell you how to sketch out your portfolio, but I can give tips from personal experience. Try to limit the amount of photographs you have on each page so it doesn’t feel like your cramming content into your portfolio. Separate photos by using categories or pages. Pagination works well, but only if done properly. Consider pagination only if you have over 12 images per page. I find 12 to be a good balance point, but anything over and I start losing my way.
   
   http://www.danielkennedy.com/

4. Try to Keep the Contrast High

   Depending on the style of photography, images usually look a lot better when you view them on a black background. This is typically because there is more contrast than when viewing against white. Contrast helps bring out the colors of the photo, which in turn, makes the image appear more vivid and stunning. If you do any type of sports, commercial, HDR, nature or portrait photography, try viewing your work on black and then on white and see which one looks better to you.
   When designing a dark site, it’s usually a good idea to have some flare of color added in somewhere. It can be your logo, or your navigation, anything. Black and white can be extremely effective, but adding a touch of color adds a touch of personality.
   
   http://www.davehillphoto.com/

5. Only Use High Resolution Images

   When a potential client goes to your view your portfolio, they expect to see high resolution, professional looking images. So give them that! Don’t display “full size” images at 300px by 300px. The viewer is there to see your work at its greatest quality, not a low quality optimized for bandwidth. When you consider your target demographic, chances are high that they are located near you. By now, most of us have high-speed cable or DSL connections, so utilize them.
   Provide high-resolution images for your clients and in return they may have to wait a couple seconds longer. If they’re that impatient that they won’t wait for your portfolio to load the best quality possible, then personally speaking, they’re too impatient to be my client.
   Everything on the Internet comes with a price; it just so happens that the price for high-quality work is longer load times.
   
   http://www.levonbiss.com/

6. Use a Large Viewing Area

   Now that you’re using high-resolution images, why not use a large viewing area as well? W3Schools reports that in January of 2011, 0.6% of users were still using a display resolution of 800 x 600. That means, if you want to cover all your bases, design your portfolio to fit into those dimensions. That way, users who are above 800 x 600 can still easily access your portfolio. For users on tablets and smart phones you can resize your portfolio to fit their device.
   A trending topic the past couple months in the web design world is “Responsive Web Design”; responding to your users. Have your site adjust its layout if a user has a resolution smaller than normal. If a user has a larger screen, try making your layout adapt by loading in larger images. By using “Responsive Web Design” in your portfolio, you can achieve an overall greater user satisfaction. Nothing is worse than viewing a site on your iMac, only to have it fail on your iPhone the next morning on the train ride to work.
   
   http://www.evaankheraj.com/

7. Narrow Down Your Choices of Images

   Although you may have a large collection of images you wish to share in your portfolio, try to limit your selection to the stronger pieces. Too many images in your portfolio can increase load times, and provide the viewer with too many options. It can make your portfolio feel like it is dragging on and on.
   If you limit your selection, the viewer sees only the strongest of images, and if they are interested in seeing more, they can get in touch with you. Limiting your selection also makes your portfolio seem more defined and structured. If you want to publish a large collection of all your photos, use services such as Flickr, and 500px.
   
   http://lisabettany.com/

8. Strategically Order Your Photos

   When tasked with writing a literal essay, you organize your points in strategic order. You put the strongest points at either the beginning or the end of the essay and the leave the weaker points in the middle. By placing the strongest points at the beginning, you instantly draw in the viewer and grab their attention. By placing the stronger points at the end of the essay, you end on a high note, leaving the viewer with some strong points they won’t forget.
   It’s the same with your photography portfolio. If you place your strongest images at either the beginning or end of the portfolio, you will hit the viewer the hardest. I recommend using both ends of the spectrum, grab their attention right from the beginning and leave them something to remember at the end of the portfolio.
   
   http://www.kallegustafsson.com/

9. Protect Your Work

   With today’s technology, no matter how hard you try to protect your images, somebody, somewhere, can steal a copy. You can try disabling right click, or put all your images as background images, and hope your users aren’t tech-capable; but that will never work.
   The only way to truly protect your photos is to embed watermarks on them. By embedding watermarks into the jpg’s, if thieves steal your work, the watermark will always be there. The larger the watermark, the harder it will be to get rid of it.
   There are two downsides to using watermarks:
   1. It will take time to batch process your images to add watermarks.
   2. The images on your portfolio won’t look as good as they could. Anyone would prefer to see an image without a watermark as opposed to one with a watermark.
   Not too many people are using watermarks anymore, but if you are worried about people stealing your images, it may be worth a thought.
   
   http://ericheikkinen.com/

10. Provide Details with Each Photo

    Viewers like to know whom you shot for and who they are looking at. They could be really interested in your fashion photography and they’d love to hire you and one of the models you’ve shot before to work together again.
    If you find it adequate to provide a little information about each photo, go for it! You don’t have to give every piece a “title”, but a one-sentence description of who the company you shot for is or who the model is or maybe what tools you used or even the location of the shot.
    Every little bit counts and the more work you put into your portfolio the more passionate the potential client will see you as.
    
    http://www.ryanpphoto.com/

11. Rethink Your Navigation

    When searching the web to find examples of photography portfolios, I often found sites that included thumbnails of each image and next/prev arrows to navigate forward and backward in the gallery. What I didn’t find often, but came across more than I had expected was keyboard navigation, in addition to thumbnails and next/prev arrows.
    The easier your site is for your viewer to navigate and get around, the happier they will be using your site. The happier they are using your site, the more positive feelings they will produce while looking over your work. The same works in the opposite direction, don’t forget. If your site is too hard to use, your users will be easily turned off and will produce more negative feelings towards your work.
    Rethink your navigation, making it as easy and natural as possible to use.
    
    http://www.picturereport.net/

12. Try to Limit Scrolling

    This tip contradicts tip #6, where I advised in using a large viewing area for your photos. The key is to either:
    1. Find a balance between small screen vs large screen, or…
    2. Use image-resizing technology or use multiple sizes of the same image, depending on the viewer’s screen resolution.
    It’s usually a good idea if you can limit the user’s scrolling, no matter what device / resolution they are using. Adapt for smaller screens by rearranging the layout of the site, or maybe making thumbnails a different size.
    As I mentioned in tip #6, 800 x 600 is still the smallest resolution you should cover if you’re worried about every possible user. Try designing for that resolution, with no scrolling and then enhance the design and layout for larger screens and resolutions.
    
    http://www.ciriljazbec.com/

13. Make it Easy for Your Users to Contact You

    Regardless of how good your work is, if your viewer can’t get in touch with you, you’re not getting any work. It’s really simple for you to add contact details to your site. Whether it’s a contact page, a phone number on every page, or an email address in the footer, finding your contact information should be a breeze for your users.
    You can put whatever you want for your contact details, just make sure that whatever you do put, is correct. A simple phone number will do, although if a potential client isn’t fond of the telephone, it may be better if they knew your email address as well. Remember to think about all your users before you make any final decisions.
    
    http://www.wildthingsphotography.com/

14. Get a Second Opinion

    Woo! You’ve just spent a week designing your new portfolio and another week coding it. You launch your new site and announce it to the world only to receive a handful of negative feedback about the usability of your site. It turns out the site doesn’t look too hot on 13″ MacBooks because the resolution is nowhere near the resolution of your 27″ iMac.
    Oops! Looks like you should have done some testing. Not only that, but a second opinion would have been great as well! Getting someone knowledgeable in the industry to double check your new portfolio for you is never a bad idea. They can provide a second insight into areas you may have skimmed over, and point out any obvious bugs you’re not seeing.
    With saying that though, make sure you pick and choose your second opinion wisely. Try to stay away from family and friends, not only because their opinion may be biased, but also because they may not know enough about the industry to give you a proper opinion.

15. Don’t Forget to Update!

    It’s currently 2011, and the technology we possess is sophisticated enough for anyone, and I mean anyone, to own and maintain a dynamic portfolio. Regardless of if you manage your portfolio with WordPress, or a Flash system or still stuck in static HTML, you should be updating your content.
    Users are used to seeing new content each and every time they visit a website. We’ve grown out of seeing the same old stuff on every visit. This is the same for your photography portfolio, with a little less emphasis on how often you should be updating. It’s ideal if you update whenever you have new content. Try not to upload in batches, throwing a handful of photos up every couple months. Instead, try to maintain a consistent, yet loose, schedule.
    When you do update, only update if the new content is stronger than the older content. It makes no sense to replace a strong image with a weaker one, regardless of if it’s more recent. You want to be always strengthening your skill set and your portfolio should reflect that.

---

Conclusion

Whether you’re designing your photography portfolio for paid work or just to show off your images, you should always consider the end user. Make it as easy as possible for your users to view your portfolio. Complex navigations and layouts may be “cool”, but are also useless if they are too tricky for most users.

The less frustrated your users are while viewing your portfolio, the more likely they will be to contact you – provided they like your work. No matter how well your photography shines, the format and detail in which you present it will determine whether or not it’s worthy for the client.

We’ve covered 15 tips on how to create a great photography portfolio. Let’s quickly recap:

1. Consider Your Target Demographic
2. Sketch out a Layout
3. Add Support for Dynamic Content
4. Try to Keep the Contrast High
5. Only Use High Resolution Images
6. Use a Large Viewing Area
7. Narrow Down Your Choice of Images
8. Strategically Order Your Photos
9. Protect Your Work
10. Provide Details with Each Photo
11. Rethink Your Navigation
12. Try to Limit Scrolling
13. Make it Easy for Your Users to Contact You
14. Get a Second Opinion
15. Don’t Forget to Update!

Remember, these are all just tips – helpful pieces of advices that you can choose to use in your own portfolio if you wish. Use none, one or all of them! It’s up to you, just never forget about your end users. They are the ones who really matter!