Inspiration, Trends

How to Build a Top-Notch Digital Portfolio Website

No matter what industry you’re in, having a portfolio website is going to help you get hired. Here are some resources you can use to create a beautiful WordPress-powered portfolio website of your own.

No matter what industry you’re in, having a portfolio website is going to help you get hired. Building an online presence lets you showcase what you’ve worked on, what you’re capable of and provides contact information for people to get in touch with you.

First impressions are everything, especially when you’re competing in a crowded market. By having an online portfolio, potential clients or employees can get a sense of who you are before working with you. You can also control your online identity and what companies and clients see when they search for you.

Our subscription service, Envato Elements, provides all the bits and pieces you need to assemble a good-looking portfolio, from WordPress themes, and photos, to plugins and graphics. In this article, I’ll be sharing some resources you can use to create a beautiful WordPress-powered portfolio website of your own.

What Makes for a Good Portfolio?

There are 7 key elements that your portfolio must have in order to effectively communicate who you are, the quality of your work, and why potential clients or employers should work with you:

  • A great theme. The theme you choose will provide most of the framework and functionality for the rest of your website, so be sure to choose wisely.
  • Photography. You might have your own photos or images of your work, but if you don’t, featuring strong, authentic photography will help elevate your site’s design.
  • Case studies. If you’ve already worked with clients, it’s a good idea to feature your best work as case studies so site visitors can see examples of your work and understand your skillset.
  • Images of your work. If you’re a designer, artist, or work in a creative field, visuals are everything. So show off your work with big, bold imagery.
  • Social media. Integrating social media into your site will encourage visitors to share your information but also click through to your social accounts so they can get to know you better.
  • Testimonials. Genuine words of praise in the form of testimonials are powerful. Kind words from a real-life client or employer – someone who hasn’t been paid to say nice things – can persuade potential clients to do business with you.
  • Contact information. Ultimately, you want site visitors to get in touch with you, and find out more about your services. So, provide as many avenues for getting in touch as possible (i.e. contact form, email, social media, phone number, physical address).

Now that you know a bit about what to include in your portfolio, let’s look at some themes, plugins, and other digital assets you can download right now from Envato Elements that will help you build a great portfolio website.

WordPress Themes

Dreamy has a minimalist design that places the focus squarely on your work thanks to its grid-style layout. There’s clear navigation at the top of the page so visitors won’t get lost clicking around trying to learn more about you. There’s also a space just below the navigation where you can write your mission statement. Don’t be afraid to be bold – promote yourself! Competition in the creative community is fierce so you need to convince visitors that they should choose you, right from the first glance.

Adios is a solid theme for creatives, and agencies alike. It offers more than just the basics, and comes with a bunch of homepage designs (9, in fact), lots of typography options, compatibility with WPBakery Page Builder, and 33 shortcodes so you can change up the design even more. But what I particularly like about this theme is the built-in ability to display case studies – there are lots of pre-made templates for your portfolio, and blog to help showcase your work.

This elegant theme makes bold use of your images, and fits nicely together using a masonry-style layout. There’s built-in support for Adobe Typekit so you can use your favorite fonts. If you don’t like messing around with code, there’s support for WPBakery Page Builder on top of access to the WordPress Customizer.

Authentic photography

Imagery is absolutely essential for any portfolio. Great photos help convey a sense of space and presence that is difficult to get across with just words.

A mix of photography, and high quality stock images you can download from Envato Elements can be highly effective when filling out pages, like your “About” and “Contact” pages.

Here are a few examples of images you could include on your “About” page to show off your workspace (if only all workspaces looked this glamorous!), or on your “Contact” page to create a sense of fun.

Case studies

Creating case studies using WordPress can get tricky. Fortunately, using custom post types enables you to create just the design you want for your case studies.

While many themes – including the Adios theme above – feature case study functionality worth checking out, the best option available in Envato Elements is Mega Posts, and Custom Posts Display WP Plugin. This flexible plugin lets you create specific designs for different kinds of posts, so you can create the look and feel you want for your case studies.

Image gallery

Whether you’re a photographer, a painter, or a web designer, one thing remains constant: You need to display images in your portfolio. After all, people who visit your portfolio will expect to see examples of your work.

Image galleries provide a solid way to display your images as a collection of your body of work. Here are some of the best picks you can download from Envato Elements.

This versatile plugin supports a huge variety of gallery layouts (masonry, filmstrip, carousel etc) and animations so you can add microinteractions to delight your visitors. Everest Gallery also supports audio, video, posts, Instagram and a mixed gallery, in addition to regular ol’ images. There’s also a nice backend preview functionality so you can see your changes before they go live, as well as drag and drop gallery ordering for intuitive editing.

Create dynamic grids, and layouts using drag and drop with this feature-packed gallery plugin. Media Grid supports images, video, audio, lightboxes, links, and custom post types. There are also 675 icons so you can customize item overlays and SEO deep linking to help people find you on Google.

AD Portfolio is a responsive filter portfolio, and carousel plugin that lets you create and display image galleries. There are 5 styles and 23 presets. When you click on the gallery images, you can display descriptions and provide more information about your work.

Social buttons

Integrating social media into your portfolio, in particular, buttons for Facebook, Twitter, Instagram and Pinterest, will not only show that you’ve established a strong online presence, but also encourage visitors to share your work with their followers.

Keep in mind that your social media accounts reflect your brand, and online voice, so it’s important to ensure that you don’t share anything via social media that you wouldn’t want a client or employer to see.

Here are some choice plugins for adding social media functionality to your portfolio.

Display your social posts, videos and images from different social networks in a timeline format on your “About” page. It’s a great way to showcase your work experience chronologically in a very modern way. Social platforms you can access include Twitter, Facebook Pages, YouTube, Delicious, Flickr, Dribbble, Digg, Pinterest, Tumblr, Google+ and Lastfm.

With Instagram Widget, you can embed your Instagram images in a widget or simple gallery. You can choose to display a public Instagram account,  hashtag, or even several hashtags. This plugin is mobile-friendly, making it a great option if you want your portfolio to look good on smaller devices (doesn’t everyone?).

This simple, yet, feature-packed plugin lets your website’s visitors share your content on their social media accounts. Not only will sharing your work help get you more followers on your own social accounts, but it could also score you more clients, and work. This plugin lets you choose from more than 50 social media buttons, fixed, and floating display, 4 icon styles, 3 icon shapes and 5 animations.

Testimonials

Anyone can boast online about how amazing their work is. All it takes is some clever copy, great imagery, a cool video and you’re set to sell your brand. But often – especially when a potential client or employer is looking to hire someone – these tactics aren’t enough.

People are usually skeptical, and want to know you’re the real deal before committing to working with you. Using testimonials can help convince people of your talents.

Testimonials Showcase lets you display reviews and quotes in a whole lot of different ways using grids, and sliders, star ratings, and rich snippets. There are also 5 theme options – rounded speech bubbles, flat speech bubbles, flat card boxes, quote marks, and simple separators. What I especially like about this plugin is that there are several options for links. You can include a link in the sub-title of an entry, in the image or use a “read more” link that leads to a single page entry for that particular testimonial – perfect for case studies!

Contact Form

Your Contact page serves one simple purpose: to help site visitors get in touch with you. So it’s a wasted opportunity when sites throw up contact information as a quick afterthought.

It’s important you put a lot more time and thought into what you publish because for many businesses, your Contact page is the beginning of your relationship with potential customers or clients.

Make sure to include as many contact options as possible – everyone has their own preferred method of communication:

  • Email address
  • Contact form
  • Phone number
  • Links to social media accounts, like Facebook, Twitter, Instagram and LinkedIn
  • Physical address

Also, keep in mind that people who land on your site might not click through to every page. So include your contact details on every page – the footer is a good spot – to help people get in touch with you.

Ninja Kick is a super useful plugin that makes it easy for visitors to reach you. Instead of forcing readers to try, and find the link to your Contact page, this plugin adds hidden forms using a slider to your site. Visitors can access this form site-wide. This plugin works with popular contact form solutions, like Contact Form 7, and Gravity Forms. It’s also compatible with MailChimp.

Create any type of form with this easy to use drag and drop form builder. Whether you want to create a simple form with a couple of fields, or a complex form with multiple text areas, dropdowns, and checkboxes, Super Forms will let you do it. With this plugin you get 30+ elements, 850+ icons, anti-spam protection, AJAX functionality and conditional logic. It’s well worth checking out if you don’t already use a contact form plugin.

Tips for a Creating a Top-Notch Portfolio

Now that you have a good understanding of the elements you need to add functionality to your portfolio website, here are some additional tips to polish your site and make it shine.

  • Make your mission clear. What is the purpose of your portfolio? What are your skills? Who are you?? Make sure you include a short blurb about yourself on your homepage and a more in-depth bio on your About page.
  • Write strong, succinct copy. You want visitors to your site to get a sense of who you are, so make sure you use a tone of voice that reflects your personality. There’s no need to write pages and pages of copy – keep any text brief and to the point. If you do want to write lengthy text, be sure to break it up with subheadings, and bullet points to make it more readable.
  • Make sure it’s easy to navigate. You don’t want your visitors to feel lost when they land on your site. So keep it simple. Use obvious navigation that helps visitors find what they’re looking for.
  • Showcase your best work. Be thoughtful about what you include, and only select your strongest work. If you have a plethora of work to choose from make sure only the best pieces make it in your portfolio.
  • Don’t forget awards, and articles. If you’ve won awards for your work, or contributed to publications, include links to other sites that have relevant information about your work and contributions.

Be current. Don’t include anything that’s more than 3 years old. Trends, and techniques change quickly and you don’t want to appear out-of-date.

Your Portfolio is Ready to Shine!

Creating a portfolio that reflects you and your body of creative work is the best way to showcase what you’re capable of. Your portfolio is your online presence and reflects your brand, so be sure to carefully select the work you include and only choose your best pieces.

The resources I’ve featured in this post are just a very small selection of the files available on Envato Elements.  There are plenty more beautiful, and functional WordPress themes, plugins, stock photos, and digital files to help you build the ideal portfolio.

Recommended

Skeuomorphism Is Back

Steve Jobs’ go-to design language – the art of digital user interface design that mimics the characteristics of real-life objects – is making a return.


Jenni McKinnon

About the Author Jenni McKinnon

A copywriter, copy editor, web developer, consultant, course instructor and founder of WP Pros(e), Jenni McKinnon has spent the past 15 years developing websites and almost as long for WordPress. A self-described WordPress nerd, she enjoys watching The Simpsons and names her test sites after references from the show.