If you want to create your online UX design portfolio, you can go with two choices: either use a readymade solution such as an online platform with templates to choose from or code your portfolio from scratch. Let’s go through options you can take to create your online UX portfolio. We’ll explore some readymade solutions such as Behance and WordPress, go through some considerations for coding your own website, offer 7 design guidelines for your online UX portfolio and end with a demo website we’ve created specifically for you. Let’s start creating!
Imagine you're a hiring manager. You click on a UX designer's portfolio website. It takes ages to load. You find the navigation confusing. You leave. That's the last thing a designer wants, right?
An online UX portfolio website acts as your digital business card. It shows your skills, your style, and your experience. We can’t overstate the importance of having an online portfolio as a UX designer.
Yet, a portfolio website is more than a resume. It's a project in itself. The user experience on this site tells a story. It says, "This is what you can expect from me."
So, what should your portfolio website be like? User-friendly and visually appealing. Period. A beautiful, smooth-running site says you care about the viewer. It tells employers you're the real deal. Let’s look into the nuances of building an online UX portfolio and how to build an engaging one.
Use Ready-made Platforms to Create Your Online UX Portfolio with Ease
© Interaction Design Foundation, CC BY-SA 4.0
If you don’t have any coding experience, we recommend that you create a UX portfolio with a readymade solution. These are solutions, such as website design and hosting services, where you can create an online portfolio without the need to code.
We try to be as unbiased as humanly possible, and don’t receive any form of sponsorship or payments from our recommendations below. We chose them because they’re popular among fellow designers and because we think they’re easy to use. You should do additional research to find if there are other platforms that fit your specific needs.
1. Behance
© Behance, Fair Use
Behance is a leading online platform for creative professionals to showcase their work, including UX designers, with over 10 million members. It offers an extensive network for exposure and collaboration. The platform allows you to create a personalized portfolio URL and add individual "projects" that serve as case studies.
Behance's user-friendly project editor supports text, images, and videos. This makes it easy for you to narrate your design process. You can join the platform for free to share your work and connect with the design community.
Main Features
Advanced editing tools
Multi-owner collaboration
Visitor interaction
Free feedback loop
Example websites
Pros
A large, engaged community
Multimedia support (text, images, videos)
Collaboration features
Comment section for critiques to get feedback
Cons
Fewer design options
No personal domain
High Competition since there are over 10 million members
Less SEO control
Pricing
Free plan
Rating
4.4/5 (g2)
2. WordPress
© WordPress, Fair Use
WordPress is a good choice for beginners as it helps build a personal website. The best part about WordPress is that you don't need a plan at all. You can upgrade to a paid plan for a unique URL. The platform suggests themes during signup to align with your website's purpose. Also, WordPress is available for anyone to install for free on their own website.
Creating UX case studies is straightforward with WordPress's intuitive editor, which provides a live preview. The editor also supports various "blocks" for adding elements like headings, images, and tables. This makes WordPress a versatile option for designers.
Main Features
Customizable Themes
Intuitive Editor
SEO-Friendly
Plugin Support
Live Preview
Create WordPress websites directly from Figma
Example Websites
Pros
Offers a vast array of themes and plugins.
An intuitive dashboard and editor make it easy to use.
Built-in features and plugins help optimize search engine rankings.
Large online community for troubleshooting and advice.
Cons
While user-friendly, mastering features takes time.
Premium themes, plugins, and hosting can be expensive.
Too many plugins can slow down site performance.
Pricing
Free forever account with subdomain or self-hosted
Starts at $4/month (billed annually)
Rating
4.4/5 (g2)
3. Squarespace
© Squarespace, Fair Use
Squarespace is an online platform for website building that offers a drag-and-drop interface. It gathers all the essential tools in one place, eliminating the need to switch between different platforms. It stands as an innovative design portfolio website builder ideal for creative individuals.
The platform provides customizable templates, SEO tools, and integrated marketing features to help you create anything from portfolios to e-commerce sites.
Main Features
SEO tools
Customizable templates
Integrated marketing tools
E-commerce support
Example Websites
Pros
Simplicity and ease of use
No-code editing capabilities
Ready-made templates
Cons
Limitations to customizing templates
Confusing user experience in some places
Shortage of plugins and extensions compared to other website builders
Pricing
A free 14-day trial
$16 per month (billed annually)
Rating
4.2/5 (g2)
4. Dribbble
© Dribbble, Fair Use
Dribbble is a well-known platform among designers, especially those looking to create a UX portfolio. Unlike traditional website builders, it functions as a social network and a portfolio platform. You upload individual works as "shots," small screenshots of your designs.
Audience engagement is high on Dribbble. You get likes, comments, and even job offers directly from viewers. Each shot can be part of a larger "project," which lets you group related works together. For example, all elements of a mobile app design can go into a single project.
Dribbble offers basic analytics, too. You can track views, likes, and the reach of your portfolio. This helps you understand what grabs attention. Though less customizable than other online portfolio website builders, Dribbble is very user-friendly. You can change the layout slightly, but the focus remains on your work rather than the website design.
Main Features
Showcase design projects as "shots."
Connect with other designers and potential clients.
Receive comments and critiques on your work.
Participate in themed contests to gain exposure.
Example Websites
Pros
User-friendly interface for portfolio management.
High visibility in the design community.
Valuable critiques from skilled designers.
Cons
Focuses mainly on visual design.
A high number of designers can dilute visibility.
"Shots" may not showcase full project depth.
Some features require a paid subscription.
Pricing
14-day free trial
$8/month (billed annually)
Rating
4.1/5 (g2)
5. Wix
© Wix, Fair Use
Wix is a popular choice for building portfolio websites. Its drag-and-drop interface makes it easy to use. You can choose from a range of tailored design templates for portfolios. Artists, photographers, and freelancers often use Wix to showcase their work.
Wix offers features like SEO tools and social media integration that help with marketing. For instance, SEO Wiz helps tailor your site to be more visible on search engines. Social media buttons allow quick sharing of your work.
Main Features
500 designer-made templates
Built-in SEO tools
Mobile-optimized
100+ fonts available
Advanced design features like animation, video backgrounds, and scroll effects.
Example Websites
Pros
Good customization options
Massive template collection
Intuitive drag-and-drop interface
Cons
Tracking and analytics require a paid plan
Your site isn’t transferrable
Restriction on switching templates once the site goes live
Pricing
Free plan
Premium plans start at $16 and go up to $59 monthly.
Rating
4.2/5 (g2)
6. Webflow
© Webflow, Fair Use
Webflow is a web design tool that combines visual design with coding power. It offers a robust, no-code platform for creating custom websites. It's an excellent portfolio choice because it provides high customization, responsive design, and seamless animations.
With a built-in CMS and hosting, Webflow is a one-stop shop for designers who want a tailored portfolio that stands out. Its range of professional templates and design interactions can make your portfolio an experience for the visitor.
Main Features
Customizable templates and elements
Real-time visual builder
Powerful CMS for dynamic content
Export the site’s HTML, CSS, and Javascript (using paid plans)
Easy integration with other services such as email marketing platforms, social media platforms, and more.
Example Websites
Pros
Live prototyping
No plugins required
Collaboration options
Quicker development time
Cons
Lack of code customizations
No mobile app to edit content
Extensive pricing plans
Pricing
A free forever plan
Paid plans start at $14 and go up to $39 monthly.
Rating
4.4/5 (g2)
7. UXfolio
© Otilia Pandelea, Fair Use
UX folio specializes in portfolio creation for UX/UI designers. It offers tailored features like case study templates for design processes and outcomes.
Unlike general website builders like Webflow or Squarespace, UXfolio zeroes in on the needs of UX professionals. It provides an environment to showcase the end product and the UX research, problem-solving, and journey behind it.
Main Features
Customizable pre-made templates
Custom case-study layouts
Built-in device mockups
Copywriting prompts and tips
Interactive prototype embedding
Example Websites
Pros
Strong emphasis on creating impressive UX case studies
Easy to use
Community review for better insights
Cons
Limited customization options compared to other portfolio builders
Relatively simple designs
Pricing
Free plan to try every premium feature
$15/month (billed monthly)
Rating
4.3/5 (g2)
8. Notion
© Notion, Fair Use
People primarily know Notion as a versatile productivity tool. However, its flexibility also lets you adapt it for building portfolios. Unlike specialized platforms, Notion offers a simplified, structured environment to create and showcase work. Its unique feature is its use of "blocks" for various types of content, from text and images to videos you embed.
Super is a specialized tool that takes Notion's flexible content management capabilities and turns them into fully functional websites, including portfolios. Unlike Notion alone, Super provides enhanced design customization that allows you to apply custom domains, fonts, and analytics.
Main Features
Nested pages for structure
Blocks for varied content
Collaboration in real-time
Customizable workspace
Multi-platform access
Example Websites
Pros
Suits various use cases beyond portfolios.
Intuitive drag-and-drop interface.
Accessible on different devices.
Cons
Fewer design options.
Less optimized for search engines.
Privacy concerns for portfolios.
Pricing
Free plan for individuals
Paid plans start at $8/month (billed annually)
Rating
4.7/5 (g2)
9. Adobe Portfolio
© Adobe Portfolio, Fair Use
Adobe Portfolio is a specialized website builder in the Adobe Creative Cloud suite. It is ideal for designers because it offers a range of themes to build multi-page or single-page portfolios. Its seamless integration with Behance makes sharing work effortless.
The builder includes essential features like custom domain connectivity, responsive image grids, and password-protected content. Familiarity with Adobe tools gives you an easy navigation experience.
Main Features
Customizable themes
Responsive image grids
Behance integration
Adobe Fonts access
Password protection
Example Websites
Pros
No extra cost with Creative Cloud
Basic features for professional portfolio
Lots of templates
Cons
Requires Creative Cloud subscription
Less user-friendly than competitors
Preview mode needed to view the site
Pricing
Free with any Adobe Creative Cloud plan
Paid plans start at $9.99/month (billed annually)
Rating
4.6/5 (g2)
How to Choose the Right Portfolio Builder
© Interaction Design Foundation, CC BY-SA 4.0
Choosing the right portfolio builder is crucial when you're in the market for designing a UX portfolio website. The choices are plenty, and each has its own set of features.
So, how do you pick the best website builder for an online UX portfolio? Let's discuss some key factors that should guide your decision.
1. Price
The financial aspect is often the starting point. Some online UX portfolio website builders offer free plans but have limited features. On the other hand, paid services like Uxfolio provide more customization options. Plan your budget and compare offerings.
2. Ease of Use
A user-friendly UX portfolio builder is essential. If the interface feels clunky, your design process will suffer. Options like drag-and-drop functionality can make a world of difference.
3. Community and Support
A strong community can offer UX portfolio examples, tips, and general guidance. Check forums and reviews to gauge the level of community support for each UX portfolio website builder.
4. Demo Version
Most of the best UX portfolio builders provide demo versions. Use these to test customizable, responsive portfolio websites and more. The demo can offer insights into what you can and cannot do.
5. Portfolio Website Templates
Most builders offer UI design portfolio templates. These can be a great starting point for creating an impressive UX portfolio. However, ensure they are customizable to fit your unique style.
6. Showcase UX Projects Online
Your chosen platform should have the essential elements you must showcase in your UX portfolio. Look for features like image galleries, case studies, and text blocks that allow your work to shine.
7. Social Media Integration
Social media links are a must in the digital age. Make sure the builder allows easy integration to enhance your online presence.
8. Customization Options
The more customization you can do, the better. Your UX portfolio is a reflection of you. Look for customizable UX portfolio websites that allow you to change colors, fonts, and layouts.
9. Design Process Documentation
Consider platforms that let you document your design process. Such features allow you to add case studies, testimonials, and other materials that elevate your UX portfolio.
10. Integration Options
Some designers prefer platforms that integrate with their existing tools. For example, if you already use Adobe products, consider Adobe Portfolio. It blends well with other Adobe tools and offers a seamless experience for showcasing your work.
11. Responsive Portfolio Websites
In a mobile-first age, responsive portfolio websites are non-negotiable. Your portfolio should look good on all devices and screen sizes.
If you pay attention to these criteria, you'll be well on your way to selecting the best website builder for your UX portfolio. Take your time, do your homework, and choose wisely.
Code Your Own Online UX Portfolio
If you know how to code or have a specific vision of your UX portfolio, then nothing beats coding your website from scratch. However, to do so you’ll need to have some knowledge in front-end coding, such as how to write HTML, CSS and JavaScript code.
But what if you really want to code your own portfolio but have no coding skills? Well, if you love a challenge, you can consider the following online platforms that teach you how to code. If you don’t know coding, we don’t recommend that you learn it to create your first online UX portfolio. Rather, you should treat these online coding courses as part of your long-term plan, so you’ll eventually be able to code your own personal website.
Khan Academy (Free)
Khan Academy is a nonprofit online platform that provides free courses for everyone. We love Khan Academy’s mission. In particular, we recommend that you take Khan Academy’s courses on HTML, CSS and JavaScript, which will teach you the basics you need to create your own website.
You can learn how to code HTML, CSS and JavaScript in Khan Academy’s free online courses. © Khan Academy, Fair Use.
We found Khan Academy’s interface particularly suited to learning coding; for instance, their “video” lessons contain a two-panel layout where on the left panel you’ll see the live code being updated as the instructor speaks, while on the right you’ll see a live preview of the website.
In Khan Academy’s lessons, you can see a code preview and a live website preview at the same time.
You can learn how to code HTML, CSS and JavaScript in Khan Academy’s free online courses.
© Khan Academy, Fair Use
Codecademy (Free and Paid)
Codecademy is another online learning platform, but unlike Khan Academy, it focuses entirely on coding. You can take courses on Codecademy for free or upgrade to a paid “pro” plan to unlock career paths and code-oriented portfolio-building exercises, among other features.
Codecademy specializes in code courses, and you can start learning for free.
© Codecademy. Fair Use
We suggest that you take Codecademy’s introduction courses to HTML, CSS and JavaScript so that you’ll get a firm grip of the foundational knowledge you’ll need to build your online UX portfolio.
In fact, if you want to master the basics of HTML, CSS and JavaScript, we highly recommend that you take courses from both Khan Academy and Codecademy. That’s because both platforms teach with different methodologies and from different perspectives; if you take courses from both platforms, you’ll have a holistic picture of the basics of front-end development.
7 Design Guidelines to Follow When You Build Your Own Online UX Design Portfolio
© Interaction Design Foundation, CC BY-SA 4.0
By now, you should have a good idea of which option suits you the most. You should code your UX portfolio from scratch if you have coding knowledge. Otherwise, you should explore ready-made solutions such as Behance, WordPress, and Squarespace to create your online portfolio easily.
No matter which option you choose, you must consider these 7 essential design guidelines when creating your online UX portfolio!
1. Give a Short, Concise Introduction on Your Home Page
Provide a short and precise introduction of yourself right at the top of your home page. That way, recruiters immediately know what to expect from you. Remember, the home page of your online UX portfolio is prime real estate—it’s the first impression you’ll make on recruiters.
Include your name and current job position or the job role you aspire to. If it’s applicable, include your current location, too. Keep it short—your introduction should be at most 3 sentences long. Write it conversationally, like how you would speak in a friendly and professional setting.
Your introduction can be a great way to convey your personality. Are you a cheerful person? Perhaps you’re optimistic? Let your character shine through!
© Moritz Oesterlau Portfolio, Fair Use
For example, when you arrive at the homepage of Moritz Oesterlau's portfolio, a delightful animation seizes your attention. In this animation, Moritz introduces himself. His name appears prominently, and a welcoming wave emoji accompanies it. Moritz effectively communicates his rich experience, areas of expertise, and how he brings value to potential clients or employers.
© Daniel Autry - Product Designer & Developer, Fair Use
Daniel Autry's portfolio hits the sweet spot between personable and professional. Right off the bat, the bold "Hi, I'm Daniel." draws you in. As a product designer and developer passionate about social change, his concise bio reveals his current role at Google, melding purpose with prestige. His photo, featuring a broad smile, adds a personal touch, making him approachable and credible.
Notice how, in both Moritz’s and Daniel’s portfolios, they chose to convey the most important information first. You should do that, too! Your name and job role are the most essential pieces of information. Hobbies and side projects are less important and should go below. You might want to put your hobbies only on your “about” page rather than the home page.
2. Include Only 2–3 UX Case Studies
Carefully select and showcase 2–3 of your best UX case studies. We know it’s difficult to resist the temptation to show your recruiters everything you’ve done, but resist you must! You need to showcase only case studies that are both exceptional and relevant to your UX job role.
Take a cue from Victoria Kazakova's perfect UX portfolio. She elegantly underscores quality over quantity by showcasing just three of her top-tier case studies. A masterclass in the 'less is more' mantra!
© Victoria Kazakova’s Portfolio, Fair Use
3. Make it a Great User Experience!
User experience is critical—especially in your online UX portfolio! Recruiters will judge your online portfolio as a product design, and UX problems will negatively affect you.
Here are some essential usability guidelines you need to follow:
Make sure navigation is simple and easy.
Design proper affordances into your links and interactive elements. For instance, you should underline the links and use a different color.
Pay attention to readability and color contrast. Ensure your fonts are big enough, and check your color contrast using WebAIM’s color contrast checker.
© Olivia Truong, Fair Use
Check out Olivia Truong's portfolio; it stands out for its impeccable usability. With its harmonious blend of bright yet soothing hues, everything feels intuitively in its proper place. The typography is spot-on, enhancing readability, and those visuals? They don't just look good—they add real meaning. It is truly a seamless blend of form and function.
© Home | Saloni Joshi, Fair Use
Saloni Joshi's portfolio brilliantly showcases how good usability should underpin a UX design. Her website thrives on minimalism, eliminating unnecessary distractions and focusing squarely on her work and accomplishments.
4. Create an About Page or Section with More Information About Yourself
Since you must keep the introduction on your home page short, we suggest creating a separate “About” page or section to show more information about yourself.
In your About page, include:
Further details about yourself, such as your hobbies and interests;
Your work history and educational background; and
Social media links to your professional profiles, such as LinkedIn, Medium, and Behance.
Ensure you update your work history and education on your About page and other online accounts such as LinkedIn, Medium, and Behance. For example, when you complete a course with the Interaction Design Foundation, you’ll always get an industry-recognized Course Certificate to prove your achievements. Include that along with the unique link you get for each course you’ve completed so recruiters can verify the authenticity of your certificate. Showing new skills becomes more accessible with this approach, and you do it in the best company because leading UX companies such as Adobe, Accenture, Philips, and IBM have taken up company memberships with the Interaction Design Foundation.
© Interaction Design Foundation, CC BY-SA 4.0
Include the Interaction Design Foundation Course Certificate(s) on your About page and your LinkedIn and Dribbble pages to show your achievements.
© About | Sophie Chen (sophiemchen.com), Fair Use
Sophie Chen's UX portfolio brilliantly highlights the essence of a comprehensive 'About' page. Detailing her journey and seamlessly integrating her work history and skills offers a full spectrum view of her expertise.
5. Place Side Projects in A Separate Page or Section
We know you feel proud of your side projects, but you should place them further down on your home page or another page altogether. The main focus of your home page is your UX case studies, so you must find a way to keep your side projects from competing for attention.
However, you should still include your side projects in your online UX portfolio because they help showcase your passions and give recruiters a better sense of your personality. Create a separate section or page for all your side projects.
For instance, Yu-Hsuan created a separate section for “side projects,” which he placed below his case studies. This way, he can showcase his passion for design while putting the main spotlight on his case studies.
© Yu-Hsuan's Portfolio (yuhsuanlin.com), Fair Use
Yu-Hsuan skillfully navigates the challenge many UX designers face: locked projects due to NDAs. In her portfolio, she spotlights her illustrative talents, vividly showcasing side ventures in graphic and game design. She maintains cohesion and injects creativity by using her artistry to hint at those confidential projects.
6. Make Your Portfolio Visually Pleasing and Consistent
Even if you don’t have a background in visual design, your online UX portfolio should look aesthetically pleasing and be visually consistent. Why? As mentioned above, recruiters will judge your online UX portfolio like any other designed product.
Thankfully, it’s easier than ever to create a visually pleasing website. If you’re not confident in your visual design skills, you can use a platform such as WordPress or Squarespace, which provides nicely designed templates.
© Pascal Strasche – Freelance UI/UX Designer, Fair Use
Pascal Strasche's UX portfolio exemplifies visual harmony and consistency. Seamlessly weaving together a palette of well-balanced colors, it captivates the viewer. The cohesive design showcases his aesthetic acumen and demonstrates meticulous attention to detail, making it visually pleasing and effectively communicative.
7. Keep it Simple
When you create your online UX portfolio, think about the essentials of your message. Don’t aim to make the most perfect or beautiful website because your online UX portfolio will continually evolve and change. You’ll have to maintain and change the case studies you show regularly, your intro copy, etc.
You should aim to create and push out a good enough version of your online UX design portfolio rather than wait for months to perfect it. Once you’ve published your online UX portfolio, you can spend more time improving it. At the same time, you would’ve already had an important asset you can use to apply for jobs.
Download Our Template for 7 Design Guidelines to Follow in Your Online UX Portfolio
We’ve specially created a PDF template with a summary of the 7 essential design guidelines we’ve mentioned above. Download yours now:
Use Our Sample UX Portfolio Site as a Reference
To further help you create your online UX portfolio, we’ve created a sample site you can reference. In our sample site, you’ll know what your online UX portfolio should look like.
© Interaction Design Foundation, CC BY-SA 4.0
© Interaction Design Foundation, CC BY-SA 4.0
We’ve created an entire online UX design portfolio so you can refer to it when you make yours!
Head over to our sample UX portfolio site now: https://sampleuxportfolio.wordpress.com
The Take Away
If you want to create your online UX design portfolio, you have two options: use a ready-made solution such as Behance or WordPress or code your website. If you’re unfamiliar with coding, Behance, WordPress, and Squarespace are excellent solutions. In particular, WordPress and Squarespace allow you to have your website and provide many templates for you to choose from. Alternatively, nothing beats coding your website if you are interested in coding or know how to code.
When you create your online UX portfolio, keep these 7 essential design guidelines in mind:
Give a short, concise introduction on your home page.
Include only 2–3 UX case studies.
Make it a great user experience!
Create an about page or section with more information about you.
Place side projects in a separate page or section.
Make your portfolio visually pleasing and consistent.
Keep it simple.
References and Where to Learn More
Check out our sample UX portfolio site built with WordPress.
To check the color contrast of your online portfolio’s text and elements, you can use WebAIM’s color contrast checker.
Check out Netguru’s UX case study on Behance for a taste of how yours could look.
