A career in User Experience (UX) or User Interface (UI) design can be the perfect intersection of art and technology. In recent years, demand for these roles has greatly increased as all types of organizations are looking to improve their visual presence across the web and mobile devices.
While the responsibilities of these roles may differ, both require the applicant to visually demonstrate their skills to a hiring manager. Enter the portfolio. This personal website showcasing past projects and case studies is arguably more important than a resume, as it gives recruiters a glimpse into your thought process and what sets you apart.
You might be wondering if you’ve had enough experience to even compile a public portfolio. Or, you might be on the other end of the spectrum and struggling to decide which of your dozens of projects to include. Either way, this article is for you! We’ll be breaking down all the elements that go into the UX/UI portfolio, and providing step-by-step instructions on how to build your own. Plus, we’ve included links to some of our favorite free online resources and templates, as well as stunning portfolios from professional designers to inspire your creative process!
What is a UX/UI Designer Portfolio?
Because UX and UI are often used interchangeably, let’s briefly break down the difference between the two. UX design focuses on the “feel” of a digital and physical product, creating structural design solutions through prototyping and wireframing and testing and iteration. UI design focuses on digital products interface and aesthetics, creating visual interactive elements and even bringing in design or user research. Could some of your past work experience fit into both of these categories simultaneously? Likely yes. However, your portfolio site should be geared towards one or the other, depending on where your professional aspirations lie. Of course professions in the more visually creative space like UX/UI Designer and Graphic Designer need a portfolio, but even UX Researchers and Product Managers will find having one to be a helpful asset.
A UX/UI designer portfolio typically takes the form of a website, in which the product being advertised is YOU. It’s a guided, in-depth and interactive tour through your skills, past experiences and personal passions. Housed within this site will be your projects, an “about” section, links to your social channels, and contact information. Of course, this describes a basic portfolio setup, with the examples below branching out into more creative optional sections as well. Overall, your portfolio communicates to the viewer what you’ve been working on and how you work.
Why is Creating a Portfolio Important for UX/UI Designers?
More so than most other tech professions, it’s vital for UX or UI designers to create a portfolio to gain consideration from a hiring manager or even land freelance work. Always keep in mind that depending on the role, your portfolio itself might be evaluated for your mastery of design principles!
Your portfolio is an opportunity for the information on your resume to jump right off the page and be displayed in action. Differentiating yourself from other qualified candidates is difficult on paper, but easier on a site that allows your design sensibilities and varied work history to shine through. Hiring managers often report that they are looking for organizational fit just as much if not more than they look for hard skill or specific educational background. A portfolio can show cultural suitability, as well as a look into your personality.
Finally, creating a portfolio is an important exercise in self-branding and self-reflection. Keeping a running list of your top projects can help identify professional areas of strength and weakness, and any skills that don’t fit into the “traditional” role of a designer, but might serve you well in a hybrid role. Your portfolio can be shared out easily by stakeholders within a hiring team or client and prove your commitment to staying up-to-date with continually updating tech and design trends.
What is Included in a UX/UI Designers Portfolio?
The UX/UI Designers portfolio answers the classic interview question, “why should we hire you?” by building on your resume with illustrative examples of work you’ve done. At the same time, elements like your bio, photos and visual flairs provide a glimpse into your personality and personal style. Think of it as your first introduction to a recruiter, before you’ve even met them.
As we touched on above, it’s critical to include a relevant bio, work and educational background, and skills, likely housed in an “About” page. On the same note, you’ll want to link out to professional social media accounts and ensure your contact information, whether through web form or email, is up-to-date and easily accessible.
While we’ll dive into specifics of what projects to include below, the most important advice to know right off the bat is to show process, not just product. The goal is to break down in detail how you solved a given problem and provide a comprehensive look into a diverse range of projects and clients you’ve worked with. At the same time, you don’t want to overwhelm a visitor to your site with an endless scroll of work.
So, ready to get started? Here are step-by-step instructions of the major elements you’ll want to tackle in building your first UX or UI Designer portfolio! Keep reading for our list of templates and free resources, as well as some of the top portfolio examples from the web.
How to Build a UX/UI Designer Portfolio
1. Pick a Platform
Yes, your portfolio should be a website, but that does not mean you need to know how to code. Even beginners to this process can create sites with a clean interface and that express their personality through popular online providers like Squarespace or WordPress. Alternatively, if you’re comfortable working with frameworks like HTML/CSS, Bootstrap or Java, you can find free templates online that will allow you to incorporate more unique elements of responsive design.
Some designers also choose to house their work on Behance or Dribble. These popular sites are almost a hybrid of a social media platform and a portfolio, allowing users to make public profiles where they can display projects and collections. While we love them for providing inspiration and the ability to search for designs and templates by category, we still recommend building your own external site, as this provides maximum flexibility and ability to display the process behind your work.
2. Choose Examples Carefully
The key term here is “curation!” There’s no magic number we can provide in terms of how many projects or case studies you should include in your portfolio. But, remember how limited of a window a hiring manager might have to view your site, and prioritize projects that align with the type of career you aspire to. You’ve heard it before, but it bears repeating: quality over quantity. As you take inventory over your work, here are a few questions to ask yourself:
- Does this project differentiate me and display my areas of expertise?
- On which project did I personally bring the most value?
- Which project did I learn the most from and how can I demonstrate that?
- Which project of mine tells the best story?
Following this process, the number of projects most people end up with, falls in the range of 3-8, but this widely varies, based on the type of work you’ve completed and the type of work you’re looking for.
3. Show Your Process
A screenshot of a site is not enough. The point of the portfolio is to demonstrate to the viewer how you work, and for this, they’re going to need to see that process in action. Some designers choose to structure their projects as case studies. Going this route means you’ll want to clearly lay out the problem you had to solve and hypothesis you had, your specific role in the project, and/or how you collaborated with others, how you came to a solution, and any challenges or unexpected wins you encountered while implementing it.
Even if you don’t put your projects in a case study format, lay them out linearly, with detailed explanations along the way. Include things like user flows, sketches, wireframes, moodboards, mockups or style guides, if you have them. Without realizing it, you’ve crafted a compelling story for a hiring manager that illustrates the tools you’re proficient in and approach to problem-solving. If you can include an ending to that story in the form of positive testimonials or reviews from stakeholders, definitely do so!
4. Iterate, Iterate, Iterate (and Optimize)
Think of your portfolio as a living document that functions as a continually updating record of your best work. Therefore, you should be returning to your site regularly to find areas of improvement, especially during the job-seeking process. As a design professional, pay particular attention to the visual elements of your page and seek out pain points. Ensure that your colors, fonts and layouts come together to create a consistent and clean visual experience. More than half of web visits now take place on phones, so it is absolutely essential that your portfolio be optimized for a mobile viewing experience!
Additionally, don’t forget to take a look at your copy; it all goes back to making sure your descriptions tell a clear and concise story. If recruiters can’t follow along instantly or small elements on your site like buttons don’t work, they’re likely to close it out without a second glance. Turn to peers and mentors within the industry to provide feedback and point out areas of improvement.
5. What to Include, What to Avoid
You always need to balance the design elements and content pieces within your portfolio, ensuring they work in harmony and neither detracts from the other. Your portfolio appearing bare with too few examples or completely overstuffed with projects is also to be avoided. Here are top tips for areas you should focus on that might get overlooked.
Include:
- Site Accessibility Measures (color contrast, alt image descriptions, etc.) – reviewers will look for these to be implemented
- Your design process and thinking with examples
- Mobile responsive features – It’s vital your site looks and works great on any device!
- A picture of yourself – Helps viewers put a face to a name and remember you
- Up to date contact information
- Personal projects that demonstrate your passions
Avoid:
- Overcomplicating your design with too many features or links. Keep it simple and clean for reviewers who likely have to look through several sites
- Unprofessional images or links to social profiles containing non-work-friendly content
- Work from early in your education that doesn’t reflect your current abilities
- Work far outside the scope of the type of roles that interest you
- Outdated contact information
6. Stand Out!
Your portfolio is your best shot to stand out amongst a crowd of applicants and convince a hiring manager why you deserve a second look. Take this opportunity to have your online presence mirror your IRL personality! Yes, maintaining a professional presence is key, but if you can find space to include projects you’ve completed outside of work for a friend or non-profit, or show off your unique hobbies, don’t be afraid to do so. Relevant blog posts or participation in events like hack-a-thons or competitions can demonstrate your passions and cultural fit, and help recruiters remember your name.
UX/UI Designer Portfolio Templates and Free Resources
There are infinite resources available online for all aspects of the portfolio-creation process. Fortunately, many of them are absolutely free as well. Here are a few of our favorites, broken down by category.
Visual Design and Prototyping – You’ve probably come across these industry standard tools, but in case you haven’t, they’re all great choices for prototyping your site.
Website Hosting and Building – The most popular platforms to build versatile, beautiful and clean sites, no coding required.
Website Templates/Portfolio Hosting – Check out these sites for visual inspiration or to connect with fellow designers
Web Application Frameworks and Libraries – Master any of these and gain access to thousands of free and open source templates built on their libraries
Technical Site Elements – Tools to ensure your site is running smoothly and accessible to all audiences.
UX/UI Designer Portfolio Examples to Inspire!
We’ve scoured the web to compile some of our absolute favorite UX and UI designer portfolios. From the aesthetic choices to the unique projects they’ve displayed within, you’re sure to find inspiration among these top-tier examples!
- Misono Yokoyama Allen, ateliermisono.com/WP
- Ljubomir Bardžić, ljubomirbardzic.com
- Niya Watkins, niyawatkins.com
- Vandana Pai, lifeofpai.com
- KOCO, madebykoco.com
- Gloria Lo, glorialo.design
- Jared Bartman, jaredbartman.com
- Rahul Jain, rahuljain.co
- Jocelyn Murray, jocelynmurray.design
- Austin Knight, austinknight.com
Becoming a UX/UI Designer: Next Steps
Kicking off your UX/UI career and building your first portfolio is an incredibly exciting experience, that can also be overwhelming at times. Luckily, we’re here to help! Check out a sampling of the resources for UX or UI designers available on codingbootcamps.io:
- Looking to enhance your portfolio with additional projects or gain more educational experience? Check out our comprehensive UX/UI bootcamp listings and learn more about what these programs entail
- Explore industry tools you might come across when designing or developing sites like Bootstrap, HTML/CSS, React and more.
- Discover career opportunities for different positions within the industry, such as designer, front-end developer, web developer, product manager, UX researcher or graphic designer
- Read about the top 5 web design tools you need to know and check out which tech jobs are in high demand for 2022 and command the highest salaries.
- Prepare for all elements of your career in tech with our top tips for deciding between a bootcamp or college, and our best practice guides for acing your technical resume and technical interview
