Behind the Visual Restyle of my Design Portfolio.
This episode is part of a series called Portfolio Principles. In this series, I help people to build a more effective portfolio. Get weekly portfolio building tips.
All opinions my own.
Your portfolio’s design is the only piece of your work that portfolio visitors will actually get to experience as a user. They will read about your process, they will watch a concept video, but they will actually use your portfolio. That’s why I think your portfolio’s design is potentially the most impactful ‘project’.
Obviously, I want my portfolio to represent the best possible version of myself. I want it to be the best work I have ever done.
Half a year ago I started interning at IDEO. This period transformed me as a designer. Mostly, it changed what I value. As a result, my existing portfolio doesn’t represent what I am today. Neither does it represent who I aspire to be.
I drew a lot of inspiration from design studios’ websites in my attempt to look professional. As a result, my portfolio looks like a student disguised as a design studio. It’s too trendy, too generic and too polished.
My current portfolio looks like a student disguised as a design studio.
Why worry about visual style?
The visual style of a design portfolio can be a powerful means of self-expression. I think it’s an opportunity that remains mostly untapped. Most designers settle with a default theme without realizing what message they are sending out.
Tapping into this opportunity doesn’t mean the portfolio becomes a piece of art. I think a portfolio’s visual style should never distract from the actual projects, it should make them shine.
A visual style can be implemented into all sorts of media, a portfolio being just one. By exploring the visual style I can focus solely on conveying the right message. I can ensure I visually express what I value before worrying about how to implement this into my portfolio.
By exploring the visual direction I can focus solely on conveying the right emotion before worrying about implementation.
Hopefully, the visual style will enable me to design a portfolio that is more personal and lasts longer. I don’t want to have to redo my portfolio every half a year because trends come and go.
Defining what I stand for
Before diving into Photoshop or Sketch I am asking myself what it is that I actually want to communicate. What do I value as a designer? What do I want my portfolio to be?
Simply writing these answers down is quite powerful. I know that once I start to explore I might lose track of what I was initially trying to achieve. By writing this down I will always have something concrete that I can hold onto.
As a designer I value..
Imperfection instead of perfection.
Process instead of product.
Depth instead of breadth.
Content instead of form.I want my portfolio to be..
Personal instead of corporate.
Outspoken instead of reserved.
Long lasting instead of trendy.
By the way, there are probably a million other ways to write this down. I have never been formally trained as a visual designer. This is an informal method that I just made up. Do whatever that works best for you.
How to deal with a blank canvas?
After writing what I stand for, where do I start? How do a deal with a blank canvas?
Most designers will probably look for inspiration online to get started. They will translate this into a moodboard of some sort.
It’s not how I personally like to work. Seeing other people’s work doesn’t help me that much. They had different problems they tried to solve. This is my personal exploration, not someone else’s. Also because I don’t want to end up with a trendy website, I purposefully decide not to look at other people’s work.
Looking at other people’s work doesn’t inspire me that much. This is my personal exploration, not someone else’s.
Besides that, I never have trouble getting inspired. Anything can inspire me. A color, a font or photo. I just need to get started and the ideas will start to flow.
In reality, I will actually have too many ideas. A blank canvas with no creative limitations easily overwhelms me. I find it hard to understand why things are not working if I am trying to solve multiple problems simultaneously. I need to create my own constraints to deal with a blank canvas.
I find it hard to understand why things are not working if I am trying to solve multiple problems simultaniously. I need to create my own constraints to deal with a blank canvas.
So instead of exploring all design elements simultaneously, I start by tackling just one. I might start exploring just color, typography, layouts, grids, animation or imagery. It really depends on the project.
To me, all of these design elements are just tools. Tools to convey a certain emotion, to create a mood and to represent a personality. This may be achieved by combining elements, but separately these elements can be very expressive too.
Exploring with typography
For this project, I decide to start exploring with typography. Font pairings to be specific. Why? Typography is one of the most impactful design elements to express what I personally value.
Thinking about fonts, using a monospaced font comes to my mind. I like how a monospaced font makes it seem like the words come straight from my notepad. Reading text in a monospace font feels like having a personal connection with the writer. It evokes the imperfect, personal and content driven feeling that I am after.
Using a monospaced font comes to mind. It evokes the imperfect, personal and content driven feeling that I am after.
I quickly pair some monospaced fonts with multiple serif and sans serif fonts to see what happens.
I am using Proxima Nova in my existing portfolio, but next to a monospaced font it get’s a totally different feeling. I like the contrast so I continue trying some typographic layouts with this font pairing.
Adding more design elements
Quite satisfied with my font pairing I start to add some more design elements. Now it’s time to explore with colors, UI elements and imagery with the aim to amplify the feeling that I am after.
Taking a step back
Time to take a step back. Is this really the feeling that I am after? Is this really the imperfect, unpolished look that I am looking for?
Right now, the personal values that I wrote down previously really help me to put things into perspective. They help me to challenge what I have been doing.
I realize that more an more I am going towards a corporate look and feel again. Because I have been designing quite systematically it’s easy to spot the underlying problem. It’s the font. Proxima Nova keeps pushing me into a polished and corporate visual direction. Whether I like it or not. It’s a font I personally like a lot, but I realize it represents the past version of myself.
Because I have been designing quite systematically it’s easy to spot the underlying problem. It’s the font.
Exploring with typography (again)
Instead of continuing with Proxima Nova, I now decide to further explore with a monospaced font paired a serif font. I actually like the contrast between the classic serif font and the modern vibe of the monospaced font.
Combined with colors I try to discover how classic I want the visual style to feel. Therefore, I purposefully create one card that is very classic (top) and one that is quite funky (bottom) to judge the difference.
The classic card definitely feels too formal and perfect. However, the funky card makes me realize that I can certainly achieve a modern look, with a serif font, once combined with the right colors and visual elements. I like where this is going.
Starting to implement
Once I am quite happy with my font pairs and color schemes I start coding these into a basic layout. I know, it’s quite early to start coding. Very early actually. I don’t even have a design yet.
Coding challenges me to implement the visual style into interactive web elements that would be ignored in Photoshop, such as in thumbnail hover states.
Coding also gets me thinking about how much attention the visual style should grab. It makes me decide to stay very close to the minimalist look of the default web. I like how the low fidelity resolution of my visual style makes the content shine.
Receiving Feedback
At this point I ask some feedback from my colleagues. Getting fresh input always really helps, especially from the talented people I get to work with. My personal values that I previously wrote down really help me to start the conversation.
According to my colleagues, the overall feel is content driven but not outspoken. They challenge me to be bolder and more expressive.
Most colleagues agree that the sans serif font Merriweather doesn’t quite pair well with the monospaced Inconsolata. The contrast is nice but they don’t match well probably because they were designed in such different periods in history with very different intentions.
One colleague points me towards another serif font called GT Sectra. It’s a font developed by an independent Swiss type foundry called Grilli Type. As their website says: “The idea was not to reproduce any historic typeface, but to translate those ideas in a more contemporary design.”
The contemporary approach to a sans serif font is exactly what I need. I love the combination of GT Sectra with Inconsolata. Once I found the GT Sectra typeface, things were starting to shape. Because I am happy with my typography choices I try to be bolder with my colors.
Implementing the new visual style
Again, I dive into code to implement the visual changes. There is always room for improvement, but for now I am happy with this visual style as a foundation to built upon. Much more than my existing portfolio, these mockups represent what I value as a designer.
If you enjoyed reading this article, I would appreciate it if you hit the “Recommend” button.
