Conceptual Website for Personal Brand Growth
Mohammad Rafat
Conceptual Landing site for Personal Brand Growth | Design & Style with Intent
Full Functional Personal Brand Growth Website
Case Study:
Personal Portfolio Landing Site — Design & Style with Intent
Type: Personal Brand Website
Tools: Figma | Figma Make | Framer (ready) | Calendly
Role: UX/UI Designer & Framer Developer
Overview
Libby Yazbek is a Senior Product Designer & Lifestyle Creator who bridges design, style, and intentional living. She needed a personal brand website that blends her professional expertise with her creative voice — an elegant one-page experience that feels warm, editorial, and human-centered.
Objective
Design a responsive website that:
Positions Libby as both Product Designer & Lifestyle Coach.
Integrates Calendly for session bookings.
Feels personal yet professional.
Easy to edit to update and ready to deploy in Framer.
Discovery & Direction
Through a quick brand study of Libby’s social presence and tone, I defined three pillars:
Clarity — Clean structure and hierarchy to mirror her design thinking.
Warmth — Soft gradients, neutral beige palette, and rounded elements for an inviting feel.
Dual Identity — A layout that showcases both “Design” and “Lifestyle” without competition.
Information Architecture
A one-page vertical flow anchored to five key sections (reflected in the Navbar):
About — Personal introduction “Beyond the Interface.”
Design — Selected product-design work highlights.
Lifestyle — Curated social-content grid (YouTube, TikTok, Instagram).
Insights/Blog — Reflections and style articles.
Contact — Calendly scheduling + message form.
Design System & UI Language
Typography : Inter + DM Serif Display - Balance of modern clarity and editorial sophistication.
Color Palette : Blush Rose / Sand / Charcoal - Evokes warmth, calm, and refinement.
Grid & Spacing : 12-Column Responsive - Fluid scalability for Framer integration.
Iconography : Rounded Line Icons - Harmonizes with minimal geometry.
Motion & Micro-UX: Subtle fades + scroll parallax - Adds emotion without distraction.
Figma Design → Figma Make → Framer Pipeline
Figma Design System: Built atomic components, auto-layout sections, and variant-based buttons.
Figma Make Prototype: Published a live site using Figma Make to simulate full navigation, section linking, and scroll transitions.
Framer Ready: All layers and constraints prepared for direct import — ensuring pixel-perfect responsive behavior and CMS compatibility.
Future Scalability: Entire website UI specially blog and lifestyle grids mapped for Framer CMS.
Key Sections Breakdown
Hero / Intro
Minimal layout featuring Libby’s portrait, tagline “Design & Style with Intent.”
Dual CTAs: View My Work / Book a Session.
Hero Section with CTA
About — Beyond the Interface
“I’m Libby Yazbek — a Senior Product Designer dedicated to turning intricate challenges into elegant solutions...”
Clean typographic storytelling paired with warm imagery.
About — Beyond the Interface
Design Highlights
Tixel, Deputy, Style Code Cheat Sheet — each card optimized for Framer hover-interaction.
Positioning Dual Brand Growth Impact
Defining Skilled Experiences with Portfolio
Lifestyle Showcase
6 tiles mixing YouTube, TikTok, Instagram — creating a dynamic mosaic of her content persona.
Positioning Digital Contents with Lifestyle
Insights & Reflections
3 blog-style posts to express thought leadership and authenticity.
Categorize Social/Blog
Calendly / Contact
Dual approach: Book a Session | UX Feedback | Collaboration.
Custom form for direct outreach.
Re-aligned navigation + socials (YouTube, Instagram, TikTok, LinkedIn) for brand consistency.
Integrated Schedule via Calendy
User Friendly Contact Form
Footer
Re-aligned navigation + socials (YouTube, Instagram, TikTok, LinkedIn) for brand consistency.
Iteration Highlights
Refined navbar layout for logo-centered harmony and balanced whitespace.
Unified button system for cohesive call-to-action rhythm.
Enhanced section contrast using soft gradients + shadow interplay.
Verified all text and images under WCAG AA accessibility compliance.
Results
Live prototype functional via Figma Make.
Framer-ready package for instant deployment.
Cohesive personal brand narrative merging design depth and lifestyle warmth.
Created a reusable template structure for future creator-designer hybrids.
Learnings
Figma Make enables real-time storytelling — perfect for client previews before development.
Designing with Framer semantics from beginning drastically reduces rebuild time.
Blending UX logic + personal aesthetics creates authenticity that converts visitors into collaborators.
Desktop View
Tab view
Mobile View
Conclusion
“Design and style aren’t separate languages — they’re different dialects of intention.” The Libby Yazbek website reflects that philosophy through elegant UX, authentic tone, and seamless tech execution.
Mockup for Any Device Friendly Responsiveness
Designed & built entirely in Figma and Ready to Build With Framer— no code, full interaction
Project by Mohammad Rafat
Hello There!
Impression unforgettable — clean, confident, and conversion-driven.
💡 GOT A PROJECT IN MIND?
or want to collab?
LET'S DO IT TOGETHER!!
www.mdrafat.com
Like this project
Posted Oct 11, 2025
Built personal brand site in Figma: clean, intentional design with Calendly booking. Easy to edit, reflects her dual identity as designer + lifestyle creator.
Likes
1
Views
3
