Build a simple, compelling design portfolio in days, not weeks
It’s that time again. Maybe you were laid off. Or you’ve got a steady job but you’re bored with your assigned projects. You didn’t get that raise or promotion you wanted. Whatever the reason, it’s time to start looking for another design job. And that means revamping your online portfolio.
The state of design is always changing, and any portfolio updates should take those changes into account. So what’s new in the design job market? For one, skeumorphic design is making a comeback. It has a slightly different name, Neumorphism (aka “New Skeumorphism”), but the concept is the same.
What hasn’t changed: Every design job requires a portfolio. Your portfolio site can include case studies, processes, side projects, personal interests — a wide range of things. The difference between a compelling portfolio and a boring one is how you present that information to your audience — in this case, the hiring manager. To be compelling, your portfolio doesn’t need animated illustrations, micro-interactions on each hover state, or extensive product metrics. Most of us don’t have that sort of time, anyway. Instead, here’s a guide to spending the time you do have on the factors that can land you the job.
This five-step portfolio framework optimizes for time and simplicity, while still showcasing your skills.
1. Start with words
Grab a pen and a piece of paper. Write out a list of your accomplishments. For each, note:
- Which design-related product, feature, or accomplishment did you work on?
- When did it start and end? Or is it ongoing?
- Where did you work on it?
- What impact did it have on its intended users?
Think of a résumé. Usually, you’ll see a list of jobs, each with associated responsibilities and achievements. Think of your online portfolio as your design résumé, except you’re not constrained to a 8x11 piece of paper. And while this may read as heresy to some designers, you don’t have to use images on the homepage. Pixel-perfect visuals take lots of time to create, and too often fail to communicate what hiring managers want to know. In fact, whether you use images or not, I recommend making the focus of your portfolio home page a compact, clear sentence or two for each position, highlighting achievements to show how a given design made the lives of others measurably better. Something like this:
How do you want to come across to the recruiter or hiring manager? Maybe you want to seem playful, so you add emojis. Want to convey that you’re a data nerd? List quantitative methods and metrics. Identify your goal, then craft your sentences to engage your audience and communicate your chosen profile.
However you position yourself, keep it short and to the point. Recruiters and hiring managers have lots of applicants to screen, and they want the good stuff upfront.
2. Show, don’t tell with design examples
If you’ve designed something you’re proud of, you should also let the result speak for itself. Include a link to that product landing page, user study presentation, or feature white paper. If you include case studies, they’ll help explain your design and problem solving process, but make sure to touch on important points in the site itself, as well. Many hiring managers scan case studies just to see if your designs shipped. The bottom line: Experience matters. If you can ship something once, you’re likely to be able to do it again.
If you can’t show a product or feature (for example, because of security issues or NDAs), the next best thing is to share write-ups or reviews of your work. Few other things give your design instant legitimacy as a positive writeup from a well-known source, such as TechCrunch or the New York Times, or even a glowing App Store review. You’re no longer the only voice advocating for your hard work.
To make the impact of your work clear, create a “highlight reel” of articles, videos, and reviews. Just as you don’t read every restaurant review before you decide where to eat, recruiters and hiring managers are unlikely to click on every link in your portfolio — and that’s fine. The point is to make it clear that others vouch for your work.
3. Fit and finish with typography
Your portfolio homepage is where you make your first impression. To help viewers focus on your work, the words that describe it must both look good and be easy to read. Poor font choice or cramped text can distract readers and undercut your design cred. Strong typography can help bring your words, and your work, to life.
It’s easy to spend hours fiddling with type. Don’t go down that rabbit hole. Instead, save time and present your work clearly with these tips:
- Choose a popular serif and sans serif font from Google Fonts.
- Choose one highlight color for links. Keep the main text a dark, readable/accessible color.
- Keep all content in a single-column format.
- Choose a line height between 1.3 and 1.5.
- Set line width to 100–120 characters per line.
- Remember that white space is your friend.
Follow these guidelines and what you see on the screen might look almost too simple. That’s OK — you want, as Dieter Rams puts it, “less, but better.” It’s not the high-fidelity product images or fancy digital illustrations that make your portfolio compelling. Yes, those assets can be great when used appropriately, but they require a lot of effort to create, and you might not have the time.
And bad typography can kill even the coolest portfolio.
Good typography, meanwhile, communicates subtle things to readers–thoughtfulness, emotion, and professionalism, along with crucial assets such as visual chops, a command of information hierarchy, and a concern for accessibility. If these qualities aren’t your priority, or if other factors top your list, deviate from them with intentionality. Ask yourself how you want to come off to the hiring team, then use typography and layout to communicate that. In short, show that you can communicate with design.
Typography touches on foundational design principles including information hierarchy, accessibility, visual aesthetics, consistency, usability, and storytelling. It’s a core element of good design.
4. Decide how to publish
OK, you’ve got a list of career highlights, links, and a general layout. Now it’s time to build your site.
If you’re looking for some inspiration, check out portfolios that use this framework here, here, and here, then dive in on either a template or a custom site, taking into account your HTML/CSS skills.
Prebuilt template
Squarespace and Wix provide out-of-the-box website templates that define styling and layout. You plug in the content, then (optionally) adjust factors such as color and page layout variations. The biggest downside to using a prebuilt template is limited customization, though you can stretch your options if you know some HTML/CSS.
From scratch
Building your own site takes longer, but gives you complete freedom as to look and feel. Recommended resources:
- Hosting: Use the free Github Pages + Jekyll, especially if you’re building a simple, static portfolio site.
- CSS component library: Try Tachyons or Bootstrap. Don’t spend time defining CSS classes and media query breakpoints; go with an existing library that’s proven to work.
- Domain name: There are lots of domain name providers out there; I use Namecheap. I recommend spending a few bucks on a custom domain name. If you really can’t afford it or don’t want to, Github will give you a free one in the format https://username.github.io.
5. Go forth and get the job
Design hiring, and portfolio screening, can seem highly subjective. Hirers might pass up a designer with 10 years of experience. They might also take a risk on a UX bootcamp graduate with a one-project portfolio. Much of the process is not in your control. To stay sane, focus on what you can control — including your portfolio. And while this framework is no golden ticket, it does offer a clear way to present compelling work simply and quickly. Use what makes sense for you — and go land your next design gig!
Special thanks to Lisa and the Salesforce Experience and Design editorial staff for feedback and support.
Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System
