my Role
I worked as a single product designer to work on visual research, low-fidelity wireframes and hi-fi landing pages
TEAM
I was a single designer on this project and worked closely with the developer owning the portfolio
YEAR
2023
TOOLS
Figma
overview
A portfolio design for a creative developer that not only showcased his work but also served as a reflection of their creative personality.
scope
UI/UX, Web Design, Interactive Prototyping, User Research, Visual Design, Design Thinking
understanding context
This developer had a creative approach he was looking at and shared with me. He did not want the conventional website and specifically asked for something fresh and modern that showed more of his skill, as he was going to develop this himself and as well have some fun. micro-animations and interactions as well.
the process
It was important to keep in mind that the portfolio itself should showcase the developer's skills and abilities, being visually appealing and easy to navigate, while also demonstrating the developer's technical proficiency. The whole idea was not to go for a very conventional portfolio in some type of way but to have some abstract design style, which we introduced and called brutalism.
iterations, iterations...
Being how personal a portfolio can get, the developer was willing to follow up closely with the designs and direction, and we worked like we were on the same team. We went through a moodboard of similar creative direction from existing portfolio, picking out interesting features to work on and showcase on his portfolio
first draft
A first draft was iterated to give an idea of the creative direction intended to follow with the portfolio project.
the sweet spot with micro-animations
Micro animations and interactions were added to give visitors visual cues and enhance engagement while going through the pages.
homepage
The direction we went with was to design both light and dark modes for the portfolio; the homepage features all sections and gives clear navigation to other pages—work and blog articles.
blog
The blog features articles written by the developer to showcase his knowledge, expertise, and thought leadership on specific topics.
components
Interactive components were designed to show states at different interaction process based off user actions.
final design
A lot of things were changed to better refine the page by improving on the style guide, a more intuitive navigation while staying visually appealing with aesthetically pleasing micro-animations and interactions.
in conclusion...
Prototyping can be a powerful research tool
We often tend to view prototyping as a process to create final designs. In this case, I used prototypes to improve the design process by validating assumptions and identifying key interactions.
Creating trust in collaboration
Considering we were only two on this project working for the other, we were able to establish great rapport and honest feedback about design approach and creative direction. This helped in creating a beautiful experience on the web design.
.png)