RESULTS

The following questions must be answered first, to answer the research question ("How do I make a portfolio visually attractive?").

• What are the latest design trends?
• How am I going to display all objects?
• Which colour pallet suits the best?
• Which fonts am I going to use?
• What will the navigation look like?
• Do the users know how to use to portfolio?

What are the latest design trends?

In an article from Krivec (2023) the best portfolio design trends of 2023 are discussed. I selected 5 trends that suit my personality and personal preferences and that I therefore want to reflect in the design.

1. Curated Portfolio Home Page

To create a good user experience, I want the user to get to the part he is looking for as quickly as possible (without clicking too much). By immediately showing the projects and clear navigation on the landing page.

3. Minimalism

By keeping the portfolio minimalistic, the user can more easily find what he needs because there is little distraction from other elements, so the user only looks at what is needed. This also fits my personal style of "less is more".

6. Dark look

Dark look is getting more and more popular among websites and apps. Another superb benefit of the dark look is an added layer of elegance and sophistication, with an immersive and “atmospheric” experience. By integrating a dark/light mode switcher ensures users to switch them between the mode they prefer.

12. Interactive and Animated

Animations ensure that certain parts receive attention and create a creative display. Animations can improve the user experience, but if you use them too much, it can quickly become chaotic. 

18. Grid Layout with Hover Effects

The combination of grid layout and hover effects adds a touch of creativity and interactivity that can elevate your portfolio’s visual impact and overall UX. By implementing hover effects to your portfolio grid, you invite your visitors to link with your portfolio more dynamically.

How am I going to display all objects?

For the upcoming three questions, I looked for inspiration on Dribbble.

Option 1: Traditional website layout.

The landing page will contain some information about me in big text, with some highlighted projects below. The user can scroll down to see more projects. To get more information, he can click on the buttons or project images or use the menu bar/button.

Option 2: Dashboard layout.

On the landing page, the user can read brief information about me, with highlighted projects below. The user can click on the tiles to be redirected to the next page. These options are a lot more minimal but can cause confusion. 

To find out which option works best, I will conduct a user test later.

Which fonts am I going to use?

For this project, in want to have a clean and modern look, the choice of a matching font is necessary. For that reason, I chose a sans-serif font. A blog by Hughes (2023) explains what to look out for when picking a good font.

• Use a font with at least 5 different weights.
• Use only one font (max 2 if necessary).
• Inspect web pages to see which fonts they use.

When looking for inspiration, 3 fonts came up that appealed to me the most. I will test these with the final design to see which one fits best. 

1. Poppins by Indian Type Foundry

2. Outfit by On Brand Investments

3. DM Sans by Colophon Foundry

What will the navigation look like?

In previous research ("How can users easily navigate through the portfolio"), I concluded which navigation options work best for the portfolio. So, I implemented these options in an interactive low-fidelity prototype.

Option 1: Traditional website layout

Option 2: Dashboard layout

By showcasing the prototypes to Bardt van der Dennen, we concluded that the 2nd option (dashboard layout) was the better option for this project. The navigation is clear and different from a normal website. He recommends doing additional research on the layout and appearance of the dashboard. To make sure the user looks/clicks directly to the most important tile.

How to make objects more attractive?

An article by Babich (2021) describes different ways to add more visual weight to UI objects. Below are the ways that are relevant to the portfolio design:

1. Size: Larger objects attract the eye more than smaller ones.
2. Shape: Objects with a regular shape appear heavier than objects with an irregular shape.
3. Orientation: vertical objects appear heavier than horizontal objects.
4. Colour: some colours are heavier than others. Saturated colours will gain more attention than unsaturated ones.
5. Contrast: When an element contrasts with its surroundings will appear visually heavier.
6. Texture: Elements with texture are perceived as heavier in comparison with non-textured elements.
7. Whitespace: the more whitespace near a certain object, the more attention it receives.
8. Z-depth: Elements in the foreground have more weight than elements in the background.
9. Human faces: Eyes and faces are considered as objects with heavy visual weight. Photos with human faces will always carry more visual weight.
10. Movement: Moving objects naturally attract our attention and suggest to visitors where they should look next.

Which colour pallet suits the best?

This colour palette was put together by taking inspiration from Adobe Color. The orange colour, according to an article by Olesen (s.d.), stands for spontaneity, creativity, optimism, enthusiasm, and positivity. This suits my personality and what I want to express with this portfolio.

Do the users know how to use to portfolio?

I created a high-fidelity prototype to find out how real users navigate through the portfolio.

The prototype was tested with a usability test using the Maze tool. Users had to indicate what they saw first and were given different tasks to navigate through the portfolio.

Most important results:

1. As also mentioned in Babich (2021) article, images with human faces have a heavy visual weight, just like saturated colours. On the landing page, the decision was made to use shades of grey to make the "all projects" button stand out because of the bright orange colour. The results of the usability test show that the image with the face still attracts more attention

2. When navigating to the right pages, you can see that every user can find the right page. What is noticeable is that not all testers have read the task properly and skipped a step. Also, some pages can be reached in two different ways. from the results of the test, we see that just over half use the 'all projects' page.

3. Most users found it easy to navigate through the design. However, there was one tester who did have difficulty with it.