My old portfolio showed all the roles I could do in the same page and it was confusing to recruiters so I wanted to redesign it.
The recruiters see if they are interested in me the first seconds, they don’t waste time, they need to see what I’m able to do quickly.
I needed to split the portfolio for each role, that way they’d be able to choose what they want to see, thus they won’t have to guess what I exactly do.
They also need to find what they are looking for easily, so I had to have all the contents well distributed along the webpage, making clear separations between them.
- - Make clear who I am
- - Have a consistent design
- - Aimed to be responsive
To have a general idea of how I was going to do the style and distribute the content I made a bunch of low fidelity sketches, that way I was able to make a sitemap and at the same time I got a general idea of the design I wanted to make.
To make the website aimed to be responsive I started with the mobile sketches, since it's easier to expand the content from mobile to pc that shrinking it from a pc screen to mobile.
To give consistency to the design I set a number of rules that helped making it uniformed. I started with the most basic ones: the colors, text and spaces.
In this case I wanted to have a light/dark mode, so I made 2 complementary palettes instead of just one.
After that I chose the fonts I was going to use, the sizes of the headings, paragraphs and spaces between them.
After those 3 main rules I started working on the details. I wanted the website to be a one pager web, so it would feel like a presentation, but without loosing the forth and back buttons of the browser, so the users wouldn't feel alienated. I achieved that with a smooth transition between pages, so it would look like a one pager, but wouldn't be one.
Then, to keep it simple, since the website wouldn't have many subpages it was enough with a “home” and “theme” buttons in the navigation bar.
Then to split the content I mainly used the headings, but since when you are scrolling fast they are not as easy to see, I also used lines to make clearer separations between groups of content.
After all this process I started working on the final design. In this phase I add the final details and fix any design problems that might show.