騰訊設(shè)計周TDW 2020品牌設(shè)計語言剖析

TDW(騰訊設(shè)計周)是由騰訊舉辦的年度設(shè)計盛會,不僅匯聚騰訊設(shè)計師,也有來自其他地方和其他行業(yè)的設(shè)計師分享不同的觀點。


1-1. TDW 2020

TDW(騰訊設(shè)計周)是由騰訊舉辦的年度設(shè)計盛會,不僅匯聚騰訊設(shè)計師,也有來自其他地方和其他行業(yè)的設(shè)計師分享不同的觀點。因為它代表著騰訊的設(shè)計,每一年我們都試著去展示更好的設(shè)計。


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

在“設(shè)計向善”的口號之下,TDW每年都可以討論各種設(shè)計主題。我們考慮了多種呈現(xiàn)口號的視覺方式,并決定使用關(guān)鍵詞“有力”、“強調(diào)”和“動感”。通過這些關(guān)鍵詞,得出了以動態(tài)描繪形態(tài)的設(shè)計概念。

2-1. 視覺概念 Visual Concept 

我們想了不同的方法來表現(xiàn)有力且強勁的動作,使用TDW logo 的基本形態(tài),我們創(chuàng)建了一個圖案。我們拆解TDW logo中的T,把它制作成三角形和矩形元素,這些元素可以組合在一起形成logo的形狀。此外,它們還可以用于創(chuàng)建隨機散布在3D空間中的不規(guī)則圖案。當我們用基本形狀創(chuàng)建每個新圖案時,圖像仍然看起來是簡單而具有動感的。我們在整體品牌標識中使用了3D圖像,并試圖給人與TDW以前的品牌完全不同的印象。

2-2. Logo


去年,TDW logo 用的是大寫字母,今年,為了使它看起來與原始的TDW logo 相似,我們采用小寫字母來設(shè)計。因為logo包含英文、中文和數(shù)字,為了找到與斜體logo相匹配的最佳字母組合,我們嘗試了多種可能的方法。此外,logo也需要能輕易地應用于其他不同的設(shè)計場景,最后,我們用粗斜體樣式統(tǒng)一了所有的英文、中文與數(shù)字,使整個logo看起來是平衡的。




除了上述logo,還制作了一個變動的,反映TDW2020品牌標識維度視角的3D logo。這個logo可以應用于多種不同的場景,比如視頻、海報、安裝等等,維持基本logo整體外觀的同時,創(chuàng)造了更多應用的可能性。

2-3. 顏色 Color

保持之前TDW一貫使用的藍色的同時,使用柔和色調(diào)賦予新鮮感。3D空間則使用漸變色,賦予更深層次且更豐富的感覺。在避免使用深色或鮮艷顏色的同時,我們盡量確保整個調(diào)色板使用起來是流暢的。 

2-4. 圖形 Pattern 

我們通過結(jié)合三種基本形狀和不同顏色的球體來設(shè)計3D圖形。在最終組合成“t”形之前,這些物體以不同角度隨機散布在3D空間中。概念刻畫方面,隨意的形狀聚集在一起形成了品牌標識中的logo。通過這些3D圖形,我們表達了一種新的感覺,并創(chuàng)造了更為廣泛的應用。

2-5. 字體設(shè)計 Typography

為了找到更為合適的,簡潔而又不太堅硬的字體,我們做了多種比較。最終,英文使用Proxima Nova,中文則用方正蘭亭黑簡體。

3-1. 主視覺&海報 Key Visuals & Posters

基于上述概念,我們首先制作各種主視覺圖形。我們把TDW的logo以不同的構(gòu)圖和形式放在3D空間中。為了讓logo吸引眼球,周圍的物體盡可能地保持簡單。主視覺圖形采用橫向和縱向兩種形式設(shè)計,以便可以以各種方式應用于活動之中。


為了設(shè)計海報,以主圖形為基礎(chǔ),我們測試了各種布局。我們用各種方式測試logo和主版本的布局,并選擇最為合適的版本。最后,我們將所選的布局應用于各種主視覺圖形,在顯示變化的同時,保持統(tǒng)一的色調(diào)和方式。

3-2. 其他應用 Other Applications 

基于品牌標識,我們提出多種應用場景,試圖以一致的方式將品牌標識應用于這些場景之中。因為使用了3D圖像和漸變色,我們特別注意確保線上線下場景的一致性。在線下場景精確地顯示漸變色有點困難,但我們仔細調(diào)整了顏色,使其與線上色調(diào)相似。

3-3. 安裝設(shè)計 Installation Design

基于設(shè)計概念,我們繼續(xù)進行展位設(shè)計。展位是各種人聚集一起體驗活動的場所,我們用迄今為止制作的各種圖形設(shè)計了這個場所,同時保持了足夠的簡單性。

3-4. 線上視頻 Online Video 

通過有效地利用主視覺和logo,也創(chuàng)建了為設(shè)計峰會而設(shè)立的演播室。適當?shù)念伾U拖鄼C設(shè)置可以使屏幕不偏離整體的視覺色調(diào)。我們也試著讓觀眾的注意力可以集中在演講者身上。


4 網(wǎng)站 website

TDW官網(wǎng)的信息結(jié)構(gòu)主要由 首頁/設(shè)計峰會/創(chuàng)意市集/影像展示/往屆回顧 這五部分組成,內(nèi)容以嘉賓展示、圖片及視頻信息的呈現(xiàn)為主,因此在界面設(shè)計上希望給予更多的空間留白來凸顯內(nèi)容的展示,同時也讓整體界面看起來更為的簡約輕盈。

官網(wǎng)整體視覺上通過靈感激發(fā)的概念,帶來了更全面的影響和改變,延展“設(shè)計向善”的理念傳達。同時,希望將品牌片中空間感的想法體現(xiàn)在界面的處理上,通過局部破格的設(shè)計及元素滑動時的大小縮放、立體幾何元素的視差滾動來體現(xiàn)平面視角上的空間概念。

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

品牌標識的整體概念基于“設(shè)計向善”這個slogan。動畫視覺用“變化”和“影響”作為關(guān)鍵詞,強調(diào)設(shè)計是改變社會思維的催化劑,無論對消費者還是企業(yè),在各行各業(yè)都有積極的影響。

5-2 故事版,“變化”與“影響”的可視化概念 Storyboard, visualizing the concept of CHANGE and INFLUENCE

視頻的整體流程從3D物體開始。首先,它只是一個簡單的球體形狀,但隨著視頻的進行,它影響了周圍的環(huán)境,并逐漸改變了形式。視頻的結(jié)尾,所有變化的物體聚集在一起形成TDW的logo,使“變化”和“影響”得以形象化。


視頻里的球體轉(zhuǎn)換成多面體,這些多面體組合在一起,創(chuàng)建了一個有意義的logo。通過這種幾何形態(tài)的變化,我們試著暗喻設(shè)計對社會變化起著積極而增效的作用。

5-3 動畫 Animatics

在進行全面工作之前,我們制作了一個動畫來檢查整個圖像的組成。為了創(chuàng)造出更具節(jié)奏感的動畫形象,在動畫制作前提前進行了聲音處理。

5-4 材料渲染,細節(jié) Rendering of materials, detailing 

首先,主要材料是用品牌的主顏色和漸變色構(gòu)成的,我們還添加了金屬、木材和玻璃等材料,以表達世界正因優(yōu)秀設(shè)計而改變的理念。我們將這套材料適當?shù)胤庞谥饕曈X物體上,同時為動畫增加更多的細節(jié)。除此之外,為了使動作更加地自然,還對一些動畫場景進行了多輪模擬測試,

5-5 最終成果 Final artwork

TDW是一年一度的盛事,今年我們在更好的藝術(shù)方向上進行了各種各樣的嘗試??傮w而言,我們使用了更多的3D圖像和柔和的漸變色,通過最大化空間感,給人更加豐富和新鮮的印象。因此,我們做出了與以往活動不同的外觀。TDW 2020于10月28日至30日舉行,很多人參加了這次的活動,演講者們也分享了許多與設(shè)計相關(guān)的想法和案例。能夠參與這么有意義的活動并做出貢獻,我們非常感激也十分地榮幸。不僅僅是設(shè)計行業(yè),我們希望TDW能夠吸引更多行業(yè)的人分享他們的經(jīng)驗。




文章來源:騰訊ISUX微信公眾號

每天更新,
全站高品質(zhì)素材免費下載!