Overview
Wedlify is a digital platform that helps couples create, manage, and share their wedding invitations online.
I took ownership of both design and front-end execution, turning my Figma prototype into a responsive, coded demo.
This included shaping the visual identity, defining component systems, and styling the layout with HTML and CSS.
The goal was to craft more than a basic wedding invitation tool — a modern, heartfelt, and visually charming experience tailored for Vietnamese users.
The 'Why' Behind Wedlify
My client wanted to create a modern yet emotional wedding tool that resonates with young Vietnamese couples.
The challenge was to blend SaaS-like clarity with romantic visual storytelling, keeping the interface functional but full of personality.
Design Process
1. Brief Analysis & Visual Research
- Collected references for SaaS-inspired wedding websites, exploring gradients, modular grids, and clean typography.
- Defined a visual direction balancing playfulness and simplicity for easy scanning and flow.
2. Moodboard → Layout & Wireframe
- Built a moodboard featuring soft gradients, couple-centered imagery, and elegant motifs like flowers and ribbons.
- Designed wireframes focusing on spacing, rhythm, and hierarchy to maintain clarity and charm.
3. Final Design → Prototype → Coded Demo
- Developed the visual language starting from the hero section, ensuring harmony across sections.
- Used UntitledUI Design System for consistent spacing, typography, and component styling.
- After completing the design, I coded a responsive demo version using HTML, CSS, and light interactivity scripts.
- Deployed the site on Vercel to simulate a real user experience.
Feedback from Client
“Exactly what I envisioned — clean, romantic, and easy to use. The live version works beautifully across devices!”
— Client feedback after launch
Reflection
This project helped me practice translating design into code — ensuring every layout, spacing, and animation matched the original intent.
It also reinforced my belief that great design extends beyond Figma: it’s about building something people can truly interact with.