Whether you are a junior or senior designer, having your own portfolio website is a must. It is the single most important tool that you can use to impress potential clients or recruiters.
That’s also the reason why you have to use all the tricks that can gain you an advantage over the competition. The best way to find and learn about portfolio best practices is to see them utilized in real-life portfolios.
We have collected 30 of the best portfolio website examples made with UXfol.io and other portfolio builders. From each example, there is something to take away. If you need some motivation or direction, just check out some of these designer websites and portfolios!
1. Hazi Cavan
What can you learn from this portfolio?
Front Page
Hazi spiced up this portfolio by sprinkling some emojis in the bio, a quirky touch that adds a new level of personality to the page. If you feel stuck introducing yourself, think of ways you stick out from other applicants. you can achieve that by using emojis, adding an unexpected sentence, or just including some funny and personal facts right on your homepage.
Case Study
One of the case studies, ‘Norman Copenhagen’, is a redesign project. Towards the end of the case study, Hazi shows a before and after screenshot of the old and new design side-by-side to summarize the whole project.
When writing about a redesign project, keep in mind that it might call for a different structure than other case studies. That is because a redesign is mostly about correcting and improving the old version of an app or a website.
By focusing on the steps you took and the methods you used you might skip the most powerful showcasing technique for this kind of project: Simply presenting the old and new version side-by-side showing what changed.
The most powerful showcasing technique in a redesign project is a side-by-side comparison of the old and new design.
2. Elisabeth Pefanis
What can you learn from this portfolio?
Front Page
On her front page, Elisabeth is using thumbnails for each of her visually similar projects. 3 elements are constant:
- The title being top and center
- a device under the title which is cut for some added visual interest
- a colourized photo symbolizing the nature of the project in the background.
Creating visual consistency through the projects on your portfolio page can be really hard. You have different projects across different devices, using different colours and styles and no matter how hard you try to showcase they always feel a bit off. That’s where you can utilize the technique seen in Elisabeth’s portfolio. Using a similar template for the thumbnails can be really powerful while building visual consistency.
Case Study
When writing about the heuristic analysis in ‘TrueCoach’, Elisabeth took the time to visually represent the findings instead of just writing about them. She showcases each screen and indicates each finding with a dot and also a corresponding colour.
While it’s much easier to write a few sentences about the research outcomes and maybe show a spreadsheet screenshot next to it with the findings, it does not help the reader sort and understand the information.
When talking about specific parts of a screen a colour-coded explanation, directly connected to parts of the screens, will make comprehension much quicker.
Whenever you are working on a case study always think of ways to make the reader’s life easier. Present the information in an easily digestible way, even if it takes more time when putting together your case study.
3. Niksa Korper Zemva
What can you learn from this portfolio?
Front Page
Niksa created a visual connection between his portfolio cover page and his case studies via colour coding. On top of resulting in a vibrant and exciting front page, it gives off a put-together vibe. You can also achieve this visual coherence by choosing corresponding colours, or through showcasing a UI
- on your front page and
- right on the top of your case studies.
Another option is to use similar visual elements here and there that also appear on the front page. You should always treat your portfolio as a whole, not just a simple table of contents.
Case Study
Including photos of yourself busy working, or photos from workshops will liven up your case studies. It helps the reader picture how you work while giving it a personality that you cannot really achieve with words, spreadsheets or fancy UI screenshots. Yes, it can be a bit awkward to ask someone to take a photo of you placing a post-it on the wall, but in the end, it will pay out to include it in your case studies.
4. Augusto Garcia
What can you learn from this portfolio?
Front Page
Looking through Augusto’s portfolio you can tell right away that he is experienced in designing mobile applications. His strengths are showcased right on the cover page of his portfolio.
This could be a strategy to follow when you are applying for a specific job: Curate your own projects and take the requirements of that specific position into account. This applies even when you are not applying for a job, but still, you are confident in the sort of work you want to do in the future. You need to show and capitalize on your strengths.
Case Study
In his case study, ‘Payment Estimator’, Augusto presents the user test sessions by
- writing about the versions that were tested
- the user feedback he got
- what changed before the next iteration.
This structure is basically the case study equivalent of presenting user research findings to a client. Telling the story of your design does not necessarily mean that a case study should be a list of methods and steps ending with a final design.
You could borrow this technique and present iterations based on user research to tell the story of a project. Of course, the number of iterations you present is not set in stone.
5. Katarina Harth
What can you learn from this portfolio?
Front Page
Katarina opted for a layout which gives ample space to introduce herself and her career. If you’d like to emphasize your career journey and strength right on your portfolio you should choose a portfolio layout which gives you the space for that. This is a good direction to follow if you want to eliminate the friction for the employers to download your CV to learn about your career.
Case Study
Katarina’s case study, ‘Salt‘, starts with detailing the research she conducted, then she summarises the findings and breaks them down into three major parts. Towards the end of the case study, when presenting the final designs, she indicates those three main elements on the screens. When it comes to storytelling and case studies, it is crucial to explicitly connect the research and the final outcome.
When presenting the outcome of your project, make sure to reflect back on the research findings you mentioned earlier. Also, try to make it easy for the reader to establish a connection between those two parts. Remember: Outcomes are evident for you, but not for everyone else, since they are not working on the project with you.
6. Natalie Kyle
What can you learn from this portfolio?
Front Page
When we hover over Natalie’s project thumbnails, you can read project subtitles like
- ‘The days of hunting your data are over.’
- ‘Show me the money!’
These are only really small details, but when we read these subtitles we can’t help but smile. Letting your personality shine via funny or unexpected copy is always a great way to go. Recruiters and UX professionals have to look through dozens of case studies each day. Therefore, including a small but unexpected detail might just be your ticket for an interview.
Case Study
Natalie’s case studies include illustrations that are similar in style. Besides brightening up the case studies, they create cohesion and connection through her projects. The takeaway here is that you need to put in the effort and time to stand out. If well designed, small illustrations, nice flowcharts, redesigned deliverables can elevate a case study immensely. While it’s crucial that your case study is information-packed and an enjoyable read, but it also should be nice to look at.
7. Chin Li Zhi
What can you learn from this portfolio?
Front Page
Looking at this portfolio example you can tell that a decent amount of work went into it. Chin has uniform thumbnails that show UIs and also the companies he has worked for.
Keep in mind that the cover page might be your only chance to convince recruiters and UX professionals to click on your case studies. Furthermore, if you are a visual designer it’s really important that your portfolio page reflects your taste and skills right away.
Case Study
In the ‘RHB Mobile Banking’ case study, there is a section dedicated to early concepts and versions. Chin not only shows these versions but also writes about
- stylistic considerations
- how these three versions are different
- how could a particular version benefit the user?
Showing concepts in your case study is a good idea for a number of reasons. For example, if the client went with a different direction than you originally expected, this could be the place to showcase your vision. Or, if there were restrictions and limitations in the project by showcasing initial concepts allows you to present your strengths without compromises. Lastly, presenting different versions for a particular screen is a great way to show how versatile you can be.
8. Aleksander
What can you learn from this portfolio?
Front Page
On his portfolio page, Aleksander indicated the companies right on his case study thumbnails. What’s more, by grouping these case studies he hints that they are part of a long working relationship with said company.
Follow Aleksander’s example, and select a particular problem-solution pair for one case study so you don’t overwhelm the readers. If you find a way to narrow down a project, break it up into multiple case studies. If you do so, use visual clues to group the case studies together.
Case Study
In the ‘E-Timesheets’ case study, Aleksander sets up the project by writing about the project basics and the problem. What differentiates this case study, is that Aleksander explained the solution right after introducing the problem. This structure because gives you the option to showcase UIs and visual elements right at the beginning of your case study. Next, you can move on to describe how you reached this solution and what steps you took in your design process.
9. Carolin Jütz
What can you learn from this portfolio?
Front Page
Carolin’s portfolio showcases thumbnails with different mockups, colour, and type. However, looking at the portfolio as a whole it still feels cohesive. While some characteristics differ, the overall style (3D, floating mockups on a solid coloured background) are constant.
Using only one colour or only one specific mockup can result in a boring and repetitive portfolio page. But, if you mix and match a bit while sticking to similar style characteristics, your portfolio will look intriguing and visually cohesive at the same time.
When designing your portfolio homepage, you should strive for visual cohesion
Case Study
In the ‘BECKER Antriebe’ case study, there is a gif explaining a more complex flow and solution in an easy-to-understand manner. Paired with a short description of the flow, the reader can get an idea of what she is writing about in a matter of seconds.
When it comes to presenting solutions, flows, or complex ideas, always think of ways to simplify it. This can be achieved with an illustration, a flowchart without too much text, a series of UIs presented next to each other, or even a gif or video of the working interface.
10. David Lim
What can you learn from this portfolio?
Front Page
David’s portfolio is a good example of an elegant, minimal portfolio. You don’t have to clutter your front page with unnecessary information. What you need is a carefully selected font, a nice color scheme, and a simple introduction. As for your projects, you can opt for the same mockups for each of them to create visual consistency even if you choose different colours for the thumbnails.
Case Study
David included a ‘Challenges & Limitations’ section in his case studies detailing what restraints did the project have. If you worked on a project for a client, chances are you also had some limitations, which resulted in a design that might not be your ideal solution. If you include this in your case study, it gives a great base for understanding the complications of the project and also the final work itself.
11. Darshak Nanda
What can you learn from this portfolio?
Front Page
In this portfolio website example, you can see that Darshak also went for a minimalist look. He writes about essential professional details and lists his projects in a clean way. If you want your portfolio to focus on projects, yet don’t want to spend ages on designing thumbnails, you can implement Darshak’s trick. Choose a nice mockup and your favorite screen, or a screen that tells the most about this project and you are good to go!
Case Study
The ‘Partner Hub’ case study starts with a short and visual introduction. The numbers are peaking the interest and make the reader scroll further. Meanwhile, the written introduction part is kept concise.
When structuring your case study always think about what users, recruiters, and UX professionals will see above the fold, because that will determine if they will scroll further or not. You should also make sure that the project introduction contains: the problem, your role, your responsibilities the team, all the while keeping it concise.
12. Nikhil Vashistha
What can you learn from this portfolio?
Front Page
Nikhil used full-width thumbnails for his projects, yet it doesn’t feel overwhelming or too much when opening up the portfolio. While a good portfolio usually contains 3 to 5 projects sometimes you simply don’t have that many projects yet.
In such an instance, it is a good idea to go with bigger thumbnails, so your portfolio doesn’t feel empty or unfinished. However, pay attention to how much detail you add to a bigger thumbnail because it can end up being way too complicated and overwhelming for the user.
Case Study
The ‘Tracking issues’ case study is structured by presenting 3 iterations of a solution to existing problems. For each problem, there is a description of the solution, what worked and what did not work, and also how this solution ages and why there was a need for the next iteration.
If you are presenting iterations or versions always explain why a certain version worked, why it failed, or how an iteration was different than the previous one. This structure can prove that you’re doing conscious work and not just mindlessly putting out versions because that’s what you should do.
13. Felipe Rosas Licht
What can you learn from this portfolio?
Front Page
Felipe put logos on simple backgrounds, creating a streamlined portfolio. You can always opt for a solution like this if you are not a visual designer, you simply don’t do detailed UI, or you’d rather emphasize the brands you worked for.
Case Study
At the end of the Freelo project, Felipe wrote about what skills and domain knowledge he learned during this project. This is a crucial part of every case study but especially if you are a junior designer. Giving evidence that you are willing to learn and that you are improving professionally is a must in your portfolio.
14. Diego Valencia
What can you learn from this portfolio?
Front Page
When opening Diego’s portfolio and hovering over his projects you can see how much time it takes to read that particular case study. We all love when Medium does this and it became quite normal to know how much time reading an article takes. By treating your case studies as articles and incorporating little details like this you can make recruiters life a bit easier, as they don’t have hours to spend on portfolios.
Case Study
When presenting UIs, Diego included research insights right next to the screens and explained which user insight led to a particular design solution. If you are a visual designer and you’d like to concentrate on your visual work, you can structure your case study like Diego does, instead of the usual method-by-method approach. Even better, you can skip everything else, and concentrate on the user insights that influenced your designs.
15. Pompidou Nsangou
What can you learn from this portfolio?
Front Page
This portfolio is another great example of how a simple concept can become intriguing. The structure is quite clear and recruiters can see right away what sort of projects are behind the thumbnails. Sometimes it’s best not to make people think right on your front page.
f you want to position yourself as a UI designer, make sure that your portfolio reflects that. Pick a nice mockup, place your favourite UIs in them. Finally, pick a corresponding color and in a matter of minutes, your portfolio’s front page is finished.
Case Study
In the ‘PRIME’ case study, Pompidou explains the user testing feedback in a semi-visual way. While he writes about the feedback he received, he paired it with a screenshot where the mentioned UI elements are indicated to help the understanding. This is always a great layout to follow when presenting user research in your case study.
When someone sees your project the first time they won’t be familiar with the design, so it will be harder for them to comprehend the insights you are talking about. But when paired with visual aids like this, every feedback becomes really easy to understand right off the bat.
16. Carol Moran
What can you learn from this portfolio?
Front Page
The projects in Carol portfolios are highlighted with a photo next to the case study title and the description. These photos help to understand what the case study is about while setting the scene for the projects. This could be a great structure if you want to emphasize the project topics or if you are not a visual designer, but can’t be bothered with nicely designed thumbnails in your portfolio.
Case Study
In the Site Log case study Carol summarized the research insights in 6 distinct groups and indicated each of them with an icon. This visualized way of research insights is a great way to add some visual interest to the case study and to help comprehension. Whenever you are writing up your case study always think about how you can use icons, illustrations and other visual aids instead of just simply writing out your thoughts.
17. Beth Duddy
What can you learn from this portfolio?
Front Page
Beth’s portfolio takes a more holistic approach. Each project represents a company and role, and the thumbnails also summarize each role in a bit more detail. If you feel like creating a portfolio which is more workplace focused, rather than project-focused, you can pick and choose your favourite companies you worked for. Or if you just prefer your portfolio to reflect your career path instead of project highlights this could be a good approach when building your own portfolio.
Case Study
This holistic mentality is reflected in Beth’s case studies too. Instead of selecting one problem or a small project and writing about that, Beth focused on showcasing ‘project activities’ in each project. This could be a good way to focus on showing a range of skills or really focusing on emphasizing how many different tools and methods you have experience with.
18. Juantrice Alvarado
What can you learn from this portfolio?
Front Page
When reading Juantrice’s intro you can tell right away where her interests and passions lie. But going further she also included her creative type, which is a great shortcut for those who want to know right away how it is to work with her. While you don’t necessarily have to add a personality test result, including something personal or providing info beyond your position and previous works can go a long way!
Case Study
In the ‘Google Travel’ case study, Juantrice indicated the UI changes based on user test results right on the images. Also, she explained why that change was important and how it helped the users.
A good takeaway here is that you have to focus on showcasing the methods with the right visuals. When recruiters and UX professionals look through dozens of applications they have only a few minutes. If all you have are some deliverables and text next to it they won’t get the point of the case study. However, if you take the time to visualize your process and UX decisions, it’s more likely that it will get them interested. What’s more, they will also understand your work and case study quicker.
19. Sebastian M
What can you learn from this portfolio?
Front Page
Sebastian’s portfolio puts his works in the center of attention instead of his profile. The introduction is straight to the point. Are you also someone who thinks that projects and case studies can represent you better than essays? Then decide on the most important details you want recruiters to see and just let your case studies speak for themselves.
Case Study
The ‘UBC Student Blog’ case study has a really concise summary of the user tests results, focusing on user problems and their needs. This approach makes the comprehension of the case study easier because the reader knows that these issues are going to be addressed later on. When starting your case study with research, never skip the summary part! The summary underpins the readers’ understanding of the solution, which is a primary goal when writing a case study.
20. Charlee Walker
What can you learn from this portfolio?
Front Page
Charlee’s portfolio is embracing variety while still keeping it focused. Since she is a product designer, her showcased projects are all digital products. This allows recruiters to instantly recognize what she has experience in.
She makes her front page even more interesting by presenting work on her thumbnails differently on each project. Having roughly the same size for all of your projects will keep consistency in check. Consequently, you gain some extra room for and experimentation with the imagery of your thumbnails.
Case Study
While the introduction of the ‘Riley Hospital’ case study is quite short it does have all the details necessary to understand what comes next:
- The problem
- Her role
- Her team’s role
- The biggest challenges.
Sometimes it’s hard to summarize a long project but it really pays off to shorten and minimize the text you write. Probably you are already mindful of your copywriting. Why not use the same principles when it comes to presenting your own work in your portfolio?
21. Valerie Lee
What can you learn from this portfolio?
Front Page
One glance at Valerie’s portfolio will make it evident that there has been significant time spent on designing the page. The thumbnails are not only cohesive, but the whole portfolio has a color scheme which makes it look professional.
Keep in mind that you don’t have to stick to the color scheme of your showcased projects if they don’t fit together. Sometimes it’s okay to branch out a little bit and implement different colors that bring your whole portfolio together. It is a much better option than forcing clashing colours and elements together.
Case Study
In her ‘Love, Bonito’ project, Valerie summarizes the case study by indicating the steps she took in order to reach the final outcome. No matter how short or long your case studies are, a summary towards the beginning is always a great way to aid comprehension.
A good summary can consist of the steps of your design process if your case study calls for it. But it can be an overview of the case study itself, in which case it could also serve as the navigation inside the case study. In UXfol.io, you can add a linked navigation section to your case studies, that showcases your entire design process.
22. Indy Judd
What can you learn from this portfolio?
Front Page
Indy’s portfolio is one that you won’t forget quickly. This is a great benefit when it comes to applying for jobs and going to interviews. This portfolio is a great reminder that you can always go on a different route if you don’t identify with the current portfolio trends. Mixing in some nice colours, or even embracing a completely colourful portfolio can be a powerful tool to set you apart from other applicants.
Case Study
Indy’s personal touches are around in his case studies as well. He writes honestly and candidly about his experiences on the project. Showing off personality takes more than using lots of photos and images (although they contribute hugely).
The way you form your sentences and share your message is just as important. Being honest, owning your mistakes, admitting what could have been done better and what you have learned during the project means a lot.
23. Christiaan Johnson
What can you learn from this portfolio?
Front Page
Christiaan managed to create visual consistency by showcasing his projects in mockups. When in doubt, you can always rely on semi-realistic mockups, that have similar borders and shadows. These can pull together even your weirdest projects into a coherent whole.
Case Study
In the ‘Progressive Leasing’ & ‘Best Buy’ case studies there are photos of sketches, discovery and user research to aid comprehension. This technique gives a sense of closeness and raises the credibility factor of a case study. So next time you are out and about testing with users, document as much as you can. This way you can ensure that there is enough material to create an amazing case study.
24. Stephanie
What can you learn from this portfolio?
Front Page
Stephanie’s portfolio has a sidebar layout which is less common. However, this allows visitors to see personal information and projects side by side without having to scroll. If you’d like to concentrate more on your projects rather than your introduction, a layout like this could also work perfectly.
Case Study
The ‘Treble FM’ case study starts with a UI showcase which grabs interest. In some cases, it’s easier to understand and interpret a sketch, a wireframe or even personas when we have the final outcome in our mind. If you are a visual designer, go with this approach! You’ll grab the attention of recruiters by showing parts of the final designs right away.
25. Marcela Díaz
What can you learn from this portfolio?
Front Page
Marcela’s portfolio reflects what she writes about herself in the introduction. She is mainly a UX/UI designer, hence the full UX case studies in front. However, she also has a background in visual design, for which her projects are grouped into different categories such as branding and print.
Grouping your projects and creating a clear focus in your portfolio is a must especially if you are starting out in a new field or transitioning to a new one. Make sure to emphasize the projects that really matter for your next job.
Case Study
In the Lunar case study, Marcela presents her personas in a way that creates a special connection with the target audience. They are all part of the story and the project itself.
Even though you probably have persona sheets or user journey files you don’t have to present them just as they are. Switching the narrative and describing what happens on those deliverable will make a case study a joy to read.
26. Hyewon Son
What can you learn from this portfolio?
Front Page
Hyewon went with a minimal, distraction-free layout: apart from the navigation, all you can see are the projects. This way she makes sure that people click on the projects. If you feel like a portfolio’s main focus should be case studies, opt for a similar layout and add all the rest under an About me or Contact section. Visitors can still find this information but it will be easier for them to focus on your work.
Case Study
In the ‘Uber’ case study Hyewon described the user tests and its result in a clear and understandable way. There is a short summary of the findings and also what was changed based on user feedback. Also, she gives a visual representation of these changes via mid and high fidelity mockups. The takeaway is that showcasing the insights you got and how those insights influenced the designs is an important part of any case study.
27. Carson Young
What can you learn from this portfolio?
Front Page
Carson’s portfolio is simple yet appealing. While the project thumbnails are quite large in size their content is way smaller. This gives the whole portfolio an airy and light feel. When you are designing your own portfolio homepage pay attention to whitespace and margins. Nobody wants to look at a cramped portfolio and as much as you want to squeeze everything into a thumbnail you need to make some cuts to keep it simple.
Case Study
In the ‘Toolbox’ case study, Carson wrote about the key challenges they faced during the wireframing phase. He paired these descriptions with rough sketches trying to solve those particular challenges. If you also find yourself writing about versions or solutions, feel free to show some sketches and scribbles. They add a touch of personality to your case studies and also some credibility.
28. Alexander Kirov
What can you learn from this portfolio?
Front Page
Alexander’s portfolio has some password-protected projects which are a great way to protect sensitive data or case studies that are not strictly public. What is even better that he still shows some final UIs or design elements on the thumbnails so you can get a sense of his overall work even though you can’t peek further. If you can and allowed present as much information about projects like this on your own portfolio as well because they can be crucial to get a grasp of your recent works and overall skills.
Case Study
In the ‘Pebble Health’ case study Alexander showcased a whole ‘Visual Design Evolution’, explaining how he applied an existing visual language to a new platform. Such behind-the-scenes details can set you apart from the hundreds of other designers who are only showcasing their final, polished works. And don’t forget, sometimes the journey is more important than the goal itself!
29. Josh Lucas
What can you learn from this portfolio?
Front Page
Josh’s portfolio is a great example for a project focused portfolio. The intro is kept short, by Instead, he uses an About me to list the personal information a recruiter might be interested in. Just because the front page is traditionally for projects don’t be afraid of including a separate page for a longer introduction or some extra details you might see fit in your portfolio.
Case Study
In the ‘Mimic’ case study Josh decided to showcase the final designs by focusing on challenges and user needs. He presents interaction coupled with details on what caused problems for users and how this problem was solved. This is a more holistic approach instead of the usual process-explanation take. Thus, it is a great template for you if you don’t feel like creating separate sections for the research insights or simply want to showcase final UIs as soon as possible.
30. Audrey Chou
What can you learn from this portfolio?
Front Page
Audrey’s bio and introduction are extremely straightforward. Her project choices share this quality as they showcase nothing but digital products. Reading a clear introduction is just what recruiters need when they sift through dozens of portfolios. If you are making a career change make sure your projects reflect your desired position so you won’t confuse recruiters and UX professionals what sort of work you are actually looking for.
Case Study
In the ‘Spotify’ case study Audrey presents usability improvements by showcasing the final UIs and indicating what changed and why. She uses arrows to point to a specific element. Whenever you are showcasing design changes or insights from users, think about how would you present the same things for your clients or boss. You’d probably point out details and show what exactly changed so try applying this mindset to your written case studies as well.
First, you need an online portfolio builder
Now, that you have seen what other designers do to catch the attention of recruiters and clients, it’s time for you to build your own portfolio at UXfol.io!
If you are still not sure about the direction you want to take, choose one from the above examples, recreate it, and once you are done, add your own personality to it.
Start creating your portfolio with UXfol.io right now! Our portfolio builder comes with the tools that you need to build an impressive portfolio with convincing case studies. Also, there is no coding involved!
What’s more, our built-in guiding questions and example sentences will help you with copywriting. Also, you can take advantage of our review features before you apply for your next job!