Building a portfolio in 2024: Tools, Tips, and Inspirations
Episode #5 of Fundament in which we discuss tools and services, that you can use to build your portfolio. We also included a bunch of tips on structuring case studies.
As 2023 is coming to an end, it’s the perfect time to plan some New Year’s resolutions. One of these could be getting a new job or acquiring more clients on freelance. Maybe you are on the outlook for your very first job in design, making some preparations and checking what’s going on in the job market.
What is absolutely required even to start thinking about any of these?
A great portfolio, of course.
Today, we explore what a portfolio needs to have to be called great, what technology you can use to build one, and how to structure your projects. We will also discuss how many projects should be in your first portfolio (spoiler alert – it’s not five). And at the end, we have included a bunch of amazing portfolios. Get inspired!
Submit your work to the Portfolio Critique Session
Already have a portfolio and would like to get feedback from Senior Product Designers? Drop us an email to portfolio@fundament.design by the end of January 2024. We will pick and critique a few in a February live session.
Where to build a portfolio in 2024?
Designers can pick one of many ways to build their portfolio. It could be an offline PDF or an online website. It could be either a personal page or a space in a portfolio platform. Let’s take a closer look at the most popular options and consider their pros and cons:
PDF slide deck
Figma prototype
WordPress + Semplice
Dribbble, Behance
Framer
Webflow
PDF slide deck
While a PDF slide deck is great for structuring your work in the exact order you wish your audience would consume it, it has a few flaws.
First of all, it’s really limited when it comes to interactivity. You can insert links for external websites, for example, to your online project or link specific pages in the document, but you can’t embed an interactive prototype.
Another drawback is file hosting and sharing. Some recruitment forms support file upload, but usually, it has a size limit. You could keep it in your favorite cloud, like Dropbox or Google Drive, but it requires downloading the file by a recruiter.
With a PDF file, you have full control of what’s inside and in what order, but you can’t control how the file is displayed. What if a recruiter is tech-savvy or lazy, and instead of turning the full-screen mode on, they look at your portfolio in a tiny PDF embed window in their HR platform?
And the last thing is missing online exposure. Unless they know the link to your file, nobody will see it and discover it.
✅ Pros:
Zero or very low cost (Use Google Slides)
Full control over the order of things
Ability to include projects you wouldn’t show in public
No coding skills required.
🔴 Cons:
No control over how the file is displayed
File size limit in some recruitment processes
Missing the opportunity to be online and get discovered.
Figma prototype
You can consider creating a portfolio in Figma as an alternative to a PDF file. Prototypes made with Figma are far more interactive and can adjust to the screen size. But still, they are not ideal.
The first and most important flaw is loading time. As Mitchell Clements mentioned in his LinkedIn post when he was reviewing portfolios for a hiring process, an average Figma portfolio took around 20 seconds to load. As a recruiter or client, you can do nothing in the meantime. You need to wait until the bar is fully loaded.
Another point similar to PDF slide decks is the lack of online exposure. People won’t discover your prototype until you share the link with them.
✅ Pros:
Zero or very low cost (Figma offers a Free plan)
High level of interactivity
Ability to include projects you wouldn’t show in public
No coding skills required.
🔴 Cons:
Low control over how the file is displayed
Long time of loading
Missing the opportunity to be online and get discovered.
WordPress + Semplice
WordPress is a popular choice to build not only a blog as its authors originally intended. Today, with just a couple of plugins or a specialized theme, you can build basically any type of website, such as an online store, a music festival website, or a designer’s portfolio.
WP is relatively easy to set up and free to us. Popular web hosting providers offer easy installation of WordPress on your server with a single click. The cost here is, of course, the web hosting plan and a domain.
When it comes to building a portfolio on WP, Semplice is a very handy and popular option. It’s a specialized WP theme that offers a bunch of cool features, such as an intuitive visual editor, custom animations and transitions, custom typefaces, and an advanced portfolio grid.
What’s really cool about having a portfolio built with Semplice is a chance to be featured on their portfolio showcase. Each month, a few new websites join the gallery. If your portfolio is standing out, it could be one of those.
With Semplice, you can customize your website using drag and drop for almost everything from the size of the grid through custom typefaces and mobile navigation reveal transition. Very advanced customization might require basic coding skills.
The single license for a lifetime costs $119.
✅ Pros:
High level of control of what and how people see
Easy-to-use builder
A chance to get more exposure on Semplice’s showcase.
🔴 Cons:
Relatively high cost
Requires basic coding skills
No updates until you buy an upgrade.
Dribbble, Behance
Dribbble used to be an invite-only platform, and originally, it was meant to be a space where designers could share their work in progress and get feedback. Over the years, it has evolved–it’s now open for everyone and allows to share longer forms of publications such as case studies and even videos.
Both Behance and Dribbble have been around for more than ten years now. Behance was acquired by Adobe a few years back, but the main goal of the platform has not changed–publish your projects and get discovered by the worldwide community.
Getting discovered might be considered as a pro and con for both platforms. It’s a superb opportunity to get more visibility for free, but immediately when you join, you start competing for numbers–more views and followers.
Having a profile on both platforms could be a space to see what other designers are cooking and a nice addition to having a personal website. In order to be seen as a professional designer, a website on a personal domain is required. Think of social platforms such as Behance and Dribbble as something extra to your website.
✅ Pros:
Zero cost
Boosted online exposure
Super easy to set up an account and add projects.
🔴 Cons:
Both platforms are used by millions of designers, and breaking through might be hard if you start today
Harmful incentive to compete and chase numbers.
Framer
Framer, as we know it today, is an evolution of a prototyping tool. It has inherited the super powerful animation engine and easy-to-use interface from its early days. Today, you can build a website with Framer in hours, if not minutes, thanks to the Figma integration.
Framer is an excellent choice for building simple websites like a portfolio. A few nicely designed pages with cool transitions. Designers can make their project in Figma first and import it to Framer with just a couple of clicks. What’s left to do is polish things here and there, add style for mobile devices, and set up page transitions.
Publishing a website with Framer is extremely easy–you can use their free plan and set up a *.framer.page domain, or go with a paid plan and use your own domain (starting from $5 per month). No external web hosting required.
If you want to speed things up even further, you can use a template – Framer community members offer free and paid options. Also, similarly to Semplice, you can submit your website and get more visibility in the Community’s website of the month contest.
✅ Pros:
Zero or low cost (custom domain plans starting at $5)
Super easy to set up with the Figma plugin
Intuitive and powerful builder.
🔴 Cons:
Getting a bit expensive if you want to build something more complex or need more traffic.
Webflow
Webflow is probably the most advanced and powerful no-code tool on the market. It’s great for building simple websites, like a portfolio, and more complex projects requiring integrations and displaying CMS data.
Starting might not be as simple as with Framer. The reason is Webflow’s builder, which is really advanced. There’s a learning curve to discover all available tools and settings. But once you do, building websites with Webflow becomes almost limitless.
If you are a Figma user, you can speed things up with the plugin. It works similarly to the one offered by Framer. Make the designs in Figma first and import them to Webflow with a couple of clicks. All you have to do after is to make some tweaks and hit the Publish button.
The other similarity with Framer is templates. You can choose a free or paid template from Webflow’s community and kick-start your website project.
Plans start at 0$, where you can get a *.webflow.io domain and add up to two pages to your project. For more bandwidth, pages, form submissions, and a custom domain, you would be charged at least $14 monthly, which sounds a bit pricy when compared with the least advanced paid plan from Framer.
✅ Pros:
The most powerful builder on the market
Figma plugin and templates
Free plan for less advanced websites like one-pagers.
🔴 Cons:
A bit pricy on the least advanced paid plan
Learning curve to get familiar with the tool
Other options
The options listed above are not the only ones available on the market. There are more tools and platforms, such as Contra, which would be an excellent choice for freelancers. There’s also a website builder from Wix, which is pretty advanced but not as popular as Framer or Webflow. Uxfol.io is another website builder made specifically for UX Designers in mind. And, of course, you could go for a fully custom website, but to build one, you’d need to have more than just basic coding skills. Or hire a professional front-end engineer.
Structuring projects
Write case studies.
Don’t write case studies.
Case studies are required.
Nobody reads case studies; forget about them.
The Internet is full of contradictory advice. But I will try to clarify it. Don't bother yourself if you are a Graphic Designer or UI Designer. The visual aid will do the job for you. If your work is not purely visual, and you are a UX Designer, UX Researcher, or Product Designer, write case studies.
But how to write a good one?
I’ve put together a list of a few tips on how to write good case studies that people want to read:
Keep it relatively short. Don't force hiring managers and prospects to spend 30-45 minutes reading a single case study. Include only the most important and interesting bits.
Learn storytelling, it’s a real thing. You don’t want to simply list the steps you took to produce the final output. Try to structure it as a story - what was the problem, what did you do to solve it, and how it went.
Don’t simply list the UX methods you used in the project or, even worse, explain what they are. I observed it in a number of junior designers’ portfolios. The urge to explain all the methods they were taught in a bootcamp. Please, never ever do that in your case study.
Attach an interactive prototype or a link to the final product if available.
Don’t put too much emphasis on visuals, but don’t forget to include some aid. Did you design an app? Show key screens. Did you make a website? Show the most important and prominent parts of it.
One nicely structured and thoughtful project in the portfolio is better than five incomplete ones. There’s absolutely no requirement to have a certain number, like five, in a portfolio of a junior designer.
Mention what was challenging in the project and how you overcame it. Show the pieces that didn’t make it into the final version and explain how you improved them.
Spend some time writing good headlines and the overall structure so it catches the attention of hiring managers in a rush.
What else to put in your portfolio
Projects are, of course, the essence of your portfolio. But they are not everything. Recruiters and prospects would love to know more about you as a person and a professional. It’s pretty common to have an About Me kind of page on your portfolio where you can tell your story:
Who you are, how you started, what motivates you to do the work?
What did you do earlier, and what kind of projects are driving you?
What do you want to achieve professionally?
It’s always nice to include some personal bits. Many organizations don’t hire only for pure design skills. Person-Organization Fit is a real thing. Try to think about these questions when describing yourself:
What do you like to do outside your job?
Who inspires you in your life?
What music, film, or literature do you like?
And don’t forget to add a photo of you (or even a few) – people need to know you are a real person!
But before you show your projects or tell the full story, you need to introduce yourself. Tell your readers in simple words who you are, what you do, and what makes you stand out. Try to be specific about what you do, and don’t over-exaggerate what makes you special. Everyone is passionate.
Last, but not least, it is letting people get in touch with you. Depending on the tool you choose to build your portfolio, it might be a contact form or simply an e-mail address. If you are active on social media and post content related to your profession, don’t hesitate to include a few links.
Examples of outstanding portfolios
Billy Tseng – Product Designer from California, US
Nick Jones – Interface Prototyper and Designer from North Carolina, US
Mateusz Nieckarz – Product Designer from Poland
Michel van Heest – Product Designer from The Netherlands
Julien Renau – Creative Technologist from Portugal
Bonnie Hong – Product Designer from Australia
Nenad Grujičić – Product Designer from Serbia
Kris Barilnik – Product Designer from the UK
Shu Yu Hsiao – Graphic Designer from New York, US
Subscribe to Fundament
If you find our articles useful, please consider subscribing to the newsletter. We dispatch an episode full of original content for Product Designers, UX Designers, UI Designers, and Product Managers biweekly on Thursdays.
Tool of the week
Figma to Lottie
The easiest way to animate your Figma designs and export seamlessly to Lottie, GIF, or MP4 for your websites, apps, and marketing purposes. With this Figma plugin, you can animate your Figma designs seamlessly with pixel-perfect export from Figma to Lottielab.