Redesign My Portfolio Website using Framer
Intro
Hi, I’m Alvin Niza, a digital product designer from Indonesia. Currently I’m working at tiket.com as Senior Product Designer and one of Framer Expert.
Background
A portfolio is important for designers. The purpose of the portfolio can be vary but I think we can agree one of them is to serve as an artifact to help potential clients or hiring managers get a glimpse of our works. Therefore, designers who effectively convey and present their work well through their portfolio significantly increase their chances of securing business inquiries.
To showcase my portfolio, I use Framer. The reason is because it’s a web-based platform which is more accessible and it also offers a great level of customization for interactive elements. I keep using Framer during the redesign.
Why redesign?
I’ve noticed that many designers go through a phase where they feel the need to periodically redesign their portfolio website. I experienced this phase myself at the beginning of this year, and upon reflection, I realized that there are several areas in my existing portfolio that could be improved.
In my current portfolio, I’ve noticed inconsistencies in the design of the pages. Some pages direct users to Notion, while others do not. Additionally, there are variations in terms of heavy interaction and differences in content structure across different pages. These inconsistencies contribute to a less seamless browsing experience on the site.
Furthermore, I believe that my current portfolio lacks a strong sense of personal branding. Having a distinct branding would help me stand out among other designers and make it easier for people to remember me and my site. This can be done if the website itself has a clear direction and well-thought concept.
The Process
I’ll go to the details later, but here is an overview of my redesign process:
- Set the direction: Finding inspiration, doing mood-boarding, and determine the overall looks.
- Design exploration: Exploring different layout options and experimenting with color combinations.
- Refining the design: Focus on fine-tuning the design elements, ensuring consistency, and completing each page by adding necessary components.
- Implement on Framer: Assign the styles, creating components, designing pages, ensuring responsiveness across devices, and incorporating interactive elements.
1. Set the Direction
The existing website lacks a clear direction, and in order to bring more clarity, I have come up with an idea. I envision the entire website as a narrative that tells my story. To achieve this, I starting with mapping out my interests or hobbies as the foundation. For instance, as a self-proclaimed cinephile and avid movie lover, I could infuse cinematic elements throughout the website. I might even include specific movies that best reflect my personal style and vibes. Additionally, since I have a fondness for cats, I believe incorporating them into certain pages would be a nice touch.
After consideration, I have decided to lean heavily towards a movie-themed direction. Lately, my preference has been inclined towards Asian cinema, so I have chosen movies by Wong Kar-wai, specifically Fallen Angels and In the Mood for Love, as my main sources of inspiration. These films embody the essence of my current vibes and align with the overall direction I envision for the website.
2. Design Exploration
During this phase, I translate the established directions into the design exploration process. I carefully analyze the previous moodboard and extract its essence.
For the color scheme, I have narrowed down my choices to predominantly revolve around black, red, green, and yellow, which effectively convey the desired mood. The layout focuses on incorporating large photo elements, while employing an 80s-inspired font to achieve an editorial, vintage magazine aesthetic.
Conscious efforts have been made to infuse a cinematic atmosphere into my website. To achieve this, I have implemented a 16:9 image aspect ratio and utilized letterbox to create a widescreen movie-like appearance. Additionally, I have added a subtle touch by incorporating a grain filter overlay on the images to enhance the looks.
Did you know that movie screenplays often utilize monospaced fonts, primarily Courier 12, to facilitate estimating the duration of a script based on the number of pages? I think it’s fun to use this idea on my site. By using a combination of serif and monospace fonts, I aim to achieve a vintage and cinematic look simultaneously.
3. Refining the design
I have nearly completed the overall design of the page on this phase. I emphasizing of using dark theme with subtle accents of red and green. One of the challenges I encountered was striking the right balance in terms of the chosen style — I aimed for a direction that is not overly elaborate, yet still possesses depth and interest. To align with the website’s vibes, I even conducted DIY photo-shoot sessions to capture self-portraits that suit the desired outcome.
4. Implement on Framer
As mentioned earlier, I use Framer for the development of this website. If you are already familiar using Figma, you’ll find that the learning curve using Framer is much smoother as the editing canvas view is quite similar.
Although Framer offers a plugin to directly convert designs from Figma, I personally prefer building the website step by step in Framer, following a more conventional approach.
To begin, I establish the color and text styles as the first priority. This ensures that the editing process remains scalable, allowing for easier implementation of specific changes in the future.
After that, I started working on the home page. My strategy was to finish one page completely before moving on to the next page. For each page, I built it section by section. Once a section was done, I moved on to the next one.
In Framer, I utilized the responsive design feature, which allowed me to adjust the design for different screen sizes. This meant I could make sure the website looked good on desktops, tablets, and mobile devices. Those process of building sections continued until the it became responsive.
When constructing the website, there are cases where I anticipate reusing certain UI elements across multiple locations. In such cases, I convert those specific UI elements into components within Framer. Components in Framer function similarly to symbols in Figma.
The final step involves adding interactions to certain elements. One of the features I like most in Framer is the Scroll Transform. This feature allows me to assign animations to elements based on user scrolling.
For instance, in the project detail page, I implemented an effect where the heading title slightly moves to the left as the user scrolls. To achieve this, I simply set the trigger as On Scroll and adjust the X offset value to -1000 for the desired result.
Once I have completed all the interactions, I can easily publish the website by clicking the publish button and setting a custom domain provided by Framer. It’s as simple as that — my website is now published.
Final result of my portfolio website, check it out at: alvin.framer.website
Key Takeaways
During the process of redesigning my portfolio, I have learned several valuable lessons.
1. Take it slow and enjoy the process
I personally find it more beneficial to proceed steadily and savor the journey while building my portfolio. This approach allows me to be more attentive and solidify the direction of my website. Looking at the end result, I am more content with this deliberate approach compared to rushing through it.
2. It’s okay to go the extra mile
Your portfolio serves as a representation of your work, so it’s perfectly fine to invest extra effort and make conscious decisions about its content. In my case, I wanted to include a self-portrait photo in my portfolio, but I realized that the existing photo I had didn’t align with the mood of the site. As a solution, I decided to take matters into my own hands and conducted a self-DIY photo-shoot to capture the desired photo.
More about Framer
If you’re interested in exploring Framer, here are some valuable resources you can access:
