#作品【從第一個黑夜裡的官網談設計的反思】| RULES CREATIVE
在數位時代，公司官網的重要性可能不輸 logo；然而，隨著建立網站的工具和模板激增，官網卻比 logo 還難看到品牌的個性。因此，這幾年開始出現更大膽的網頁設計，像是粗獷的 brutalism 和新技術如3D互動的運用，那身為創意代理商的 RULES 又該如何在這樣的環境下表現自己的品牌精神呢？
在回答問題前，我們先來淺談網頁設計的演變
網頁設計趨勢
從千禧年代開始，網頁設計逐漸被注重，也就此衍生出現在最常見的極簡主義 (Minimalism)，以內容和使用者體驗為主體並省去多餘的點綴。隨著網路的無遠弗屆，各種設計也互相影響，Apple 便是將此風格發揚光大的要角之一。
然而，當一種風格不斷出現時，這種風格反而成了「毫無風格」，許多網站看起來都差不多。除非對內容真的有興趣，不然即使 UX 設計再好，第一印象已經讓人乏味。
因此，近幾年開始出現許多較反叛的嘗試，大多被歸類為粗獷主義 (Brutalism)。此名稱其實是源自於二戰後流行的建築風格，以顯露原物料為特色，像是愛用清水模的安藤忠雄就是一個例子。但值得一提的是，延續粗獷主義的現代主義 (Modernism)，其實環繞著許多極簡的特性。
回到粗獷主義的網頁設計，個人覺得形容此類的設計風格，最貼切的字是 raw。不管是看似直接把 wireframe 做出來，或是以隨性來針對無聊的精緻，我們都能看見一種刻意粗糙而不多做加工的態度。
各種流行總是能看見過去的影子，網頁設計也是如此
不過在這類的設計當中，其實也常看見如同建築一般那極簡的元素。因此，粗獷和極簡主義的網頁設計其實不該被視為對立，反而是同一脈絡下的不同手法。粗獷主義的出現就如同流行的演變，挑戰現狀的同時也為網頁設計注入新的活力。
在了解網頁設計的脈絡後，來看看 RULES官網的誕生
第一個黑夜裡的官網
RULES 的品牌精神除了試圖打破規則也強調想像力，於是在數位和平面的螢幕中，我們先丟出了一個情境的 idea — 第一個黑夜裡才能體驗的官網。
就技術層面來說，將相機的光度作為機制並不難，第一版的設計也就把光度呈現在網頁的背景上，嘗試以隨機的方式帶入粗獷主義的元素，搭配極簡的風格，僅以文字和色塊點綴，讓情境體驗作為主體。
問題
然而，我們在前期的討論很快就發現這種做法的問題：官網的目的除了表達品牌精神之外，也要能讓對我們有興趣的人深入淺出地去挖掘。
雖然初版的設計能表達 RULES 的叛逆？
但一開始就設計門檻過高的關卡就如同遊戲，讓人想直接放棄
RULES 宇宙
於是在接觸新技術與既定的情境設定下，我們決定探索極簡和粗獷之外，國外興起但臺灣仍少見的3D互動作為主體。在這樣的三維空間中，除了更能引導使用者進入情境，也表達了另一個概念：
創意，是宇宙
每一個創作人（團隊）都有一個屬於自己的宇宙，而作品就是我們的星球
藉由這樣的概念也就很好帶出黑夜的情境：
星球遠遠看過去，只是表面的形狀與顏色，若想看清楚星球上的細節，你得專心看、仔細看、沒有光害的看
於是「第一個黑夜裡的官網」也就巧妙的轉化為「關燈才能看見作品細節」的功能。
如果 創意人 都有一個宇宙
作品 就是他的星球
爆炸的瞬間 耀眼
眨眼 隱沒於夜空想看清 某顆星
不能太亮 鏡頭得暗點
終究
閉上眼 才看得到事情 真正的模樣— Jack Dai
設計的反思
雖然這次的官網受到了國外獎項的肯定，但對於注重互動體驗的自己而言，其實覺得有很多可以再改進的地方。不管是 landing page 的設計想更粗獷，或是手機上 navigation 和體驗的精緻度，都還有很多可以去調整與嘗試。
然而，官網上線的半年多來，開始發現越來越多的新客戶，其實是從對官網的好印象而來，這不禁讓自己想起極簡和粗獷的網頁設計脈絡：
極簡雖然有好的體驗但無法留下印象；粗獷雖然許多體驗並不精緻但卻有強烈的個性
溝通作為設計的主軸，除了釐清目的和受眾，了解流行的設計風格和技術之所以重要，正是在於能夠知道溝通對象熟悉什麼，或會對什麼感到驚豔，才能夠在體驗與個性展現中取得平衡。所以要多精緻或多 raw 取決於你想吸引什麼樣的人，像是初版的設計可能也不是不行，但會吸引不太一樣的客戶。
因此，這次 RULES 官網的目的其實除了表現自己的品牌精神，也兼顧攬客的功能。從受眾的角度去看，除了成效算是做得不錯？也讓自己放下那對於體驗的執著。畢竟當潛在客戶要尋找創意時，一定會看到很多美美的精緻官網，但真正能留下「創意」印象的，可能是炫炮的 prototype 呢～
最後，不管網頁還是其他設計，經過這次的經驗我們再次驗證的是，在商業範疇當中：
設計的核心是溝通，視覺和技術則是輔助
希望這反思除了能給許多執著的設計師一個放鬆的藉口（笑，也讓把作品做到最精緻但卻覺得不被欣賞的人，能一起學習先跳脫視覺和技術細節，回到最根本的去釐清溝通的主軸和目的。
by 睡路編
—
AWARDS
DESIGN AWARDS ASIA — Design of the Day
CSS DESIGN AWARDS — Special Kudos
CSS WINNER — Star
CSS LIGHT — Featured of the Day
WEB GURU AWARDS — Guru of the Day
MINDSPARKLE MAG — Site of the Day
AWWWARDS — Nominee
—
TEAM
IDEA — Jason Huang & Jack Dai
DESIGN — Jason Huang & Ting-En Wei
DEVELOPMENT — Jason Huang
—
[ Rules Creative / 吾則創意]
業務洽詢：Jack Dai
[Phone: 02–25503158; E-mail：jack@rulescreative.com]
➡官網 — [ https://www.rulescreative.com/ ]
➡FB粉絲團 — [ https://www.facebook.com/rulescreative/ ]
