Back

Retro TV with text on it saying "my portfolio"

Nov 12, 2024

Create a web portfolio that speaks to non-designers

You need a website for the same reason Amazon does. When buying a product, people tend to want to take a look at it first.

In this instance, YOU are the product. This website is your “Amazon.” Your goal is to get the viewer to “BUY.”

For you, that means your “buyer” is a hiring manager, recruiter, agency recruiter, and sometimes other designers. So how do you get them to buy?

Let’s go into the mind of a recruiter: Bleeep bopp bloppp

Wow, I already have 150 candidates for that Junior Designer job this week. I’ve just weeded out people from the resume screening. How do I get this number down to a manageable amount that I can present to the hiring manager?”

”I know! I’ll look at their portfolios. I took an art class in college so I can figure our what a good and bad portfolio is!”*

Okay this is admittedly a bit mean. But recruiters like this are often the first users looking at your web portfolio and “evaluating” it. And let’s be real….

  1. They’re often not the most educated about your profession

  2. They’re in a rush

  3. They’re looking for reasons to exclude you, because it makes their lives easier.


So how do we help recruiters get the info they need to advance us to the next round?

Let's think about what information can easily be evaluated by recruiters. What information do recruiters really use to make a decision?

1. We know that recruiters are more likely to move you to the next round if you have a brand name on your resume especially if its a big tech company.

…So we make sure to include portfolio projects we have that we've done for name brand companies. (even if they're not big tech FAANGs) Or at the very least put the logos of past companies you've worked with.

2. We know that recruiters are non-experts in design, and therefor generally evaluate candidates on their visual skill because it doesn't require as much expertise or time.

So we show big sexy images / clean UI / and sexy animations. We use awesome mockups to make everything shine.

  1. Because they’re in a rush, we tell a dead simple story and keep it short.

According to my Google analytics the average session is around 26 -48 seconds. Only 1/10 visitors actually open the at the first portfolio piece listed. No one is reading an essay. Your content should be at least 50% images. Juniors! I'm talking to you! No photos of sticky notes on a wall and huge long diatribe about how much work you did to determine the user persona. Quick and to the point story.


Start yourself off by purchasing a domain name:

There’s plenty of places to do this but I’ve personally used: Namecheap
Buy a domain based on your name like: www.firstnamelastname.com www.firstnamelastinital.com

Ideally, the shorter the better. It’ll take up less space on your resume and other materials.
The bonus here is that you'll also be able to create yourself a professional email down the line. like (you@firstlast.com). It gives an additional layer of professionalism in your applications. You can set up your professional email very easily with google, here.


Things to avoid:

Yes, there are pre-made places where you can host your portfolio… like UXfolio or Behance. Stay away from these. At the very least, the templates are generic which makes it difficult for you to stand out in a sea of applications.

You also often end up with urls like:

uxfolio.yourname.com
behance.com/yourname.com

My personal take is that a URL like the one above communicates either that the designer doesn’t understand the web enough to create their own personal website… Or that they couldn’t be bothered to make such an effort.

No PDF portfolios either. It’s just a worse version of a website, one that can’t be easily updated, or include sexy bits like animations. Often graphic design dinosaurs will recommend this method; tell them to promptly return to the museum.


Building your site

Framer

Framer is my favorite website builder. So much so that I moved off Webflow completely. If you're already familiar with Figma and Auto-layout principles you'll be right at home here. The most beautiful sites on the net right now are being built in Framer.
One of the best things about it is the component style cascade.
Basically you can edit a element in desktop view and have that change automatically update across all screen sizes. Copy changes? Button color? Auto updated. It saves so much time.

Where do I start?
I strongly suggest starting by purchasing a paid Framer template, rather than using one of the free templates. It saves you so much time by starting you off with things like good type hierarchy, built-in micro-interactions, and most important differentiation. (i.e. your site won't look the same as everyone else's because they used the same free template!)

Remember! High quality visual style is one of the things recruiters look for! And you have the ability to buy a template for $30 that does that! Or hell, it will get you 90% of the way there. This might be the best ROI you can get for you career.

Pros:

  • Figma-like UI makes for a low learning curve

  • beautiful type defaults

  • high-quality templates.

Cons:

  • Artboards can take a while to load in / Framer needs to be restarted



Webflow:

Webflow is still pretty good these days. It's just a lot slower to work with and has a much clunkier interface. Designs that would take me 1 hour in Framer, take me multiple days in Webflow.

Pros:

  • Extremely customizable

  • Lot of support for any type of custom animation / embedded videos / whatever you can imagine

Cons:

  • Higher learning curve, interface isn’t intuitive (take some youtube classes to get started)

  • If you don’t have any experience with HTML / CSS it going to be a struggle.

  • Interface is clunky

  • Constant need to check designs on different screen sizes to make sure nothing is breaking.

  • Lower quality templates

If you're really set on going with Webflow, here are a few templates to get you started.
Just like Framer, I strongly suggest starting with a template. It's honestly a no-brainer.

Webflow UI Kits

Silhouette - Webflow HTML website template

Altair - Webflow HTML website template

Creator - Webflow Portfolio Template


Knowing when to stop:

Your portfolio will follow you throughout your career. You’ll give it heaps of attention while interviewing and will often abandon it when your day job is going well.

During those interview stages, designers (myself included) will spend too much time “making it just right.”

We’ll tell ourselves things: ”Just a few nicer mockups, then I would have got that offer.” ”They said they wanted to see more process, I should add some exposition.”

The way you can tell if your web portfolio is good enough is: If you get your portfolio:

  • in front of another humans eyes,

  • for a job you are qualified for, and they consistently move you on to the next interview round, it’s good enough. (to be clear this would be the stage right before the phone screen round)

Your web portfolio is just one step in the sales funnel. If you’re already acing that stage then your efforts could be better allocated toward improving other areas.


I already have a portfolio. AND I’m not getting any interviews. What am I doing wrong?

Sometimes it's you, sometimes it's not.
You've got to remember that the majority of applicants to jobs these days don't get a single response from the company. Sometimes it's because it's a Ghost job. Sometimes it's because the company just has a poor recruiting process. Could be just that you're only hitting "easy-apply" on LinkedIn and the way you're applying needs works.

As far as portfolio goes… There’s a lot that could be causing folks to overlook you and the three that I see most commonly.

  1. Your visuals too small / weak / have mistakes

  2. Your site is generic and has ‘pick me’ word vomit that says things the: “I’m Luke, I’m an empathic designer who loves systems thinking” (I’ve done this cringe)

  3. Your case studies are too long and boring



What else?

Here’s a detailed article on what to include: (read it!)

How to create a compelling design portfolio companies will notice

If your portfolio looks like this, it's time to rethink it:

Honest Portfolio — UX Designer


Here are best examples of Product design portfolios that I've collected.

Most of these folk are high level seniors. Pay attention to how they structure their sites. These are the often the people who will also be evaluating you in your interview. Learn from them!


Great example of high attention to detail in UI:

Work | Marco Cornacchia


Great example of an individual project page:

(This one the great because it’s concise, and had huge easy to see mocks)

Lyft Rider App - Oleg Panichev


Great example of type hierarchy / visual sense

Shopify Pay Landing Page

/ A bunch more

Get organized, get informed, get hired

New

Beta release Nov 26

New

Beta release Nov 26

Walk into tech interviews with confidence, with all of the info you need at your fingertips. 

Join 170+ people already on our waitlist

New

Available Dec

Get organized, get informed, get hired

Walk into tech interviews with confidence, with all of the info you need at your fingertips. 

Join 170+ people already on our waitlist