Challenge Backstory
TrueKind approached us with a transparent however formidable objective: they needed a skincare web site that stood out—not simply within the Indian skincare house, however globally.
The problem? Most skincare web sites (particularly native ones) lean closely industrial. They emphasize affords, reductions, and aggressive product pushes. However TrueKind needed one thing gentler, extra considerate, and centered on one message: sincere skincare.
From the very first dialog, I knew this is able to require a fragile stability. We needed to create a website that was visually recent and slightly unconventional, however not so experimental that it alienated on a regular basis clients.
We put aside round 1–2 months for the design section, permitting time for a number of iterations and cautious refinement. Top-of-the-line elements of this undertaking was the extremely trusting, supportive shopper staff—working with people who find themselves genuinely open to creativity makes all of the distinction.
Crafting the Visible Course
Each undertaking I work on begins with listening. Earlier than touching any design instruments, I immersed myself within the shopper’s imaginative and prescient, temper, and tone.
I created a moodboard to align with their aesthetic, ensuring the pictures I pulled weren’t simply random “good” visuals. That is one thing I see many youthful designers overlook: it’s not nearly curating fairly photos; it’s about curating photos that match the model’s power, saturation, coloration language, and environment.
🌟 When constructing moodboards, don’t be afraid to tweak picture properties. Modify publicity, heat, distinction, and saturation till they really feel cohesive. You’re not simply grabbing references—you’re crafting a managed environment.
For the typefaces, I leaned on my go-to foundry, Pangram Pangram. Their fonts are superbly made and (for private initiatives) splendidly accessible. For TrueKind, we chosen PP Mori (for a contemporary, clear spine) and Editorial Neue (to usher in a sublime, editorial contact).
Although the shopper needed one thing unconventional, I knew we needed to maintain the animation and interplay design balanced. An excessive amount of motion might be overwhelming. So, we constructed the visible expertise primarily round typography—letting kind decisions and layouts carry the inventive weight.
On Working Earlier than AI Picture Instruments
This undertaking dates again to round 2021, earlier than the surge of AI picture era instruments. So when it got here to placeholders and visible exploration, I usually turned to Behance or related platforms to supply reference imagery that match the vibe.
In fact, for the ultimate launch, we didn’t need any copyright points—so we performed a skilled photoshoot in Worli, Mumbai, capturing clear, recent product imagery. For the Awwwards showcase, we’ve swapped in AI-generated photographs purely for show functions.
Iteration and Evolution
Right here’s a private second of honesty: The primary model I designed? I wasn’t thrilled with it.
It lacked the polish, magnificence, and depth I knew the model deserved. However as an alternative of settling, I went again, refined, iterated, and stored pushing. That’s one thing I’d inform any designer studying this:
🌟 Don’t be afraid to stroll away out of your early drafts. You’ll be able to really feel when one thing’s not hitting the mark—belief that intuition, and provides your self room to enhance.
Animation & Interplay Design
I’m a sucker for scroll-based animations. Clean scrolling, layered reveals, delicate motion—these parts can elevate a static design a hundredfold if used thoughtfully.
For TrueKind, I didn’t need pointless flash. The scroll interactions improve the content material movement with out overpowering it. The textual content reveals, part transitions, and layered parts have been designed so as to add simply sufficient dynamism to maintain the person engaged whereas nonetheless respecting the calm, sincere tone of the model.
Bringing in Reksa: Improvement Insights
At a sure level, I knew I wanted assist to totally do justice to the design. That’s once I reached out to Reksa—a developer I deeply admire, not only for his technical talent however for his meticulous inventive eye.
Handing over a design like this isn’t at all times straightforward. However with Reksa, it felt seamless. He understood the nuances, revered the design intention, and delivered 1000%.
Within the dev part beneath, Reksa will stroll you thru the stack, structure, key challenges, and the way he introduced the design to life with care and precision.
Tech Stack & Challenges
Nuxt.js 3 for the frontend: This undertaking was constructed with Nuxt.js 3 because the frontend framework. It’s my principal tech stack and a strong alternative, particularly for inventive web sites. I discover Nuxt.js affords much more flexibility than different frameworks.
SCSS for styling: Whereas many builders choose CSS frameworks, I lean towards vanilla CSS as my major method. SCSS is used right here primarily for sophistication scoping and maintainability, however the total syntax stays vanilla. Writing customized CSS makes probably the most sense for my wants—particularly in inventive growth, the place distinctive layouts and their connection to animation/movement usually demand full styling management.
Vercel for internet hosting: It gives a easy, plug-and-play expertise for internet hosting Nuxt.js 3 initiatives.
Prismic as CMS: I exploit Prismic because the headless CMS. It’s my go-to for many initiatives—easy and well-suited to this undertaking’s wants.
GSAP for animations: For clean movement experiences, GSAP is unmatched. Its distinctive plugins—like SplitText and DrawSVG—enable me to craft incredible animations that elevate the design.
Lenis for clean scrolling: To reinforce the movement and animation high quality, implementing clean scroll is a should. It ensures that animations movement superbly in sync with the scroll timeline.
The important thing challenges for this undertaking have been implementing the “floating” format and guaranteeing it remained responsive throughout all display screen sizes. Abhishek’s design was superbly distinctive, although that uniqueness additionally posed its personal set of difficulties. To deliver it to life, I needed to fastidiously apply methods like place: absolute in CSS to realize the fitting construction and layering.
My favourite a part of growing this undertaking was the web page transitions and micro-interactions.
The web page transition to the product view makes use of a stable coloration from the product background, expands it to full display screen, after which switches the web page seamlessly. In the meantime, micro-interactions—like SVG draw motions, button hovers, and click on animations—add small however impactful particulars. These make the location really feel extra alive and interesting for customers.
Awards & Recognition
We’re extremely joyful that the undertaking obtained such a optimistic response. A number of the awards and recognitions embody:
- Awwwards – Web site of the Day & Developer Award
- Awwwards – E-commerce Honors (Nominee)
- FWA – FWA of the Day
- CSSDA – Web site of the Day
- GSAP – Web site of the Day
- Muz.li – Picks Honor
- Made With GSAP – Showcase Characteristic
Reflections
This undertaking was a pleasure. Not simply due to the end result, however due to the method: working with considerate purchasers, collaborating with gifted companions, and constructing one thing that felt true to its mission.
There was, nevertheless, an fascinating twist. Whereas the ultimate website appeared and felt recent and unconventional, over time, the shopper step by step shifted towards easier, extra acquainted designs—nearer to what on a regular basis customers are used to.
And right here’s a mirrored image for all creatives:
🌟 Artistic web sites are a feast for the eyes, however they don’t at all times convert completely. As designers, we thrive on daring, experimental concepts. However companies usually must stability creativity with practicality. And that’s okay.
This undertaking left an enduring impression—not simply on the shopper, however on us as creators. It jogged my memory why we do that work: not simply to make issues look good, however to inform tales, evoke emotions, and convey significant concepts into the world.
Closing Ideas
For those who’re a younger inventive studying this: Continue learning, maintain experimenting, and maintain collaborating. It’s not about chasing perfection—it’s about chasing fact in your work.
And once you discover a staff that shares that imaginative and prescient? That’s the place the magic occurs.
Thanks for studying.
