The Ultimate Guide to Building a UI Designer Portfolio

Telling the story of your design doesn’t always mean long descriptions of extensive user research and presenting dozens of research materials. And that works completely well. Even if you don’t get involved in those parts of the creation, you can still present your solution in a way that shows your process and how you think.

Nowadays a plethora of UX and UI positions and titles abound. Different people and companies seem to interpret them differently. Some UI designers create final pixel-perfect screens from fully functional prototypes. Others might also get involved in the sketching phase as well without any kind of user research on their part. In this blog post, I’ll focus on a designer in charge of the visual design to whatever degree but not involved in the user research part of a product design process.

While you might feel tempted to just show UIs in snazzy mockups, we can show you a better way. Recruiters love to see the thinking and reasoning behind your designs. Consequently, this should also make up a part of your portfolio.

In this blog post, I’ll cover the three main elements of a great UI designer portfolio:

  • The basics: What to include and how to present yourself to get the job you want.
  • Case studies: How to write up a case study when you haven’t done any research in the process and you only held responsibility for the visuals.
  • Home page: How to build up an eye-catching front page that will persuade the recruiter to click on your case studies.

How to Get Started with a UI Designer Portfolio

Choose your best projects

A great design portfolio generally consists of three to five projects. Definitely consider this a game of quality and not quantity. This amount suffices to show your skills and talents, and can even show some diversity in your work if you have any. But it definitely won’t overwhelm the recruiter or let them stumble upon work better left forgotten. And no, just because you have just finished a project recently doesn’t automatically mean it deserves a spot in your top five. Choose wisely.

If you are just starting out and don’t have anything to put in your portfolio, let alone three projects, don’t wait for them to just magically appear at your door. We all know the “need experience to get a job but need a job to get experience” cycle. Everybody else managed somehow, so you’ve got to step up as well. Look for inspiration on the internet, redesign some application, work on a hobby project – anything you can think of. But make sure you are doing them for you and not simply to put work into your portfolio.

So when starting to build your portfolio, think through your projects one by one. Then decide which should form part of your portfolio. Base it on the overall look, the challenges you faced or the topic of the project. But make sure they reflect you as a designer.

Runtastic’s Thalita shows how to curate the best of her work.

Make it clear what you do or what you want to do

You simply must introduce yourself the best way possible in your portfolio. We could just call it proper self-branding if we wanted to get fancy. But people undeniably look at your portfolio first when considering you for a job. If they open your portfolio and can’t tell if you work as an illustrator, animator, UI designer or UX researcher, they probably won’t bother to find out. If you are applying for UI design jobs, call yourself one. Once they get in and think “Oh what a great UI designer portfolio!”, they will scroll further and check out your projects.

My previous point comes into place here: Ensure your projects reflect you and also the job you are applying for. Let’s say you’ve been working as an illustrator but want to transition into UI design. Show recruiters that you can get that job done. So no matter how much pride you have for your illustrator work, you should probably not include those projects in your portfolio. Consider it the portfolio equivalent of “Dress for the job you want not the job you have”. And if you have just arrived on the whole designer scene but know what sort of design jobs you want, make sure your redesigns and hobby projects reflect that sort of work.

Or say you mostly worked on mobile applications your whole designer career and mastered every design pattern known to man. You can also recite the whole Google Design Guidelines by heart and want to continue this way. Amazing! Include the pride-and-joy mobile projects and toss those not-so-great desktop projects from your top five.

Katarina Harth’s portfolio shows how to highlight UX skills even though she worked as an art director in the past

Show some personality

Besides requirements and salary, you probably check out the company atmosphere and way of working when looking for a new position to get an idea of what it really entails. This goes the other way around as well because generally they are not just hiring your design skills but you as a person as well. They want to hire people who fit their goals and mentality. In most cases, they can measure this compatibility only in an interview.

However, you can get a head start and make a memorable impression with your portfolio. This doesn’t mean you have to struggle to appear vastly different from any other candidate. Rather, it just means that if someone opens your portfolio, they should get a feel for the person behind all this work.

Pay attention to your copy and try to match the company’s style. But don’t go overboard either. Make sure they still see you! Don’t forget to introduce yourself in addition to your work. Add some personal details in your description, like hobbies and such, that will show the you away from the computer and not pushing pixels. Imagine your portfolio as your brand and online presence, not just a list of your works.

Now that we have covered the basics, let’s dive into building the perfect UI designer portfolio!

UX Folio - UX Portfolio Builder Tool

How To Structure a UI Designer Portfolio Case Study

Provide context

Recruiters and hiring managers look for people to fit a certain job. If they come across your UI or UX portfolio and can’t decipher what sort of projects those screenshots come from, they won’t bother to find out. Introduce the project as well as possible without writing hundreds of words right at the beginning. Provide a summary of the industry of the project and explain the main problem and challenge that kickstarted it. Write about your role and responsibilities, and the parts of the project you consider really yours, especially if you worked on a team.

Make it visual

Don’t shy away from presenting projects more visually. A case study doesn’t have to be all words with a few images here and there. For one, reading loads of text about a project can get really tedious and straight-up boring. Break the monotony in the case study so it doesn’t put the reader to sleep. While this makes up less of an issue, it easily can give a recruiter the reason not to reach the end of your work.

Lack of clarity presents more of an issue. Most people operate as visual beings and you are also writing a case study about a mostly visual project. Don’t cram something into long paragraphs that a chart or an illustration could describe simply. If you want to explain something, first think: “Would an illustration instead of text make it easier for the reader?”

As examples, present your design process, an intricate concept or a functionality in a visual way. Or go for specifics: Summarize user insights on cards, or demonstrate a whole iteration process by laying out all the screens next to each other. Or present versions side by side for easier comprehension.

Yes, this kind of case study building takes more time and more effort on your part. You have to go back to the project after closing it and create some additional materials. But this will help recruiters and readers comprehend. Ultimately, it results in a more exciting case study.

Rojin summarized her design process with a colorful illustration which also matches the rest of the case study

Show designs early on

If you are thinking and presenting in a process format (which you should) you might make the mistake of writing a lot and not presenting any visuals for a while. Visual design probably constitutes a UI designer’s strongest skill. Grab the reader’s attention by presenting the final UI design towards the beginning.

While you must write about your process and might like to show some sketches, the recruiter will want to see UIs when you apply for a UI job. Presenting designs earlier can also help the reader understand the process you are writing about as it gives them a clear idea before you jump into the details.

Start with your UIs right at the beginning so people see them first. Showcase them in nice mockups so it grabs reader attention. Then move onto describing the project. Or hold off on the UIs just a little bit and introduce the problem and the project first. Then, when describing the solution, show the final designs. Finally, move on to explaining how you got there.

Eric Zirlinger started immediately with showing some UI skills – thus keeping attention until the reader reaches the end

Show the process

Even if you are only creating visual designs, don’t forget to tell the story of how you created them. Include this in your case studies because simply displaying final screens won’t won’t hold any meaning to anyone visiting your portfolio.

They did not take part in the project so they have limited knowledge. For this reason, help them understand the whys behind your decisions. Do it by walking them through the process. They can’t figure it out from simply looking at a screen displayed in one of your case studies, no matter how nice they look.

So what makes up this process you can showcase, you might ask. Whenever I finish with a project and look back on the very first sketches I made, they have nothing to do with the final product 90% of the time. You might also know the concept. Lots of points in a process can alter your direction. Sometimes you have to consider business decisions. User feedback can completely alter the scope. You may opt for another solution simply by spending more time on the project and getting immersed in the topic.

Now, you don’t have to scan all of your sketches and upload everything. Just pick one or two favorite screens and explain how and why they changed the way they did. When working on this part, keep one of the previous points in mind: Always think about making it visual. Highlight parts of your designs, or place them side by side for comparison, pinpointing what changed and why.

Just by showing old and new versions side by side Elissa made it really easy to image what she is writing about

Showcase versions

Nothing highlights your problem-solving skills better than including versions in your case studies and the reasoning behind them. You likely come up with more than one solution to one problem. Maybe a client requested you come up with more than one version. These could come as simple as rounded or not-rounded buttons or as elaborate as three different visual explorations. Perhaps you even presented different mood boards to the client.

Showcase these in your portfolio just like how you go about presenting these to the client. Display the versions side by side to make them easy to compare. Then highlight differences and similarities, what worked and what didn’t, or pros and cons for each version. Keep this easily understandable by opting for a list format rather than longer text. Then don’t leave your audience hanging – also share which version ended up winning and why.

Emily Yeung presented two versions for a screen and also included the feedback she got on them.

Explain the solution

A lot of designers make the mistake of presenting the final designs at the end of the case study without any explanation. Even if you showed versions and wrote about your process, the final solution might need more details. If you only present the final designs, you miss the opportunity to showcase how creative and innovative you can be.

A recruiter or designer might look at the problem you described and the final solution, and still not see the connection. Explain why you went with a specific decision. Depending on the project, these can range from layout through typography. Let’s take a closer look:

Layout

Holding the responsibility for the layout of a project opens up many opportunities to write about your solution. You probably didn’t open up Sketch and finish the whole project two hours later with the first version for every page you could think of. When writing about the layout, think of these questions: Why does this layout work? How did you come up with it? Why did you place certain elements where you did? Did any user behaviors or UX patterns influence this layout?

Visual Hierarchy

Visual hierarchy can make for a very fickle thing and many elements can influence it. You’ve likely set your brain on autopilot when making that card’s subtitle smaller or a bit lighter grey than the title itself. But to position yourself as a conscious designer, explain some of these in your UI designer portfolio.

That card probably looks like it does because the title has more prominence than the subtitle. You set the sizes and the colors with this purpose and not because someone else did it on another design. (Well… maybe you peeked at the hex code of that grey because it had a very different bluish hue you’d never seen before.) The bottom line: Try highlighting details and the thoughts behind them even if they come second nature to you.

Mina showcased the original and the redesigned version of her project side by side and pinpointed the most important changes. You can use a similar style to showcase UI changes and decisions. 

Overall style

Showcasing and explaining the overall style can take many forms. Most of the time, UI designers insert some fancy moodboards and random UI kit parts. They probably show how you sort-of designed in a system in a great way, but they don’t really touch on the “why”.

Mention why you picked the colors you did and why you went with that font family. Probably a lot of external variables influenced your decision, like average users or personas or the already established brand of the product. Try justifying these decisions by writing how you came to these conclusions.

If you made the UI dark because most people use this app before going to sleep and you don’t want to blind them, write about it. When showing colors and fonts for the app, explain how they strengthen the brand itself and why you had to use them.

Close with learnings

Recruiters love to read reflections on projects. It shows them how you felt and what you learnt. In this part, use that to prove you want to get better. Junior UI designer portfolios really need this because they most probably don’t have many projects to back up their skills.

Fear not; they won’t think, “Oh, they didn’t even know this?” More likely they’ll get a sense that you keep improving. You may take pride in a project which for some reason didn’t go the way you planned. This gives you the perfect opportunity to reflect. Write about how it went other than expected and what would you do differently a second time. Include your personal feelings. Showing personality will distinguish from you from all the dry portfolios.

So to sum up, use this skeleton as a UI designer portfolio template:

  1. Context and the problem
    Describe the overall topic of the project and the problem you needed to solve
  2. Final visuals
    Present some finished designs early on to serve as a solution to the problem you described and also as a teaser for the readers to read further.
  3. Your design process with different versions
    Walk your reader through your design process and describe some versions and decisions you faced during this process.
  4. Final solution and its explanation
    Describe your final solution and explain what makes your designs the best.
  5. Learnings
    Share what this project taught you and the most important takeaways for you.

How To Design a UI Designer Portfolio Home Page

Don’t reinvent the wheel

Look through a lot of UI designer portfolio examples and you’ll find most have the same structure. A simple bio or introduction text with a photo fill the top of the page. Then they list their projects underneath with eye-catching projects previews. Some even have additional info further down the page.

These portfolios do at least one thing really well: easily accessible navigation, refraining from excessive amounts of unnecessary animations most of the time. They already know recruiters only have a couple of minutes to look through UI designer portfolios. If they come across something not easily navigable or quick to skim through, they might not get to your projects and simply leave.

As tempting as it might seem, difference for the sake of difference might not provide the best approach. Having the same patterns as other designers doesn’t really count as wrong. On the contrary, it might prove the best strategy. Users, and in this case, recruiters learnt this pattern over the years to navigate this kind of portfolios with ease. Don’t make their work harder and accessing your works more difficult.

So before going completely against this template, consider its merits and their degree. Vary the colors, the fonts, the mockups you display your final visual designs in or the layout you showcase your projects in. Don’t reinvent the wheel, because you can create a completely unique portfolio without sacrificing basic UX principles.

Create eye-catching case study previews

If you follow the template above (bio on the top, projects underneath) your projects will take up most of your portfolio. If you send your application for a job, you probably want one thing: recruiters looking through your works and not just scrolling through the portfolio and then closing it. To grab the attention of the recruiter or the design lead who looks through your work, they need to see either something that interests them or which they think looks nice.

For the former, choose your projects carefully. Then make sure your thumbnails or project previews represent the project itself. Display final UIs on the thumbnails so the recruiters won’t have to guess what sort of projects lie behind them. A stock photo of two people talking could come from a project in a number of different fields and for a number of different platforms. Most likely they are looking for your visual UI skills on a specific platform or for a specific field, so don’t make them puzzle it out. Present your work even on your front page in a way that explicitly highlights your strengths and previous work experience.

For the latter, carefully design your projects to find something that looks nice. This doesn’t just include the UI you place on the thumbnails but the whole preview itself. Take the time to think about the composition of the different thumbnails next to each other and the mockups you use to display your final UIs in.

Mina, Augusto and Cem sure have one thing in common: Once you open their portfolios, you want to click on their case studies.

Your work section should feel like a coherent list and not extremely different projects placed next to each other because you have to have a collection of them somehow. In most cases, you don’t want to overcrowd the thumbnails. A simple background with a mockup and a UI screen makes an excellent choice. Of course, you can always spruce things up with slight animations. Or create continuity between the different thumbnails or set up a nice color scheme for all the thumbnails.

If you find yourself struggling to create nice project previews, take a look at our blog post on how to create eye-catching project thumbnails.

Introduce yourself

Your portfolio basically represents you on a webpage. As in every kind of social situation, start by introducing yourself. Dedicate a short paragraph to yourself on your website. Make it prominent and easily seen when opening your page. Besides your name, explain the sort of design you do and jobs you seek out. Furthermore, show some personality by writing a bit about yourself or your hobbies.

If you feel like it, you can display your photo at the top. You could also make your portfolio feel personal even without one. Warm copy can make the recruiter looking through feel like they have met you. Go one step further and have another page describe you as a person or explain how you became a UI designer.

Make your contact info easily accessible

Last but not least, make your contact info easily accessible. Add to your portfolio any kind of social media you take part in. Also, don’t forget to display your email or use a built-in contact form so they can reach you. Don’t hide it under an intricate menu system! Ideally display it on your front page.

So to sum up, use this skeleton as a UI designer portfolio template:

  1. Introduction and short bio
    A short paragraph dedicated to your basic info, what sort of design you do and some personal additions.  
  2. Contact info
    Display your email address where they can contact you and optionally links to social media.
  3. List of works
    A well-designed, carefully selected list or grid of projects which takes the reader to individual case studies.

In case you need a great platform to build your UI designer portfolio, give UXfol.io a try.

It is a UX portfolio builder platform designed for UX and UI professionals – with many special features that will help you to create your portfolio quickly and easily.

Click here to sign up to UXfol.io and try it out!

Designer. Probably getting way too absorbed in Axure prototypes and watching tv shows. Play icon expert.

Portfolio builder tool
for UX designers

Build a beautiful portfolio quickly and easily

Try UXfol.io for Free!

Top companies want to see your
design process and decisions in your portfolio

Try UXfol.io for Free!

A typical mistake I see in UX portfolios is lack of content explaining their contribution to the effort, the images are only the final product and not the process to get there.

UX is very much about strategy and if the person is not showing how they got from A to B, they appear to be another UI trying to move into a UX role.

Start creating a UX portfolio, that gets you hired

Try UXfol.io for Free!