Creative portfolios come in many different styles best-suited for the items being showcased. Photography portfolios often feature rudimentary designs without much ornamentation. The work itself is meant to festoon the layout so as to draw attention to the photographer’s expertise.
But many creative people have a difficult time getting portfolio work online. Web designers are an obvious exception, but few photographers know how to build a website or understand the best techniques for a portfolio interface.
I’ve put together a handful of live samples and ideas to help photographers organize their online portfolios with courage and professionalism.
Style a Catchy Homepage
The practice of design is meant to convey meaning through visuals and typography. Some designs are more extravagant than others based on the needs of each project.
Photography portfolios rarely need extravagance, but they do need to draw attention. The homepage of each site is often the most trafficked page and offers the first impression of your online persona.
A catchy homepage draws people further into the site by means of clarity & simplicity.
Take a look at the homepage for James Ridle who’s a photographer based out of Montana. The page doesn’t have a scrollbar or any real content other than a large photo & navigation links to inner pages.
James’ logo for “Ridle Photo” is clean yet vibrant. It stands out against the background and draws attention. The same goes for his fullscreen photo that takes up a majority of the page. Nothing here is flashy, but it delivers a similar type of experience.
A more dynamic example is the portfolio of Sam Docker with a fullscreen photo slideshow.
On this page Sam’s logo is front-and-center as it resizes based on the browser window. Most visitors will make the basic association of Sam’s name with the photographs in the background. Right from the start it’s an impressive website that feels modern and usable.
Scrolling down you’ll find navigation links that load content via Ajax. Everything is still easy to access, and the layout produces a natural horizontal flow.
An interesting point about these two examples is how they both draw attention without specialized graphics or patterns. A recognizable brand coupled with quality photos should be enough to give visitors a clue as to what you do.
Concise Personal Info
It’s common for freelancers to create portfolios that feature information about themselves. After all, both clients and potential employers may be curious to know more about the person they wish to hire.
But I’ve found it’s best to keep personal info quick & concise. Avoid prattling on about yourself so much that your site appears like a social profile. Give visitors just enough info to get an idea of your work experience and who you are as a person.
And remember that portfolios are meant to showcase work, so keep that as a primary focus.
Let’s Wander is a great example of concise portfolio design. All information fits onto a single page with a section of photography work and a small “about me” section.
The “who and why” section is basically the website’s footer. It holds two paragraphs about the photographer Lukas Linden, along with external links to his social accounts like Instagram.
You might include a little more info along with a portrait of yourself. Everyone has different levels of comfort when it comes to sharing information about themselves online.
Just go with whatever you feel works best and try to avoid going overboard with details.
As noted from the Let’s Wander layout, single-page design is very popular for portfolios. Some people have so much work & content that it’s easier to break everything into multiple pages. In fact it’s often better for SEO to create separate pages – but there’s nothing inherently wrong with a single-page design.
There are many benefits to limiting visitors onto a single page. All of your content is within eyeshot making it easier to browse. There aren’t any other pages which means load times are basically a non-issue except for loading large photo previews.
Single page layouts also force you to be concise. If everything is crammed onto a single page you’ll want to keep the scrollbar at a reasonable size. This may not work for some people who need a lot of content on their site – but for many photographers it’s the perfect solution.
Take a look at Tina Gauff’s portfolio which is truly unique. Again we have this very minimalist approach to design with little color, simple typography, and very few(if any) real graphics.
Her site does include a navigation which hides until your mouse enters the top portion of the page. A navbar animates into view with a few links distinguishing photography/film work along with contact details.
With the animated effects Tina’s portfolio doesn’t even feel like a traditional single-page design. This is the power you have when adding custom effects with a minimalist design approach.
Photo Albums & Categories
When it comes to organizing portfolio work I feel it’s best to give visitors easily-accessible labels. For example, interface designers may split their portfolio into web, mobile, and icons.
Likewise photographers may split their portfolio into landscapes, portraits, sports, weddings, etc.
By creating separate categories for your work it demonstrates that you’re a multi-faceted photographer with a wide collection of work samples. It also makes browsing your work much easier considering some people may want to hire you for only one type of photo shoot.
I really like the portfolio style of Max Wanger who breaks his work up into “books”. Photographers are familiar with the phrase look book as it relates to models & clothing. Max’s portfolio includes travel, kids, and even general life photos.
This type of approach can be overwhelming if done improperly. Your goal should be to categorize work in a simple manner so it’s easy to follow.
Use nav text which both makes sense and defines the photo content. Also ensure that your nav links are easily visible to offer expeditious movement through the site.
Alex Talmon’s portfolio has a small navigation but doesn’t include categories on every page. Instead the photo portfolio page uses thumbnails with labels to break photos into galleries.
When hovering over a thumbnail the label animates into view. The font is Brandon Grotesque bold which appears crisp even at smaller sizes.
Plus each gallery includes a large header image just above the work sample thumbnails. Each gallery is given the best possible treatment which both looks and feels exquisitely professional.
Modal Window Slideshows
It’s vital that photographers allow visitors to actually see their photos at high resolution. Potential clients are looking for HQ so just give ’em what they want!
The simplest method is a thumbnail gallery that links to each image separately. But the modern approach is to create a modal window that appears on top of the page with a fullscreen preview of the image.
Take a look at the portfolio of Hunter Kerhart. His gallery follows the preceding trend by splitting up work based on categories (aerial, interior, etc). But it also uses the modal window trend with great success.
If you click on any photo you’ll notice they’re connected to a modal window slideshow. Each photo can be viewed in full with a responsive modal window plugin showing the photo & label text.
You can maneuver through photos with your mouse or by using the arrow keys on your keyboard. Overall it’s a very dynamic approach that often works best for photographers with variances in photo dimensions (tall & wide).
A simpler example can be found on Nikolas Tusl’s website. It uses a similar approach but this modal window has no thumbnails and no caption.
Each photo takes up as much of the screen as possible while darkening the rest of the page.
There are dozens of modal window plugins available and it’s easy to get them setup on any portfolio. If you’re questioning how to display high-quality shots to visitors I’d have to cast my vote for a modal slideshow every time.
There’s always a lot to consider when designing a new portfolio but the fundamentals remain the same. Develop a brand, showcase quality work and make the site easy to navigate. With the right design techniques a photo-based portfolio can be masterfully crafted with ease & efficiency.
Featured image: orlaimagine