Episode #52:

17 Essential Elements for an Effective Portfolio Website

Effective portfolio website.

Your website needs to be an effective marketing tool to help you get clients. You want to be top of mind when someone needs a designer. Here are 17 essential elements for an effective portfolio website, so you get found and leave a positive impression.


Show Notes

This page contains affiliate links and I will be compensated if you make a purchase after clicking on my links. It will not cost you anything additional to use them.


Your website is a central location for prospective clients to be able to find you. You need to be easy to find and be memorable, so that you are top of mind when someone needs a designer. Here are 17 essential elements for an effective portfolio website, so that you get found and leave a positive impression.

Getting Found

Before a prospective client gets to your website, they need to be able to find it. Maybe they already know of you, maybe they don’t.

If they do know you, you want to be easy to find if they search for you online. If they don’t know you, then search engine optimization is crucial.

1. Good Domain Name

Let’s talk first about your domain name because that is a way someone can find you if they already know of you. Is your domain name easy to remember and to type? Or is it really long and complicated? Or a subdomain of Adobe Portfolio or WordPress.com?

If it’s not easy to remember or type, I recommend getting a low-cost domain from NameCheap or another domain registrar and redirect it to your site. It could be your actual name or a business name, or it could be something with keywords that describe the type of work you do or what you’re known for such as your state abbreviation and “logodesigner.com” or something.

If you use your name, and your name is hard for others to spell, it helps to buy domains that are potential misspellings of your name.

You could also consider a clever shortened version of your name for the domain. My colleague Jason Resnick uses rezzz.com, with three Zs.

Domains are cheap. You could buy several and redirect them to your site. Plus, a custom domain is more professional, that this isn’t a hobby. You will be taken more seriously.

2. Search Engine Optimization

When it comes to getting found via search engines, it helps to have headings on your pages followed by relevant text. This helps search engines understand what each page is about and the hierarchy of each page.

A few tips I can share about this are:

  • Use only one H1 per page and make it unique to that page. In other words, don’t give another page the same H1. The H1 should be the page title, what the page is about. If the page shows your logo designs, your H1 could be “Logo Designs” or “Branding.”
  • Add subheads on the page as needed, such as for project titles, which may be styled as H2s or H3s, depending on where they fall in the page hierarchy.
  • Don’t skip any levels of headings, so don’t go from an H1 to an H3.

If you use WordPress, you can use an SEO plugin such as SEOPress or Yoast SEO to help you with your pages’ SEO.

Usability

Usability includes various factors, and I’ll get into some of them.

3. Fast Page Speed

Once someone gets to your site, how fast do the pages load? This is referred to as page speed, which is how fast the content on your page loads. Don’t make visitors wait long for a page to load. If they have to wait, they will be frustrated. They may leave and go to another designer’s site.

Another reason page speed is important is because it can affect your site’s rank in Google search results.

Aim for a load time of 2 seconds or less. You can check how fast pages on your site load at tools.pingdom.com.

If your page load time needs work and you use WordPress, you can install a caching plugin. I like WP Rocket, which is a paid plugin. A free one that I used to use is W3 Total Cache.

4. Responsiveness and Mobile-friendliness

Once your site loads, do visitors using a mobile device have to pinch and pan to zoom in and out just to read and get around your site? If so, then it’s neither responsive nor mobile friendly.

“Responsive” means the site adjusts to the width of the screen the site is being viewed on.

With the ever-increasing number of people viewing websites on a mobile device, it’s essential to make sure your site looks good and is easily navigable on a smartphone and tablet.

Most existing site templates and themes nowadays are responsive. But I still see some designers’ websites that were built outside of a CMS or before this became a necessity, so their sites are not mobile friendly.

Sites that aren’t mobile friendly are not only difficult for someone on a mobile device to navigate, they can leave the impression that you’re not up to speed on this topic. If you design or build websites, that can hurt you even more because you should be demonstrating your expertise with your own website.

Having a responsive site is also important because it can help your Google rank in mobile search results—that is, searches done on a mobile device. So your site can get a competitive edge over another site that appears in search results if that site isn’t responsive.

You can check to see if Google sees your site as mobile friendly at search.google.com/test/mobile-friendly. Google also has tips to make your website mobile friendly.

5. Clear Navigation

When it comes to the navigation, don’t clutter up the main menu with too many items. I usually recommend 6 or 7 max for the number of top-level menu items.

Group them where it makes sense to do so, such as having all the type of work you do fall under a top-level menu item called “Work” or “Portfolio.”

6. Accessibility

Accessibility means you’re making something accessible to a user who has a disability. That individual may or may not use what’s called an assistive device, such as a screen reader, to get around your site. Some may navigate with the keyboard. Other users may have hearing, cognitive, neurological or mobility issues.

I’ll cover more about accessibility in a future episode, but some things to consider are clearly conveying information, not creating flashy or “cool” effects or the latest design trends.

It’s always better to be simple than to incorporate some effects that might require someone to install the latest version of a browser—or use another browser—to be able to read everything on your site.

It also means keeping the parts of a site where people have come to expect them to be—meaning don’t put the main navigation at the bottom of the page because you think it might be a cool idea. Don’t cause confusion.

Also make sure any text over photos or colored backgrounds is legible. You might not have an issue reading it, but someone else will.

People should also be able to distinguish hyperlinks from body text other than by color alone. Some people may be colorblind or have vision issues. I don’t have any vision issues, and I’ve had issues figuring out hyperlinks on some sites. I’m astounded to see hyperlinks in the same color as the other text and not underlined. No way to tell what’s a hyperlink without hovering over it. Don’t make it hard for users.

Content

So now that I’ve talked about getting people to your site and then getting around it, let’s talk about what they will notice while they’re on it.

7. Professional

The design of your website will be noticed immediately and leave a lasting impression.

Does the design of your website look professional? Even if you’re not trying to get web design work, you want to ensure your site looks good. You could consider hiring or trading services with a colleague who does that work in order to make sure it looks professional.

It should also have a cohesive look with the design of any print or digital identity materials, such as business cards and letterhead.

Also ensure there are no spelling or grammatical errors in any of your text. If you’re not good at that, have someone else check your text, or check out Grammarly.

8. Targeted

Does your copy speak to everyone or those you want to work with? A unique value proposition (UVP), also called “unique selling proposition,” is a short statement that describes the benefit of what you do, how you help your clients and what sets you apart from other designers. This usually appears at the top of the home page.

You can focus on a particular type of work or industry. That doesn’t mean you can’t do other types of work or work for clients outside of that industry. It just means you focus your marketing on them, so when those people come to your site, they feel they are in the right place and that you know how to help them.

The copy isn’t the only thing that should appeal to them. Does the design appeal to those clients you’re trying to attract? For instance, if your goal is to attract corporate or financial clients, you probably want to avoid a bright or pastel color palette and opt for colors more commonly used in their industry.

Like with copy written for a specific audience, choosing an appropriate color palette also demonstrates an understanding of their industry, which is one reason it can be beneficial to specialize: You’re not trying to appeal to everyone and it makes your marketing efforts easier.

9. Client Focused

Most of the text on your website should focus on how you can help the client. What can you do for them? What’s in it for them?

Don’t talk all about yourself. They want to know how you can help them. They don’t care much about you. So don’t say, “I do this. I do that” all over the site.

When you focus more on how you help the client, then you help sell yourself in the process, and you set yourself apart from most other designers, who are saying, “I’m a graphic designer” and “Look at me.”

10. Personality

Potential clients want to get a sense of who you are, so don’t be afraid to let your personality show through in your copy and in the design or talk about some of your interests outside of work. You never know when something you mention might be something in common with a prospect, and that could help form a connection with them.

That could give you a competitive edge. For instance, I’ve had clients mention they like the fact that I do a lot of volunteer work in animal rescue. That also adds a bit to my background with helping nonprofits for a living.

A pic can provide a personal touch as well. Even if you don’t want to share a pic publicly, which I completely understand, consider choosing just one and use that same one on all social media profiles.

Make sure it sends the right message. You don’t need to be in business attire. Funny or playful can still come across in a professional way. But consider what type of client you’re trying to attract and how they might perceive you based on your photo.

For instance, corporate clients might prefer a photo of you that is more serious looking, while nonprofits or single-person businesses might be attracted to a photo that shows you are friendly and warm.

Portfolio

When a potential client looks at your portfolio, they will want to see that you’ve done similar work to what they’re looking for and/or done work in their industry.

11. Selective Work

They will be assessing the quality of your work, and they will expect to get work of similar quality from you if they decide to hire you. So what you choose to display and how you display it are important.

Your website does not exist to be an archive of all the work you’ve ever done. Don’t put up every single thing. Think about quality over quantity. You want to put your best foot forward.

Show the work that you want to get. If you despise designing websites, don’t show any or keep them to a minimum. It might be nice for a prospective employer to see that you have that experience, but if you dread that type of work and don’t want to be hired for it or aren’t good at it, leave it out.

12. Well Organized

Don’t necessarily segment your portfolio into type of work, although grouping similar work together such as print collateral vs website work, can make sense.

What I’m referring to is not putting, say, ads on one page, then brochures on another page, etc. I did this early on in my career. Doing this can cause the prospective client to focus on the thing (the ad, the brochure, etc.) rather than on the end result, the value that your work brings to the table—meaning helping them get more sales or more event attendees, for example.

I think this can cause the prospective client to see you as more of an order taker, not an expert. If they come to you saying, “I need a brochure.” Well, maybe they need that. Or maybe their problem is really branding and a brochure is not going to solve the problem they’re hoping it will.

Blair Enns calls these clients “self-prescribed” and “self-diagnosed.” They just want a price to create a deliverable, as opposed to you helping them solve a problem. You can find out more about that in episode 42 of the podcast: Power, Positioning & Pricing for Creatives.

Showing different pieces of your work as individual campaigns gives your work higher perceived value. So if you designed a flyer, an ad and social media images for an event, put them together on a single page and talk about it as a body of work, a single campaign.

13. Well Presented

Showing the work as it was intended to appear (as printed, on a website, etc.) is helpful for a potential client or employer to picture the work. This is especially important when trying to convey how a printed piece folds or how something looks on a website or mobile device.

So actual photos of the work or mockups really help with this. Plus, they enhance the look of your portfolio. I’m horrified remembering the early days of my online portfolio where I had flat images of individual pages with a border and drop shadow.

If you need mockups, check out the ones from Smart Mockups and Creative Market.

Now, if you’re marketing to prospective employers and looking for freelance work too, consider having a separate page on your site with a résumé on it that you can send only potential employers to. You may want to leave this out of the main site navigation, so potential clients won’t see it but you have something online that you can easily update and send prospective employers to.

14. Case Studies

Now, images of your work are not enough. You also need text, specifically case studies, and for two reasons. First, potential clients and employers will want to understand more about the work. It’s not art for art’s sake. It serves a purpose.

Secondly, as I mentioned earlier, text is important for search engines to find and lead people to your site.

A case study typically includes:

  • background about the client and the work;
  • the problem they approached you with (“I need a flyer and invitation to promote my event.” Or “I need to increase sales by 50%.”);
  • any challenges you might have been presented with (for example, low budget or tight turnaround time);
  • how you approached the design, especially within any constraints;
  • how your work performed or how it was received by not only whom you did it for but their audience. So you’ll need to follow up with the client to find out that information. Sometimes clients will share this, sometimes not. For example, did it help them get 50% more attendees over last year’s event? Did they see an increase in revenue from your work? You can’t take all the credit, of course, because the writing and their marketing of the event also play a factor. But you could say your work “contributed to” those results—because clients don’t care about a flyer or brochure or logo just to have a flyer or brochure or logo. What they want what it will do for them.

15. Testimonials and Reviews

Testimonials and/or reviews (such as Google Reviews) are super important, especially when someone finds you online, as opposed to being referred by a mutual connection. People who are new to you want to know that you are legit, not going to take their money and run (although it’s usually the other way around) and are going to produce good work for them.

You can tell people all day long that you’re reliable, detail oriented and do good work. But when it’s you saying that, it just comes across as trying to sell to them. Plus, a lot of well-meaning designers say the same things and don’t follow through with them.

Testimonials and reviews carry more weight because they come from someone else—someone else who’s spent time and money with you.

To get testimonials, shortly after a project has wrapped up, reach out to your client and ask for a testimonial or review and say you’d like to use it on your website and social media. I like to get permission to use their name as well, to be safe.

Also reach out and ask past clients for testimonials or reviews. Those who are happy with your work are usually delighted to help you out in this way and even refer you to others, so don’t hesitate to ask for referrals too.

Action Items

16. Contact Link in Menu

Make it easy for someone to get in touch. Don’t bury a Contact link in a submenu or on your About page. Put it as a top-level menu item at the top right.

I think it’s a good idea to include your phone number and e-mail address on your Contact page, even if you have a form, because it builds trust. So many people nowadays don’t want to take calls. Too much is done via e-mail and text. It leads to miscommunication and it’s much more impersonal.

Some people feel more comfortable talking with someone before doing business with them. Offering an option to call you removes a barrier to getting in touch with you.

Use this to your advantage. Talking with a prospective client allows them to get a taste of your personality and that can actually help you get work. And in a time where many designers don’t invite this kind of communication, it can help you stand out.

17. Multiple Calls to Action

You might think it will be obvious for a client to just e-mail or call to get in touch with you. But we must guide them if not hit them over the head (virtually, of course).

What should they do next? On one page, you may want them to contact you; on another, you may want them to sign up for your e-mail list.

Make calls to action prominent. Consider using buttons with larger text and a contrasting color, so they stand out.

Conclusion

So those are my 17 essential elements for an effective portfolio website. Is there something else you find essential for a graphic designer’s website? Let me know by emailing me, leaving a comment on the episode page or posting in the Design Domination Facebook group.

By the way, if you design logos, be sure to check out my brand style guide template at bit.ly/brandstyleguidetemplate. My template will help you add value to your branding work, so you can charge more. You’ll also save tons of time, so you can be more profitable, because it’s got actual sections with full text set up and ready to go. Just add in the client-specific images and info. It will pay for itself the very first time you use it.

2 thoughts on “17 Essential Elements for an Effective Portfolio Website”

Leave a Comment

Your email address will not be published. Required fields are marked *