10 Best UX Portfolios and What We Can Learn from Them
This post was last updated on September 5, 2021.
A UX portfolio is a must for any designer. It’s your chance to present your work at its best and provide in-depth case studies that expose your creative process and reflect who you are.
Whether you’re a freelancer or are looking for a full-time job, potential clients or employers will almost always expect to see a polished UX design portfolio. Without one, they might not consider you for the position. That’s why you should take some time for introspection, harness your best web design skills and create an impressive portfolio website to showcase your work.
Translating your complex, thorough workflow into a visual format can be a challenge, especially if your work revolves solely around UX. However, there are plenty of ways to tell your story and incorporate visual assets.
For ideas on what to include in your portfolio, how to structure it and much more, take a look at this selection of UX portfolio examples. Plus, we’ve added a list of best practices to take into account when creating your own UX design portfolio:
01. Sophie Brittain
Digital and branding designer Sophie Brittain has crafted an inviting, spacious design on her UX portfolio. A visual of brightly colored building blocks appears at the top of her homepage. This motif repeats throughout her portfolio, tying together the various pages and helping to define a distinct personal brand.
As you scroll down the page, you’ll notice that her website menu stays fixed to the screen, providing convenient navigation throughout her portfolio. In addition, the shift from a white background to a bright blue one on the ‘About’ page makes for a nice surprise and a refreshing browse, while remaining aligned with the rest of Sophie’s design.
Key takeaway from Sophie Brittain’s UX portfolio
Make it clear who you are and what you do. It’s likely that prospective employers and clients will be looking through dozens of UX portfolios - and yours is just one of them. That’s why you should utilize the top fold of your website to introduce yourself and briefly clarify your areas of expertise.
Sophie has done just that, stating her name and creative discipline within the field of design. With large typography and plenty of whitespace surrounding her introductory sentence, site visitors certainly won’t miss this essential piece of information. She’s also added a friendly “hello!” and a personal touch in the form of custom icons.
Together, these details subtly convey her personality, while explaining who she is and what she does. If you're inspired by Sophie's design, take a look at these portfolio templates for further inspiration and guidance.
02. Diana Tatarenko
This 2021 Wix Playground Academy participant has created a mesmerizing UX portfolio using clean lines and simple colors, with the addition of whimsical, lime green font for a playful vibe. The highlight of Diana’s website is her Work section, which not only displays her final product designs, but goes into detail explaining her process.
Each project outlines the problem the client faced and a full explanation of how Diana went about solving it through design. She shows visitors her complete vision, her thought process for creating the user flow and images to support each step. She offers a complete, comprehensive overview of how she created each product, providing transparency and instilling trust in potential customers.
Key takeaway from Diana Tatarenko’s UX portfolio
Be transparent with your process. By showing how you achieved your final product designs, clients will be more likely to hire you because of the confidence that shines through in doing so. Explaining in detail how you got from point A to Z with the support of text and images proves you are thorough, detail-oriented and truly care about the work you do.
03. Run Wild
Run Wild offers an almost interactive experience, as a foggy mountain view with animated grey clouds move in the background, serving as the site’s welcome screen. A tagline is written in block white letters, and a button that begins the user journey is placed below, starting with the designer’s bio.
The entire site is whimsical yet informative, with images of the designer’s projects allowing his artistic talent to shine. Navigation is a breeze, with a hamburger menu in the upper left corner as well as each menu item written across the bottom of the page.
Key takeaway from Run Wild’s UX portfolio
Use simple navigation. Making a UX portfolio easy for visitors to find their way around allows them to move from page to page without feeling frustrated. It creates a better user experience when all of the information they need is right there in front of them. If someone has to hunt for your resume or contact information, they may give up and leave your site.
Additionally, one-page websites like this one are particularly easier to navigate because there are no external pages to click through. Run Wild has also chosen to incorporate menus at both the top and bottom of the page, further adding to a seamless user experience.
04. Saloni Joshi
This straightforward UX portfolio contains a spacious top fold dedicated to a short, introductory paragraph and links for getting in touch with Saloni. Further down, you’ll find the projects she's chosen to showcase.
Saloni has included a thorough case study for each of her completed projects, serving to present her range of skills. By clearly indicating her role, mission and timeline of each project, visitors can easily understand the complete essence of each piece of work.
Key takeaway from Saloni Joshi’s UX portfolio
Clarify your current employment status. When people are looking at a design portfolio, they want to know what your current situation is. Are you a freelance designer available for job opportunities or do you have a full time job?
Saloni has included this essential information at a strategic spot - the top fold of her homepage. Prospective clients and employers can instantly see her job status, without having to search elsewhere. She’s also added a few words about her previous positions. Visitors who want to find out more can check out her CV that is conveniently linked to in the menu.
05. Dalya Green
As a student of the Playground Academy, Dalya Green’s one-page UX portfolio certainly packs a punch and leaves visitors with a well-rounded impression of her work and vision. And after all, that’s exactly the impression portfolio websites are meant to have.
Dalya’s site is full of fun, interactive elements that engage visitors in a way that makes them want to linger just a little longer. A moving, colorful background of blues, purples and greens flows like watercolors, but a toggle switch allows visitors to switch the color palette to pinks and shades of turquoise.
Across from this engaging switch, there’s a white circle with the words Click to see some fun facts. Upon clicking, five more colorful circles overlapping her intro with facts about who she is, including her morning routine and her Netflix vibe. She even has another pink button at the bottom of her page in the Info section that says, Missed the fun facts? When visitors click, the same facts appear overlaid across the screen. This creative way of welcoming visitors grabs their attention immediately and entices them to continue exploring your site.
Key takeaway from Dalya Green’s UX portfolio
Make your portfolio an interactive experience. As a UX designer, your job entails creating smooth and effortless digital experiences. When you allow visitors to not simply observe your portfolio, but interact with it in ways that they don’t typically interact with a website, it shows off your creativity and design skills and what they can expect from your work. In addition, it makes your website highly unique and memorable.
06. Lital Karni
An energetic combination of colors is the first thing you see on Lital Karni’s professional portfolio, making the top fold appear both sophisticated and playful. The layout on the homepage is simple, with an organized fullscreen grid layout. Lital has carefully matched a different background to each project, while also paying attention to the overall look on the homepage.
She has also created a custom logo design that stays fixed to the screen and is conveniently linked to her homepage. Thanks to its subtle glow, the letterform logo remains visible against any background color.
Key takeaway from Lital Karni’s UX portfolio
Be easily contactable. After all, the idea of your personal website is to draw attention to your works and, ultimately, to get hired. Make it easy for employers or clients to get in touch by including all the necessary contact information in an easy-to-spot location. Consider adding your email address, phone number and links to your social channels.
In terms of where to place your contact information, there are a few possibilities: you can create a dedicated contact page or add your details to your website footer or ‘About’ page. You can also go for all of the above.
Lital has used a combination of techniques. A Let’s Talk button is fixed to the screen as you browse through her portfolio, tempting site visitors to reach out. Clicking it will take you to a contact form at the bottom of the page. On top of this, she’s added her email, phone number and social links on her About page, ensuring that visitors have no problem getting in touch.
Upon landing on Salmi’s portfolio website, visitors are greeted with a simple, white background and a quote in large, Serif font that summarizes her goal as a designer. As you scroll down, visitors see a scrolling header with the word Intro repeating itself. This is where Salmi introduces herself, followed by several pieces of her work with the header Projects that make me blush.
The images of her work overlap each other but separate immediately when the mouse hovers over them so each one is clearly visible. This unique design effect relays how innovative this designer really is and her website a great example of how to make a portfolio.
Key takeaway from Salmi Zulaikha Salim’s UX portfolio
Less is more. Your portfolio should highlight both who you are as a designer as well as your work. But don’t forget the importance of white space — that is, empty space that will help guide peoples’ eyes and ultimately, draw them in where you want them to. Salmi has perfectly executed this technique by creating a clean and simple website, emphasizing only vital components of herself and her work.
08. Jung Hoe
A designer with the Wix Playground, Jung has created three simple pages on his UX portfolio, Work, About, and CV, which visitors can easily navigate through in the upper right corner menu. When landing on this site, viewers are initially taken to Jung’s Work page, which also acts as the site’s homepage. Bright yellow is incorporated throughout in a way that not only grabs your attention, but gives you a glimpse into Jung’s upbeat personality.
An almost mesmerizing, animated background of yellow spheres falling from the top of the screen is the backdrop for Jung’s introduction, along with greetings in 13 different languages that rotate as the main focus. English greetings include “Hi there!” and “Howdy partner!” and instantly allow visitors to feel a connection to this designer.
The About section is truly creative, with four yellow, white and black icons in Jung’s unique style pieced together cohesively. Labeled Jung’s Creativity Kit, an explanation of how each image plays into Jung’s creative process is displayed as visitors hover over each one. Visitors can then easily jump to see Jung’s impressive CV, a PDF file that incorporates the same color scheme used throughout his website.
Key takeaway from Jung Hoe’s UX portfolio
Create a brand. Jung Hoe’s website is a flawless example of how a UX portfolio can help brand yourself as a designer. The look, colors and tone of voice remain consistent on each page, and even extend to his CV. By creating a unified brand identity, Jung creates a memorable impression of himself that helps visitors understand what to expect from him and his work.
09. Sophie Westfall
A primary tenet of Sophie Westfall’s work relates to dealing with mental health and supporting nonprofit agencies. Following this principle, she incorporates calming color tones and soothing imagery so that visitors “feel calm and safe” while looking through her work. An old black and white photo of her family sits next to a brief introductory paragraph, and a small black and white butterfly flutters in the lower left hand corner. This motif repeats on each page of her site, perhaps offering hope to those afflicted with mental health disorders.
Clean, symmetrical lines outline her projects on a beige background. Her digital projects are featured on a desktop, tablet or cell phone screen, conveying her ability to flawlessly tailor her work to any device. Images are on the smaller side so as to not overwhelm site visitors, but still large enough to show off the detail of her work, as well as her obvious talent.
Key takeaway from Sophie Westfall’s UX portfolio
Display your work how it’s intended to be seen. It’s vital that your work displays beautifully on the platform you intended, and Sophie’s portfolio shows us how important this is. If a project has both a mobile and desktop design, feature them both so potential clients can see your full range of talent.
The three digital showcases she has chosen to feature also include props that emphasize the final product design. She has also chosen to use different, coordinating colors for these displays to ensure that they are visually appealing to visitors.
Product designer Michaella (Miki) Twersky’s portfolio has a classic look, while simultaneously conveying her unique personality.
The spacious design and large, introductory text is often seen on UX portfolios, but Miki has added her own twist to this familiar layout. Not only has she merged two different font styles together, but has also reworded a well-known phrase, urging visitors to take a second look. The comic addition on her website’s footer also serves to reflect her personality and get visitors to linger a little longer.
Finally, Miki has added a hover effect on the images on her homepage. The images are all in black-and-white, but when hovered over, they come to life using color. This helps visitors focus on the specific project they’re looking at, improving their browsing experience.
Key takeaway from Michaella Twersky’s UX portfolio
Only include your best work. Your UX portfolio is your chance to show off your best skills, which is why you should make sure to only include the projects you’re proudest of. There’s no point drawing attention to pieces you’re not keen on, or projects that don’t reflect the type of work you’d like to be doing in the future.
UX portfolio best practices
After drawing inspiration from fellow UX designers, it’s time to gather your takeaways and craft your own online presence. As well as taking into account essential design portfolio tips, here’s a summary of what we can learn from this selection of UX portfolio examples:
Make it instantly clear who you are and what you do.
Be easily contactable.
Clarify your current employment status.
Reflect your personality.
Include explanatory images in your case studies.
Present your process, and not just your final product.
Use your website to establish your brand.
Add an updated copy of your CV.
Mention the basic details of each project.
Only include your best work.
Small Business Expert and Marketing Blogger