In the fast-paced world of beauty and skincare, first impressions matter. Customers expect more than just a functional site, they want to be immersed in a brand that feels premium, considered, and memorable from the moment the page loads. That was the vision behind Elume, a fictional skincare brand brought to life through design and motion.
This project wasn't just about creating another landing page. It was about capturing the essence of a high-end skincare line and translating that into an experience, fluid, elegant, and highly interactive. In this case study, I'll walk you through the full creative and technical journey of building the Elume landing page, from concept to deployment.
The Vision Behind Elume
Every great project begins with a story. Elume was imagined as a minimalist yet aspirational skincare brand, clean formulations, luxurious branding, and a serene, luminous aesthetic. The design needed to reflect that identity: calm but not boring, elegant but never stiff.
Skincare websites often fall into two traps: overly sterile or excessively flashy. Elume had to walk the fine line between both. The goal was to create something timeless and modern, anchored in usability but elevated through motion, texture, and subtle interactivity.
"The goal was to create something timeless and modern, anchored in usability but elevated through motion, texture, and subtle interactivity."
Choosing the Right Tech Stack
Before writing a single line of code, I made deliberate decisions about the technologies to use. These choices weren't based on trends ... they were grounded in what would allow for fast performance, flexible design, and long-term maintainability.
- Next.js 15 (App Router): The backbone of the site, offering routing, server rendering, and a mature developer experience.
- TypeScript: Essential for catching bugs early and keeping the codebase clean and scalable.
- Tailwind CSS: Perfect for building responsive layouts quickly while retaining full creative control.
- Framer Motion: The gold standard for web animations, offering beautiful motion with performance in mind.
- Custom CSS animations: Used sparingly to bring unique textures that Framer Motion alone couldn't provide.
This stack provided the creative freedom I needed to bring Elume's identity to life, while also ensuring the site could be optimized, version-controlled, and deployed in a way that scales.
Designing for Emotion: The Visual Language of Elume
Elume's visuals are what make the site so compelling. But they're not just there to look pretty, they serve a narrative function.
Liquid Morphing Backgrounds
Inspired by the texture of skincare serums and lotions, the backgrounds gently morph and move like liquid. These animations set a calm, luxurious tone as soon as the user arrives. Technically, this was achieved using SVG morphing combined with Framer Motion's path transitions and layered gradients.
Glassmorphism Cards
The UI leans into the popular "glassmorphism" style-cards with semi-transparent backgrounds and subtle blur effects. This creates a feeling of depth and sophistication without clutter. It's especially effective on the product showcase and testimonial sections, where clarity meets class.
Iridescent Text & Floating Particles
Headings feature a subtle gradient shimmer, inspired by luxury packaging materials. Meanwhile, floating particles subtly follow scroll behaviour, almost imperceptible, but they add movement and softness to the layout. These microinteractions make the site feel alive, without overwhelming the user.
Advanced Hover States
Hover effects are another area where design elevates interaction. Buttons, product cards, and CTAs respond to the user in unique ways- from magnetic movement to soft glows, giving every click and scroll a sense of tactility.
Glassmorphism cards create depth and elegance
Interactive elements respond to user actions
Structuring the Site Experience
The layout of Elume follows a clear visual journey. Each section is purpose-built, flowing naturally into the next with seamless transitions.
Split Hero Section
The landing screen is divided into two bold halves: a high-contrast product image on one side and animated typography on the other. This immediate visual split draws the user in and provides instant brand recall.
The animation on page load plays a crucial role here: text slides in with gentle easing, while the image scales slightly before settling, emulating the smoothness of applying a product to skin.
Before & After Showcase
Next, we explore transformation. A before-and-after image slider, paired with real testimonials, allows users to visually experience Elume's impact. This is both a design element and a marketing tool ... trust and effectiveness in one stroke.
Product Grid
The products are laid out in clean, responsive cards, each animated on hover to reveal more detail. These interactions were built with a mix of Tailwind transitions and Framer Motion scale/opacity animations, keeping performance snappy.
Animated Stats Section
Numbers are powerful when shown right. This section features animated counters that rise as they come into view, paired with shimmering text effects and subtle shadows. It's not just data, it's confidence.
Testimonials
Customer reviews are styled like luxury magazine quotes, centered text, italicised blurbs, and faint star ratings that twinkle into view on scroll. They add social proof while maintaining the site's overall calm aesthetic.
Call to Action
The final CTA is simple, but striking. A bold "Shop Now" button with a custom hover effect draws the eye without feeling pushy. It's magnetic - literally, the button reacts slightly to cursor movement to feel interactive and tactile.
Technical Execution
While the visual polish is what most users notice, a lot of engineering work went into making sure the site performs just as well as it looks.
Responsiveness Across All Devices
The entire layout was built mobile-first using Tailwind's responsive utilities. Each section is fluid and adapts from small screens to ultra-wide monitors. Elements like the hero layout and product cards reflow smartly depending on the screen width.
Smooth Animation Without Lag
Using Framer Motion alongside smart lazy-loading strategies, animations remain buttery smooth - even on lower-end devices. I also ensured that all animations respect prefers-reduced-motion settings for accessibility.
SEO & Metadata
To ensure the site was search-ready, I added structured metadata, alt text for all images, and Open Graph tags for clean link previews. The page title, descriptions, and headings were all SEO-optimized for terms like "skincare website design", "Next.js landing page", and "modern beauty brand website".
Custom Favicon & Branding
Every detail was considered. The favicon was designed to reflect Elume's logo, giving the site that extra touch of professionalism in the browser tab. All colours, fonts, and layout decisions were pulled into a unified design system, ensuring brand consistency.
Version Control & Deployment
All development was tracked using Git and hosted on GitHub. This allowed for easy rollbacks, branch experimentation, and a clean commit history for future updates.
Deployment was handled through Vercel, which pairs perfectly with Next.js. Vercel's preview deployments meant I could test animations and layout tweaks in real-time before pushing them live.
Final deployment was as simple as git push, with build optimizations automatically applied. I also made use of Vercel's analytics dashboard to monitor site performance and traffic post-launch.
Final Thoughts
This project was a perfect example of why modern tools like Next.js, Tailwind, and Framer Motion matter. They don't just make development easier, they allow you to build experiences instead of just websites.
Elume represents the kind of web design I love doing: highly considered, visually rich, and technically sound. It's not about flashy gimmicks. It's about matching the tone of a brand with an interface that feels authentic, high-quality, and human.
If you're a skincare brand or any product-led business, looking to elevate your online presence, I'd love to bring your vision to life just like I did with Elume.
Want a Site Like This?
I build custom websites for brands who care about quality, aesthetics, and performance. Get in touch and let's create something beautiful together.
Start Your Web Design Project
