#作品【從第一個黑夜裡的官網談設計的反思】| RULES CREATIVE

RULES CREATIVE
Dec 12, 2019 · 7 min read

在數位時代,公司官網的重要性可能不輸 logo;然而,隨著建立網站的工具和模板激增,官網卻比 logo 還難看到品牌的個性。因此,這幾年開始出現更大膽的網頁設計,像是粗獷的 brutalism 和新技術如3D互動的運用,那身為創意代理商的 RULES 又該如何在這樣的環境下表現自己的品牌精神呢?

在回答問題前,我們先來淺談網頁設計的演變

網頁設計趨勢

從千禧年代開始,網頁設計逐漸被注重,也就此衍生出現在最常見的極簡主義 (Minimalism),以內容和使用者體驗為主體並省去多餘的點綴。隨著網路的無遠弗屆,各種設計也互相影響,Apple 便是將此風格發揚光大的要角之一。

Image for post
Image for post
source

然而,當一種風格不斷出現時,這種風格反而成了「毫無風格」,許多網站看起來都差不多。除非對內容真的有興趣,不然即使 UX 設計再好,第一印象已經讓人乏味。

因此,近幾年開始出現許多較反叛的嘗試,大多被歸類為粗獷主義 (Brutalism)。此名稱其實是源自於二戰後流行的建築風格,以顯露原物料為特色,像是愛用清水模的安藤忠雄就是一個例子。但值得一提的是,延續粗獷主義的現代主義 (Modernism),其實環繞著許多極簡的特性。

回到粗獷主義的網頁設計,個人覺得形容此類的設計風格,最貼切的字是 raw。不管是看似直接把 wireframe 做出來,或是以隨性來針對無聊的精緻,我們都能看見一種刻意粗糙而不多做加工的態度。

各種流行總是能看見過去的影子,網頁設計也是如此

不過在這類的設計當中,其實也常看見如同建築一般那極簡的元素。因此,粗獷和極簡主義的網頁設計其實不該被視為對立,反而是同一脈絡下的不同手法。粗獷主義的出現就如同流行的演變,挑戰現狀的同時也為網頁設計注入新的活力。

Image for post
Image for post
Balenciaga 官網正是集合了粗獷和極簡主義的代表
Image for post
Image for post
今年關門的著名設計工作室 Hawraf 官網很 raw 但也讓人印象深刻

在了解網頁設計的脈絡後,來看看 RULES官網的誕生

第一個黑夜裡的官網

RULES 的品牌精神除了試圖打破規則也強調想像力,於是在數位和平面的螢幕中,我們先丟出了一個情境的 idea — 第一個黑夜裡才能體驗的官網。

Image for post
Image for post
source

就技術層面來說,將相機的光度作為機制並不難,第一版的設計也就把光度呈現在網頁的背景上,嘗試以隨機的方式帶入粗獷主義的元素,搭配極簡的風格,僅以文字和色塊點綴,讓情境體驗作為主體。

問題

然而,我們在前期的討論很快就發現這種做法的問題:官網的目的除了表達品牌精神之外,也要能讓對我們有興趣的人深入淺出地去挖掘。

雖然初版的設計能表達 RULES 的叛逆?

但一開始就設計門檻過高的關卡就如同遊戲,讓人想直接放棄

Image for post
Image for post
隨著環境變暗,RULES 也就準備現身

RULES 宇宙

於是在接觸新技術與既定的情境設定下,我們決定探索極簡和粗獷之外,國外興起但臺灣仍少見的3D互動作為主體。在這樣的三維空間中,除了更能引導使用者進入情境,也表達了另一個概念:

創意,是宇宙
每一個創作人(團隊)都有一個屬於自己的宇宙,而作品就是我們的星球

Image for post
Image for post
https://rulescreative.com/

藉由這樣的概念也就很好帶出黑夜的情境:

星球遠遠看過去,只是表面的形狀與顏色,若想看清楚星球上的細節,你得專心看、仔細看、沒有光害的看

於是「第一個黑夜裡的官網」也就巧妙的轉化為「關燈才能看見作品細節」的功能。

如果 創意人 都有一個宇宙
作品 就是他的星球
爆炸的瞬間 耀眼
眨眼 隱沒於夜空

想看清 某顆星
不能太亮 鏡頭得暗點
終究
閉上眼 才看得到事情 真正的模樣

— 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/ ]

Image for post
Image for post
獨立創意代理商 Rules Creative,我們用策略與創意和你一起做生意。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store