Case study & Design: My Portfolio
This case study shows the process of designing a personal portfolio website. Many designers and artists use portfolio websites to showcase their work. Sometimes it is tricky to convey a personal style and creativity through a website due to building systems with limited design options.
the problem
I believe a lot of graduating art students and up- and coming designers struggle with building an authentic portfolio using CMS and website builders. There are visual, structural and technical boundaries or specific knowledge needed. Not everybody interested in webdesign knows CSS and HTML in depth. Since this is a highly personal project, the target audience is, well, everybody else who is interested in my work. This gave me all the creative freedom of implementing my personal style throughout this portfolio.
the goal
The goal of this case study is to showcase how I succeeded in understanding the relationship between designing and creating the final product. It shows the process of designing a website in Figma and translating it into the site by using Webflow. It shows the obstacles that were met during the process and lets the reader take a dip into the relationship between a designer and developer on a surface level.
the structure
The website is mainly held together by a simple navigation bar on top of the site with all the available tiers that redirect the user to the different projects. The first set of wireframes already show a hint of the neo-brutalistic design that was chosen for the finished product later on.
wireframes / low-fidelity prototype
first mockups / high-fidelity prototype
I designed a stand-out landing page that takes the user to the main part of the website. It should be a fun interactive simple space with four buttons that move when hovered over. The overall design should feel like content floating in an empty space and yet there is a structured element that holds the design together. Clear borders and lines suggest a simple approach: showcasing work.
This is the first design of the envisioned landing page. The floating buttons create a fun and easy design that welcomes the user to the site.
A navigation bar on top of the other pages lets the user navigate through the site. The project fields are very static and formal.
The about page shows all the important information at one glance. The gradient on this site is reversed to show the “other end” of the website.
iteration and implementing the design
After trying to implement the first landing page into Webflow, I realized that some design aspects don’t work. Being forced to dive into CSS and HTML basics showed the clear boundaries web design has when it comes to th execution of a website - especially as a beginner. Screen sizes, grids and alignment gave me the opportunity and incentive to update the design and hands-on iterate on structural issues.
1. The project boxes on the menu pages need to be reshaped.
2. Different projects require different designs throughout the website without giving up on the overall design.
3. Interactions need to be thought over before implementing them as there are countless options for animation and motion design.
The iterated landing page shows the four different buttons that lead the user to the main menus. The black body is the empty space, or the “white box in black” to give the projects the room to stand out.
The about page, the only page with its unique design, gives a brief introduction to the artist and creator and lets the user know all the important details at one glance.
Each project or case study follows a different sequence of boxes, grids and sliders. Although there is unique details to each page, such as accent colors and interactions, similar components and structures create an overall composition and thread for the whole website.
Each field of design has its own menu with a box for each project. Like windows that show the images behind them the black frames scroll past the content.
high-fidelity prototype
takeaways and going forward
A portfolio is a piece of work that never ends. As my style, trends and projects are developing and changing, so will this portfolio.The creation of this website helped me understand the importance of not only focusing on the visual design, but also thinking about structure, usability and developing the actual product.
