Portfolios: You’re Doing it Wrong

There’s nothing I dread more than designing my own portfolio. I am my own worst critic and the most brutal of all. A web developer’s portfolio needs to represent the best of their work and abilities. The first selling point is whether or not they are competent. The second selling point is why you’re the number one candidate.

I started searching for examples via Google, Reddit, Hacker News, and dozens of designer communities. What I found was shocking.

Avoid these 5 crucial mistakes:

  1. Do. not. hijack. the mouse. Snap to and buttery smooth scrolling is the uncanny valley — It’s never as good as you think it is.
  2. Unwarranted clever navigation. One example rotated the entire screen as a horizontal 3D cube. Each rotation took four seconds to load.
  3. Animations for the sake of animations.
  4. Clashing color schemes.
  5. Loading UI and state transitions that take more than 4 seconds. Don’t abuse these to load more animation.

How can this be? These are the people that are designing our websites. I’m no better — I’ve made my share of mistakes and am no patron saint of perfect design. Call me staunch or rigid but if I avoid these five things then I will be able to sleep tonight.

The Process: Becoming Unordinary

The best examples were just that: examples. A good portfolio is in itself a creation and must reflect that you are both competent and have a competitive edge.

Initial prototype

When I began my process I opted for bold and colorful with a luxurious amount of space.

I was eager to share an early iteration with a colleague of mine. Then my heart sank.

“This version feels more like something from squarespace.com”

And he was right.

What I did in a day and a half was the same as a 10 minute static site generator. It was boilerplate and basic — the equivalent of store bought cookies. This was no masterpiece.


Back to the drawing board

To create a masterpiece I had to fix my boilerplate problem. Some examples I found use abstract imagery, extravagant animations, or clever navigation. These all seemed nifty but otherwise lacked in cohesive usability and character. What I wanted to share was the one thing that drives my work: passion.

It starts with a panorama of my favorite spot overlooking the Biscayne Bay. The sunset casts shadows on distance skyscrapers. Clouds crawl along the horizon as gentle waves rock nearby ships.

Mouse and touch driven Panorama React Component.

The image responds to your mouse and on mobile your touch as if you were controlling a camera. It feels as if you are right there at my favorite place to watch the sunset. I chose this because it’s quite a beautiful sight and a clever use of JavaScript to display a panorama image. The result was characteristic but uncompromising in usability.

The Process: Usability

Too many examples I saw had gratuitous animations that played while the page loaded. Afterwards I would then have to suffer through further grandiose displays of animation and visual clutter.

If I have to wait six seconds for your site to load I should not have to endure another three seconds of animation. Please designers I beg you it’s time to put away the faux typewriters. Say no to autoplaying audio or assembling the page from hundreds of particles. I would never suggest these atrocities to my clients so why would I settle on it for myself?

Animations when use appropriately can draw the eye and give the user a sense of control. But gratuitous and erratic motion invoke a deep anxiety that makes users want to leave the page. It’s the very reason why Apple is blocking autoplaying videos in the next iteration of Safari. Users need to feel in control.

A good rule of thumb is to only use animation as feedback to a user’s inputs and interactions. All other motion should be subtle, smooth, and purposeful.


The Process: Less is more

The next cardinal sin I found were excessive lists of skills. Developers have a habit of bragging about every piece of technology we’ve touched. This results in a bulky conglomerate of buzzwords that bleed into nothing. When everything stands out, nothing stands out.

Not as useful as you think.

For this I am guilty. On my previous portfolio I tried to group skills by their core system of development.

In an interview for a JavaScript position, the feedback I receive was that it was a neat feature. But it did not help distinguish what I do with these skills.

When applying for a job, your portfolio should list what you want to work with. Leave the extras for your resumé.

Look at how boring that list is — as if adding stars will make it any less tedious to read. If my goal is to convey passion, I need to be selective and specific about the strength of my skills. Prospective clients need to know what I do best and how I use these skills.

Here I put my strongest skills first. You will only see the technologies I am most familiar with in practice. Furthermore I only list skills that are advancing. Technologies that I work with need to be ones I’m passionate to use instead of anything and everything. That’s why I no longer list Angular JS despite more experience than React.

You have the opportunity to instill a lingering association. Create a competitive edge by associating these skills with something tangible. Be a unicorn, sought after for distinguished talents instead of spreading yourself thin.

An extravagant mistake

In the process I once again made the mistake of extravagance. I wanted to show my previous work in a way that was quick to navigate and came across Timeline JS. It’s a neat plugin that plots abstract text and images across time — a perfect experience for this use case. But the plugin wasn’t for me as I wanted my portfolio to be hand built in React.

You can download my React Timespan component via Github.

It turned out neat and powered entirely by React and CSS. It was clever and catchy and people seemed to love it. So why did I scrap it?

Clever isn’t usable.

It’s a risky choice to decide against usability and to ignore how we interact with the web. In this case I ignored the the flow of navigation from vertical to horizontal. The design forces the eye into a pattern of repetitive eye movements that cause strain.

Strive for predictable and easy on the eyes. Visual hierarchy is important to guiding users where you want them to go. Keeping eye movements fluid prevents strain.

In spite of gut wrenching guilt I scrapped the timeline and went for something basic. It’s more important that my users keep reading on versus admiring a clever gimmick. The design became easier to use, navigate, and flexible in practice. The flow opened up and the visual weight distributed even in ways that clever couldn’t.

Learn from my mistake. Navigation should flow in one direction only: down. Be conscious of the fluidity and guide your users through a hierarchy of importance.

Similar to a story you want to capture their attention, keep them hooked, and give them a proper resolution.


Every good website needs a call to action. A compelling reason for them to pull the trigger and one last ditch effort to pull ahead. In this case it’s a portfolio so my call to action should encourage people to reach out and hire me.

Impulse told me to create an elaborate contact form. One with form inputs for all sorts of question that would onboard a new client. I looked back at my old dusty contact form on my previous portfolio. It was simple and while I got a couple messages nothing productive ever came from it. Reflecting on those messages — I realized I was catching goldfish when I wanted lobster.

The best of connections I make arrive through word of mouth and reaching out myself. Contact forms were useful when you had to worry about putting your email address out there. Today anyone can reach you no matter how far at arms length you keep them. As my statistics teacher in high school once said: Keep it simple stupid.


Introspective

There you have it: something I am proud to share. What I learned about user experience within the narrow focus of portfolio design is what I want to share to spare anyone the grief of building their own portfolio:

  1. Stand out. Use conversational language and add a personal touch. Know what your role is and make it specific.
  2. Don’t compromise usability. Use progressive technologies like asynchronous loading. Would you make your client’s customers wait ten seconds for their page to load?
  3. Keep it simple. Apply the same experience you would prescribe for a client. Make navigation easy to use and predictable. Avoid unnecessary animations and extravagant practices.

Before and After


Looking for inspiration? Checkout these examples I found that inspired this research and some of the choices I made:

Animations here are used appropriately without contaminating loading times or responsiveness.

The use of black and white contrast here is stunning, scroll in animations are fluid and one of the better single-page portfolios I have seen.

A well executed concept of credibility and recognition. The “UX” section with the modals for further exploration are intuitive and easy to use.

Stunning use of imagery and visual weight. Animations are the median between subtle and captivating.

This Apple-esque clean and minimal approach is beautiful and uncompromising. Navigation can still be clever without sacrificing usability.

An example of a well executed typewriter effect. Another beautiful single-page website.

Sublime user experience and theme. Animations are subtle although the octopus drawing could be just a tad bit faster.

Easy to navigate, clean, and modernly professional.

Another great use of contrast with a splash of vibrant color. The contact form is simple and elegant.

Simple and professional. A great example of how to demonstrate “the process” in a manner that’s reassuring to prospective clients.

Proof in concept that navigation can be distinct without sacrificing usability. Scrolling is executed horizontally, retaining the same fluidity and using appropriate spacing.


Tell me I’m not alone…

For those who have ever been in this position and you that are your own worst critics:

How do you settle? What makes your portfolio a masterpiece? Tell us how you incorporated your own flair. Share a case where you chose careful over clever.