设计动感:《Meet Your Legend》背后的技术故事

本文深入探讨了如何通过设计动效、故事叙述和现代技术栈构建Meet Your Legend平台,详细介绍了其品牌设计、交互体验和技术实现,包括GSAP动画、WebGL着色器和响应式叙事等技术细节。

设计动感:《Meet Your Legend》背后的故事

深入了解设计中的运动、故事叙述和技术如何共同塑造一个激励下一代创意人才的平台。

品牌理念

Meet Your Legend不仅仅是一个在线学习平台,它是连接几代创意人才的桥梁。专注于视觉特效、动画和视频游戏制作,它将有抱负的人才(无论是学生、自由职业者还是内部工作室专业人士)与行业中最有成就的导师联系起来。

我们的目标是创建一个生动的数字身份和交互平台,捕捉三个核心品质:

  • 创造力的能量
  • 行业级专业知识的精确性
  • 动态图形和故事叙述的活力

一切的核心是一个单一的驱动理念:运动。不仅仅是视觉运动——还包括职业动力、知识传递和创造力背后的情感推动力。

技术栈

我们使用现代模块化技术栈为平台注入生命,兼顾性能和故事叙述:

  • WordPress(无头CMS):用于可扩展、易于管理的内容,支持动态编辑工作流
  • GSAP(GreenSock动画平台):用于基于时间轴的流畅滚动和交互动画
  • Three.js/WebGL:用于高性能视觉效果、着色器和实时图形体验
  • 自定义预订系统:由Make、Google Calendar、Whereby和Stripe驱动,实现无缝调度、视频会话和支付功能

这个技术栈使我们能够提供响应式、电影般的体验,同时不牺牲速度或可维护性。

加载体验

甚至连加载屏幕都是故事的一部分。我们使用"M"尾形作为叙事元素设计了电影前奏。这个加载动画不仅仅是填充时间——它设定了舞台。同时,创意世界中的关键短语——如2D和3D动画、视觉特效、计算机生成图像和动作捕捉等术语——在视图中动画进出,营造兴奋感并让用户沉浸于工艺语言中。

标题揭示效果

排版变成了运动。为了展现品牌的动态DNA,我们为主要标题实现了自定义遮罩揭示效果。每个标题都以拖尾运动滑入视图,呼应流动的"M"标志。这创造了优雅、控制和连续性的感觉——就像电影剪辑中的镜头溶解。

菜单交互

我们不希望菜单感觉像实用工具。我们希望它感觉像场景转换。菜单在标志性的M形内展开——其结构既作为界面又作为隐喻。当用户打开它时,他们揭示了层次:内容类别、导师简介和故事。每一个动作都是经过深思熟虑的,让人想起在编辑套件中打开时间轴或在3D模型中剥离层次。

渐变和WebGL着色器

一个主要的视觉主题是"燃烧胶片"的概念——受模拟过程启发但通过现代代码表达。为了实现这一点,我们创建了一个自定义WebGL着色器,融入了品牌调色板中的反应性橙色渐变。当用户移动鼠标或滚动时,着色器实时响应,为屏幕添加微妙但强大的视觉特效风格失真。

基于滚动的故事叙述

主页不是静态的。它是叙事进展的舞台。我们将流程设计为滚动驱动的体验,内容和故事同步展开。从介绍品牌的开场滑块,到突出个别导师及其作品的沉浸式部分,每一刻都经过精心编排。用户不仅仅是在阅读——他们正在体验一个序列,就像电影中的场景或游戏中的关卡。

关于我们

我们是一家位于设计、故事叙述和交互交汇处的数字工作室。我们的方法植根于概念和工艺。我们构建不仅视觉上引人注目而且情感上共鸣的数字体验。从大胆的品牌到沉浸式网站,我们以运动为设计理念——像素的运动、情感的运动和目标的运动。因为我们相信伟大的设计不仅仅看起来好——它能打动你。

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计