Essential Tips For Your First UX Portfolio From a Graphic Designer

In the first of a series, I talk to a graphic designer, Kumo about her essential UX portfolio tips. Her past clients include Pepsico, Budweiser and MAC cosmetics.

Designing the first iteration of your UX portfolio can be a very daunting task, especially if you’re like me and possess zero to little understanding of graphic design.

Sure, you can google “Best UX portfolios” to see what the pros are doing and emulate them. But that’s like a skinny guy, who is trying to get muscular, copying the mechanical motions of bodybuilders that he sees at the gym. He may still reap some minimal benefit, but ultimately, he lacks the core knowledge and basic understanding to maximize his gains truly.

Meet Kumo. She’ll be your trainer today. After earning her graphic design degree at Ho Chi Minh University, Kumo worked for an advertising agency where she completed design projects for clients like Budweiser, MAC cosmetics, Pepsico, and ANZ Business bank.

These are Kumo’s quick and essential portfolio tips that you can learn and start using right away.

1.) Establishing your Brand

The very first thing you want to do is create your brand. Your brand expresses your personality and professional focus. In the case of UX portfolios, your brand will be your name. Peruse through free font sites like Google Fonts and take lots of time to decide which font suits your brand the best.

Example of logo branding:

Example of font branding:

2.) Simple and Clean Layouts

Resist the urge to over-design your portfolio, especially if this is your first time doing your portfolio. There’s a difference between being a graphic artist and a graphic designer. Artists love to express their specific aesthetics and personal style fully, and the results can be quite experimental while designers always adhere to foundational rules like respecting margins, alignment and font families. You have to know what the rules are before you break them.

Since I am a graphic designer, I always prefer clean and minimalistic layouts.

Notice the generous white margins on either side. Also, notice the large content panels that use soft pastel colours that complement the easy to read fonts. Also, adding generous white margins helps to center the reader’s gaze and breaks up long sentences which makes it easier to digest.

Sentences should not drag across the entire width of the page.

It’s also essential to think about the arrangement of your projects. For starters, I recommend the four tile approach because it’s easy for readers to understand what is going on.

3.) Understanding “The Grid”

A great way to visualize your portfolio is to imagine that there is a grid where your content is supposed to go and where it needs to be clean.

The grid keeps everything organized and aligned and makes for a seamless reading experience.

4.) Choosing Your Fonts

With so many unique fonts out there, it can be tempting to use multiple fonts in your portfolio. Please avoid doing this. The human eye has to adjust each time it comes across a different font slightly. My advice is to stick to one typeface family, for example, Roboto, Roboto Bold, Roboto Italics, etc.

4.) Justify Your Text

The descriptive text should always be justified from left to right because that’s how we’re used to reading. Paragraphs that are centred are often jarring and tedious to the reader.

5.) Make Sure Everything Aligns

Our eyes subconsciously notice symmetry whenever we are scrolling down a page. When everything is aligned, it is a great way to keep the navigation flow uninterrupted and smooth. You don’t want the reader to guess where to look next. You want to guide them through your portfolio as seamless as possible and keep them scrolling effortlessly.

In the above image, notice how the edges are perfectly aligned with the heading.

Kumo’s Favorite UX Portfolios

1.) https://johnyvino.com

“I like this portfolio because his typography instantly catches my attention. His portfolio is also very interactive and offers both a light and dark theme for preferred browsing. Also, each project has an image carousel that conveniently showcases his work.”

“I know we are talking about the basics of UX portfolios here, but this advanced design is one of my favourites because it shows you how creative you can get after you get the basics down.”

2.) http://yi-nie.com

“This portfolio is one of my favourites because it’s exquisite and clean. She makes great use of easy to read fonts and soft pastel colours to give her portfolio a welcoming, professional and polished look and feel.

3.) http://www.pratibhajoshi.com

Again, the minimalist look accomplishes so much with so little. This portfolio leads with the “About me” section first, which is accompanied by a candid and professional photo. The headshot isn’t generic and shows a bit of personality. She also features a heading called “Experiments” that further emphasizes her UX passion.

Conclusion

I hope this post demystified the process of building your portfolio a little bit better. This is the first part of a series where I’ll be bringing in graphic-designers-turned-UX-designers and sharing their best portfolio design tricks and tips!

Your portfolio will always grow alongside your budding UX career. Digital designing is like painting, except for the paint, never dries.

Follow UXPA Toronto’s blog for more informative articles!