选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

品牌设计背后 | 2021TDW腾讯设计周

 

2021TDW腾讯设计周已于去年12月底圆满落幕,与往年不同的是,2021年我们尝试了用【4D】的设计方式去诠释“高效设计,轻松协同”这一全新主题。

活动背景

腾讯设计周(TDW)由腾讯设计通道联合腾讯学堂共同举办,活动形式主要由设计峰会和创意市集组成,基于”DESIGN FOR GOOD”理念,旨在打造一年一度的设计行业盛会,持续对外传递腾讯的理念、愿景和使命。

 

2021年腾讯设计周的主题为「高效设计,轻松协同」,本届设计周包含精彩的嘉宾大咖分享论坛、火热的设计周边创意市集,以及腾讯设计云相关产品发布会。

设计理念

本届TDW的视觉设计系统由主题「高效设计,轻松协同」衍生而来,将主题关键词拆分去对应视觉系统的四个部分:

高 效: 从更高维度解决问题,提升协作效率;

设 计: 从设计源头出发,用三原色作为主品牌色,表现设计可衍生出的万象色彩;

轻 松: 用平面设计最基础的几何图形,像积木一样,通过组合搭建得到不同的图形,模拟儿时玩乐的轻松氛围;

协 同: 在各自空间的个体,通过空间错视协力组合成“TDW”的图样,以表达协同的意义。

2021TDW视觉系统

我们对如何用视觉呈现「高效设计,轻松协同」这一主题进行了探索:

什么是高效 如何表现【4D】场景

如何表现空间协同 平面效果

品牌基础系统

标识: TDW2021的整体标识保留了TDW2020年的标识主体,仅在已有的坐标上绘制了年份数字,以延续品牌感。

TDW标识

主题字体: 标题字体采用大字面的字体设计来提高文字传达力度,简化笔画结构,使用水平垂直切角的设计,从阅读和识别层面体现“高效”这一概念。

主题字体

品牌色: 整体色彩以设计三原色“红黄蓝”为主,从腾讯蓝出发,调节色彩明度,得到以深蓝和浅蓝作为整体视觉的辅助色,最后加入相应的渐变色去表达更多质感和层次,适应更多的使用环境。

品牌色

文本字体: 中文字体采用汉仪旗黑,整体字体结构更严谨,字面大而不过,与主题字体传达的“高效阅读”相得益彰。英文字体则采用Google Fonts开源平台的Poppins字体,Poppins整体圆润饱满,现代感十足,与汉仪旗黑的适配度较高,很适合本次主题的表达。 文本字体

辅助图形: 主视觉三个字母均由长方体、圆环及三棱柱组合而成,通过提取主视觉这三种基础形状,绘制了2d及3d两种不同的表达风格,以适应更多延展需求。 辅助图形

品牌应用 – 官网

头部模块

线上官网是设计周的重要阵地,相比线下辐射的人群更广一些,如何让用户感受到4维空间的同时,延续品牌一致性,是这次的官网设计的核心。

头部模块

我们通过视频来引出空间的概念,结合Web 3D技术让用户可以在网页中进行交互。这次的Web渲染引擎选择了three.js,在Octane烘培贴图的基础上优化贴图,使用PBR流程还原质感。

网页的背景会随着鼠标有相对应的交互,我们将背景拆分为前景和后景,前景的阴影和前景的模型一起渲染,前景和后景分别定义不同的运动速度,从而达到视差的效果,实际效果可移步线上浏览:https://tdw.tencent.com/#/

品牌应用 – 视频

故事框架

我们的动画视频以TDW的主题概念为先导,将“高维高效”、“空间协同”两个关键词进行场景化抽象与表达。

全片讲述了一枚小球在多维度空间穿梭旅行、成长演变的过程。画面首先以小球作为一维空间上的点出现,逐步形成线与面的二维空间,随后小球穿梭在三维空间里,变化成三棱柱、圆环、立方体三种视觉元素,并在最后构建出TDW的形态,表达出“高维高效”和“空间协同” 的理念。

故事框架

动画分镜

动画场景以几何构成为主,表现“轻松协同”氛围。我们以小球在途中碰撞、通力合作、陆续组成新图形的经历,表达工作协同是高效运作催化剂的理念。我们对动画分镜进行了多次模拟和修改,匹配音乐节奏,力求流畅舒适,有韵律感。

动画分镜 线框预览动画

材质展示

材质延续了主视觉的渐变配色,以干净清爽的色彩表现材质的简约,透明与半透明两类材质在画面里搭配使用,共同构建画面主次、虚实与冷暖的平衡感,让画面更具轻盈、空气感,渲染“轻松协同”的氛围。 元素材质

材质渲染

最终效果展示

品牌应用 – 会场

品牌应用 – 装置

我们希望把“高效协同”的空间概念也带入市集的互动装置中。我们以170cm身高为参考观察高度,人眼22mm的焦距测试,对互动拍照点进行了视觉模拟,在6x3m的环境中将错视的kv还原出来。当观众入场后,顺着走廊前移,会逐个看到“T”“D”“W”的字样展现。

视觉模拟

装置效果

更多现场记录

 

 

原文链接:https://mp.weixin.qq.com/s/cpg_Wfc2PQ1ApURHJBOXOA

 

 

TAG

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。