Awwwards. F2E東京見聞錄 — 精華開箱 (上)
導覽
Awwwards 議程主題的安排上涵蓋了各種設計範疇，但我以我感受到的核心主線大致分類為四種，方便大家以個人需求找到合適的內容。
（ Awwwards Youtube Channel 已經開始分享這次 Conf 的影片，大家可以持續關注 ）
粗體：會是我主要分享部分。 斜線：會分享我喜歡的 Spotlight 部分。
設計心法
- Design Like a Supervillain: An Ode to Chaos and Creativity — David Navarro. Ueno.
- Creating Magic — Products for Humans not Robots — Peter Smart. Fantasy Interactive.
- How to continue being a designer without losing soul — Keitaro Suzuki. Shiftbrain.
- Bringing Personality Back To The Web — Vitaly Friedman. Smashing Magazine.
- Crafting Collective Creativity — Georgi Roberts & Asako Tomotani. Monopo.
- One in a Melon — Henry Daubrez. Dogstudio.
- Things were lost in translation — Min-Sang Choi. Google.
- The first of everything — Claudio Guglieri. Guglieri.com.
- New Perspectives — Tadamasa Iguchi. IN FOCUS inc.
- Branding & Digital Design — Genki Imamura. Bees & Honey.
設計公司營運/合作關係
- Swipe Right for a Future: A case for meaningful business relationships in small agencies — Frédéric Marchand & Jean-François Chainé. Locomotive.
- From a concept to the real work: Expectations vs Reality — Zhenya Rynzhuk.
- Foreigner Opening a Design Studio in Japan — Álvaro Arregui. Nuevo.Studio Tokyo.
設計風格/文化
- Creative Companionship — Leta Sobierajski & Wade.
- Kono Ikimono — Yeka Haski.
- How to survive the digital age — Miharu Matsunaga. Dentsu.inc.
組織團隊文化
- How our culture collapsed 2 years ago and how we were able to recover — Naofumi Tsuchiya & Boris Jitsukata. Goodpatch. — Goodpatch OS
- From a concept to the real work: Expectations vs Reality — Zhenya Rynzhuk.
- The Cult of Culture — Michelle Morrison. Dropbox.
My Big Three！
我認為絕大多數講者都很棒，他們分享他們的視野、思維、風格、經驗幫助我們成長前進。
而我會特別推崇這三位講者，是因為對我來說他們的分享更像一部好電影，扎實的龍骨上承載著「渴望想要傳達」的精神意念在。
當然最重要的，我認為他們想傳達的事物很有力的遞到我手上，然後打開我腦中很重要的一扇窗。
所以這三位講者也是 Awwwards 之後影片釋出後一定會想重看的分享主題！
David Navarro.
Design Like a Supervillain: An Ode to Chaos and Creativity
像個超級惡棍般的設計：混沌與創造的頌歌
作為 Conf 的第二位講者，他上台後約莫花了兩分鐘在介紹無敵鐵金剛（魔神Z）的動畫（西班牙很紅，他說😂）。
當下全場的突兀感超有趣，而且正當要開始困惑的時候，主題就進來了。
設計 v.s. 超級英雄 v.s. 超級惡棍
David 說人們喜歡超級英雄，是因為它象徵的是秩序、是守護。所以人們其實是基於一種迴避風險擁抱安逸的態度在看待超級英雄這個「他者」。
但如果在設計師身上，當象徵秩序的設計準則變得越來越重甚至壓過一切的時候，設計師所傳達的價值也會越來愈趨近超級英雄的「迴避風險、擁抱安逸」。
這裡我要想先借用另一個我超愛的講者 Vitaly Friedman — Bringing Personality Back To The Web 的兩張投影片
雖然我在這裡引用這兩張圖片是偏頗硬插的，為的只是想快速從影像上帶出 Order/Chaos 質地的對比感。
而正如前頭所說的， David 想傳達的其實是設計師本身所擁抱的價值。
“Chaos is the only thing that honestly wants you to grow. The only friend who really helps you be creative. — Dan Wieden”
混沌是唯一令你真誠想成長的存在。唯一幫助你發揮創造力的朋友。
David 並非否定秩序，而是強調設計師保有 Chaos 之必要。
於是他用著名的 “Supervillain 超級惡棍” 來對比為何好的設計師像超級惡棍，而非超級英雄：
超級惡棍精神：
- 明確的動機
- 不妥協的最終結果
- 視為人生使命
成功設計師的精神：
- 從 “Why” 開始設計
- 專注在目標上
- 設計是一場無盡旅程
所以，超級惡棍精神 v.s. 設計師精神：
- 明確的動機 v.s. 從 “Why” 開始設計
- 不妥協的最終結果 v.s. 專注在目標上
- 視為人生使命 v.s. 設計是一場無盡旅程
對，很匹配很有說服力。
接著他用自己的產品設計經驗帶入整個情境，這也是整個分享會讓我最有感的部分。
從 “Why” 開始設計
David 在一開始就破題。他們在設計之初 「Product-Focused Why」 就消滅了 「Mission-Focused Why」。
於是他們套用了 Product-Focused Why：”Set people free in the city.” 到了”超級惡棍精神”之中。
超級惡棍心態：
- 成為混沌的代理人
- 不滿於現狀
- 追求改變
“超級惡棍心態” => “到產品設計”：
- 成為混沌代理人 => 創造一個帶著混沌的房間
- 不滿於現狀 => 挑戰法則（物理）
- 追求改變 => 擁抱不適感
完美組合惡棍核心精神的設計就此誕生！
然後就失敗了…
後面還有好幾個對這個產品的再設計的案例遺憾我都沒照到… 「重點是每個設計完成度都超高！」但都失敗了！？
失敗歷程
- 從一開始的「結合 Fashion 要素」表達自由
- 到「用交通的符號性顏色提升品牌識別」
- 再到做了「超高互動跟動畫的官方網站」
每個看起來都超棒，但都～失敗了！
面對失敗
寬容接納失敗：
- 失敗是邁向成功的道路，過程的一環
- 嘗試是無盡的交響曲，把實驗當成例行
- 反省每次失敗，失敗是學習成長
相信自己
- 相信自己的目標任務
- 強大自信
- 讓人們臣服
失敗，再挑戰。失敗，再挑戰。
反省失敗
回到一開始，他們以 Product-Focused Why 也就是 “Set people free in the city” 的 “Free” 作為這一連串的設計主軸，但這個 Why 顯然無效。
失敗讓你回歸核心，定義有效核心，讓人們臣服於
於是他們終於回頭思考 Why，從純粹用設計傳達「Free」的意象，到用設計傳達「如何自由」。
於是他們回歸撿起被消滅了 Mission-Focused Why，做了一個高互動性可以真實體驗產品價值的服務才真正成功。
所以設計要向人們「有效」傳達你的 Why ，然後要讓人們能「分享」你的 Why
我來不及照的那幾張失敗的設計成品，也是讓這一段失敗的旅程很有感的關鍵。以那些設計作品的完成度來說，你其實是可以拿任何一個邊個故事告訴我他「成功了！」
但 David 說：「我們真的失敗了很多。」他真誠地說。
超級惡棍精神：
- 被擊敗不在選項
- 錯誤是一場學習的過程
- 捲土重來，變得更強
對比設計師的重生：
- 被擊敗不在選項 => 工作從未結束
- 錯誤是一場學習的過程 => 「設計本身」就是個學習的歷程
- 捲土重來，變得更強 => 捲土重來，變得更聰明
回到分享一開頭，David 把無敵鐵金剛（魔神Z）中「地獄博士」這個角色作最後主題的代表。因為相較其他電影超級惡棍，地獄博士在電視動畫中「無盡的失敗」所展現的「意志」就是他想表達的。
寫這篇分享的現在回想起來，我很慶幸 David 是整場 Conf 第二場就登場，因為對我來說，他替「設計」打了一個十分完整的波幅，讓接下來所有講者的分享能在我腦中有所共鳴的輝映起來。
然後他用最後的結語打進我的心坎。
Order makes you living. Chaos keeps you alive.
秩序讓你生存，但混沌使你活著
Keitaro Suzuki.
How to continue being a designer without losing soul
如何不喪失靈魂的繼續當設計師
承接 David Navarro. 以 Order / Chaos 來闡述設計。
Keitaro Suzuki 用他超級沈穩的口氣，以另一個維度，更有系統的分析他所為的靈魂 Soul 。
我想先破題跳到後面的一張簡報，來看 Soul 的組成，讓大家對接下來的脈絡有一定的想像：
（會這麼喜歡 Keitaro Suzuki 一方面是因為他每張簡報所整理的思路都漂亮的讓我瞪大雙眼。）
分享的開頭他以「電影/影片」價值的核心，來引導宏觀看待設計文化的視野
- 品質：引領感受打破理性
- 視覺：讓傳達超越國界
- 故事：令敘事跨越時代
以日本創作者對比國際性創作者的特質，這裏「Global」比較像是為全球性的設計產品（後面詳述，這張只是一個初步引子，稍微意識一下脈絡就好）
High-Context / Low-Context 就我認知上（歡迎指正討論）：
意指內容本身涵蓋的意涵，是否超越純粹接受到的既有資訊。
像看到 High-Context 的「皮卡丘」實際接受到的是寶可夢整個歷史文化ＩＰ的投射，對不同人可能又涵蓋了遊戲體驗的情感或動畫角色的情懷帶入。
相較這隻有著厚實「背景」的電氣鼠，Low-Context 的熊本熊等地方吉祥物，可能都是把單一風土特色抓出來，以邏輯特性設計出的產物。
所以大家接收到的感受也多僅止於外在形象，無法直接感受到太多的衍生意涵。
也就是說 High-Context 的載體本身的因為有衍生的意涵影響，所以偏向情感導向。相較 Low-Context 就是直接清明的邏輯導向。
Keitaro Suzuki 至此便以「吉卜力」＆「皮克斯」兩家動畫公司來做對比 High-Context ＆ Low-Context 得對比。
但，我這裡提前帶到另一名我很喜歡的講者：Yeka Haski.
他是一名在日工作的角色設計師
他分享內容我最喜歡的部份，是他談到剛赴日研究日本角色設計文化時，曾一度感到壓力受挫。
原因是日本的角色設計太過成熟，無論是百鬼夜行、九十九神、神道文化…等，日本是從數百年前就從整體文化上，高度的在發展從各式生物或物品出發的角色設計。
我這裡以此來說 High-Context 的設計發展，呼應回「吉卜力-千與千尋」充滿怪物，文化背景的設定，隱含寓意的場景…等所構築的魅力來源。
相較起來「皮克斯-玩具總動員」只是倚靠純粹表象的角色，進而以邏輯性的鋪陳傳達的故事意涵。倚靠背後衍伸意涵帶來魅力的企圖相對少上很多（玩具的符號意義應該遠大過牛仔or太空人）。
重新回到起頭破題的那張圖
左邊：模糊象徵人類靈魂的個人情感、哲學、風格…之聚合
右邊：內容輪廓明確、有效、可傳達、人與人共感傳達性高的邏輯系統
回歸設計
下面這三張圖應該不需要我詳述了，從上一路走下來大家應該可以很好從這樣被分析歸類的設計視野去重新思考自己掌握實踐設計的姿勢。
當我們可以充分意識到設計師所面臨的處境後，我們回到講題本身。
Without Losing Soul
Keitaro Suzuki 引述兩本他很喜歡的書：
EMOTIONAL DESIGN
The best designs from pursuing a theme that is condensed throughout with a clear vision and focus. Such designs are most often driven by a single human vision.
最好的設計源自於專注與明確的願景淬煉，這類設計往往出自於個別一人的願景。
At the Visceral, Reflective level, the iterative approach is a compromise, discussion, and consensus design. The result is safe and efficient, but always bland.
在「本能＆反思」層面不斷迭代，是一種折衷、合議、共識形式的設計。產出的結果平穩且有效，但總是平淡無奇。
EMOTIONAL DESIGN 作者 DON NORMAN 將設計分為三層級
Visceral：本能（外觀接收感受）
Behavioral：行為（使用帶入的感受）
Reflective：反思（使用者對產品本身產生情感認同）這裡指出的就是宏觀設計中過度 Team 以及 Logic 導向的產品所面臨「失去靈魂」的問題。
失去靈魂的設計，也就容易失去人性情感的連結。
A Technique for Producing Ideas
共五個步驟
Step 1: Gather Raw Materials - 收集事實材料
Step 2: Digest Materials - 整理煉化事實材料
Step 3: Internalize Materials Unconsciously - 逐漸內化粹煉的成果
Step 4: The Eureka Moment - 靈感誕生的瞬間
Step 5: Bring Ideas to Life - 化靈感為現實
在第二階段整理煉化的混亂過程，你終將為尋無頭緒感到絕望。但第一片拼圖開始被解開，你就能開市逐步進入第三階段。
當進入第三階段，你就可以逐步放下現實邏輯糾纏的問題，然後讓你的心放在更想像及情感面的層次上。
也就是倚靠邏輯現實釐清煉化出方向之後，再次對設計回歸情感的保留。
插播講題 Vitaly Friedman — Bringing Personality Back To The Web
將人性帶回網站設計
回想我先前用來帶入 Order/Chaos 的那兩張 Logo/汽車 設計越來越一致（無聊）的簡報。
Vitaly 認為在設計上展露「人性」，才能創造令使用者有「情感連結」。也呼應了 Keitaro Suzuki 開頭那個 Creative List。
Vitaly 以電子報發布服務 “Mailchimp” 成功的使用猴子角色來達成使用者情感溝通
或是 Tijuana Flats 這間餐廳
帶有UX不一定很好，但超具風格的網站跟菜單，每個一段時間就會請藝術家更新牆上的漫畫作品。
這些都讓無聊的品牌識別，藉由獨特的風格與使用者達到人性情感上的連結。
Vitaly 最後又談到 Smashing Magazine 的網站，也是作為F2E的我很愛的平台。
他們在整個網站 UI 上採用了非常強烈的紅色作為主視覺元素。
然而，這絕非 UX 最好的設計模式，但他還是堅持了這個風格選擇。（雖然他們還是放了一個 White/Red Theme 的切換鈕在一旁😂）
成功嗎？至少我覺得很成功。
回想我第一次踏入 Smashing Magazine 看相關技術文章的時候，我就因為注意到獨特的設計風格，而去多逛了整個網站想進一步理解這個平台的有趣之處。
我是會因為紅色太過刺眼而不喜歡這個網站？還是因為鮮明的主題風格而喜歡這個網站？
明顯是後者我得說。
突然回到 Keitaro Suzuki 的分享尾聲
即使 Keitaro Suzuki 提出像是魔法公式一般的視野與方法論，最後他還是以「設計師 = 運動員」做了總結。
「任何帶有情感的設計，都來自有做夠功課的支撐。」他說。
精華開箱 (上) — 結語
我真的很享受 David Navarro ＆ Keitaro Suzuki ＆ Vitaly Friedman 帶給我的啟發。
對於我這個喜歡傳達跟演出的開發者來說，過去在自我僵化的角色思維中一直對「設計」有著模糊不清的距離感。
但當 David Navarro 告訴我何謂好設計，Keitaro Suzuki 讓我看清設計的疆界，Vitaly Friedman 讓我知道自己的「設計」應當帶來什麼的時候。
我與設計的關係突然間就清楚起來了。
（話說「精華開箱」原本打算一篇寫完… 但發現整理起來真的太多了… 還是分兩篇寫好了…）
精華開箱（下）開場將分享真的讓我聽到心跳加速的主題！ Peter Smart 的 Creating Magic — Products for Humans not Robots
創造魔法 — 為人，而非為機械而生的產品
筆者自介：
大家好，我是 Gore Wang ～
享受動畫敘事＆打造具沈浸式互動體驗的網站前端工程師。
尋找同號夥伴中，歡迎參觀我的個人網站以及加我好友～！
