The goal of any portfolio site is to sell your work to potential clients. That means you need a killer layout that’s easy to use & helps sell your work for you.
In the past we’ve covered plenty of great portfolio sites mostly as inspiration galleries.
But for this post I want to share some tangible design tips you can apply to your portfolio. If you follow some of these tips to update your layout they’re sure to increase engagement and encourage more clients to reach out for quotes.
Whether you’re a writer, designer, artist, coder or anything else, this post can help you build a rockstar portfolio site that’ll rock the socks off your clients.
Showcase Your Work(And Do It Fast!)
Quality of work is huge in freelancing. This should be a no-brainer when it comes to portfolio design regardless of what you do.
You want your work front and center, especially on the homepage, because your work is what sells.
Granted a personal portfolio is also about selling yourself to the client. So it’s a good idea to have some personal info if the site is just about you(as opposed to a company).
But the one thing I hate is landing on a portfolio site and having no idea what the person does. Are they a programmer? Do they specialize in IT/server management? Do they handle social media marketing?
Clarify what you do right away to remove all that guesswork.
The portfolio of Dmitri Litvinov is a fine example of showcasing work on the homepage.
Right from the first pageload you know it’s a personal website based on the header. But his gallery is what really sells the work with big thumbnail images littering the page.
If you hover any of the thumbnails you’ll get a preview with more project info. This is very helpful to clients who want to quickly browse over your work and see if it fits with their projects.
I also like the use of minimalism in this design. It’s a staple for many personal portfolios and it removes all unnecessary elements to place focus where it belongs: on the work.
Another nice example of a focused portfolio layout is the homepage of Justin Mezzell’s website.
Again the header is short but sweet offering just enough to explain the website.
But the real big ticket item is the homepage gallery organized into a structured grid. Clients can quickly browse over his work to see what he does, the quality, and if his work may deliver on what they need.
Sometimes the work you do just won’t fit with prospective clients. That’s OK.
You wouldn’t wanna waste any time on a project you couldn’t do, or have clients wasting their time looking for a perfect fit. That’s why showing off your best work right away is key.
It helps develop trust and clarity for exactly what you do. And it encourages clients to dig deeper into your work if they like what they see.
Sell With Visuals
There are some freelance jobs that just don’t work so well using visuals.
A couple examples off the top of my head are writers and coders. But there’s no doubt that images draw attention faster than words so any graphics you can add to your site will help.
If you already do visual work then you won’t have any trouble setting up a thumbnail gallery to show off your stuff. A few sample careers where this works well:
- Digital art/illustration
- Icon design
- UI/UX design
The difference for writers and coders is figuring out what to show.
If you’ve written some e-books could you show the covers for those? If you’ve built some cool webapps in PHP/MySQL could you show screenshots?
Get creative and find ways to improve your site beyond static text. This doesn’t even have to be work related!
The homepage of Mo Khatib is a fantastic example. It features a strong graphic in the header with a purple-colored Jenga type board icon.
It’s a memorable graphic and helps improve the branding on the site. However this isn’t related directly to project work, so it’s an interesting example of what you can do with some ingenuity.
Same goes for Meagan Fisher and her colorful portfolio site.
Gradients, icons, font choices, and background photos litter the landscape of her homepage.
This is one case where minimalism really isn’t needed. The graphics add a very unique style into the page and they stay consistent throughout the entire website.
Look for ways to add subtle graphics into your layout. Even if those graphics are just personal photos or small branded icons. You’ll be surprised how much of a difference they can make.
Design With A Personal Touch
This tip usually works best on portfolio sites for individuals or smaller companies.
Sometimes I do see personal features on larger corporate portfolios but they work best for smaller companies. Think background photos of the company office or videos of the team hard at work.
But no matter what you do or how large(or small) your company is, people pay to work with people. That’s why as much as you sell your work, you also need to sell yourself.
The background image on Grégoire Vella’s site is a nice example. Anyone can pay a few hundred bucks for a similar photo shoot and you get those photos for life.
This means you can a design large hero header to grab attention and sell yourself, then forge ahead into your work as you build the rest of the page.
Another great example is Helen Tran’s website.
This one I like even more because background videos really grab attention.
They’re so dynamic and true-to-life so people get to see you as a real human being.
Granted not everyone can capture video of themselves or setup the background video properly(aside from frontend devs). But I think it’s worth a try if you have the time.
There’s also plenty you can do with just a simple photograph of yourself. Paul Lapkin has one small photo in his header mixed into the darker background.
A clean photo that works right into the layout with ease. The rest of the page is all about his work and reaching out, but that one photo adds a personal touch that radically affects the site’s design.
Make It Easy To Reach Out
Every website is built with a purpose. Blogs are meant to be consumed. Landing pages want visitors to buy something or sign up to something.
And portfolio websites are built to land new clients. So how do you do that?
By encouraging contact!
Design your site in a way that anyone could reach you with ease. This can be with any medium: phone, email, Skype, in-person meeting, whatever.
You achieve this on your site with clear contact details or a clear way to contact you.
Tonik doesn’t have anything too flashy but their “contact us” link is designed to stand out in the header. It’s also right next to all their social media accounts so you can quickly get in touch with just a few clicks.
Sometimes you’ll want to add a contact form right into your homepage. Other times this can feel like overkill and kind of a hard sell.
Instead I recommend designing a contact link that stands out & leads to a very clear contact page. Much like the design on Alexey Tretina’s website.
Basically no distractions or anything here beyond the main contact form.
Not to mention it’s only three fields! Shorter forms are way easier to fill out so you’re much more likely to get an email if people only need to fill in a couple fields.
The other alternative is to not even include a contact form. You can opt to use a plaintext email address and link it right from your site instead.
Granted this provides little-to-no protection from spam, but it may work better for some clients who don’t want reach out through a contact form.
On Melanie Daveid’s portfolio you’ll notice there’s an entire section devoted to contact details. And what a small section it is. Just a simple email address, a phone number, and some social links.
This couldn’t be simpler.
Only trouble is that it puts the effort onto the visitor rather than on you.
Generally an in-page contact form is more convenient than opening up an email client or opening a new tab for Gmail to compose a message.
But there is no single correct way to do this. All that matters is that you encourage contact & make sure your contact details are easy to find from any page.
Be Unique & Make Yourself Stand Out
The portfolios with the most memorable designs often jump off the page at first sight. Be one of those designs.
You can do this with personal photos, custom icons/branding, or just incredible work. Or some combination of other factors!
The definition of being unique is not being “the norm”. So it’s hard to say exactly what you should do to be unique… all I know is the benefits are great.
On the Click Click Draw website you’ll find a lot of cool unique features.
Custom graphics, animations, strong nav links, and a pretty cool logo to boot. This is something that a client will remember when they visit the site again.
Their work is superb and the homepage even has a strong contact section. Great example of using a unique design to your advantage.
Another nice example is the Fireart Studio site with the incredibly vibrant background animation.
This is unique in the sense that no other site has this animation style. It’s a way for Fireart to really stand out from the crowd and show off a little of what they can do.
But this will not be a good choice for everyone. And it’s hard to say exactly what you can do to stand out from all the other freelancers.
My best advice is play to your strengths and design a site that people will remember.
When In Doubt Go Minimalist
If you really have no idea what do with your site then just keep it simple.
Strip it down to black & white colors, reduce most graphics, design on a simple grid and go minimalist. You really can’t go wrong with this style.
Yes it’s a little cliché but it’s used so often because it works. People know how to interact with clean minimalist websites and there’s no way you can screw it up.
I think Shaun Moynihan does a nice job of walking the line between unique and minimalist.
The site is very simple and doesn’t use too many strong colors. Yet it does have some personal touches along the way so it feels unique compared to all the other minimalist portfolios out there.
Notice that typography plays a huge role in this design. Work towards some killer type on your page and see what you can do to spruce it up.
A great way to liven up a minimalist layout is pairing custom fonts together.
Here’s another cool example site by Wenjun Liao(small warning: this page has auto-playing audio).
I’m including this site not just for its design, but also its setup. The entire site is released for free on GitHub and published using the GitHub pages feature.
This is a nice way to get around paying for your own domain & web hosting. You can use the GitHub pages feature for free so long as you release all of your site’s source code in a repository.
I know this is probably a little much for most “sample” portfolios. But if you’re a developer or if you know your way around basic web dev concepts this is a really strong way to go for cheap hosting on a slim minimalist site.
Whether you’re launching a new portfolio or redesigning one from scratch, these tips are sure to get you on the right track for a sweet layout design.
Depending on the type of work you do you’ll probably have different needs and design goals for your site.
But as long as you focus on the user experience and design a quality engaging layout you’ll have no problems landing work.