Designing TrueKind: A Skincare Brand’s Journey Through Moodboards, Motion, and Meaning

从美学克制到GSAP魔法，本案例研究揭示了当信任遇见深思熟虑的执行时会发生什么。

项目背景

TrueKind向我们提出了一个明确但雄心勃勃的目标：他们想要一个在印度乃至全球护肤领域都脱颖而出的护肤网站。

挑战在于：大多数护肤网站（尤其是本地网站）都偏向商业化。它们强调优惠、折扣和激进的产品推广。但TrueKind想要更温和、更周到的东西，并围绕一个信息展开：诚实的护肤。

从第一次对话开始，我就知道这需要微妙的平衡。我们想创建一个视觉清新且有点非传统的网站，但又不能太过实验性以至于疏远日常客户。

我们为设计阶段预留了约1-2个月的时间，允许多次迭代和仔细改进。这个项目最好的部分之一是客户团队极其信任和支持——与真正对创造力开放的人合作会产生天壤之别。

打造视觉方向

我参与的每个项目都从倾听开始。在接触任何设计工具之前，我沉浸于客户的愿景、情绪和基调中。

我创建了一个情绪板来与他们的美学保持一致，确保我选择的图像不仅仅是随机的"好看"视觉元素。这是我看到许多年轻设计师忽略的一点：不仅仅是策划漂亮的图片，而是策划与品牌能量、饱和度、色彩语言和氛围相匹配的图片。

🌟 构建情绪板时，不要害怕调整图像属性。调整曝光、温暖度、对比度和饱和度，直到它们感觉连贯。你不仅仅是在获取参考——你是在打造一个受控的氛围。

对于字体，我依赖我的首选铸造厂Pangram Pangram。他们的字体制作精美，并且（对于个人项目）非常易于获取。对于TrueKind，我们选择了PP Mori（用于现代、干净的骨架）和Editorial Neue（带来优雅的编辑感）。

尽管客户想要一些非传统的东西，但我知道我们必须保持动画和交互设计的平衡。过多的动效可能会让人不知所措。因此，我们主要围绕排版构建视觉体验——让字体选择和布局承担创意重量。

在AI图像工具之前的工作

这个项目可以追溯到2021年左右，在AI图像生成工具兴起之前。因此，在占位符和视觉探索方面，我经常转向Behance或类似平台来寻找符合氛围的参考图像。

当然，对于最终发布，我们不希望有任何版权问题——因此我们在孟买Worli进行了专业拍摄，捕捉干净、新鲜的产品图像。对于Awwwards展示，我们纯粹为了展示目的换成了AI生成的图像。

迭代与演进

这是一个个人的诚实时刻：我设计的第一个版本？我并不满意。

它缺乏品牌应得的精致、优雅和深度。但我没有满足于此，而是回去、改进、迭代并不断推动。这是我想告诉任何阅读本文的设计师的话：

🌟 不要害怕放弃你的早期草稿。你能感觉到某些东西没有达到目标——相信这种直觉，并给自己改进的空间。

动画与交互设计

我痴迷于基于滚动的动画。平滑滚动、分层显示、微妙运动——如果使用得当，这些元素可以将静态设计提升百倍。

对于TrueKind，我不想要不必要的闪光。滚动交互增强了内容流，而不会压倒它。文本显示、部分过渡和分层元素的设计旨在增加足够的动态性以保持用户参与，同时仍然尊重品牌平静、诚实的基调。

引入Reksa：开发见解

在某个时刻，我知道我需要帮助来完全实现设计。那时我联系了Reksa——一位我深深钦佩的开发人员，不仅因为他的技术技能，还因为他细致的创意眼光。

交付这样的设计并不总是容易的。但与Reksa一起，感觉很无缝。他理解细微差别，尊重设计意图，并1000%交付。

在下面的开发部分，Reksa将带你了解技术栈、架构、关键挑战以及他如何精心精确地将设计变为现实。

技术栈与挑战

Nuxt.js 3用于前端：这个项目使用Nuxt.js 3作为前端框架。它是我的主要技术栈，也是一个强大的选择，特别是对于创意网站。我发现Nuxt.js比其他框架提供更多的灵活性。

SCSS用于样式：虽然许多开发人员更喜欢CSS框架，但我倾向于将原生CSS作为主要方法。这里使用SCSS主要是为了类作用域和可维护性，但整体语法仍然是原生的。编写自定义CSS最符合我的需求——特别是在创意开发中，独特的布局及其与动画/运动的连接通常需要完整的样式控制。

Vercel用于托管：它为托管Nuxt.js 3项目提供了简单、即插即用的体验。

Prismic作为CMS：我使用Prismic作为无头CMS。它是我大多数项目的首选——简单明了，非常适合这个项目的需求。

GSAP用于动画：对于平滑的运动体验，GSAP是无与伦比的。其卓越的插件——如SplitText和DrawSVG——允许我制作出色的动画来提升设计。

Lenis用于平滑滚动：为了增强运动和动画质量，实现平滑滚动是必须的。它确保动画与滚动时间线 beautifully同步流动。

这个项目的关键挑战是实现"浮动"布局并确保它在所有屏幕尺寸上保持响应。Abhishek的设计非常独特，尽管这种独特性也带来了自己的一系列困难。为了实现它，我必须仔细应用CSS中的position: absolute等技术来实现正确的结构和分层。

开发这个项目我最喜欢的部分是页面过渡和微交互。

到产品视图的页面过渡使用产品背景的纯色，将其扩展到全屏，然后无缝切换页面。同时，微交互——如SVG绘制运动、按钮悬停和点击动画——增加了小而有力的细节。这些使网站感觉更生动、更有吸引力。

奖项与认可

我们非常高兴这个项目获得了如此积极的回应。一些奖项和认可包括：

• Awwwards – 今日网站和开发者奖
• Awwwards – 电子商务荣誉（提名）
• FWA – 今日FWA
• CSSDA – 今日网站
• GSAP – 今日网站
• Muz.li – 精选荣誉
• Made With GSAP – 展示特色

反思

这个项目是一种乐趣。不仅仅是因为结果，还因为过程：与周到的客户合作，与有才华的合作伙伴协作，并构建一些感觉真实的东西。

然而，有一个有趣的转折。虽然最终网站看起来和感觉新鲜和非传统，但随着时间的推移，客户逐渐转向更简单、更熟悉的设计——更接近日常用户习惯的设计。

这是给所有创意人员的反思：

🌟 创意网站是视觉盛宴，但它们并不总是完美转化。作为设计师，我们在大胆、实验性的想法中茁壮成长。但企业通常需要平衡创造力与实用性。这没关系。

这个项目留下了持久的印象——不仅对客户，而且对我们作为创作者。它提醒我为什么我们做这项工作：不仅仅是为了让东西看起来好看，而是为了讲故事、唤起感情并将有意义的想法带入世界。

最后思考

如果你是一个年轻的创意人员阅读本文：继续学习、继续实验、继续协作。这不是追求完美——而是追求工作中的真理。

当你找到一个分享这种愿景的团队时？那就是魔法发生的地方。

感谢阅读。