设计动效:《Meet Your Legend》背后的故事
深入了解设计中的动态、叙事和技术如何共同塑造一个激励下一代创意人才的平台。
平台愿景
Meet Your Legend不仅仅是在线学习平台,更是连接几代创意人才的桥梁。专注于视觉特效、动画和视频游戏制作,它连接有志之士——无论是学生、自由职业者还是内部工作室专业人士——与行业中最有成就的导师。这些是幕后传奇:首席动画师、特效总监、创意总监和技术大师,他们塑造了现代娱乐界一些最大制作。
我们的目标?创建一个生动的数字身份和交互平台,捕捉三个核心品质:
- 创意的能量
- 行业级专业知识的精确性
- 动态图形和叙事的活力
一切的核心是一个单一的驱动理念:运动。不仅仅是视觉运动——还包括职业动力、知识传递和创意本身背后的情感推动力。
品牌标识
我们围绕字母“M”构建了品牌标识——风格化的长尾代表动力、遗产和向前运动。这条尾巴在平台上形成图形主线。导师姓名、模块和动画插入其中,创建了一个模块化和适应性强的系统,随着内容和贡献者的发展而演变。
从视觉系统到叙事结构,我们希望每次互动都感觉生动——动态、沉浸式和毫不掩饰的抱负。
概念
网站架构围绕叙事弧构建,而不仅仅是导航系统。
用户不会被放入菜单或通用主页。相反,他们被邀请进入一个故事。从网站加载的那一刻起,就有一种氛围和期待感——在展示核心产品之前介绍平台的使命、氛围和声音:导师 themselves,或平台所称的“传奇”。
体验的每个元素都是有意图地构建的。我们精心设计了内容流,以唤起崇敬、好奇和灵感的感觉。可以将其视为导师之旅的电影预告片。
我们不仅仅是在解释品牌——我们让访客沉浸其中。
排版与色彩系统
排版系统在强化平台的双重个性方面起着至关重要的作用:技术精密与表达创造力相遇。
我们配对两种不同的无衬线字体:
- 一种轻量级的技术字体,传达结构、清晰度和亲和力——非常适合正文文本和界面元素
- 一种粗体、富有表现力的字体,吸引注意力——完美用于导师姓名、引用、行动号召和叙事亮点
这两种字体之间的对比有助于在整个体验中创造节奏、步调和情感深度。
调色板刻意电影化且令人难忘:
- 闪光橙色表示能量、创意之火和大胆。它是火花——参与的邀请。
- 一系列中性色——米色、棕色和暖灰色——提供平衡、成熟和专业感。这些色调为基础体验,为活力元素创造对比。
整个系统既现代又永恒——对工艺的致敬,而非趋势。
技术栈
我们使用现代模块化技术栈为平台注入生命,专为性能和叙事设计:
- WordPress(无头CMS)用于可扩展、易于管理的内容,支持动态编辑工作流
- GSAP(GreenSock动画平台)用于流畅的、基于时间轴的滚动和交互动画
- Three.js / WebGL用于高性能视觉特效、着色器和实时图形体验
- 由Make、Google Calendar、Whereby和Stripe驱动的自定义预订系统——实现无缝调度、视频会话和支付
这个技术栈使我们能够提供响应式、电影化的体验,而不牺牲速度或可维护性。
加载体验
甚至加载屏幕也是故事的一部分。
我们使用“M”尾巴作为叙事元素设计了一个电影前奏。这个加载动画不仅仅是填充时间——它设定了舞台。同时,创意世界中的关键短语——如运动2D和3D、vfx、cgi和运动捕捉等术语——在视图中动画进出,建立兴奋感并让用户沉浸于工艺语言中。
这是即将到来的感官预览,为访客准备一个根植于行业和艺术的体验。
标题揭示效果
排版变成运动。
为了将品牌的动感DNA带入生活,我们为主要标题实现了自定义遮罩揭示效果。每个标题以拖尾运动滑入视图,呼应流动的“M”标志。这创造了一种优雅、控制和连续性的感觉——就像电影编辑中的镜头溶解。
这些过渡不仅仅是愉悦——它们强化了平台的身份,通过运动传递品牌。
菜单交互
我们不希望菜单感觉像实用工具。我们希望它感觉像场景过渡。
菜单在标志性的M形内展开——其结构既作为界面又作为隐喻。当用户打开它时,他们揭示层次:内容类别、导师档案和故事。每一个动作都是故意的,让人想起在编辑套件中打开时间线或在3D模型中剥离层。
它是触觉的、沉浸式的,并且真实于平台所庆祝的世界。
渐变与WebGL着色器
一个主要的视觉主题是“燃烧胶片”的想法——受模拟过程启发但通过现代代码表达。
为了实现这一点,我们创建了一个自定义WebGL着色器,融入了品牌调色板中的反应性橙色渐变。当用户移动鼠标或滚动时,着色器实时响应,为屏幕添加微妙但强大的VFX风格失真。
这不仅仅是装饰。它是一种活生生的纹理——象征推动创意职业的热量、摩擦和激情。
基于滚动的叙事
主页不是静态的。它是叙事进展的舞台。
我们将流程设计为滚动驱动的体验,其中内容和故事同步展开。从介绍品牌的开场滑块,到突出个别导师及其作品的沉浸式部分,每一刻都经过精心编排。
用户不仅仅是在阅读——他们正在体验一个序列,就像电影中的场景或游戏中的关卡。它是结构化的、情感化的和深刻人性的。
我们是谁
我们是一个位于设计、叙事和交互交叉点的数字工作室。我们的方法根植于概念和工艺。我们构建不仅视觉引人注目而且情感共鸣的数字体验。
从大胆的品牌到沉浸式网站,我们以运动为设计理念——像素的运动、情感的运动和目标的运动。
因为我们相信伟大的设计不仅仅看起来好——它打动你。