Undertaking Backstory
TrueKind approached us with a transparent however bold aim: they wished a skincare web site that stood out—not simply within the Indian skincare area, however globally.
The problem? Most skincare web sites (particularly native ones) lean closely industrial. They emphasize gives, reductions, and aggressive product pushes. However TrueKind wished 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 wished to create a website that was visually contemporary and a bit of 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. Among the best 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 Route
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 footage; it’s about curating footage that match the model’s power, saturation, shade language, and ambiance.
🌟 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 ambiance.
For the typefaces, I leaned on my go-to foundry, Pangram Pangram. Their fonts are superbly made and (for private tasks) splendidly accessible. For TrueKind, we chosen PP Mori (for a contemporary, clear spine) and Editorial Neue (to usher in a chic, editorial contact).
Though the shopper wished one thing unconventional, I knew we needed to hold the animation and interplay design balanced. An excessive amount of motion could 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 typically turned to Behance or comparable platforms to supply reference imagery that match the vibe.
After all, for the ultimate launch, we didn’t need any copyright points—so we carried out a skilled photoshoot in Worli, Mumbai, capturing clear, contemporary product imagery. For the Awwwards showcase, we’ve swapped in AI-generated photos 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, class, and depth I knew the model deserved. However as an alternative of settling, I went again, refined, iterated, and saved 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 possibly can 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. Easy 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 stream with out overpowering it. The textual content reveals, part transitions, and layered parts had been designed so as to add simply sufficient dynamism to maintain the consumer engaged whereas nonetheless respecting the calm, sincere tone of the model.
Bringing in Reksa: Growth Insights
At a sure level, I knew I wanted assist to totally do justice to the design. That’s after I reached out to Reksa—a developer I deeply admire, not only for his technical ability however for his meticulous inventive eye.
Handing over a design like this isn’t all the time straightforward. However with Reksa, it felt seamless. He understood the nuances, revered the design intention, and delivered 1000%.
Within the dev part under, 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 foremost tech stack and a strong selection, particularly for inventive web sites. I discover Nuxt.js gives much more flexibility than different frameworks.
SCSS for styling: Whereas many builders desire CSS frameworks, I lean towards vanilla CSS as my main method. SCSS is used right here primarily for sophistication scoping and maintainability, however the total syntax stays vanilla. Writing customized CSS makes essentially the most sense for my wants—particularly in inventive improvement, the place distinctive layouts and their connection to animation/movement typically demand full styling management.
Vercel for internet hosting: It supplies a easy, plug-and-play expertise for internet hosting Nuxt.js 3 tasks.
Prismic as CMS: I take advantage of Prismic because the headless CMS. It’s my go-to for many tasks—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—permit me to craft implausible animations that elevate the design.
Lenis for clean scrolling: To boost the movement and animation high quality, implementing clean scroll is a should. It ensures that animations stream superbly in sync with the scroll timeline.
The important thing challenges for this undertaking had been implementing the “floating” format and guaranteeing it remained responsive throughout all display sizes. Abhishek’s design was superbly distinctive, although that uniqueness additionally posed its personal set of difficulties. To carry it to life, I needed to rigorously apply methods like place: absolute in CSS to attain the correct 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 strong shade from the product background, expands it to full display, 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 fascinating for customers.
Awards & Recognition
We’re extremely completely happy that the undertaking obtained such a optimistic response. A few of the awards and recognitions embody:
- Awwwards – Website of the Day & Developer Award
- Awwwards – E-commerce Honors (Nominee)
- FWA – FWA of the Day
- CSSDA – Web site of the Day
- GSAP – Website of the Day
- Muz.li – Picks Honor
- Made With GSAP – Showcase Function
Reflections
This undertaking was a pleasure. Not simply due to the result, however due to the method: working with considerate shoppers, collaborating with proficient companions, and constructing one thing that felt true to its mission.
There was, nevertheless, an fascinating twist. Whereas the ultimate website regarded and felt contemporary and unconventional, over time, the shopper step by step shifted towards less complicated, 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 all the time convert completely. As designers, we thrive on daring, experimental concepts. However companies typically 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.
Ultimate Ideas
If you happen to’re a younger inventive studying this: Continue learning, hold experimenting, and hold 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.
