设计TrueKind：一个护肤品牌通过情绪板、动效与意义的旅程

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

项目背景

TrueKind向我们提出了一个明确但雄心勃勃的目标：他们希望打造一个不仅在印度护肤领域，而且在全球都脱颖而出的护肤网站。

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

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

我们为设计阶段预留了约1-2个月的时间，允许多次迭代和精心改进。这个项目最好的部分之一是客户团队极其信任和支持——与真正开放创意的人合作至关重要。

打造视觉方向

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

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

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

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

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

关于在AI图像工具之前的工作

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

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

迭代与演进

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

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

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

动画与交互设计

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

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

引入Reksa：开发见解

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

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

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

技术栈与挑战

• Nuxt.js 3 用于前端：这个项目使用Nuxt.js 3作为前端框架。它是我的主要技术栈，是一个强大的选择，特别是对于创意网站。我发现Nuxt.js提供了比其他框架更多的灵活性。
• SCSS 用于样式：虽然许多开发人员更喜欢CSS框架，但我倾向于 vanilla CSS 作为我的主要方法。这里使用SCSS主要是为了类作用域和可维护性，但整体语法保持 vanilla。编写自定义CSS对我的需求最有意义——特别是在创意开发中，独特的布局及其与动画/运动的连接 often 需要完整的样式控制。
• Vercel 用于托管：它为托管Nuxt.js 3项目提供了简单、即插即用的体验。
• Prismic 作为CMS：我使用Prismic作为无头CMS。它是我大多数项目的首选—— straightforward 且非常适合这个项目的需求。
• GSAP 用于动画：对于平滑的运动体验，GSAP是无与伦比的。其 exceptional 插件——如SplitText和DrawSVG——允许我制作 fantastic 动画，提升设计。
• Lenis 用于平滑滚动：为了增强运动和动画质量，实现平滑滚动是必须的。它确保动画与滚动时间线 beautifully 同步。

这个项目的关键挑战是实现“浮动”布局并确保它在所有屏幕尺寸上保持响应。Abhishek的设计 beautifully 独特，尽管这种独特性也带来了自己的一套困难。为了将其变为现实，我必须 carefully 应用像CSS中的position: absolute这样的技术来实现正确的结构和分层。

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

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

奖项与认可

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

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

反思

这个项目是一种喜悦。不仅仅是因为结果，而是因为过程：与 thoughtful 客户合作，与 talented 伙伴协作，并构建 something 感觉真实于其使命。

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

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

🌟 创意网站是视觉的盛宴，但它们并不总是完美转化。作为设计师，我们 thrive 于大胆、实验性的想法。但企业 often 需要平衡创意与实用性。这没关系。

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

最后思考

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

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

感谢阅读。