How To Build an Impressive UX/UI Portfolio

What Is a UX UI Designer?

A UX designer focuses on user experiences, such as functionality and the way a product works. UI designer focuses on the user interface design, maximizing the effectiveness of the visual design during each stage of a customer's journey.

UX Design

In order to get hired as a UX UI designer, you need an online portfolio website that showcases your work. UX portfolios are like visual resumes, which means it's important to make sure that your portfolio stands out enough to make a hiring manager or recruiter pay attention. 

If your design portfolio doesn't make an impression, you'll risk being passed over for the job, regardless of how skilled you actually are. If creating a UX portfolio sounds overwhelming, don't worry! We'll walk you through everything you need to know to create a UX UI design portfolio that gets you noticed, even if you've had zero real-world experience as a designer

What Is a UX/UI Designer and What Do They Do?

You may already have a general idea of what a UX/UI designer is, but do you know the difference between UX and UI? 

While hiring managers will often hire one candidate to fulfill both jobs, UX and UI are actually two separate sets of skills, both relating to how consumers experience and interact with a web page or app.

UX professionals focus on user experience, which refers to how the product works, its functionality, and how people use it. 

UI is user interface design, which is more to do with the look and layout of a product, with an emphasis on maximizing the effectiveness of each part of the customer journey through visual design decisions. 

If you’re interested in this creative field, it's a good idea to be familiar with the duties of both positions since they are often combined into one design job, or oftentimes, the roles will overlap.

How Do You Become a UX Designer?

While you don't need to complete any specific formal education in order to work in UX/UI designs, you will likely choose to take a course or class to learn about the UX process, which includes product development, user research, data analysis, and prototyping.

You can learn best practices for designers from free online resources like books, YouTube channels, and podcasts. 

For more formal training, there are plenty of different paid courses online and in-person that teach how to become a UX designer. 

Look for a course that includes project-based learning. This gives you more hands-on experience alongside the theory of design, but it also provides you with portfolio pieces you can include in your student UX/UI designer portfolio to help you land your first job. 

Once you have an understanding of the design process, it's all about gaining practical experience.

If you're not ready to start applying for paid work as a designer, you can choose to volunteer your services for free or do some self-directed case studies or redesigns to practice your skills and create new material for your UX design portfolio.

Why Do I Need a UX/UI Online Portfolio?

While many jobs require a written application or resume, UX/UI design portfolios are industry standard when it comes to applying for a product design job. An online portfolio acts as a place where a hiring manager can browse your past projects and get a sense of what it's like to work with you. 

Your digital portfolio can even provide an opportunity for you to be discovered by a recruiter through online marketing channels (such as LinkedIn, Behance, and Instagram) and search engine optimization practices of your site.

Get inspired to make your own digital portfolio with this round-up of the best UI designer portfolios

UX brainstorm

What To Include In a UX Portfolio

Employers looking to hire UX designers want to see a strong portfolio that shows more than just the final product. our portfolio should show an overview of your design projects, with an individual page for each design concept going into further detail about the thought process you went through. 

It should be easy to take in at a glance, so hiring managers can quickly get a sense of your design skills and aesthetic. In addition to case studies for your best designs, keep it simple with an About page and your contact information. 

Unnecessary details or filler projects will only end up weakening the overall impression of your UX portfolio.

If you’re just starting out in your career in UX or UI design, this next step is for you.



What To Include In a UX Portfolio

Employers looking to hire UX designers want to see a strong portfolio that shows more than just the final product. our portfolio should show an overview of your design projects, with an individual page for each design concept going into further detail about the thought process you went through. 

It should be easy to take in at a glance, so hiring managers can quickly get a sense of your design skills and aesthetic. In addition to case studies for your best designs, keep it simple with an About page and your contact information. 

Unnecessary details or filler projects will only end up weakening the overall impression of your UX portfolio.

If you’re just starting out in your career in UX or UI design, this next step is for you.

Ready to build an UX UI designer portfolio?

Showcase your UX UI design projects with a stunning online portfolio website.

How To Do a Self-Directed UX Case Study

If you're worried about creating a portfolio before you've had a chance to do any professional UX UI design work, there's no need.

Self-directed projects are a great way for new designers to hone their skills while creating material to fill out to build a UX portfolio. Hiring managers want to know more about you and your process—tell a captivating story about your design process, and make sure to show your work using these six topics.

  1. Introduce the design problem.

  2. Define your role in the project.

  3. Show your process using notes, sketches, and prototypes.

  4. Explain the issues you came up against and how you addressed them.

  5. Define the results that the client saw as a result of your designs.

  6. Talk about what you learned from the design challenge.

Now that you know what a case study should include, it's time to turn your attention to potential side projects that you can pursue to include in your UX portfolio.

How To Come Up With Ideas for UX UI Design Case Studies

If you need to practice your design process and skills while building up your portfolio, let's take a closer look at the two main types of design projects you can do.

Redesign UX Case Studies

A great way to get experience with the designing process is to do an unsolicited redesign of a web page or app that you use. 

First, figure out what the problem areas are, and spend some time coming up with potential solutions. The ability to find and address problems is a huge part of working as a UX designer, and you should treat sample projects for your portfolios as if they were a paid, professional assignment.

Anyone can decide that an app or website would function better if it were arranged differently, but professional designers identify problems and research how to solve them so that every change that is made is intentional for overall improvements.

Creating UX Case Studies for a New Idea

Unlike a redesign project, personal projects usually start with an idea for a product or service that you wish existed. For instance, you could bring a fictional concept to life like Cher Horowitz’s closet from Clueless in an app form. 

While this process may just be for your portfolio, it's still a good idea to approach it like a real design project, including explaining your process, the choices you made, and the reasons behind them.

While you may experience a need in the market, it's important that you put the effort into finding out whether others are experiencing the same problem as you. Keep in mind that a successful UX designer does more than just design, they also have to be able to present their ideas effectively that would appeal to an actual demographic.

How To Choose Which UX/UI Design Projects To Include In Your Portfolio

If you have a number of projects to choose from for your portfolio, it may be tempting to showcase your experience by including them all. However, when you crowd your portfolio with filler content, your identity as a designer can get lost in the shuffle.

Think about what you are trying to communicate with your portfolio. 

When someone looks at your web page, what information do you want them to absorb about the work you do? 

Everything that you include on your site should serve this goal. Most employers are looking for designers with a unique perspective. Focus on what makes you different and unique, and emphasize that. Rather than uploading all your projects, choose your strongest work.

You should also make sure that the type of projects you are showcasing is the kind of work that you want to do in the future. Instead of including work that you don't enjoy doing and don't want to do more of, focus on past projects that you've enjoyed the most.

How To Build A UI/UX Portfolio

You already know what a UX UI designer does, why you need a portfolio, and what should be included in your professional web page. Now it's time to go over the exact steps you need to take to create your own portfolio.

Choose a Website Builder

Rather than investing a ton of your time into learning to code from scratch, keep things simple with a site builder that uses templates so you can build a professional online presence without the hassle. Here are some of the features that you should look out for when choosing your website builder.

  • Professionally designed templates that make your work stand out

  • Intuitive design editor, so you can make a website in a matter of minutes

  • Fully customizable to suit your unique brand as a designer

  • Mobile optimized templates that look good on any device

  • High-quality images without sacrificing page load times

  • Online store with no fees and no commission

  • Search engine optimization tools to get you discovered

  • Custom domain and email address for added professionalism

  • Privacy features including password protection, watermark tool, and disabled right-click save

  • Blog post tools

  • 24/7 customer support and community forum

  • offers a free trial to test the website builder

Select Your Best UX Design Work

Once you've figured out how you're going to make your portfolio, you'll need to turn your attention to what content you should include. 

When it comes to creating a professional portfolio, remember to emphasize quality over quantity. You should aim for around 5–8 detailed case studies which align with the job description. 

Try to show a variety of skills and the different ways you can apply your design concepts, without branching too far away from your distinct style and personal brand.

Choose a Website Template

When choosing your template, keep it simple.

You want your work to speak for itself rather than distract your site visitors with lots of bells and whistles. 

Each case study that you include should use the same template so that the pages of your site are visually consistent. Look at other UX/UI designer portfolio examples to get inspired. Here are some of our favorite themes for UI design portfolios.

Sierra

Sierra's vertical tiled layout communicates fun professionalism. The simple design serves to showcase your work without distractions.

Horizon Left

This template uses an accessible left-hand menu and image captions to provide extra context to each photo. Your page will be intuitive and easy to navigate, with a horizontal scroll that works especially well with portrait orientation images.

Order

Order is a square, grid-based design that has a clean and organized appearance. The expanded left menu makes for easy navigation around your portfolio, and the grid allows site visitors to quickly see an overview of your entire body of work.

Albers

This unique template uses dynamic, full-width images that bring attention to the details in your work. The full-page vertical image galleries provide an editorial experience, and the menu scrolls with the page to make for easy site navigation.

Ora

Ora is a great template to use if you prefer a simple and clean portfolio. The vertical scroll and left-hand menu make navigation intuitive, and it works best with landscape images that fill the entire screen.

Coding on screen

How To Make a UX Portfolio in 5 Simple Steps

Now that you've chosen your website builder and seen some template options, we'll walk you through these five easy steps to creating your own portfolio.

Step 1: Choose Your Theme

One of the most important aspects of your portfolio is how it looks. However, you don't need to stress too much about choosing the perfect template because you can always change it later without having to start over from scratch. 

Templates generally fall into five main categories: horizontal scrolling, fullscreen slideshow, thumbnails, vertical scrolling, and slideshow. Take a look at all of the different options and choose one that is visually appealing to you.

Step 2: Customize Your Online Presence

A big part of creating a UX design portfolio is making sure that your unique personality and point of view are being clearly communicated. 

This could mean changing your fonts, colors, layouts, and more. If you have a logo and brand photos, include them throughout your online portfolio. If you haven't established fonts and colors for your brand, just remember to keep it simple so that the attention stays focused on your UX work.

Step 3: Create A Gallery Page

Start by creating your first gallery page. 

You may want to set up your site so that the home page provides a visual overview of your featured case studies, with each image opening up into a more detailed gallery page. Use the same layout for each individual project to keep your site consistent.

Step 4: Write An About Page

When you're applying for jobs, employers want to get to know you as a person. An about page is the perfect opportunity to talk about who you are, your background, your experience and relevant interests, and your goals for your career. You can also include a professional resume or CV.

Step 5: Add Your Contact Information

What's the point in having an amazing portfolio site if your viewers can't figure out how to get in touch? Add your email address, social media links, phone number, and physical address if applicable.

Once you've completed these five steps, you can keep improving your website with a blog, an online store, and email marketing campaigns. Now that you've got a good handle on what a UX designer does, how to become one, and how to create a website that stands out, it's time to take stock of your UX design projects and start creating your own online portfolio.

Create your own portfolio website with Format today.

Plus, get FREE access to our exclusive Photography Business Masterclass Course

Start Your Free Trial