腾讯设计周2020品牌设计语言剖析
DESIGN
The Design Process


1-1. TDW 2020

TDW(腾讯设计周)是由腾讯举办的年度设计盛会,不仅汇聚腾讯设计师,也有来自其他地方和其他行业的设计师分享不同的观点。因为它代表着腾讯的设计,每一年我们都试着去展示更好的设计。

Tencent Design Week, TDW is an annual design conference hosted by Tencent Design. It is an event that gathers not only the designers of Tencent, but also various designers from all corners of the design and other industries to share ideas of different perspectives. As it represents Tencent’s design, we strive to show better designs every year.

TDW는 Tencent Design에서 매년 주최하는 디자인 행사이다. 텐센트 내부의 디자이너들은 물론, 디자인 업계의 다양한 인사들을 초청하여 디자인에 관해 여러 시각과 아이디어를 공유하는 행사로, 텐센트 디자이너들에게 매우 의미있는 행사라 할 수 있다. 텐센트를 대표하는 디자인 행사인 만큼, 올해도 더 좋은 디자인을 보여주기 위해 깊은 고민을 바탕으로 행사 디자인을 진행했다.

1-2. 原始概念 The Origin Of Concept 

在“设计向善”的口号之下,TDW每年都可以讨论各种设计主题。我们考虑了多种呈现口号的视觉方式,并决定使用关键词“有力”、“强调”和“动感”。通过这些关键词,得出了以动态描绘形态的设计概念。

Under the slogan 'Design for Good' TDW has been an event where many people can discuss on various design topics every year. We mulled over many possible ways to present this slogan visually and we decided to use the three keywords, 'Bold', 'Emphatic' and 'Dynamic'. With these keywords, we have derived a design concept that portrays the form in dynamic way.

TDW는 'Design for good'이란 슬로건 하에 매년 디자인에 관한 다양한 이야기를 나눠왔다. 올해는 이를 어떻게 시각적으로 풀어낼지 다양한 각도에서 고민했고, 'Bold', 'Emphatic', 'Dynamic'이란 키워드를 더해 시각적으로 좀 더 역동적인 형태의 디자인을 풀어보고자 하였다.


2-1. 视觉概念 Visual Concept 

我们想了不同的方法来表现有力且强劲的动作,使用TDW logo 的基本形态,我们创建了一个图案。我们拆解TDW logo中的T,把它制作成三角形和矩形元素,这些元素可以组合在一起形成logo的形状。此外,它们还可以用于创建随机散布在3D空间中的不规则图案。当我们用基本形状创建每个新图案时,图像仍然看起来是简单而具有动感的。我们在整体品牌标识中使用了3D图像,并试图给人与TDW以前的品牌完全不同的印象。

We thought about different ways to show the dynamic and strong movements, and we have created a pattern using some basic forms from the TDW logo. We disassembled the T shape of TDW logo and made triangular and rectangular elements from the T shape. These elements can be assembled together to make the logo shape. Also, they can be used to create irregular patterns that are randomly scattered in a 3D space. The image still looks simple and dynamic while we create every new pattern with basic shapes. We used 3D imageries in overall brand identity and tried to give a completely different impression from the previous branding of TDW.

역동적이고 강한 움직임을 시각적으로 보여줄 수 있는 방법을 다방면으로 고민했고, TDW로고에서 나온 기본 형태를 이용한 패턴을 만들어보고자 했다. TDW 기본 로고의 T 형태를 쪼개어 삼각형 혹은 사각형의 기본 도형의 모듈을 만들고, 이들이 모여 로고의 형태를 이루도록 했다. 만들어진 세 개의 기본 도형 모듈은 3차원의 공간에 랜덤하게 흩어진 형태로 패턴을 만들 수 있다. 이러한 기본 도형으로 화면을 다양하게 구성한다면 단순하면서도 동적인 이미지를 줄 수 있을거라 생각했다. 또한, 전체적으로 모든 그래픽에 3D 이미지를 사용하여 이전까지의 TDW 브랜딩과는 전혀 다른 느낌을 주고자 하였다.


2-2. Logo

去年,TDW logo 用的是大写字母,今年,为了使它看起来与原始的TDW logo 相似,我们采用小写字母来设计。因为logo包含英文、中文和数字,为了找到与斜体logo相匹配的最佳字母组合,我们尝试了多种可能的方法。此外,logo也需要能轻易地应用于其他不同的设计场景,最后,我们用粗斜体样式统一了所有的英文、中文与数字,使整个logo看起来是平衡的。

Last year, TDW used capital letters for the logo. But for this year, we designed it with lowercase letters to make it feel similar to the original TDW logo, which consists of lowercase letters. Because the logo consists of English, Chinese and numbers, we went through many possible ways to find the best combination of letters to match with the italic style TDW logo well. In addition, the logo also needed to be easily applicable to other various design adaptations. Finally, we unified all the English, Chinese and numeral characters with a thick italic style, so that the whole logo looks balanced.

작년 TDW에서는 대문자 로고를 사용했지만, 올해는 TDW 기본 로고의 소문자 형태를 최대한 유지하는 방향으로 디자인하였다. 이탤릭체로 디자인된 TDW 로고의 형태와 잘 어울리면서 다양한 디자인에 두루 적용될 수 있는 글자 조합을 찾기 위해 여러 테스트를 거쳤다. 최종적으로는 영문, 숫자, 중문까지 전체 폰트의 형태를 굵은 이탤릭 스타일로 통일하여 다양한 서체가 조화롭게 보일 수 있도록 디자인하였다.


除了上述logo,还制作了一个变动的,反映TDW2020品牌标识维度视角的3D logo。这个logo可以应用于多种不同的场景,比如视频、海报、安装等等,维持基本logo整体外观的同时,它创造了更多应用的可能性。

In addition to the aforementioned logo, we also created a logo variation in 3D that reflects the dimensional perspectives of TDW 2020's brand identity. We designed this logo variation so that we can apply it to many different kinds of applications like videos, posters, installations and others. The logo has maintained the overall look of the basic logo and at the same time, it creates more possibilities of applications creatively.

어디에든 기본적으로 쓰일 수 있는 베이직 로고 외에도, 이번 TDW 2020의 브랜딩 아이덴티티를 반영한 새로운 스타일의 로고를 만들었다. 비디오, 포스터, 인스톨레이션 그리고 이 외에도 다양한 어플리케이션에서 쓰일 수 있도록 로고 시스템을 디자인하였다. 기본적인 TDW 로고 형태에서 크게 벗어나지 않으면서도 다양한 어플리케이션에 좀 더 새롭게 적용될 수 있는 로고 시스템을 개발하였다.


2-3. 颜色 Color 

保持之前TDW一贯使用的蓝色的同时,使用柔和色调赋予新鲜感。3D空间则使用渐变色,赋予更深层次且更丰富的感觉。在避免使用深色或鲜艳颜色的同时,我们尽量确保整个调色板使用起来是流畅的。

While maintaining the blue color that has been used consistently in previous TDW, soft pastel-toned colors have also been used to give a fresh impression. Gradational color was used to give a deeper and rich feeling when applied to a 3D space. While avoiding dark or vivid colors, we tried to make sure the overall color palette can be applied smoothly.

지금까지 TDW에서 지속적으로 사용되어 왔던 블루컬러를 유지하면서 부드러운 파스텔 톤의 컬러를 적용하여 새로운 느낌을 주었다. 3D 공간에 적용했을 때 좀 더 깊고 풍부한 느낌을 주기 위해 그라데이션 컬러를 사용하였다. 너무 짙은 색이나 튀는 색을 피하고 전체적인 컬러가 부드럽게 어울릴 수 있도록 신경썼다.


2-4. 图形 Pattern 

我们通过结合三种基本形状和不同颜色的球体来设计3D图形。在最终组合成“t”形之前,这些物体以不同角度随机散布在3D空间中。概念刻画方面,随意的形状聚集在一起形成品牌标识中的logo。通过这些3D图形,我们表达了一种新的感觉,并创造了更为广泛的应用。

We designed the 3D patterns by combining three basic shapes and different colored spheres. Those objects are randomly scattered at various angles within the 3D space before they are made into 't' form. As for the concept portrayal, random shapes gathered to make the logo form in the brand ident. By using these 3D patterns, we were able to express a new feeling and it creates a wider range of applications.

로고에서 나온 세가지 기본 형태와 함께 다양한 색상의 구 형태를 조합하여 3D 패턴을 디자인하였다. 3D 공간 안에서 다양한 각도로 불규칙하게 흩어진 조형들이 모여 최종적으로 t 형태를 조합하기 전의 무질서한 상태를 보여 준다. 아이덴티티 영상을 통해 이러한 기본 조형들이 모여 로고 형태를 만드는 과정을 보여주었다. 3D 공간에서의 패턴으로 새로운 느낌을 만들어냈고, 이를 다양한 어플리케이션에 활용할 수 있다.


2-5.  字体设计 Typography

为了找到更为合适的,简洁而又不太坚硬的字体,我们做了多种比较。最终,英文使用Proxima Nova,中文则用方正亭蓝黑简体。

We tried to come up with a neat, yet not too rigid font that is more suitable by comparing many various fonts. We used Proxima Nova for English language and 方正兰亭黑简体 for Chinese language.

행사에 어울릴 수 있는 깔끔하면서도 너무 딱딱하지 않은 폰트를 찾기 위해 다양한 폰트를 비교하며 고민했다. 최종적으로는 영문은 Proxima Nova를 사용하고, 중문은 方正兰亭黑简体를 사용하였다.



3-1.  主视觉&海报 Key Visuals & Posters

基于上述概念,我们首先制作各种主视觉图形。我们把TDW的logo以不同的构图和形式放在3D空间中。为了让logo吸引眼球 ,周围的物体尽可能地保持简单。主视觉图形采用横向和纵向两种形式设计,以便可以以各种方式应用于活动之中。

Based on the concept explained above, we made various key visual images first. We placed the TDW logo in various compositions and forms within the 3D space. We kept the surrounding objects as simple as possible in order to have the focus on the logo. The key visual images were designed in both landscape and portrait formats so that these can be applied in various ways for the event.

진행된 아이디어에 따라 다양한 키비주얼 이미지를 먼저 디자인하였다. 3D 공간 안에서 다양한 구도와 형태로 TDW 로고를 배치하되, 가운데의 로고로 시선을 끌 수 있게 하기 위해 주변부의 사물은 최대한 단순하게 처리하였다. 키비주얼 이미지는 행사에서 여러 모로 다양하게 쓰일 수 있게 하기위해 가로형과 세로형 두 형태로 디자인했다. 

为了设计海报,以主图形为基础,我们测试了各种布局。我们用各种方式测试logo和主版本的布局,并选择最为合适的版本。最后,我们将所选的布局应用于各种主视觉图形,在显示变化的同时,保持统一的色调和方式。

We tested various layouts to design posters using these key visual images. We tested the layout of the logo and the main copy in various ways and selected the most suitable version. Finally, we applied the selected layout design to various key visual images with a consistent tone and manner while showing the variation.

제작된 키비주얼 이미지를 바탕으로 포스터를 디자인하기 위해 다양한 레이아웃을 테스트해보았다. 로고와 메인카피의 위치 등 레이아웃을 다양하게 테스트해 보고, 가장 안정적으로 보이는 타입을 선택하였다. 최종적으로 선택된 레이아웃을 여러 키비주얼 이미지에 동일하게 적용해 다양한 이미지를 보여주면서도 일관적으로 보일 수 있도록 하였다.



3-2. 其他应用 Other Applications 

基于品牌标识,我们提出多种应用场景,试图以一致的方式将品牌标识应用于这些场景之中。因为使用了3D图像和渐变色,我们特别注意确保线上线下场景的一致性。在线下场景精确地显示渐变色有点困难,但我们仔细调整了颜色,使其与线上色调相似。

We came up with many kinds of applications based on the brand identity design. We tried to apply brand identity to various applications in a consistent manner. Because 3D images and gradient colors are used, we took extra care to ensure consistent tone of online and offline applications. It was a bit difficult to accurately display gradation colors in offline applications, but we carefully adjusted the colors so that they had similar color tone from online applications.

진행된 디자인을 바탕으로 다양한 어플리케이션 디자인을 진행하였다. 브랜드 아이덴티티를 다양한 어플리케이션에 일관된 톤으로 적용될 수 있게 노력했다. 3D 이미지들과 그라데이션 컬러가 활용되었기 때문에 온오프라인에 톤이 일관되게 적용될 수 있게 특별히 신경썼다. 특히, 그라데이션 컬러를 오프라인 매체에서 정확하게 표현하기 어려웠는데, 온라인과 색감이 크게 다르지 않도록 디자인하였다.


3-3.  安装设计 Installation Design

基于设计概念,我们继续进行展位设计。展位是各种人聚集一起体验活动的场所,我们用迄今为止制作的各种图形设计了这个场所,同时保持了足够的简单性。

Based on the design concept, we proceeded to make the booth design. The booth is a space where various people gather to experience the event. We designed the space with various graphics that we’ve made so far, while keeping it simple enough.

진행된 컨셉을 바탕으로 부스 디자인을 진행하였다. 부스는 다양한 사람들이 모여 직접 만지고 체험하는 공간으로, 행사의 아이덴티티를 가장 가까이서 접할 수 있는 공간이다. 진행된 다양한 그래픽 요소를 적절하게 활용하여 공간을 꾸미되, 지나치게 복잡해지진 않도록 하는데 유의했다.


3-4.  线上视频 Online Video

通过有效地利用主视觉和logo,也创建了为设计峰会而设立的演播室。适当的颜色校正和相机设置可以使屏幕不偏离整体的视觉色调。屏幕设置上,我们也试着在让观众的注意力可以集中在演讲者身上。

The studio was also created to broadcast the seminar by deploying the key visuals and logos. The screen, which is transmitted through proper color correction and camera setting, will not deviate from the overall visual tone. And also we tried to make screen that viewers be able to focus on the speaker.

진행된 키 비주얼과 로고를 배치하여 강연을 방송하기 위한 스튜디오도 만들어졌다. 적절한 컬러 보정과 카메라 세팅을 통해 송출되는 화면이 전반적인 비주얼 톤에서 벗어나지 않도록 하되 시청자들이 강연자에게 집중할 수 있도록 구성했다.


TDW官网的信息结构主要由 首页/设计峰会/创意市集/影像展示/往届回顾 这五部分组成,内容以嘉宾展示、图片及视频信息的呈现为主,因此在界面设计上希望给予更多的空间留白来凸显内容的展示,同时也让整体界面看起来更为的简约轻盈。

The information structure of the TDW official website mainly consists of five parts, home, design sharing, design bazaar, gallery wall and past events. Overall the content is made up of multimedia content and speaker guests, still and motion imagery information. So, more white space is applied to emphasize the spatial information display, while also keeping the simplicity and lightness of the overall interface design.

TDW 공식 홈페이지의 정보 구조는 크게 홈, 디자인 공유, 디자인 바자회, 갤러리월, 과거 이벤트 등 5개 파트로 구성되어 있다. 전체적으로 콘텐츠는 멀티미디어 콘텐츠 및 초청 연사, 스틸 및 모션 이미지 정보로 구성된다. 그래서 정보를 강조하면서도 전반적인 인터페이스 디자인을 단순하고 가볍게 하기 위해 전반적으로 흰색 공간이 많은 면적을 차지하도록 했다.

官网整体视觉上通过灵感激发的概念,带来了更全面的影响和改变,延展“设计向善”的理念传达。同时,希望将品牌片中空间感的想法体现在界面的处理上,通过局部破格的设计及元素滑动时的大小缩放、立体几何元素的视差滚动来体现平面视角上的空间概念。

The official website’s visual design is inspired by the visionary idea, bringing a more comprehensive influence and change, and further extends the motif of "Design for Good". At the same time, the concept of dimension in the brand film is reflected in the interface design, with the overlapping design and dynamic scaling of elements, parallax scrolling of geometrical 3D elements to realize the spatial concept in 2D perspective.

공식 웹사이트의 비주얼 디자인은 비전 있는 아이디어에서 영감을 받아 보다 포괄적인 영향력과 변화를 가져오며, '선을 위한 디자인'이라는 모티브를 더욱 확장시킨다. 동시에 브랜드 영상 속 차원의 개념을 인터페이스 디자인에 반영하고 중첩된 디자인과 요소의 역동적인 확장, 기하학적 3D 요소의 패럴렉스 스크롤을 통해 2D 관점에서 공간 개념을 구현한다.


5-1 延展概念可视化 Extensive concept visualization

品牌标识的整体概念基于“设计向善”这个slogan。动画视觉用“变化”和“影响”作为关键词,强调设计是改变社会思维的催化剂,无论对消费者还是对企业,在各行各业都有积极的影响。

The overall concept of the brand ident is based on the slogan, 'Design for Good'. 'Change' and 'Influence' were used as the keywords for the animation visual, emphasising that design acts as a catalyst to change societal thinking, that has positive influences on various industries, whether to consumers or businesses.

브랜드 영상의 컨셉은 'Design for good'이라는 슬로건을 중심으로 구성되었다. 디자인이 촉매 역할을 하여 사회를 변화 시키고, 여러 방면에 긍정적인 영향을 끼친다는 점에 주목하여 'Change'와 'Influence' 두 단어를 ID 영상의 기본 키워드로 설정했다.


5-2 故事版,“变化”与“影响”的可视化概念 Storyboard, visualizing the concept of CHANGE and INFLUENCE

视频的整体流程从3D物件开始。首先,它只是一个简单的球体形状,但随着视频的进行,它影响了周围的环境,并逐渐改变了形式。视频的结尾,所有变化的物件聚集在一起形成TDW的logo,使“变化”和“影响”得以形象化

The overall flow of the video started from a 3D object. At first, it was only a simple geometric shape in a sphere form, but as the video progressed, it affected the surrounding environment, and gradually changed the form. At the end of the video, the TDW logo is formed by gathering all the changed objects, to visualize the 'Change' and 'Influence'.

영상의 전체적인 흐름은 한 오브젝트의 이동을 따라가며 진행된다. 처음엔 구 형태의 단순한 기하도형에 불과하지만 영상이 진행됨에 따라서 주변환경에 영향을 주고 받으며 점점 형태가 변화한다. 영상의 마지막에서는 TDW로고의 형태가 완성되면서 공간을 구성하고 영상이 마무리된다. 

视频里的球体转换成多面体,这些多面体组合在一起,创建了一个有意义的logo。我们通过这种几何形态的变化,暗喻设计对社会变化起着积极而增效的作用。

We expressed in the video that the sphere turned into a polyhedron and these polyhedrons assembled to create a meaningful logo. Through this change in geometrical shapes, we tried to metaphorically express the role of design that leads to positive and synergic changes in society.

구에서 다면체, 그리고 이 다면체들이 모여 의미를 가진 로고가 만들어지도록 구성했다. 이렇게 기하도형의 형태가 변화하는 이미지들을 통해, 사회의 긍정적인 변화를 리드하고 시너지효과를 일으키는 디자인의 역할을 은유적으로 표현하고자 했다.


5-3  动画 Animatics

在进行全面工作之前,我们制作了一个动画来检查整个图像的组成。为了创造出更具节奏感的动画形象,在动画制作前提前进行声音处理,这样动画和节奏才能很好地匹配。

Prior to full-scale work, we made an animatic to check the overall image composition. In order to create more rhythmic images of animation, sound work was carried out in advance before the animation progress so that animation and rhythm could be matched well.

본격적인 작업에 앞서서 전반적인 영상 구성을 체크하기위해 스토리보드에 맞춰서 러프하게 애니메이션 작업을 진행했다. 애니메틱 작업 전 사운드 작업을 미리 진행하여 애니메이션과 리듬이 잘 어우러질 수 있도록 하였다.


5-4  材料渲染,细节 Rendering of materials, detailing

首先,主要材料是用品牌的主颜色和渐变色构成的,我们还添加了金属、木材和玻璃等材料,以表达世界正因优秀设计而改变的理念。我们将这套材料适当地放于主视觉物件上,同时为动画增加更多的细节。除此之外,为了使动作更加地自然,还对一些动画场景进行了多轮模拟测试,

First of all, the main materials were composed using the brand key colors and gradations. And we have added materials such as metal, wood and glass to express the idea that the world is changing by good designs. This set of materials was properly applied on objects used in the key visuals and we also added more detailed animation to the animatic. In addition to this process, some scenes were animated by rounds of simulation tests for more natural movement.

우선 브랜드 키 컬러와 그라데이션을 이용해 메인 메테리얼을 구성했다. 디자인에 의해 세상이 변화하는 과정을 표현하기 위해 추가적으로 다양한 금속, 나무, 유리와 같은 소재를 적용했다. 이렇게 구성된 메테리얼 세트를 오브젝트들에 적절히 배치하며 키 비주얼을 구성하고 애니메틱에서 러프하게 잡았던 애니메이션에 좀 더 디테일한 움직임을 넣어주었다. 그리고 추가적으로 몇몇 장면은 자연스러운 움직임을 위해 여러 번 테스트를 시도하며 시뮬레이션으로 애니메이션을 잡아주었다.


5-5 最终成果 Final artwork


TDW是一年一度的盛事,今年我们在更好的艺术方向上进行了各种各样的尝试。总体而言,我们使用了更多的3D图像和柔和的渐变色,通过最大化空间感,给人更加丰富和新鲜的印象。因此,我们做出了与以往活动不同的外观。TDW 2020于10月28日至30日举行,很多人参加了这次的活动,演讲者们也分享了许多与设计相关的想法和案例。能够参与这么有意义的活动并做出贡献,我们非常感激也十分地荣幸。不仅仅是设计行业,我们希望TDW能够吸引更多行业的人分享他们的经验。

TDW is an annual event, and we’ve made various attempts on a better art direction this year. Overall, we used more 3D graphics and soft gradational colors to give more richer and fresh impression by maximizing the sense of space. As a result, we've made a different look from the previous event designs. TDW 2020 was held from Oct 28 to 30 and so many people came to the event and also many idea and case sharing about design by the speakers. We are very grateful and proud to contribute to this meaningful event. We hope that TDW will continue to gather more people from various industries and not only design industry to share their experiences.

매년 반복되는 TDW 행사이지만 올해는 좀 더 새로운 느낌을 전달하기 위해 다양한 시도를 해보았다. 전체적으로 3D 그래픽을 많이 적용하였고, 부드러운 그라데이션 컬러를 적극 활용하여 공간감을 최대화함으로써 좀 더 풍부하고 색다른 느낌을 줄 수 있었다. 그 결과, 지금까지의 이벤트 디자인과는 다른 느낌을 줄 수 있었다. TDW2020은 10월 28-29에 개최되었고 많은 사람들이 와서 디자인에 관한 다양한 생각을 나누었다. 우리는 이러한 뜻깊은 행사에 기여할 수 있어 매우 감사하고 보람차다. 앞으로도 TDW를 통해 디자인 업계의 다양한 사람들이 모여 그들의 이야기를 여러 사람들과 나눌 수 있었으면 한다.



  • 13167
  • 53
CONTRIBUTORS
  • 13167
ISUX 二维码