It’s hard to imagine that a single artifact can overshadow years or decades of work, but that’s the weight that your portfolio carries.
Whether that weighting is fair isn’t up for discussion. Portfolios are simply the first interaction most people have with designers, so what your portfolio says and how you show it matters greatly.
The content
Before focusing on what your portfolio home page will look like, it is crucial to determine what it might say.
While portfolios should look unique, every home page all must deliver a set of essential information to be useful to the visitor.
- Who you are
- What type of designer you are
- Where you’re located
- Preview your work
- Provide navigation to other parts of the portfolio
- Have links to other personal sites of note
It’s tempting to alter this formula, but remember a few things before you attempt to do so:
- Your home page isn’t an art project. It has a particular job to perform.
- Most people don’t know who you are, so they need this essential information.
- Because of government regulations, knowing where you live may directly impact your ability to accept employment regardless of whether you go into an actual office.
- By definition, the presence of your work makes this a portfolio.
- Link selectively to other sites. Sites like LinkedIn are a given, but be sure to clean up your social media sites before linking them.
Positioning
Your portfolio is a tool for casting you and your work in the most favorable light, but how you use it will change throughout your career.
Most people tend to enjoy working with nice people, so keep your message on the home page friendly. Greet new visitors to your portfolio as you would if met them for the first time at a meetup.
Source: bestfolios.com, newpragmatic.com
Early on, the goal is to attract full-time employers or individual freelance opportunities, and how you position yourself will directly impact your chances. A home page stating that you are ‘currently seeking new clients’ can send the wrong message if you are looking for a full-time gig.
The good news is that a portfolio is easy to update as your situation changes, but you still have to do the work of making those updates.
A selected tour of work
When selecting projects to display, focus on importance rather than time. Just a recently completed project doesn’t mean that it should be listed first.
All work is not created equal.
Some projects are very robust, while others are small and relatively insignificant. For this reason, I suggest having a ‘featured’ section on your home page to highlight your most important project.
How you display this’ featured’ project will be different from the others in your portfolio. Rather than wireframing a solution for the work, think first about the content. What will you include for a ‘featured’ project that wouldn’t be present for secondary projects?
You can further divide the work you display beyond just ‘featured’ and ‘others’ but remember that your portfolio is only as strong as the weakest project. At some point, you will have to kill once-favored projects to elevate the overall portfolio.
Quality > Number of projects
One good project is better than ten mediocre projects.
One great project is better than ten good projects.
Source: newpragmatic.com
If your body of work is strong enough, three projects might work best. It allows you to show depth without risking showing weaker projects.
Remember, the work’s quality is determined in the eye of the beholder and in context with other people who are applying for the same position. A portfolio might be great for one job but only good or poor for another.
Just be truthful with yourself. If a project isn’t very good, leave it out.
Maintenance
The downfall of most portfolios is the lack of maintenance over time.
Even with the best intentions, it can become easy to push off routine updates when you are gainfully employed. Only when crisis strikes do many designers bother to dust off their portfolios for updates — which is when we introduce most errors.
Trivial issues like misspellings or broken links will dramatically lower the value of any portfolio.
Simply commit to updating your portfolio every quarter to avoid hurting your chances later.
The presentation
When you start the design process focused on the content, the structure you use will naturally present itself.
As outlined in the overview, every portfolio has a navbar, hero unit, a section for case studies, and a footer for links to outside resources. What’s important is how you combine these elements into a cohesive unit. As displayed below, this is where you will rely on visual design and interface skills the most.
Source: bestfolios.com, newpragmatic.com
The quality of your home page has an outsized impact on whether someone takes you seriously as a designer. Your portfolio must be competitive at first glance with other portfolio submissions for a given position, or it will be discarded.
I’ve hired around a hundred designers for various roles throughout my career. 70% of all portfolios submitted for an open position did not pass this test. I simply did not have time to give them further consideration because better work was already on the table.
As portfolio design is always subjective, there is no singular ‘best’ to aim for. Equally important, portfolios that are competitive with one another do not have to look the same. Instead, successful portfolios survive on two specific key metrics:
Do no harm There are no major flaws present that would eliminate the portfolio. Significant flaws would include poorly designed projects, broken links, misspelled words, weak overall design.
X factor The portfolio stands out on at least one aspect. Superior overall visual design. Clever use of animation. Technically impressive usage of code. Etc...
Manage to hit those key metrics, and you are likely through to the next round.
Home pages to study
Individual skills aside, this collection of portfolios would compete well against one another even though they are each strikingly different.
| Portfolio | Description |
|---|---|
| Ben Howard | Greets visitor based on time of day. Clean grid, logo |
| Vandana Pai | Color, type, and space working in unison |
| Muharrem Şenyıl | Effective use of lightweight animation |
| Kathleen Warner | Great spacing, light animation |
| Michelle Yao | Grid-based structure |
Exercise
Just as we’ve done with the Case Study and About Page exercises, this Home Page exercise is content-focused. Determining the information, you will display before you attempt to design the page will ultimately speed up the visual design work that follows.
As the page's structure is largely determined, you won’t need to do as many iterations of your content here. With the priority of information set, use this Figma document and complete the following:
Part one: Create content for each of the sections present.
Part two: Create a rough mobile wireframe using the content produced in part one.
Part three: Building upon the mobile work in part two, expand the design for presentation on a desktop.
Once complete, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.
///
Up next Case Study Template