So, you need to create a web based UX design portfolio. The excellent news is there are extra choices so that you can create your on-line portfolio than ever earlier than. The dangerous information? All that alternative can simply make you’re feeling overwhelmed! That’s why we’re right here—we’ll undergo choices you possibly can take to create your on-line UX portfolio. We’ll discover some readymade options reminiscent of Behance and WordPress, undergo some issues for coding your individual web site, provide 6 design pointers on your on-line UX portfolio and finish with a demo web site we’ve created particularly for you. Let’s begin creating!
If you wish to create your on-line UX design portfolio, you possibly can go along with two decisions: both use a readymade resolution reminiscent of a web based platform with templates to select from or code your portfolio from scratch. Let’s undergo every of those choices.
Use Readymade Platforms to Create Your On-line UX Portfolio with Ease
For those who don’t have any coding expertise, we suggest that you just create your on-line UX portfolio with a readymade resolution. These are options, reminiscent of web site design and internet hosting providers, the place you possibly can create a web based portfolio with out the necessity to code.
We attempt to be as unbiased as humanly potential, and don’t obtain any type of sponsorship or funds from our suggestions under. We selected them as a result of they’re standard amongst fellow designers and since we expect they’re simple to make use of. It is best to do further analysis to search out if there are different platforms that suit your particular wants.
Behance is the preferred on-line portfolio platform with over 10 million members. You’ll be able to be a part of the platform totally free and publish your UX case research.
Behance is a web based portfolio website that permits you to submit UX case research and community with different designers. Creator / copyright holder: Behance. Copyright license and phrases: Truthful Use
For those who resolve to create your UX design portfolio on Behance, then your Behance profile—as an illustration, “behance.internet/yourname”—can be your UX portfolio and every “mission” you submit onto your profile will act as a UX case research.
Behance’s mission editor is straightforward to make use of and lets you write your UX case research and insert graphics identical to another phrase processor.
Behance’s mission editor is straightforward to make use of and lets you add photos, movies and different varieties of content material. Creator / copyright holder: Behance. Copyright license and phrases: Truthful Use.For an excellent instance of a UX case research hosted on Behance, take a look at Netguru’s Behance mission of their household banking app:
Netguru’s mission for Pockee, their household monetary app, is a superb instance of a UX case studyhosted on Behance. Creator / copyright holder: Netguru. Copyright license and phrases: Truthful Use.
WordPress (Free and Paid)
For those who want to have your individual web site, WordPress is a superb choice. Their free plan provides you a customized “yourwebsite.wordpress.com” web site, and you may improve to a paid plan to additional customise your web site’s URL—as an illustration, to “yourwebsite.com”.
WordPress lets you construct your individual web site totally free, with out having to write down any code. Creator / copyright holder: WordPress. Copyright license and phrases: Truthful Use.
WordPress’s signup circulation is extremely well-designed, and it matches you with appropriate themes so that you get off to a fantastic begin. For those who’re not pleased with the choices proven in your signup circulation, you possibly can select from numerous different themes.
WordPress’s signup circulation suggests themes which might be appropriate to your web site’s goal. Right here, WordPress suggests four themes appropriate for a web based portfolio. Creator / copyright holder: WordPress. Copyright license and phrases: Truthful Use.
You’ll be able to create your UX case research on WordPress as posts via an intuitive and easy-to-use editor. You’ll be able to see a sensible preview of your posts within the editor and add a variety of “blocks”, reminiscent of headings, photos, galleries and even tables.
WordPress’s submit editor is powerful and reveals you a stay preview of your submit. Creator / copyright holder: WordPress. Copyright license and phrases: Truthful Use.
Squarespace is a premium website hosting and design platform that permits you to create an expert web site primarily based on superbly designed templates. In contrast with the opposite options we’ve shared above, Squarespace will not be free and costs begin at $12 per 30 days for his or her yearly plan.
For those who’re prepared to put money into your on-line UX portfolio, Squarespace is a strong alternative—you’ll get a customized web site URL and might shortly get your web site up and operating with out the necessity to code.
Squarespace’s worth proposition is that it gives you superbly crafted templates that you should utilize on your web site. Creator / copyright holder: Squarespace. Copyright license and phrases: Truthful Use.
Much like WordPress, Squarespace gives intuitive and easy-to-use web page and submit editors, so you possibly can design and publish your portfolio’s pages and UX case research with ease. On prime of that, you possibly can even create your individual brand on your UX portfolio in just a few clicks with Squarespace’s logo-creation service known as Squarespace Emblem. Squarespace Emblem is free when you’ve got a paid account.
You’ll be able to create a easy brand of your on-line UX portfolio with Squarespace Emblem, which is free when you’ve got a paid account. Creator / copyright holder: Squarespace. Copyright license and phrases: Truthful Use.
The principle drawback of utilizing readymade providers is that your on-line UX portfolio would possibly look much less distinctive. For example, many websites will probably use the identical template because the one you selected on your WordPress or Squarespace web site, and on Behance, your profile will comply with Behance’s visible fashion. Nonetheless, regardless of this you continue to have some house to customise your on-line UX portfolio—for instance, via using stunning photos that you just embody in your UX case research.
Code Your Personal On-line UX Portfolio
However what for those who actually need to code your individual portfolio however haven’t any coding expertise? Effectively, for those who love a problem, you possibly can take into account the next on-line platforms that educate you learn how to code. For those who don’t know coding, we don’t suggest that you just be taught it to create your first on-line UX portfolio. Moderately, it’s best to deal with these on-line coding programs as a part of your long-term plan, so that you’ll ultimately have the ability to code your individual private web site.
Khan Academy (Free)
We discovered Khan Academy’s interface significantly suited to studying coding; as an illustration, their “video” classes comprise a two-panel structure the place on the left panel you’ll see the stay code being up to date as the teacher speaks, whereas on the precise you’ll see a stay preview of the web site.
In Khan Academy’s classes, you possibly can see a code preview and a stay web site preview on the identical time. Creator / copyright holder: Khan Academy. Copyright license and phrases: Truthful Use.
Codecademy (Free and Paid)
Codecademy is one other on-line studying platform, however not like Khan Academy, it focuses totally on coding. You’ll be able to take programs on Codecademy totally free, or improve to a paid “professional” plan to unlock profession paths and code-oriented portfolio-building workouts, amongst different options.
Codecademy makes a speciality of code programs, and you can begin studying totally free. Creator / copyright holder: Codecademy. Copyright license and phrases: Truthful Use.
7 Design Tips to Observe When You Construct Your Personal On-line UX Design Portfolio
By now, it’s best to have a good suggestion of which choice fits you probably the most. In case you have coding data, then it’s best to code your UX portfolio from scratch. In any other case, it’s best to discover readymade options reminiscent of Behance, WordPress and Squarespace to create your on-line portfolio with ease.
Irrespective of which choice you select, you’ll must bear these 7 important design pointers in thoughts whenever you create your on-line UX portfolio!
1. Give a Brief, Concise Introduction in Your House Web page
Present a brief and clear introduction of your self proper on the prime of your property web page. That means, recruiters instantly know what to anticipate from you. Bear in mind, the house web page of your on-line UX portfolio is prime actual property—it’s the primary impression you’ll make on recruiters.
Embrace your title and present job place or the job function you aspire to. If it’s relevant, embody your present location, too. Hold it brief—your introduction ought to be at most three sentences lengthy. Write it in a conversational means, like how you’ll communicate in a pleasant and professional setting.
Your introduction may be an effective way to convey your persona. Are you a cheerful individual? Maybe you’re optimistic? Let your character shine via!
Teo Yu Siang’s on-line UX portfolio accommodates a concise introduction on the house web page. Creator / copyright holder: Teo Yu Siang. Copyright license and phrases: Truthful Use.
For instance, in Teo Yu Siang’s on-line UX portfolio, he makes positive his title is the largest factor so that you discover it. His introduction can also be concise and consists of three brief sentences. Within the final sentence, he conveys his persona via a barely cheeky strikethrough of the phrase “subversive”.
Kevin Park’s portfolio residence web page is clear, and his introduction is evident and to-the-point. Nonetheless, he makes it distinctive via his use of emoji. Creator / copyright holder: Kevin Park. Copyright license and phrases: Truthful Use.
Kevin Park employs comparable techniques to nice impact. In his residence web page, he makes use of emoji so as to add visible curiosity and convey a playful tone of voice.
Discover how in each Yu Siang’s and Kevin’s portfolios, they selected to convey an important info first. It is best to do this, too! Your title and job function are an important items of data. Hobbies and aspect tasks are much less necessary and will go under. In actual fact, you would possibly need to put your hobbies solely in your “about” web page, fairly than on the house web page.
2. Embrace Solely 2–three UX Case Research
Fastidiously choose and showcase 2–three of your finest UX case research. We all know it’s tough to withstand the temptation to indicate your recruiters every thing you’ve completed, however resist you have to! It is advisable to present solely case research which might be each distinctive and related to your UX job function.
For example, Shawn Park’s on-line UX portfolio shows three primary case research that each one serve to spotlight his expertise in UI and UX design.
Shawn Park options three case research in his on-line UX portfolio, all of which deal with his UI/UX expertise. Creator / copyright holder: Shawn Park. Copyright license and phrases: Truthful Use.
three. Make it Usable!
Usability is vital—particularly in your on-line UX portfolio! Recruiters will choose your on-line portfolio as a designed product, and usability issues will replicate badly on you.
Listed below are some key usability pointers it’s good to comply with:
- Make sure that navigation is straightforward and simple.
- Design correct affordances into your hyperlinks and interactive parts. For example, hyperlinks ought to be underlined and have a distinct colour.
- Take note of readability and colour distinction. Make sure that your fonts are large enough, and verify your colour distinction utilizing WebAIM’s colour distinction checker.
Simon Pan’s portfolio is a superb instance of a website with good usability. His prime navigation menu is evident and legible, and he makes use of an underline to point the web page you’re on.
We like Simon Pan’s clear prime navigation menu, which is straightforward to make use of and readable. Creator / copyright holder: Simon Pan. Copyright license and phrases: Truthful Use.
However, Daniel Rakh’s on-line UX portfolio is gorgeous and extremely well-animated. Nonetheless, we really feel that the colour scheme Daniel selected doesn’t present adequate colour distinction—particularly, the brand that claims “Daniel” nearly fades into the background.
Daniel Rakh’s on-line UX portfolio is gorgeous and well-animated. Nonetheless, many elements of his web site don’t have adequate colour distinction and are onerous to see. Creator / copyright holder: Daniel Rakh. Copyright license and phrases: Truthful Use.
four. Create an About Web page or Part with Extra Info About Your self
Since it’s good to hold the introduction in your house web page brief, we propose that you just create a separate “About” web page or part to indicate extra details about your self.
In your about web page, embody:
- Additional particulars about your self, reminiscent of your hobbies and pursuits;
- Your work historical past and academic background; and
- Social media hyperlinks to your skilled profiles, reminiscent of LinkedIn, Medium and Behance.
Be sure that your work historical past and schooling is up to date in your about web page in addition to in your different on-line accounts reminiscent of LinkedIn, Medium and Behance. For instance, whenever you full a course with the Interplay Design Basis you’ll at all times get an industry-recognized Course Certificates to show your achievements. Embrace that together with the distinctive hyperlink you get for every course you’ve accomplished so recruiters can confirm the authenticity of your certificates. This may assist you present that you just’ve gained new expertise and that it’s in the perfect firm as a result of main UX corporations reminiscent of Adobe, Accenture, Philips and IBM have taken up firm memberships with the Interplay Design Basis.
Embrace the Interplay Design Basis Course Certificates(s) in your about web page in addition to in your LinkedIn and Dribbble pages to indicate your achievements.
We like Pratibha’s on-line UX portfolio, which accommodates an about web page the place she describes her work historical past, academic background in addition to her ardour for illustration and pictures.
Pratibha’s about web page has many issues we like: a pleasant and clear skilled headshot, wealthy description of her experiences and passions, in addition to a conversational tone of voice. Creator / copyright holder: Pratibha. Copyright license and phrases: Truthful Use.
5. Place Aspect Tasks in A Separate Web page or Part
We all know you’re feeling happy with your aspect tasks, however it’s best to place them additional down on your property web page or in one other web page altogether. The principle focus of your property web page is your UX case research, so you can’t afford to let your aspect tasks compete for consideration.
It is best to nonetheless embody your aspect tasks in your on-line UX portfolio, nevertheless, as a result of they assist showcase your passions and let recruiters get a greater sense of your persona. We propose you create a separate part or web page for all of your aspect tasks.
For example, Hiroo Aoyama selected to create a separate part for “aspect tasks”, which he positioned under his case research. This fashion, he can showcase his ardour in design whereas additionally place the principle highlight on his case research.
Hiroo Aoyama positioned his aspect tasks in a separate part of his residence web page in order that they don’t compete on your consideration however nonetheless are discoverable to recruiters who’re serious about studying extra. Creator / copyright holder: Hiroo Aoyama. Copyright license and phrases: Truthful Use.
6. Make Your Portfolio Visually Pleasing and Constant
Even for those who don’t have a background in visible design, your on-line UX portfolio ought to look aesthetically pleasing and be visually constant. Why? As a result of, as we talked about above, recruiters will choose your on-line UX portfolio identical to they might another designed product.
Fortunately, it’s simpler than ever to create a visually pleasing web site. For those who’re not assured in your visible design expertise, you should utilize a platform reminiscent of WordPress or Squarespace, which offers you with properly designed templates.
If you’re not proficient in visible design, make use of well-designed templates reminiscent of this one titled “York” by Squarespace. Creator / copyright holder: Squarespace. Copyright license and phrases: Truthful Use.
7. Create an MVP: Minimally Viable Product
Whenever you create your on-line UX portfolio, suppose MVP—minimally viable product. Don’t purpose to create probably the most excellent or stunning web site, as a result of your on-line UX portfolio will at all times evolve and alter. You’ll should repeatedly preserve and alter the case research that you just present, your introductory copy, and many others.
It is best to purpose to create and push out a good-enough model of your on-line UX design portfolio, fairly than anticipate months to excellent it. When you’ve printed your on-line UX portfolio, you possibly can then spend extra time to enhance it. On the identical time, you’ll’ve already had an necessary asset you should utilize to use for jobs.
Obtain Our Template for 7 Design Tips to Observe in Your On-line UX Portfolio
We’ve specifically created a PDF template with a abstract of the 7 important design pointers we’ve talked about above. Obtain yours now:
Get your free template for “7 Design Tips for Your On-line UX Design Portfolio”
Use Our Pattern UX Portfolio Website as a Reference
To additional assist you create your on-line UX portfolio, we’ve created a pattern website that you should utilize as a reference. In our pattern website, you’ll get an concept of what your individual on-line UX portfolio ought to seem like.
We’ve created a whole on-line UX design portfolio so you possibly can discuss with it whenever you create yours! Creator / copyright holder: Teo Yu Siang and the Interplay Design Basis. Copyright license and phrases: CC BY-SA-NC three.zero.
Head over to our pattern UX portfolio website now: https://sampleuxportfolio.wordpress.com
The Take Away
If you wish to create your on-line UX design portfolio, you have got two choices: use a readymade resolution reminiscent of Behance or WordPress, or code your individual web site. For those who’re not conversant in coding, then Behance, WordPress and Squarespace are glorious options. Particularly, WordPress and Squarespace can help you have your individual web site and supply many templates so that you can select from. Alternatively, for those who’re serious about studying coding or already know learn how to code, then nothing beats coding your individual web site.
Whenever you create your on-line UX portfolio, hold these 7 important design pointers in thoughts:
- Give a brief, concise introduction in your house web page.
- Embrace solely 2–three UX case research.
- Make it usable!
- Create an about web page or part with extra details about you.
- Place aspect tasks in a separate web page or part.
- Make your portfolio visually pleasing and constant.
- Create an MVP: minimally viable product.
For those who want additional inspiration or a strong reference, it’s best to take a look at our pattern UX portfolio website: https://sampleuxportfolio.wordpress.com
References and The place to Study Extra
Try the readymade options we suggest to create your on-line UX design portfolio:
- Behance: https://www.behance.internet
- WordPress: https://wordpress.com
- Squarespace: https://www.squarespace.com
Try Netguru’s UX case research on Behance for a style of how yours might look: https://www.behance.internet/gallery/77805409/Pockee-a-family-banking-app
However, if you wish to code your individual UX portfolio however don’t have any coding expertise, you possibly can be taught from these platforms:
We’ve used these on-line UX design portfolios as examples in our lesson merchandise:
- 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 verify the colour distinction of your on-line portfolio’s textual content and parts, you should utilize WebAIM’s colour distinction checker: https://webaim.org/assets/contrastchecker/
Hero picture: Creator / Copyright holder: Teo Yu Siang and the Interplay Design Basis. Copyright phrases and license: CC BY-NC-SA three.zero.