How To Create Portfolio On Behance

So, you want to create an online UX design portfolio. The good news is there are more options for you to create your online portfolio than ever before. The bad news? All that choice can easily make you feel overwhelmed! That's why we're here—we'll 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 6 design guidelines for your online UX portfolio and end with a demo website we've created specifically for you. Let's start creating!

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 each of these options.

Use Readymade Platforms to Create Your Online UX Portfolio with Ease

If you don't have any coding experience, we recommend that you create your online 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.

Behance (Free)

Behance is the most popular online portfolio platform with over 10 million members. You can join the platform for free and publish your UX case studies.

Behance is an online portfolio site that lets you post UX case studies and network with other designers. Author / copyright holder: Behance. Copyright license and terms: Fair Use

If you decide to create your UX design portfolio on Behance, then your Behance profile—for instance, "behance.net/yourname"—will be your UX portfolio and each "project" you post onto your profile will act as a UX case study.

Behance's project editor is easy to use and allows you to write your UX case studies and insert graphics just like any other word processor.

Behance's project editor is easy to use and allows you to add images, videos and other types of content. Author / copyright holder: Behance. Copyright license and terms: Fair Use.For a good example of a UX case study hosted on Behance, check out Netguru's Behance project of their family banking app:

Netguru's project for Pockee, their family financial app, is a great example of a UX case studyhosted on Behance. Author / copyright holder: Netguru. Copyright license and terms: Fair Use.

WordPress (Free and Paid)

If you prefer to have your own website, WordPress is a great option. Their free plan gives you a custom "yourwebsite.wordpress.com" website, and you can upgrade to a paid plan to further customize your website's URL—for instance, to "yourwebsite.com".

WordPress allows you to build your own website for free, without having to write any code. Author / copyright holder: WordPress. Copyright license and terms: Fair Use.

WordPress's signup flow is incredibly well-designed, and it matches you with suitable themes so you get off to a great start. If you're not happy with the options shown in your signup flow, you can choose from countless other themes.

WordPress's signup flow suggests themes that are suitable to your website's purpose. Here, WordPress suggests 4 themes suitable for an online portfolio. Author / copyright holder: WordPress. Copyright license and terms: Fair Use.

You can create your UX case studies on WordPress as posts through an intuitive and easy-to-use editor. You can see a realistic preview of your posts in the editor and add a wide range of "blocks", such as headings, images, galleries and even tables.

WordPress's post editor is robust and shows you a live preview of your post. Author / copyright holder: WordPress. Copyright license and terms: Fair Use.

Squarespace (Paid)

Squarespace is a premium web hosting and design platform that lets you create a professional website based on beautifully designed templates. Compared with the other solutions we've shared above, Squarespace is not free and prices start at $12 per month for their yearly plan.

If you're willing to invest in your online UX portfolio, Squarespace is a solid choice—you'll get a custom website URL and can quickly get your website up and running without the need to code.

Squarespace's value proposition is that it offers you beautifully crafted templates that you can use for your website. Author / copyright holder: Squarespace. Copyright license and terms: Fair Use.

Similar to WordPress, Squarespace offers intuitive and easy-to-use page and post editors, so you can design and publish your portfolio's pages and UX case studies with ease. On top of that, you can even create your own logo for your UX portfolio in a few clicks with Squarespace's logo-creation service called Squarespace Logo. Squarespace Logo is free if you have a paid account.

You can create a simple logo of your online UX portfolio with Squarespace Logo, which is free if you have a paid account. Author / copyright holder: Squarespace. Copyright license and terms: Fair Use.

The main disadvantage of using readymade services is that your online UX portfolio might look less unique. For instance, many sites will likely use the same template as the one you chose for your WordPress or Squarespace website, and on Behance, your profile will follow Behance's visual style. However, despite this you still have some space to customize your online UX portfolio—for example, through the use of beautiful images that you include in your UX case studies.

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. As a nonprofit ourselves, 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. Author / copyright holder: Khan Academy. Copyright license and terms: 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. Author / copyright holder: Khan Academy. Copyright license and terms: 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. Author / copyright holder: Codecademy. Copyright license and terms: 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

By now, you should have a good idea of which option suits you the most. If you have coding knowledge, then you should code your UX portfolio from scratch. Otherwise, you should explore readymade solutions such as Behance, WordPress and Squarespace to create your online portfolio with ease.

No matter which option you choose, you'll need to bear these 7 essential design guidelines in mind when you create your online UX portfolio!

1. Give a Short, Concise Introduction in Your Home Page

Provide a short and clear 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 in a conversational way, 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!

Teo Yu Siang's online UX portfolio contains a concise introduction on the home page. Author / copyright holder: Teo Yu Siang. Copyright license and terms: Fair Use.

For example, in Teo Yu Siang's online UX portfolio, he makes sure his name is the biggest thing so you notice it. His introduction is also concise and consists of 3 short sentences. In the last sentence, he conveys his personality through a slightly cheeky strikethrough of the word "subversive".

Kevin Park's portfolio home page is clean, and his introduction is clear and to-the-point. However, he makes it unique through his use of emoji. Author / copyright holder: Kevin Park. Copyright license and terms: Fair Use.

Kevin Park employs similar tactics to great effect. In his home page, he uses emoji to add visual interest and convey a playful tone of voice.

Notice how in both Yu Siang's and Kevin's portfolios, they chose to convey the most important information first. You should do that, too! Your name and job role are the most important pieces of information. Hobbies and side projects are less important and should go below. In fact, you might want to put your hobbies only in your "about" page, rather than on 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 show only case studies that are both exceptional and relevant to your UX job role.

As an example, Shawn Park's online UX portfolio displays 3 main case studies that all serve to highlight his skills in UI and UX design.

Shawn Park features 3 case studies in his online UX portfolio, all of which focus on his UI/UX skills. Author / copyright holder: Shawn Park. Copyright license and terms: Fair Use.

3. Make it Usable!

Usability is key—especially in your online UX portfolio! Recruiters will judge your online portfolio as a designed product, and usability problems will reflect badly on you.

Here are some key usability guidelines you need to follow:

Make sure navigation is simple and easy.
Design proper affordances into your links and interactive elements. For instance, links should be underlined and have a different color.
Pay attention to readability and color contrast. Make sure your fonts are big enough, and check your color contrast using WebAIM's color contrast checker.

Simon Pan's portfolio is a great example of a site with good usability. His top navigation menu is clear and legible, and he uses an underline to indicate the page you're on.

We like Simon Pan's clear top navigation menu, which is easy to use and readable. Author / copyright holder: Simon Pan. Copyright license and terms: Fair Use.

On the other hand, Daniel Rakh's online UX portfolio is beautiful and incredibly well-animated. However, we feel that the color scheme Daniel chose doesn't provide sufficient color contrast—in particular, the logo that says "Daniel" almost fades into the background.

Daniel Rakh's online UX portfolio is beautiful and well-animated. However, many parts of his website don't have sufficient color contrast and are hard to see. Author / copyright holder: Daniel Rakh. Copyright license and terms: Fair Use.

4. Create an About Page or Section with More Information About Yourself

Since you need to keep the introduction in your home page short, we suggest that you create 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 that your work history and education is updated on your about page as well as on your 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. This will help you show that you've gained new skills and that it's in the very best company because leading UX companies such as Adobe, Accenture, Philips and IBM have taken up company memberships with the Interaction Design Foundation.

Include the Interaction Design Foundation Course Certificate(s) on your about page as well as on your LinkedIn and Dribbble pages to show your achievements.

We like Pratibha's online UX portfolio, which contains an about page where she describes her work history, educational background as well as her passion for illustration and photography.

Pratibha's about page has many things we like: a nice and clear professional headshot, rich description of her experiences and passions, as well as a conversational tone of voice. Author / copyright holder: Pratibha. Copyright license and terms: Fair Use.

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 in another page altogether. The main focus of your home page is your UX case studies, so you cannot afford to let your side projects compete for attention.

You should still include your side projects in your online UX portfolio, however, because they help showcase your passions and let recruiters get a better sense of your personality. We suggest you create a separate section or page for all your side projects.

For instance, Hiroo Aoyama chose to create a separate section for "side projects", which he placed below his case studies. This way, he can showcase his passion in design while also place the main spotlight on his case studies.

Hiroo Aoyama placed his side projects in a separate section of his home page so they don't compete for your attention but still are discoverable to recruiters who are interested in learning more. Author / copyright holder: Hiroo Aoyama. Copyright license and terms: Fair Use.

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? Because, as we mentioned above, recruiters will judge your online UX portfolio just like they would 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 you with nicely designed templates.

If you are not proficient in visual design, make use of well-designed templates such as this one titled "York" by Squarespace. Author / copyright holder: Squarespace. Copyright license and terms: Fair Use.

7. Create an MVP: Minimally Viable Product

When you create your online UX portfolio, think MVP—minimally viable product. Don't aim to create the most perfect or beautiful website, because your online UX portfolio will always evolve and change. You'll have to regularly maintain and change the case studies that you show, your introductory 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 then spend more time to improve 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:

Get your free template for "7 Design Guidelines for Your Online UX Design Portfolio"

7 Design Guidelines for Your Online UX Design Portfolio

Use Our Sample UX Portfolio Site as a Reference

To further help you create your online UX portfolio, we've created a sample site that you can use as a reference. In our sample site, you'll get an idea of what your own online UX portfolio should look like.

We've created an entire online UX design portfolio so you can refer to it when you create yours! Author / copyright holder: Teo Yu Siang and the Interaction Design Foundation. Copyright license and terms: CC BY-SA-NC 3.0.

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 readymade solution such as Behance or WordPress, or code your own website. If you're not familiar with coding, then Behance, WordPress and Squarespace are excellent solutions. In particular, WordPress and Squarespace allow you to have your own website and provide many templates for you to choose from. Alternatively, if you're interested in learning coding or already know how to code, then nothing beats coding your own website.

When you create your online UX portfolio, keep these 7 essential design guidelines in mind:

Give a short, concise introduction in your home page.
Include only 2–3 UX case studies.
Make it usable!
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.
Create an MVP: minimally viable product.

If you need further inspiration or a solid reference, you should check out our sample UX portfolio site: https://sampleuxportfolio.wordpress.com

References and Where to Learn More

Check out the readymade solutions we recommend to create your online UX design portfolio:

Behance: https://www.behance.net
WordPress: https://wordpress.com
Squarespace: https://www.squarespace.com

Check out Netguru's UX case study on Behance for a taste of how yours could look: https://www.behance.net/gallery/77805409/Pockee-a-family-banking-app

On the other hand, if you want to code your own UX portfolio but don't have any coding skills, you can learn from these platforms:

Khan Academy: https://www.khanacademy.org
Codecademy: https://www.codecademy.com

We've used these online UX design portfolios as examples in our lesson item:

Teo Yu Siang: http://teoyusiang.com
Kevin Park: https://kevinparkdesign.com
Shawn Park: https://www.designbyroka.com
Simon Pan: http://simonpan.com
Daniel Rakh: https://danielrakh.com
Pratibha: http://www.pratibhajoshi.com
Hiroo Aoyama: https://www.hirooaoy.com

To check the color contrast of your online portfolio's text and elements, you can use WebAIM's color contrast checker: https://webaim.org/resources/contrastchecker/

Hero image: Author / Copyright holder: Teo Yu Siang and the Interaction Design Foundation. Copyright terms and license: CC BY-NC-SA 3.0.