Web Design Portfolio

How to create a web design portfolio

7 min read
Ariana Crisafulli

So you can design the heck out of a website. You might even say you can code and design one blindfolded with your hands tied behind your back. You’ve proved yourself time and time again by helping clients boost their sales simply by delivering an impressive site where they can show off their skills. But what about yours? It might be time to consider a web design portfolio.

Why not put those design skills to use for your own business and build a website designers portfolio to bring in more clients and boost your own sales through the roof.

Why exactly do you need a web design portfolio?

Well, why do your clients need websites? A web design portfolio, just like any other website, is a personal advertisement for your skills. Think about when you want to apply for a job — you have to put together a comprehensive resume to demonstrate your talent. A web design portfolio is a lot like that, but instead of dragging your resume around from office to office, clients or potential employers can find you and hire you simply by typing in the magic keywords.

If you want to attract clients or employers, you should use an online portfolio to showcase your work, your skills and establish yourself as an expert in web design.

After all, you can talk about your skills until you’re blue in the face, but showing it off on a website designers portfolio is far more effective.

Your web design portfolio itself is part of the portfolio

Web Design Portfolio Mockup

I know, so meta. But think about it this way: your clients want to know you’ll do a superb job building their site. If your own site isn’t eye-catching or easy-to-navigate, and doesn’t accomplish what it’s set out to accomplish, then it sends the message that you will do equally subpar work for your clients.

Makes sense, right? The best thing you can do to wow potential clients is to build a portfolio that will inspire awe the moment the page is loaded. To accomplish this, there are a number of things you should be focusing on when creating your web design portfolio.

1. Focus on the images.

The most important thing about a web designer’s portfolio is the visual aspect. Your work might include a lot of behind-the-scenes coding, but that’s not what most clients care about. What they want to know is that all of that code creates something striking and functional to showcase their own work, products or causes.

2. Don’t overwhelm potential clients.

As a web designer, you know that simplicity is key. Don’t forget this when designing your own site. While it is important to showcase your previous work, remember that it’s not necessary to list every single website you’ve ever built. It’s unnecessary and it’s overwhelming.

Choose your favorite projects and feature them on your site in a space that doesn’t require extensive scrolling.

If your potential clients want to see more samples, provide a button in the navigation bar where you list more work, or let the client know that they can contact you with a request to see more previous jobs.

3. Keep the descriptions simple.

Like everything else in your portfolio, your project descriptions should be simple and concise. You might have a lot to say about each project or about your process, but it’s important to keep in mind that too much information, just like too many listed jobs, might overwhelm potential clients or employers. You may risk losing their interest and attention spans.

While you should absolutely discuss your process and your work, the best thing you can do is let your work speak for itself.

4. Focus on navigation.

One of the hallmarks of an outstanding website is easy navigation, and it’s easy to understand why. If you’ve ever been to a website and couldn’t find what you were looking for due to labyrinthine-style navigation, then you know why it’s so important.

Make sure all the pages of the portfolio are easy to find and navigate.

If you have a lot of work samples to display, it’s also helpful to list them by category. That way, potential clients can easily see that you’ve done web design for their industry.

5. Make space to brag.

Include a page or section in your portfolio that lists your credentials. Credentials could include big-name brands you’ve designed for, previous employers, awards or any prestigious schools you might have attended.

Showing off your credentials creates confidence in potential clients and employers.

Another effective way to inspire confidence is to feature testimonials and case studies from happy clients. Reading raving reviews from people who have had great experiences with your work is one of the best ways to win the hearts and minds of potential clients.

6. Don’t forget SEO.

After putting in so much careful work on your portfolio, it would be a crying shame if no one ever saw it. Take some time to research keywords and use them throughout your site. Include them in your labels and descriptions of your images and designs to help potential clients find you and your outstanding web design skills.

Take it from the pros

Daniel Spatzek

Some of the best web designers know that it’s essential to catch the eye of potential clients immediately. For example, Austrian web and graphic designer Daniel Spatzek wows viewers from the get-go using attention-grabbing WebGL and CSS tricks on his home page.

Web Design Portfolio Daniel
Web design portfolio of Daniel Spatzek.

Although he uses sophisticated code under the hood, the beauty is also in the simplicity it achieves. Spatzek uses animation and art design concepts in the center of the page, but doesn’t overwhelm the viewer. Instead, he makes use of a plain white background and minimal text while also providing easy navigation. In this way, Spatzek’s work speaks for itself.

Arturo Wibawa

Arturo Web Design Portfolio

Another way to effectively showcase your work is by using your home page as a visual resume. A good example of this is Arturo Wibawa’s web design portfolio.

The minute the page loads, you have the chance to view his past design work on clickable thumbnails. When you click on the thumbnail, you are taken to another page that goes into that project in finer detail.

Wibawa describes what the client wanted to accomplish with their site, details his process and some of the finer elements, and serves up the result for potential clients to view. Besides his excellent use of former work examples, Wibawa’s portfolio on its own is a sight to behold, with bold design and use of simple animation. As a whole, the result shows off his style and his range of skills.

Moni Yael Garcia

Moni Web Design Portfolio

A third example worth checking out is Moni Yael Garcia. Her design choices come closer to what you might find in an experimental print publication: colliding text, layered media and creative placement of elements. Despite all that, Garcia preserves a clear navigation and easy-to-follow page structure that lets viewers flow from one interaction to the next.

It’s your turn.

Now that you know the why and the what to creating a web design portfolio, it’s time to get started! Remember to make it visually dazzling and informational without overwhelming the client with too much noise and technical details. Most of all, let your style and your work shine through with the effort that you put into designing your own web design portfolio.

Products Used