A case study on building my personal branding and portfolio website from design to development.
The Challenge
Creating a portfolio and brand identity that not only showcases my skills and projects but also reflects my personality, core values and unique blend of creativity and professionalism. The goal was to design a website that feels personal, elegant, and functional, allowing visitors to seamlessly navigate and experience my work.
Designing in Figma
The design process began in Figma, where I translated my vision into a structured layout.
- Brand Identity: I created a logo and branding that resonates with me as a person and as a designer, mixing modern and feminine forms and soft colors.
- Typography & Colors: I chose ZT Formom as the headline typeface for its modern, sophisticated appeal, complemented by a soft, feminine color palette.
- Layout: The design focused on simplicity and clarity:
- A bold header featuring my logo and tagline.
- A grid layout for the homepage that highlights case studies.
- Thoughtful spacing and alignment to maintain balance and harmony.
- Visual Elements: Inspired by my branding, I incorporated hand-drawn details to add a personal, artistic touch.
Figma allowed me to prototype and refine the user experience, ensuring the design was polished and functional.
Transferring to Webflow
Once the design was finalized, I moved on to Webflow to bring it to life.
- Building the Structure:
- Used Webflow’s Grid and Flexbox systems to recreate the layout accurately.
- Ensured responsiveness by testing across devices and making necessary adjustments.
- Styling:
- Matched the typography and color scheme from Figma.
- Added subtle hover effects for interactive elements like links and buttons.
- CMS Integration:
- Implemented the CMS to manage case studies dynamically, making it easy to update content in the future.
- Fine-Tuning:
- Optimized images for web performance.
- Tweaked animations to enhance the user experience.
The Outcome
The final result is a visually cohesive and fully responsive website that encapsulates my creative journey. It’s easy to navigate, engaging, and a true reflection of my style and philosophy as a designer.
What I Learned
- Balancing aesthetics with functionality is key in web design.
- Figma and Webflow work seamlessly together for an efficient workflow.
- Every detail matters - from typography to hover interactions - to create a memorable user experience.
