Rebranding
Rebranding
Sep 1, 2023
Sep 1, 2023
Description -
This project was for myself to create one style for my portfolio, resume, and projects. With the tone of voice, logo, fonts, etc. That's why I completely rebuilt my portfolio for a clearer and more accessible experience.
Details -
Category
Design
Purpose
Personal
Date
September 1, 2023
— step 1
GAMEPLAN
At first, I got stuck because I didn't know where to start and didn't yet have a clear idea of what I wanted to create. That's why I started making a game plan.
— step 2
GET INSPIRED
First, I looked for a style for my portfolio. I like many different styles, but for my portfolio, I wanted a style that truly reflects me.
— step 3
WIREFRAME
Once I finished my style board, I started sketching the wireframe to outline how I wanted the layout to be.
— step 4
STYLE-GUIDE
In Figma, I designed the style guide before starting the prototype because I wanted a cohesive look with the fonts and colors.
— step 5
PROTOTYPE
The prototype was also created in Figma, keeping it simple because I would later build the final website in a different program.
— step 6
BUILD
The website was built in Framer, a program with enough features to create a good portfolio, such as CMS or scroll animations. It also integrates with Figma, and I didn't need to code because it's just clicking and dragging.
— step 7
CMS
All projects are saved in a CMS, so you only need to create one page for all projects, and it automatically adjusts to the content in the CMS.
— step 3
RESUME
I also updated my resume to maintain the same style consistency between my portfolio and resume.
— step 1
GAMEPLAN
At first, I got stuck because I didn't know where to start and didn't yet have a clear idea of what I wanted to create. That's why I started making a game plan.
— step 2
GET INSPIRED
First, I looked for a style for my portfolio. I like many different styles, but for my portfolio, I wanted a style that truly reflects me.
— step 3
WIREFRAME
Once I finished my style board, I started sketching the wireframe to outline how I wanted the layout to be.
— step 4
STYLE-GUIDE
In Figma, I designed the style guide before starting the prototype because I wanted a cohesive look with the fonts and colors.
— step 5
PROTOTYPE
The prototype was also created in Figma, keeping it simple because I would later build the final website in a different program.
— step 6
BUILD
The website was built in Framer, a program with enough features to create a good portfolio, such as CMS or scroll animations. It also integrates with Figma, and I didn't need to code because it's just clicking and dragging.
— step 7
CMS
All projects are saved in a CMS, so you only need to create one page for all projects, and it automatically adjusts to the content in the CMS.
— step 3
RESUME
I also updated my resume to maintain the same style consistency between my portfolio and resume.
