Website Designer Portfolio

Web designer at work on computer

As a website designer, creating a portfolio is an important step in furthering your career, whether you're a freelancer looking for clients or you're looking for a full-time job with a company. There are a few essentials to include that will make your portfolio stand out.

Key Elements of an Effective Portfolio

When creating your online portfolio, there are some "must haves" you should definitely include.

Biographical Information

Including an "About" section is crucial but how you structure the content depends on the goals of your portfolio. If you are using the portfolio to get a job, then you should stress your technical skills and any other experiences that make you a strong candidate. Including a link to your resume (in PDF format) is handy as well so that employers can download and keep a copy.

If you are a freelancer looking for clients, you should tailor what you write about yourself with your desired clientele in mind. For example, if you are looking for clients who want to hire coders with special skills such as Javascript, Python or Ruby, you will want to write about your technical acumen in these areas. On the other hand, if your ideal clients are small businesses that need a website, you should write about your background in a way that references their needs, such as a website that will increase sales or solve another business-related challenges.

Examples of Your Work

Obviously, a portfolio will include samples of your work. Just as with your biographical statement, you should include work that would be of the most interest to your potential employer or client. Some guidelines to follow include:

  • Web designer checking portfolio
    Don't feel the need to include everything you've done. Quality beats quantity!
  • Provide multiple visuals of your work, such as a screenshot of the site on a regular desktop or laptop screen, on a tablet screen and on a smartphone. This shows that you can create responsive, mobile-friendly sites.
  • Some designers will provide links to the live sites they have created. You don't necessarily have to do this, however, if you provide a strong enough representation of your work via visuals. In some cases, if a client has changed your work for the worse after you signed off on the job, you will not want to link to their website. A website might also be temporarily down for any number of possible reasons, like server issues or if a business is on hiatus.
  • Always include information about your site that piques your target market's interest. For example, if you are looking for a position that needs a strong developer, and you coded a site using advanced coding skills, you will want to describe what the goal of the site was and how you tackled it.
  • Likewise if you are looking for clients that are more interested in what a site will do for them rather than "what's under the hood," then discuss what the goal of the site was for the business owner or organization, and how your work helped to accomplish that goal and improve their standing.

If you are looking for a position that involves development skills, it is standard procedure to include a link to your development site (like on Github) so that they can view your code and see your thought process for creating the site.

If you are brand new to the field and don't have much of a portfolio, don't be afraid to include work that you have created on your own. Just as described above, create a scenario and make a site based on solving that need and then present your work in the portfolio, describing your process behind making the site.


Testimonials are a great way to showcase that you work well with others whether they are clients, employers or coworkers. When asking for testimonials, it's wise to suggest exactly what you would like them to write. "Joe is a wonderful person" is not as strong to potential clients as "Joe helped me grow my business with his excellent communication skills and website design acumen. He perfectly put into the website what I needed to solve my biggest business problems."

You are not writing the testimonial for them but rather telling them what points you'd like them to cover.

Contact Information

Last but not least, make sure you provide your contact information and offer multiple ways if you can. Some examples are your email address, phone number, Github page, Twitter handle, Facebook personal and/or professional page, and Skype ID. Make it as easy as possible for people who want to work with you to get in touch.

Optional Portfolio Elements

You may include a list of your services and rates although some designers and developers do not. The choice is up to you. Professionals who don't include their service and pricing list are working on the assumption that potential clients will see their work and contact them to find out more. Services and pricing can often change as your business develops, so sometimes it's easier to leave the information off rather than updating it continuously.

Putting Your Portfolio Together

There are several considerations that arise when making your portfolio site.

Website Builders

Website builder at work

Some designers and developers will spend a great deal of time creating a website that is itself a part of their portfolio and showcases their skill. Others will put something together easily and quickly, even using simple web builder options such as Wix and Squarespace. Many web builders, as well as WordPress, have portfolio themes that are already set up for you to customize and add in your work. Another option is Cargo, which is a web builder that specializes in portfolio sites. If you need to get something up quickly to look for a job or find clients, there's nothing wrong with using an easier option. You can even transition your portfolio to a custom site once you have more time to do so.

A Process for Updates

As you create more sites, you will have additional items you may add to your portfolio. You should have a plan in place for making regular updates. Updating may also include removing items from your portfolio as you should focus on your best and most relevant work. Newer jobs may hold more weight with your target market than older ones.

Expand Your Reach

There are additional websites where you can add your portfolio and gain another link back to your website. While it may seem like overkill to have your work in more than one place, many employers and possible clients use these sites to find designers and developers to hire and will look for these links on your site. Some major sites include Behance and Dribble. You can also use Github to host a portfolio page as part of your account. Don't forget Instagram as well, which you can use to display your work in creative ways.

Examples of Great Portfolio Sites

It always helps to have inspiration when creating your portfolio. You can browse many collections online that curate some of the best portfolio sites around the web. Awwwards and Creative Bloq are terrific resources as well as Behance and Dribble.

To get you started, here are some strong examples of excellent portfolio design.

  • Developer Timmy O'Mahony has a minimalist yet effective approach to showcasing his skills. He provides his work with bold, visual graphics and gives detailed information on the goals for each job. In his About statement, he lists both "soft" and coding skills. It's a very simple but clear design overall that makes a statement about who Timmy is and why you should hire him.
  • Zero, a design agency in New York City, has a dramatic portfolio with compelling use of animation to make their site an example of their work. Their featured work includes information on how they came up with the design and how it was successful for their clients with measurable data such as the number of impressions.
  • Felipe Castro's site uses color and animation to highlight his work. A detailed process for each piece of work is discussed in a way that is attractive and fun to read. His About page personalizes him and engages the reader to see him as a creative individual with desirable skills who you would enjoy working with.
  • Shatterbox provides websites for clients and they make very effective use of client praise. The use of testimonials side-by-side with the site visuals emphasizes that their work makes clients successful and meets the goals of the project. The fun use of color also makes the portfolio stand out. They do not link to their clients' sites, demonstrating that it's not necessary to do so to make an exemplary portfolio website.

Get Your Work Online

One of the hardest issues that newer designers face is the fear that their portfolio needs to be "perfect" before they put it online. Use the guidelines above and remember that you can always continue to update your site and make changes as you grow in your career. The important thing is to get your presence online so that clients and employers can "see" you rather than focusing on a crafting a "perfect site."

Was this page useful?
Related & Popular
Website Designer Portfolio