Portfolio series #1: Visuals, Part 1
How to get your website to stand out more
As a mentor to aspiring UX Designers, I have seen my share of portfolios in the past year and a half. I noticed that most personal websites I am asked to review show the same mistakes in 3 main areas: visuals, content, and case study delivery. Since my goal is to help designers present themselves best, I will focus the next few newsletter posts on this topic.
Visuals - part 1
I’ve decided to start the first episode with visuals: even if in the UX design process visuals are usually one of the last things we focus on when creating a digital product, they are responsible for helping you make a good first impression and, when neglected, could cause a recruiter to leave the website before reading your UX case studies.
It takes only 50 milliseconds for visitors to assess the visual appeal of a web page1 , which means as designers we need to not undervalue UI Design within a project.
In this article, I will therefore go over the first top visual design mistakes to avoid on your portfolio website: use of fonts and use of color.
Use of fonts
Especially if you don’t come from a traditional Graphic Design background (like me), picking fonts can be quite tricky. In the case of your portfolio, since you want your visitors to read through your case studies, keep in mind that readability is a key factor when choosing a font, especially for your body text.
You have too many fonts that don’t pair well together
Using too many fonts can hurt your design: each font comes with its style, mood, and personality, and when too many are used together, they can clash and distract from the main message. It then feels a bit like a badly orchestrated choir performance. How can we avoid that?
Unsure what to do? Stick with a single font
There is nothing wrong with using a single font if you don’t feel confident enough with experimentation. Moreover, there are several free fonts with a wide range of weights that can help you create enough contrast without sacrificing the overall visual feel of the website.
Want an upgrade? Don’t use more than two fonts
Unless you are a Typography pro, in which case you can venture with using 3 fonts, I recommend sticking with two fonts only, one for Body text, and another for your Headings.
The beauty of using two fonts is that you can create a nice contrast which adds visual interest to your whole composition. The important thing to remember is to make sure that they balance and complement each other (opposites attract!).
Your font usage shows a lack of Visual Hierarchy
Good visual hierarchy helps guide the user’attention in order to convey the importance of each element. This is done not only through type size, but also through color, contrast, and placement.
When creating your website content, I suggest doing the following:
Create a set of font styles which accounts for Headings, Body text and Captions. Make sure that there is enough contrast between Headings and Body text in particular.
Chunk up your content into paragraphs and use headings and subheadings to organize it in a way that aids scannability
Use spacing wisely to group or distance elements appropriately.
Resources to start
The Typography course and the Design Composition course by Uxcel are a great way to start with fonts and visual hiearchy. You can sign up with my link.
Oliver Schöndorfer’s newsletter Pimp My Type is a great place to start discovering new fonts. I saw his talk live at Smashing Conf and he is a great speaker - I recommend checking his YouTube channel for more!
Fonts in the Wild is very helpful for seeing how fonts “behave” within real websites and to discover new pairings.
Want to find pre-made beautiful font pairings? Check
Search for inspiration on Pinterest
The book Type Tricks: Layout Design: Your Personal Guide to Layout Design by Sophie Beier
Use of color
Colors are another element that can signal the level of your UI skills to recruiters. I will underline the three common mistakes I see when it comes to color, plus an extra one:
You don’t have a well-defined color palette
I can often tell if someone has adopted and changed a template in a website builder: there usually are a couple of main colors, with some random elements with other colors that have been left from the original template which unfortunately clash with the rest of the website. When creating your portfolio website from scratch, if you are a beginner, stick to pre-made or generated color palettes to avoid any mistakes and double-check all pages before shipping.
You don’t take advantage of Color Psychology
Depending on your audience, your message, and in the case of your portfolio your personality and branding, it’s important to choose a color palette that is mindful of color psychology. Our brain makes implicit associations with certain colors: some are bound to our human nature, while others are influenced by culture.
Your color choice disregards Accessibility guidelines
Another mistake, which becomes particularly relevant for UX portfolios, is a lack of contrast between background and foreground elements. This can prevent users from consuming the content properly. There’s a lot more to say about accessibility, but for now I suggest getting familiar with the concept and using tools to ensure your color choice is readable by any visitor of your website.
You use only black and white
This is more of an unpopular opinion of mine, so don’t take it as a universal law! But as someone who often reviews Junior UX Designer portfolios, I see loads of websites that have either a white background and black text, or vice versa. Especially in the current economy, this can prevent you from standing out from the competition and showcasing your personality.
If you are still looking to achieve a minimal look for your website, you can do so without being tied to black and white.
Resources to start
Generate color palettes from a single color: https://mycolor.space/
Material Design color palette generator: https://m2.material.io/inline-tools/color/
Articles on generating a color palette:
The book “The Little Book of Colour: How to Use the Psychology of Colour to Transform Your Life“ by Karen Haller is a great introduction to the psychological and cultural associations with colors
The Color Psychology course by Uxcel can help you learn about how we perceive colors and how to use them in different contexts. You can sign up with my link.
If you stuck till the end, thank you and I hope this was helpful! In the next post of this newsletter, I will go deeper on other two areas of visual design: Use of Grids and Pictures. Until next time! 👋
https://www.researchgate.net/publication/220208334_Attention_web_designers_You_have_50_milliseconds_to_make_a_good_first_impression_Behaviour_and_Information_Technology_252_115-126