How to Get Your Design Portfolio Details Right

Published in

Design Ideas/Thoughts

6 min readFeb 21, 2020

There are troves of links out there to help you create a design portfolio (how to write case studies, position yourself etc.). I want to share some cool non-essential discoveries I made while researching different portfolios out there in the wild (I did this before creating my own portfolio).

Home Page

The idea of a home page is a very natural one. Most sites we encounter have some kind of home page. However, your portfolio does not need a home page the way an e-commerce site does. If you are going to talk about yourself in your About page, then you do not need an entire home page devoted to that as well.

Like e-commerce sites though, a home page can be great place to give over a sense of mission and simply who you are etc., (which again can be done entirely in your about page as well) as an introduction.

I found several types of home pages or introductions:

Displaying Creativity — A dedicated home page or section that is unique and showcases thinking and creativity. It is always a strong move to show how you think and create.

Flexing — A dedicated home page or section to illustrate different accolades and types of content created. If you have a lot to show-go for it. Consider making it front and center.

No (dedicated) home page — Simply a brief introduction above other content. In a multi-page app this can be done by making the home page a list of your case studies.

In a one-page app this can be done by simply making the introduction the first section.

No home page (Literally)— Straight to the case studies

Introduction

An introduction should be just that; simple and to the point. Give a snapshot summary of who you are, what you are doing, and where you are headed. Since the introduction is relatively brief, feel free to include links to projects/resources that also help give an idea of who you are. Similarly, you can include reference links to your About or Case Studies pages.

Remember, your introduction can have character and be unique! An additional word or two can have a significant impact.

These introductions are simple but stand out wonderfully:

Many people don’t include a picture of themselves on their home page but have it in their About page. While it may feel natural to include it in your introduction, it is not necessary. On the contrary, I think it can be a bit distracting and too much to include on the home page. Leave that for the about page-when you dive into who you are.

Pictures

When including a picture, make sure it’s of good quality. For some reason, I have not seen the simple circular image done well. I think a regularly shaped image is simpler and easier to work with.

About Page

I saw great examples all around of about sections that were simply text. A few written paragraphs and that’s it. This format can facilitate more of a narrative or story about yourself, as you weave and connect different aspects of who you are.

Additional Information

If you have something that requires more explanation, consider doing so via a written piece (either on or off your site), instead of short form. Take for example, someone who has had a hybrid of roles over the years with a large variety of skills and may need to explain what role suits them best.

The most common solution for this is to create a Skills section, where the person simply lists their skills. While this certainly gets the job done, it does not really explain their overall situation.

A different way to do this would be to write a piece describing the skills they have and do not have (and what opportunities will work best for them).

This written piece gives a much clearer vision and explanation of their situation:

Context

When users go to different parts or pages of your portfolio, they should know where they are and how that relates to the context of your portfolio.

Logo/Name

Your name or logo should always be present. This is easily accomplished when you use your name or logo as the home link. Additionally, think about making your position/title visible as well. This reinforces not just who you are but also what you are (and what you are looking for).

Favicon & Title

In any browser tab you can display a favicon (an icon associated with the URL) and a site name. These will also appear if the url is saved in a bookmark list.

Use these to orient your user. You don’t have to change the title on every click or page but your name should be up there at all times.

When you do not have an image set, the default chrome image shows. It does not look sharp. It looks…offline or broken.

Navigation

One thing I encountered was that for a variety of reasons a lot of portfolios look and feel the same. One way to differentiate is to do something different with your navigation. Instead of the standard top of the page navigation, play around with different navigation placements. Believe it or not, most have been tried and some unconventional ones can work.

Not Work

If you have a substantial amount of non-work related items to show, it can be challenging to figure out where to put it all. There may simply be too much to put in your About page or all these items may not jive with your About page.

I thought this was a neat solution and is distinctly different than their About Me page:

For Developers

I encountered several really well done developer portfolios. For most developers, their portfolio will essentially be a digital resume. It will show what they’ve done, where they’ve worked, and perhaps link to projects or articles they’ve created. With this simplicity, there are a lot of really cool options that feel like resumes with a few creative twists.