Design Tips For Building A Usable Portfolio Website
Creatives need a great portfolio; there’s no getting around it. But visitors may overlook the quality of your work if your portfolio site isn’t well designed.
A portfolio website doesn’t have to be complicated, but a simple design can get lost in the noise. Your #1 goal should be a simple user experience, not a pretty design or fancy typography (although these things can be involved).
Let’s take a look at a few design tips that can greatly improve any visual portfolio. Whether you’re a digital designer, photographer, artist, or any other creative, I can guarantee these tips will help to improve your personal website.
I always appreciate a lengthy thumbnail gallery over a big listing of work. Thumbnails allow visitors to select what they want to see, rather than being forced to continually scroll through embedded images or videos.
Thumbnails also adhere to a grid structure which naturally draws the eye and gives some organization to your design.
Check out the portfolio page of Evan Eckard. It uses a masonry grid pattern with thumbnails to showcase a wide variety of his design work.
These thumbnails aren’t so small that you can’t see them. But they’re also not so large that they take up a monstrous amount of space.
Finding that sweet spot can take time, but it’ll greatly improve the overall experience.
But you also have to consider how the thumbnails behave. On Evan’s website, each thumbnail slides down to reveal project information.
On Gary J. Anderson’s portfolio he links all thumbnails to a photo gallery slideshow.
This may be smarter if you have related thumbnails that work in a set, but a broad portfolio with scattered works of different styles can work better if listed separately.
Gary’s portfolio is unique because he does a lot of UX work with photos from different stages. This can help sell potential clients on his work because it shows the type of UX he can do and what sort of deliverables come with the process.
If you prefer a more fullscreen preview, then the thumbnail gallery on Ben Pannell’s site might be easier to digest.
He uses plain minimalism with a big focus on the work. Each thumbnail is formatted into a perfect square with a 4-column design.
When you click a thumbnail it opens a fullscreen slideshow with a plain white background. The interface is really simple to navigate, and you can hit ESC at any time to close the slideshow.
The one thing I don’t like is the small size of each image. When you take over the whole page for a slideshow you should use high-quality photos.
If you’re not sure how to lay out your portfolio page, then thumbnails are a safe choice.
Modal Window Galleries
I find myself loving and hating modal galleries depending on how they’re created.
These are usually the most preferable option for a general portfolio. Most people know how to interact with modal windows, and they know how to shuffle through slideshow galleries.
But if your modal is confusing, too small, or hard to use, then it’ll typically be more of an annoyance. If you’re building the site yourself, look into some gallery plugins and see which one offers the best experience.
The concept art portfolio of Robert D. Brown is perhaps my favorite example of a slideshow.
His website uses a white background, but the slideshow gallery is much darker. This offers more contrast for the artwork to stand out on the page.
Also, the gallery is fully responsive and it supports the arrow keyboard keys for navigation. His site runs on SquareSpace, so it uses their proprietary gallery plugin.
But many WordPress themes also come with these features so it’s not hard to style your own portfolio slider.
Another great example can be seen on Dribbble on the portfolio pages.
Go to any user’s page and click one of their works. It’ll open in a modal window with extra details and a link to view the full page.
The lightbox blends nicely into the site and it doesn’t feel like an obstruction to the content.
I recommend toying around with different modal window plugins to see what you like best. Anything that’s easy to use and that supports mobile users will probably be a safe choice.
Carousels: Good Or Bad?
In-page carousels are just plain bad from a usability perspective. Check out this nngroup study which explains how most people scroll past carousels for various reasons.
Some people think carousel images are just ads. Others visitors get frustrated when a carousel automatically rotates past a slide they were reading. And some just hate all the complex arrows and dot navigations used in most carousel interfaces.
You can see an in-page carousel example on the portfolio of Leo Ventura.
He has a bunch of different project types and when you click one it’ll open a carousel. From here you can navigation with the side arrows to browse through works.
I’d personally rather just see all the work listed right on the page. It’d be a clearer way to see what he can do and it wouldn’t require constantly clicking the left/right arrows.
The only kind of carousel that I think works well is with thumbnails that allow you to jump between slides. A good example of this can be found on the portfolio of artist Scott Brooks.
At first you’ll see a large photo of the very first slide. But underneath you’ll have a large thumbnail gallery showcasing a bunch of different works.
His carousel does auto-rotate, which I personally despise. But since the thumbnails are clearly accessible it’s easy enough for me to jump back and check out any piece that catches my eye.
You may notice that carousels feel an awful lot like the modal window galleries I mentioned previously.
The biggest difference being that with a modal gallery, the user gets to see all portfolio entries before they click on something. A carousel only shows one slide by default, so the user is forced to scroll through slides to see everything.
I suggest passing on carousels but I do recommend using slideshows. With a slideshow the user has full control and the slides don’t change automatically.
Plus most slideshow plugins support thumbnails, which fit perfectly into a portfolio layout.
Simple Layout Styles
Detailed graphics and complex patterns may be fun to design, but they aren’t always the best choice for a website.
Portfolios often work better with minimalism because this style places the greatest focus on usability and the work itself.
But this doesn’t mean you should only have a simple, white portfolio page.
Take a peek at Sean Halpin’s website. It’s a very simple site with one column but plenty of vector illustrations and icons.
The colors and typography make the design feel very approachable. I’m surprised at how well this site is laid out and how easy it is to navigate.
His portfolio page just uses a streaming line of images that you can sift through at your leisure.
It may not be full of fancy effects but this portfolio gets the job done.
Another common trend is a hero image to capture attention quickly and sell a visual idea. This is especially true for designers and digital artists that may include their own work or a photo of themselves.
With Sallee Design you get a fullscreen photograph of a design workstation.
You can scroll down for more info, or click any of the nav links at the top. Right off the bat this photo should grab your attention and help sell the idea of a creative designer.
But minimalism doesn’t have to include any pizzazz. You could just have a single page site that lists portfolio work with nothing else.
This is what Weston T. Jones did for his portfolio, and it works well.
There are no design requirements to minimalism other than reducing all unnecessary elements.
You can have a minimalist design that includes photos, vector icons, illustrations, or just plain white and black text. Either way this offers the simplest user experience and places more attention on the work.
Unique Interface Ideas
Not all portfolios need to be super dynamic and heavily customized. But this can be a way to showcase your talents with a unique style.
For example the portfolio site for Hi Hayk behaves like an SPA where it functions as a single webapp.
Each portfolio item slides in from the side, where you get a bunch of extra information and some design photos. It’s a great feature that works well, but it’s certainly not the norm.
His site does follow many of the same principles I listed in this guide. It’s simple, intuitive, and places the work front & center.
But for something a little less animated check out Joe Nyaggah’s portfolio. It uses multi-tiered links where you can click a project and sort by type(print, web, package) and then sort by the project name.
Near the bottom you’ll also find pages for different iterations of that design.
It’s a very unique navigation style, but it works great. If you’re willing to get a little creative, you might stumble onto a unique user experience to call your own.
Portfolios That Sell
The one golden rule with a portfolio site is this; keep attention on the work.
Most visitors just want to see what you can do. And they don’t wanna dig through multiple pages just to find your portfolio.
But with these tips you should have no trouble creating a portfolio that’s easy to use and offers a quality showcase of work. And if you’re looking for more portfolio design tips, check out some of our related posts: