Hi guys, what a day to be alive! Welcome to yet another interesting career guide on creating a winning UI Designer Portfolio!

In today’s guide, we will learn how to create one using a step-by-step approach in a way that should easily get you noticed by recruiters.

At the end of this guide, you are guaranteed to know how to start; you will also have some UI Designer Portfolio templates as references.

Here is a preview of some questions that will be answered in today’s guide:

  • What is a UI Design Portfolio in the web design field?
  • How can I create a UI Design Portfolio that will highlight my best work?
  • What tips should I keep in mind when creating my portfolio?
  • What You Should Include in Your Resume

Without wasting any more time, let’s start right away!

What is a UI Design Portfolio?

What is a UI Design Portfolio?

According to Oxford Dictionary, a portfolio is a catalog that contains “a range of products or services offered by a person or an organization.”

Going by that definition, a user interface design portfolio is a catalog (online or offline) containing some of the best work you have done.

It is the first thing your employer will see, or wants to see, before scheduling an interview before any potential onboarding process.

A portfolio is different from your CV or resume.

Your employer is more interested in your portfolio than in your CV.

Expert UI Designers use the portfolio to showcase their best works; in most cases, this portfolio gets them the job they are trying to get.

So, think of everything you have ever done: your best UI case studies, the method, the design process, and other design jobs you have worked on.

Although not a means for bragging, your portfolio is the best opportunity to give some “humblebragging” a shot.

Portfolios are not just peculiar to the UI design field, their practice cuts across several industries.

So, in short, the best place or platform to give your employers and convince them that you have the technical know-how expected of a UI Designer and the experience the job demands is through your portfolio.

So, when will you typically need a portfolio? Make sure your portfolio is a part of your application for that UI Designer role.

Without a portfolio, employers may never take a look at your application letter or even your CV.

Generally, during your training or education, ensure you save every project (either large or small).

These projects will form a basis for your portfolio.

As you graduate from that college or training institute as a UI Designer, start compiling your portfolio immediately.

Resist the urge to wait till you are ready for some job hunting.

Is there a limit to the number of successful UI design projects you can include in your portfolio? No. According to experts, the more projects in your catalog, the better equipped potential employers will view you.

Understand that you need a UI Design Portfolio and the portfolio is the first thing employers will check, trying to collate your best work in a portfolio may sound overwhelming.

We are here to help you through that process!

Below is a list of things you should do when creating a UI Design Portfolio.

As we discuss each point, start implementing it right away.

How to Create a Winning UI Designer Portfolio

How to Create a Winning UI Designer Portfolio

Step 1: Learn More about the UI Design Portfolio

There are two ways to become a UI Designer; you become one through an in-person program in a college, or you buy an online course like Coursera or a popular course on Udemy to learn on your own.

Whichever the case may be, the point is that you should learn more about the career.

The more you know about UI design, the better ready you are to start your own UI design project.

And as you execute each project, even during your training days, you have jobs to include in a portfolio.

So, don’t just stay idle; stay updated and keep up with what you are learning.

In addition to whatever program you are enrolled in, there are several free and paid courses in UI design through which you can start learning more.

The more you know, the better for you!

Step 2: Do a Project Inventory

Now that you have executed several tasks either as training or some real UI design job, it is time to take and gather all your best projects in a single location.

Taking an inventory can be challenging, especially if you have several good ones under your belt.

Include several types of UI design jobs.

When doing the project inventory, here are some questions that will help you know which project(s) to include:

  • Which of these jobs will I consider my best work?
  • Which of these good jobs did I enjoy working on?
  • Which of these jobs can give me an edge over other UI Designers?
  • Which of these projects highlighted my skills and strength?
  • Which of the projects helped me improve as a UI Designer?
  • Finally, which of these projects can I defend without stress?

Be sure to include only projects you answered “Yes” to when considering each of the questions listed above.

List your project in order of priority, with the best coming first.

From time to time, some job descriptions can determine whether you may adjust or rearrange the projects on your portfolio.

For instance, if you are applying for a role that specifies prototyping, you may need to adjust your portfolio to include projects on prototyping at the top of your project listing.

Do not just include random projects.

It is not how many projects you have in your portfolio that determines whether you get the job or not.

Step 3: Select 4 Projects as Case Studies

Always remember that creating a good portfolio is all about the quality and not the number of projects listed.

While few Managers may have the time to check through each candidate’s projects, many employers don’t just have that luxury of time.

Here is where “UI or UX case studies” come in.

Choose 3 or 4 of your previous successful jobs in a section of your portfolio called the case study.

These will serve as the best samples from all the projects included in your portfolio.

According to some employers, this section in a portfolio saves them lots of time as they go straight to review a few projects.

It also assists them in covering lots of portfolios during the onboarding process.

When creating your “case study,” make sure to include jobs that showcase all your skills, and if you have large projects to include, good for you.

However, if all you have is a set of smaller UI design jobs, do not hesitate to include them.

While it is essential to add any project visuals to the case study, you need other vital sections to write a winning portfolio.

  • The problem that needs a solution and the suggested solution

Below is a real-life sample of how to list a problem with its corresponding answer.

The application didn’t get enough positive reviews because the arrangement for users to receive alerts on each sale was not working as expected.

Because of these bad reviews, we concluded that most users are unaware that they can set their notifications themselves.

  •  You may also highlight how well you worked with colleagues to execute a project

Here is another example:

As the only UI Designer on the team of 8 developers, It is my responsibility to decide what type of design we need, the design process, and how each member of the team should work together to achieve the desired goal.

Apart from me, the team also had a Design Engineer, a User Experience Designer, and a Graphic Designer.

  • Highlight the probable solution you devised

The example below shows:

Our research on usage revealed that people are unaware that they can adjust the alerts they get right from the settings plane.

With this finding, we did redesign the notification icon and made the icon larger in the settings so that each user can easily find and use it.

  • Include how the solution eased the stress of users

The entire team tested the new design that the team worked on with the goal of correcting the issue raised.

When compared with the previous model, we found out that users can now correct the notifications and they can either turn their alerts on or off.

  • Be sure to include any setback you faced during the project

Here is another real-life example of how to do that:

We researched several designs and unfortunately, we did not find one that completely satisfied the needs of our customers.

We found out what the problem was and based on this problem, we did a prototype that was meant to eliminate any issue that a user might encounter.

Even with this improved prototype, most of our users still could not execute their commands as expected.

  •  Finally, include how the solution helped users and other organizations in their daily affairs

You can pattern this section after the real-life example provided below:

After redesigning the notification bar, we found out that our sales skyrocketed by a whopping 20 percent.

We also received more positive feedback and less criticism.

This restructuring also affected our “customer satisfaction” data as it soared higher.

  •  Although an optional section, some UI Designers include what they learned during the entire exercise in their portfolio

Here is how a famous UI Designer achieved this:

This project helped us realize that when designing the latest trends, prototyping is one of the most important things.

When we get the prototyping right, we can test these designs and ensure that each is working as intended before putting them out.

Important:  As you create a case study section in your portfolio, do not forget to add any relevant screenshots or images, survey documents, and research results.

And if you are creative enough to merge these additional attachments so that they all tell the same story, good for you!

Why is this an important step?

Any potential employer wants to see your past jobs and the process of proffering a solution.

A detailed case study will hint that you are qualified to do the job you are applying for.

Step 4: Formatting

Here is another challenge many UI Designers face when putting their portfolios together.

They fail to choose the right type of format for their projects.

The formatting can either appeal to your Hiring Manager or disqualify you.

You want to separate projects from each other.

When doing this, remember the three various formatting styles.

Let’s talk about them:

  • Web-styled formatting – This is a portfolio on a web page that employers click on to access all your past jobs

This type of formatting is common among most UI Designers for several reasons.

It has free portfolio templates to choose from when cataloging your projects.

Be careful so you do not overdo it using too many colorful templates.

The main goal is that your portfolio website is easy to access and navigate.

  •  A PDF or Slide Formatting – Here is another popular format for presenting your best works to your potential employers

It is a visual design slide of all your jobs in one deck.

Depending on the type of job you are applying for, you can rearrange the projects you want at the top of the list.

  • Physical portfolio formatting – Although a traditional way of formatting portfolios and common among Designers of anything in print, it may not be too common among modern UI Designers


Sometimes, it may be a collection of past drinks and sketches of new ideas or prototypes on paper.

All you need to do for this portfolio type is submit them with your job application and CV.

If you are considered for the job, the employer will contact you through any provided contact information.

Step 5- Stand out

Do whatever you can to make your portfolio stand out.

This is not all about bragging; it is about making your job noticed quickly.

Here are some features of your UI project that you can highlight:

  • Iteration
  • Prototypes
  • Wireframes
  • Style guides
  • Mockups
  • Ideation
  • User flow
  • User testing
  • Mood boards
  • Personas

The goal? If you stand out, you will most likely get chosen.

However, know the difference between trying to stand out and bragging.

The bitter truth is that the UI design field is very competitive.

So, you need that cutting edge to make you stand out.

One thing you can do to give that cutting edge is a video presentation.

A portfolio with a video that presents a snippet of past projects and your design process will undoubtedly catch an employer’s eye, no matter how busy they may be.

The video presentation could also be a compilation of short interview sessions with testimonials from past clients explaining how satisfied they are with the quality of your delivery.

It could also be short clips of your design process.

The point is that employers don’t forget videos.

Step 5: Time to Work on Your Own Portfolio

Now that we have gone through all the features and how to collate them, you can proceed to create your first UI Design Portfolio.

Don’t forget all the things we have learned thus far.

As you create your portfolio, on the one hand, make sure you continue to practice your craft on the other hand.

The worst thing that can happen is being called upon and unable to defend past projects.

Try to get better at what you do.

And have a good view of job haunting.

No matter how good your portfolio is, sometimes you will get a ‘No’ instead of a ‘Yes.’

Don’t let it weigh you down, even if you get a negative response.

You can even create a personal template that will make customizing your future portfolio much more accessible. Stay sharp and continue to improve.

Before you send your portfolio out, go over it again and watch for typing and formatting errors.

Take your time when doing this because it can be embarrassing if you find out later that there are some obvious grammatical errors in the contents of your portfolio.

Step 6: Get some constructive feedback

After creating your portfolio, endeavor to send it out, not just when applying for jobs but to expert colleagues for their constructive feedback.

You can also compare your portfolio with the portfolios of experts in the field.

You may see some areas that need some correction.

Also, any time you speak with potential employers, pay attention to aspects of your portfolio that do not resonate with them.

If there is in or more than more, be sure to correct your portfolio without delay.

Tips for Creating a Great UI Designer Portfolio

Tips for Creating a Great UI Designer Portfolio

Take Note of the Fundamentals

 In this context, the fundamentals refer to the appearance of your portfolio.

While it should still maintain an element of design, it must still appeal to the eyes.

For instance, if you’re a startup, it will be nice to choose a flashy and modern design that will attract new employers and make them want to read more or take a look at your portfolio.

It won’t be out of place to include an excellent combination of colors.

If you are representing a rather large company, aim for a portfolio that is rich in information.

Remember, as an existing business, the Hiring Manager already knows who you are.

Choice of the project listing

One major challenge UI Designers battle with is the number of past projects they should include in their portfolio.

How to Create a Winning UI Designer Portfolio

It can be tempting to add all the available projects to a portfolio, regardless of whether they are relevant or not.

However, you should only list projects you are most proud of, not just all the tasks you have ever worked on.

To help you understand which project needs to be listed on a portfolio, you can complete a boot camp program that will help you know how to list impressive projects that showcase your skill and expertise.

What You Should Include in Your Resume

What You Should Include in Your Resume

As you decide when to start writing an actual portfolio, here are some things that must not be left out in your portfolio:

Contact Information

Although it is expected that your contact information should be in your CV, it is not out of place to still include them.

For instance, your latest phone number and address must be listed in your portfolio.

Do you have social media handles for putting out your latest designs? List them all in a designated space for them on your portfolio.

A Section Dedicated to you

 Some name this section ‘About Me’ and it is the section where you sell yourself or showcase who you are, your UI design journey, your education, and your skills.

The section lets the employer get to know a bit of your personal life.

Additionally, use the opportunity to let the Hiring Manager know the kind of work or roles that you are interested in.

If you have received additional education in interaction design, here is where you must list them.

List your certifications, awards, boot camps, and past honors.


If you have a website or a blog, link it here.

Adding this little bit of information already conveys the idea of class and professionalism to your employers.

Your blog also tells the employers other things you have not told them about yourself, like your interest in writing or art and the type of career you wish to pursue.

Although most people feel this section isn’t essential, it won’t hurt to include it, and it can boost your chances of getting that e-commerce gig.

Past jobs

Use this section to highlight your research, your design work, and how you proffered solutions to help solve a specific problem that users face.

Add any additional notes, photos from all the jobs you have completed, and any attachments highlighting your design process.


Conclusion on UI Designer Portfolio

Take it or leave it; you cannot succeed in the competitive UI design field without a good portfolio.

A portfolio puts your design skills and strength out there to a Hiring Manager.  

As discussed in this guide, make your portfolio as enjoyable as possible, make it stand out, and broaden your knowledge so that you can defend any project listed in your portfolio.

What You Should Include in Your Resume

Do not forget the tips and necessary features or sections you should include.

We hope that with these few essential pieces of information, you are ready to start creating that winning portfolio you need.



What makes a great UI Designer Portfolio?

An excellent UI Designer portfolio should have a homepage that captures an overview of everything in the portfolio.

A good portfolio should also contain the Designer’s contact details and other general information like skills and interests.

A great portfolio should also contain your best jobs – a very crucial part of the portfolio.

What is the difference between a UI and UX Designer Portfolio?

UI design is all about designing interfaces for software, websites, and mobile apps using online tools like Behance, Figma, and adobe, with a view to styling and making the fonts and appearance more appealing.

UX designer is the actual Product Designer who deals with products and services that a company or organization offers.

Since both jobs differ, their portfolio too will vary.

Why is having a UI Designer Portfolio significant?

A good portfolio gets you the job faster than a CV or resume.

A UI Design Portfolio makes you stand out in a pool of UI Designers.

Hiring Managers are interested in how you will do the job and your entire design process.

With a good portfolio, you can convey all these without stress.

How important are your years of experience when creating your portfolio?

Your years of experience are as crucial in your portfolio as your past jobs.

Although some employers can choose a newbie for their UI design projects, it is not uncommon to see many Hiring Managers opting for UI Designers with several years of work experience when hiring. 

What is the annual salary of a UI Designer?

According to the Bureau of labor statistics, the average annual salary of a UI Designer is $80,000.

Judging by that salary which is more than the national average, the future looks suitable for UI Designers.

Certain factors like location, years of experience, and educational background can affect this figure.


UI/UX Folio

Nielsen Norman Group

Web Flow


All Posts

career employers editorial process

Here at career employer, we focus a lot on providing factually accurate information that is always up to date. We strive to provide correct information using strict editorial processes, article editing and fact checking for all of the information found on our website. We only utilize trustworthy and relevant resources. To find out more, make sure to read our full editorial process page here.

Leave a Comment

How Career Employer Collects Its Data

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id.