Project details
Role : UIX Designer
Tools :
Figma
Calmoria – Luxury Spa & Wellness Website UI Design
Calmoria is a fictional high-end spa and wellness brand that needed a sophisticated website UI to reflect its serene atmosphere, premium services, and calming brand identity. The goal was to create a luxury-focused web interface that evokes relaxation and trust while guiding users effortlessly through the service offerings.
Unlike some of my other client-led projects, this was a self-initiated UI design project created with the intention of selling the template online. The challenge was to create a compelling desktop and mobile web experience, complete with design system documentation, clear layout structure, and an immersive user interface—all while ensuring the design felt clean, modern, and brand-appropriate.
The result is a full website design showcasing home, about, service, and contact pages—each tailored to appeal to wellness-oriented visitors seeking tranquility and elegance.
The Solution: A Tranquil, Sophisticated Interface with Premium Visual Harmony
My focus was on creating a visually calming UI while ensuring functional clarity and smooth interaction flow. The design is built to support spa and wellness services—featuring dedicated sections for services, client testimonials, and call-to-action prompts for bookings or inquiries.
Key design features include:
Hero Section: A full-width banner with soft imagery, a prominent headline, and subtle animation that sets the mood from first glance.
Service Overview: Clean, icon-supported cards describing offerings like facials, massages, and aromatherapy—designed for clarity and elegance.
About & Philosophy Section: Communicates Calmoria’s calming ethos with text blocks balanced by soft imagery and rounded containers.
Booking Prompt: Repeated CTAs like “Book Your Experience” ensure users are gently guided toward conversion.
Footer Design: Includes navigation, contact details, and a privacy link—styled with muted tones and clean typography for a sense of closure.
The overall tone was kept minimalist and luxurious, using high-resolution visuals, balanced spacing, and consistent styling to elevate the brand image.
The Solution: A Tranquil, Sophisticated Interface with Premium Visual Harmony
My focus was on creating a visually calming UI while ensuring functional clarity and smooth interaction flow. The design is built to support spa and wellness services—featuring dedicated sections for services, client testimonials, and call-to-action prompts for bookings or inquiries.
Key design features include:
Hero Section: A full-width banner with soft imagery, a prominent headline, and subtle animation that sets the mood from first glance.
Service Overview: Clean, icon-supported cards describing offerings like facials, massages, and aromatherapy—designed for clarity and elegance.
About & Philosophy Section: Communicates Calmoria’s calming ethos with text blocks balanced by soft imagery and rounded containers.
Booking Prompt: Repeated CTAs like “Book Your Experience” ensure users are gently guided toward conversion.
Footer Design: Includes navigation, contact details, and a privacy link—styled with muted tones and clean typography for a sense of closure.
The overall tone was kept minimalist and luxurious, using high-resolution visuals, balanced spacing, and consistent styling to elevate the brand image.
The Solution: A Tranquil, Sophisticated Interface with Premium Visual Harmony
My focus was on creating a visually calming UI while ensuring functional clarity and smooth interaction flow. The design is built to support spa and wellness services—featuring dedicated sections for services, client testimonials, and call-to-action prompts for bookings or inquiries.
Key design features include:
Hero Section: A full-width banner with soft imagery, a prominent headline, and subtle animation that sets the mood from first glance.
Service Overview: Clean, icon-supported cards describing offerings like facials, massages, and aromatherapy—designed for clarity and elegance.
About & Philosophy Section: Communicates Calmoria’s calming ethos with text blocks balanced by soft imagery and rounded containers.
Booking Prompt: Repeated CTAs like “Book Your Experience” ensure users are gently guided toward conversion.
Footer Design: Includes navigation, contact details, and a privacy link—styled with muted tones and clean typography for a sense of closure.
The overall tone was kept minimalist and luxurious, using high-resolution visuals, balanced spacing, and consistent styling to elevate the brand image.
The UI Design Process: Systemized, Responsive, and Template-Ready
Methodology: Design System-Based UI for Template Reuse
This project followed a UI-centric process focused on design system consistency, typography logic, and responsive design structure—making it ready for development or template marketplaces like Etsy or Creative Market.
UI Techniques & Principles Used:
Design System Creation: I built a custom design system with defined color palettes, type scales, buttons, and reusable components to ensure visual consistency across pages.
Typography Choices:
Headings: ‘Cormorant Garamond’ at 70px for hero titles and other large headings to evoke elegance.
Body Text: ‘Montserrat’ at 16px for clarity and legibility. Footer elements used 12px for minimal distraction.
Color Psychology: A palette of soft greens and muted neutrals supports the spa’s calming and earthy atmosphere.
Grid & Layout: Based on a 12-column layout system with adequate spacing, responsive breakpoints, and content alignment for desktop and mobile.
Minimal Animations: Subtle transitions were suggested in the design to enhance visual flow without overwhelming users.
All designs were completed in Figma, with mobile and desktop layouts fully developed to demonstrate flexibility and responsiveness. I maintained pixel-perfect alignment, proper naming conventions, and clean layers for developer handoff or template selling.
Final Outcome
The Calmoria UI Web Design project showcases a premium spa and wellness brand identity brought to life through elegant visual storytelling, clean structure, and reusable design components. Though it was not tied to a client, this project reflects real-world web design needs—balancing aesthetic finesse with conversion-driven UI.
This template is now portfolio-ready and aimed at future resale as a customizable WordPress or HTML theme for spa or beauty service providers.
The project demonstrates my ability to create scalable, visually refined website designs that speak to both user emotion and brand intention—making Calmoria a highlight in my collection of modern web UI projects.
The UI Design Process: Systemized, Responsive, and Template-Ready
Methodology: Design System-Based UI for Template Reuse
This project followed a UI-centric process focused on design system consistency, typography logic, and responsive design structure—making it ready for development or template marketplaces like Etsy or Creative Market.
UI Techniques & Principles Used:
Design System Creation: I built a custom design system with defined color palettes, type scales, buttons, and reusable components to ensure visual consistency across pages.
Typography Choices:
Headings: ‘Cormorant Garamond’ at 70px for hero titles and other large headings to evoke elegance.
Body Text: ‘Montserrat’ at 16px for clarity and legibility. Footer elements used 12px for minimal distraction.
Color Psychology: A palette of soft greens and muted neutrals supports the spa’s calming and earthy atmosphere.
Grid & Layout: Based on a 12-column layout system with adequate spacing, responsive breakpoints, and content alignment for desktop and mobile.
Minimal Animations: Subtle transitions were suggested in the design to enhance visual flow without overwhelming users.
All designs were completed in Figma, with mobile and desktop layouts fully developed to demonstrate flexibility and responsiveness. I maintained pixel-perfect alignment, proper naming conventions, and clean layers for developer handoff or template selling.
Final Outcome
The Calmoria UI Web Design project showcases a premium spa and wellness brand identity brought to life through elegant visual storytelling, clean structure, and reusable design components. Though it was not tied to a client, this project reflects real-world web design needs—balancing aesthetic finesse with conversion-driven UI.
This template is now portfolio-ready and aimed at future resale as a customizable WordPress or HTML theme for spa or beauty service providers.
The project demonstrates my ability to create scalable, visually refined website designs that speak to both user emotion and brand intention—making Calmoria a highlight in my collection of modern web UI projects.
The UI Design Process: Systemized, Responsive, and Template-Ready
Methodology: Design System-Based UI for Template Reuse
This project followed a UI-centric process focused on design system consistency, typography logic, and responsive design structure—making it ready for development or template marketplaces like Etsy or Creative Market.
UI Techniques & Principles Used:
Design System Creation: I built a custom design system with defined color palettes, type scales, buttons, and reusable components to ensure visual consistency across pages.
Typography Choices:
Headings: ‘Cormorant Garamond’ at 70px for hero titles and other large headings to evoke elegance.
Body Text: ‘Montserrat’ at 16px for clarity and legibility. Footer elements used 12px for minimal distraction.
Color Psychology: A palette of soft greens and muted neutrals supports the spa’s calming and earthy atmosphere.
Grid & Layout: Based on a 12-column layout system with adequate spacing, responsive breakpoints, and content alignment for desktop and mobile.
Minimal Animations: Subtle transitions were suggested in the design to enhance visual flow without overwhelming users.
All designs were completed in Figma, with mobile and desktop layouts fully developed to demonstrate flexibility and responsiveness. I maintained pixel-perfect alignment, proper naming conventions, and clean layers for developer handoff or template selling.
Final Outcome
The Calmoria UI Web Design project showcases a premium spa and wellness brand identity brought to life through elegant visual storytelling, clean structure, and reusable design components. Though it was not tied to a client, this project reflects real-world web design needs—balancing aesthetic finesse with conversion-driven UI.
This template is now portfolio-ready and aimed at future resale as a customizable WordPress or HTML theme for spa or beauty service providers.
The project demonstrates my ability to create scalable, visually refined website designs that speak to both user emotion and brand intention—making Calmoria a highlight in my collection of modern web UI projects.