網站設計是視覺文化
這個設計項目的要求聽起來雄心勃勃,就是要為一座二十一世紀的視覺文化博物館構思及設計網站。這個含有三種語言的網站須吸引香港本地觀眾,同時把博物館的使命與價值觀向全世界傳遞。大部分設計工作還須在疫症大流行期間完成,這場疫症令跨國旅行受限,而這代表文化機構的網上形象變得前所未有地重要。
紐約布魯克林設計工作室Anton & Irene主理人Irene Pereyra 和 Anton Repponen接受了為M+設計網站的挑戰。他們多月來與M+密切溝通,他們的設計手法除了反映設計師本人對香港視覺文化的親身體驗,還體現了他們對於M+在品牌形象、節目內容、未來需要等的了解。他們之前曾為其他博物館設計網站,包括著名的紐約大都會藝術博物館,但在創作自由度如此大的情況下,建立這樣鮮明獨特的網上空間,對兩人來說還是頭一次。
網站的設計延續由阿姆斯特丹平面設計工作室Thonik為M+建立的一套視覺形象。M+將來在印刷品、網站、海報、巴士車身廣告等媒介上,都會呈現這系列繽紛而獨特的色彩組合。而Anton & Irene則將這套視覺形象化為互動體驗,設計出一個俐落流暢的網站,並運用模組式元素,方便日後因應博物館項目増添新的環節。此創作過程跨越地域,身處紐約的Anton & Irene與香港的M+合作,並與阿姆斯特丹的Thonik和英國網站後台工程專家Torchbox協調。順理成章地,他們在互聯網上透過視像會議商談設計細節,討論M+獨特的網上面貌能如何融合不斷蛻變的數碼生態環境。
你希望到訪這個網站的人會有怎樣的第一印象?
Irene:我希望他們看到網站,第一個反應會是:「哇!這一點都不像博物館網站!」我們想要創造一個與全球其他博物館完全不同的網站。如果你把那些網站放在一起看,會發現它們全都大同小異,看起來都很類似。M+讓身為網站設計師的我們能真正施展設計才能,而不是依樣畫葫蘆地做與其他博物館和藝術機構相同的事。
Anton:我希望訪客會覺得:「這真的很香港!」當中設計不是瑞士風格的那種白底黑字,我希望人們能感受到這個城市色彩繽紛、活力充沛的特質。那些顏色的碰撞,就像是自然地貌與高樓大廈的衝突感。
你們如何將由Thonik為M+建立的品牌形象,即常被稱為「品牌書」(brand book)的參考框架化為網上體驗?
Anton:設計師在構思和製作品牌書時,焦點總是放在印刷方面,而較少考慮到數碼方面。說到品牌在屏幕上的模樣,品牌書往往只包括一些動態短片或其他基本例子。然而,我們的工作是在網站上保留甚至凸顯品牌的視覺形象。訪客與網站的互動會不斷變化發展,皆因頁面會有所增添,不同部分的位置亦會轉換。屏幕就是個活潑生動的平面。當我們看到Thonik的指引,說明一系列顏色並解說其背後理念時,就馬上得到靈感。
Irene:我們深明不可能一成不變地使用顏色,否則訪客會覺得來來去去都是那三種顏色。於是,我們嘗試令主頁的顏色變得鮮活起來。
網站的設計如何反映你們在香港的經歷?
Irene:品牌形象所涵蓋的非常廣泛,卻未有完全顧及互動元素。我們需要發展出按鈕和鏈結,並建立一套系統,以分辨可點擊與不可點擊的元素。我們構思出像貼紙一樣的簡單橢圓形按鈕,用來表示可點擊的元素。我們想像將所有霓虹招牌和視覺符號約化精簡,製作出代表香港的線框圖。我們從香港得到一些抽象的啟發,去建立一個充滿趣味、使人眼花撩亂,但又有其結構條理的網站。
Anton:設計師喜歡整理事物並將它們分門別類。當我們得知用於設計的顏色時,我們做的第一件就是整理。不過我們刻意避免用顏色標籤任何事物。
例如,我在九龍拍攝香港島,相中會出現很多顏色,但它們不是這一片是綠的、那一帶是橙色的。有些招牌和廣告有時互相衝突,幾乎令人感覺不舒服;但同時,因着精美的字體編排,整體效果也就變得合理。M+網站的首頁是整個網站最為色彩豐富的地方,它就像一本書的封面,讓你看到香港閃爍跳脫的一面。在另一些地方我們會把顏色調淡,例如填寫學校到訪申請這類須集中精神的頁面。網站的顏色組合可能看來有點混亂,不過背後都有其理念和邏輯。
M+是一座全新的博物館,隨着它在2021年底向公眾開放,其網站內容將會急增。你們如何為內容增長做準備?
Irene:我們想創造一個方便日後管理的網站,不會每次更新都像經歷一場惡夢。我們亦想確保能有效率地於限期前及時完成。我們在網站上使用了一些可以不同方式組合的模組式元素,我們稱之為「樂高磚」。它們包括按鈕、版面,以及可重複的互動功能。有些頁面或許只需一塊「樂高磚」,有些則可能要用上三到五塊。
這種模組形式能令網站更容易更新,方便M+的使用。這有助開發員趕及在限期前完成工作,亦有利於用家。當用家熟悉某種瀏覽形式後,很自然就會預計這種形式再次出現。若果某個功能在這個頁面是這樣運作,換到另一個頁面後又有不同,可能就會令人很傷腦筋。用家期望一邊瀏覽,一邊理解網站設計系統;而網站中每項設計特色最少重複一次,以此為應用的例子,讓訪客理解和熟習網站的瀏覽方式。
M+製作不同內容時,都以無障礙的暢通易達為原則。你們在設計過程中,尤其是在用家體驗這一層面,是如何思考這方面的要求?
Irene:如果你想一想會有哪些人到訪M+網站,就會發現這些人的年齡範圍甚廣,由十二歲到九十歲都可能有。當中包括說普通話的人、說粵語的人、以英語為母語或第二、第三,甚至第五語言的人。他們可能來自香港本地,也可能來自世界各地。我們十分清楚設計網站時要考慮背景、年齡、能力、對數碼科技的熟習程度各有不同的一群廣大受眾。
我們努力確保設計能達到甚至超越香港的通達指引要求。舉例而言,要符合品牌形象,彩色背景必定搭配白色文字。可是,相比黑底白字,這樣會更難閱讀。為了保證文字清晰易讀,我們決定使用較大的字體。家母七十四歲,她常常覺得在流動裝置上瀏覽網站十分困難,因為一切看來都很細小。我們刻意設計一個加大版網站,網站的一切元素都是大的,無論是在桌面版還是流動版瀏覽都是。我們曾與M+多次討論如何濃縮內容,務求令這通達設計框架發揮最大效能。我們會問:描述這件事真的需要用八個段落嗎?因為要是這樣,在字體如此大的情況下,你將要在接下來一小時不停掃呀掃,才能看完一篇文章。
通達固然是用家體驗設計的主要目的,不過網站的開發方式同樣至關重要。始終,透過特定的程式編寫方式和結構,螢幕報讀器就能讀出文字,方便任何有視力障礙或偏好收聽內容的人使用網站。要做到這點,開發員的角色至關重要。
博物館大樓本身亦根據通達共融的要求興建。我們與M+的訪客服務團隊談過,了解他們如何認真地看待自己的責任,盡力歡迎不同能力人士來參觀博物館。顯然,我們在網站方面的工作,必須能媲美他們令建築空間暢通易達所付出的努力。若果M+對網站的通達水平不滿意的話,肯定不會推出網站。
網站能怎樣融入文化機構的整體網上活動與內容?
Irene:以往,網站是訪客從網上獲得資訊的唯一來源,或至少是最基本的地方。但現在的情況明顯不同了,我們思考的不只是網站能怎樣配合博物館的社交媒體和其他數碼平台,還有是它能怎樣融入用家的數碼生態系統。用家到訪網站時,不一定以主頁為起點。他們或許正在搜尋關於某位藝術家的資料、或透過Google搜索到M+展覽活動的相關頁面。重要的是,我們須確保這些「側門」也能貫徹M+給人的觀感。
Anton:我們常用的網上社交平台都有着一式一樣的主頁面。我的Instagram介面與Irene那個一樣,亦與M+的相同。當然,不同帳戶的內容各有不同,但用家與介面互動的方式是一樣的。網站則不同,它是博物館獨一無二的網上園地,你可定下指引,令用家知道該如何與你互動。這是你想要與眾不同、脫穎而出的地方。M+所建造的博物館大樓,並非一個普普通通的四方盒子空間,而是委託Herzog & de Meuron來建造博物館,因為它的建築必須獨樹一幟。同樣,網站是這座博物館的延伸,同樣須要有其特色。
很多人或許永遠不能親身到訪M+,他們可能會從孟買、阿姆斯特丹、紐約等地瀏覽博物館網站。我們想給他們一個起點,讓他們在網上探索M+的館藏、進一步發掘博物館活動。我們想他們到「M+雜誌」閱讀有關香港視覺文化的一切。所有內容集中在同一網站上,而非四散於Facebook或Medium等地,或出現在一個一打開就彈出二十三個廣告的不明網誌上。這個網站由M+主理,亦是表達其定位與特點的方式。
你們最喜歡網站的哪項特色?
Anton:很多時候,網站的首頁都設計得令人印象深刻;但當你繼續瀏覽下去,就會覺得愈來愈沉悶。我們希望在你一路瀏覽網站,探索愈來愈深入時,仍然有從首頁得到的那種驚艷之感。
Irene:我們覺得,一開始在網站主頁捲動頁面是很好玩的事情,希望訪客也會有同感。巨型的M+標誌會縮小,然後悄悄地移到左上角;當你捲動頁面時,顏色會跟着變化,帶來不同的氣氛。即使我們對網站的設計已瞭如指掌,第一次目睹那個捲動的效果時,心情還是非常興奮雀躍。它讓人培養出最合適的心情去體驗這座博物館。
內容由數碼內容及編務主管施維麟轉述。為確保行文清晰,以上訪談經過編輯。
Anton & Irene是紐約布魯克林的設計工作室,由Irene Pereyra 和 Anton Repponen主理。