蔡英文的競選官網為何能成為選戰亮點?專訪網站設計團隊「Unfold Group 展開集合」

蔡英文的競選官網為何能成為選戰亮點?專訪網站設計團隊「Unfold Group 展開集合」
Photo Credit: 蔡英文競選官網截圖/CITYZINE城市誌

我們想讓你知道的是

如果說從前大選的宣傳重心,是按階段推出一部部競選廣告,如今選舉的重點則似乎轉戰於虛擬網路。這次蔡英文競選官網為何可以設計得這麼「美」,並成為選戰中另一特色焦點,在在都顯示網頁這個載體的戰略位置。

文:姆茲

*本文為《CITYZINE城市誌》專題「設計,打開對生活場域的各種想像」系列文章

如果說從前大選的宣傳重心,是按階段推出一部部競選廣告,如今選舉的重點則似乎轉戰於虛擬網路。無論是柯P參選台北市長後,陸陸續續許多文章宣告選戰正式邁入網路行銷時代,抑或這次蔡英文競選官網為何可以設計得這麼「美」,並成為選戰中另一特色焦點,在在都顯示網頁這個載體的戰略位置。

三方合作

這次「Unfold Group 展開集合」團隊、設計師聶永真及民進黨總部的合作成果可謂亮眼。「一開始民進黨總部就先決定好了主視覺由聶永真操刀,我們則負責網站設計,算是各自都先決定好了才拼湊起來的。」團隊負責人吳逸文(Even Wu)先生為我們這麼解釋道。而三方在合作上也是各司其職、彼此信任,Even繼續說到,「聶永真和我們是完全分工的,他那邊就是主視覺,東西到了我們這邊之後,我們也非常尊重這份VI,即便是轉檔後,也都會請他再確認一次顏色和設計元件等等。總之,信任很重要。」

而整體網站架構的前期討論,其實是在2015年的四、五月開始的,官網則是在七月公開,不難想像其製作時程緊鑼密鼓的程度。在這樣的執行狀態下,Even也分享了他所看到的民進黨總部:「民進黨就像是一間大公司,但這次窗口本身都被充分地授權,因此他們可以很快地做決定,也因為這樣的效率,品質自然就可以提升;而且他們是相對了解網站的,甚至不輸一些大公司的窗口,在一開始他們也提出要做RWD(Responsive Web Design),其他需求也算明確,這點我蠻意外的。當然他們非常虛心,案子溝通到最後,他們甚至具備了跟我們一樣的知識。」

Photo Credit: 蔡英文競選官網截圖/CITYZINE城市誌

Photo Credit: 蔡英文競選官網截圖/CITYZINE城市誌

不避諱政治性的案子?

「政治色彩」不免引人疑慮,對此,Even也有自己的觀點。「其實一般人都會問,不僅是採訪,連朋友都會聊到這件事。確實,在很久以前我們會避免,當然也會擔心政治人物的狀態會影響到公司名聲。但後來發現,其實這方面的問題已經越來越淡了,大概也是因為現在人們的確比較理性。」

「不過後來真正會讓我願意去做的原因,並不是考慮『政治』這件事,而是也許我們可以透過一個全國性的事件,把好的設計傳遞出去,甚至把好的設計應該怎麼做也溝通出去,像是我們分享的Guideline。其實在國外大家都會做,但台灣卻比較少,因此希望可以透過這樣全國性的事件,把一些想法散播出去。或是能夠引發其他的思考也很好,譬如公司老闆可能就會開始想:『原來網站可以做成這樣,我的網站是不是也可以做一些改變?』這才是真正促使我來做這件事的原因。」

一聊起政治性案子的特色,也令人印象深刻。Even在這邊幫我們舉了幾個例子,「首先就是維持開發進度在每個案子裡本就不易,但競選網站還要一邊面臨處理突發事件,而且它的進度是更不能延遲的。」

另外就是網站的架構,「我覺得這次也學到很多,像是一般網站的按鈕,通常也就是網站的整體架構。但對選舉而言,那些黃金版位不應該只是用來讓大家知道『整個網站的架構』,所以在這部分的後台,我們把它設計成可隨意填寫任何文案及連結的欄位,讓它真正符合競選團隊的需求。」採訪團隊也很好奇,什麼是整個案子裡溝通最久的地方?Even則笑著說:「沒有耶,因為每個都必須要『快』,雙方也都了解這個狀況。」

設計歷程

有別於一般網站的競選官網,「Unfold Group 展開集合」團隊為此做了不少前期功課。「我們研究了相當多國外的競選網站,當然競選網站有許多特別的呈現需求,像是捐款、政見⋯⋯,一般網站當然不會出現這些,尤其像捐款的級距該如何設計。後來我們設計了一組覺得還不錯的級距,雖然後來其他候選人也用了相同的級距,不過我覺得這也是政治性案子裡有趣的地方。」

另外在首頁規劃上,Even也提到,「我們希望它的主題明確,因此設計了四大板塊,其中有一塊是影片,這本身是去年七月就上線的部分。後來其他候選人也選用了類似的首頁版面,我不會說這是抄襲,但肯定有參考吧。我覺得討論抄不抄襲不是重點,對我來說,就只是證明了它的確有『帶動』。」

做事的方法

這次從討論、執行到公開上線,其實只花了三個月左右的時間,能夠這麼有效率地完成,還是與做事的方法有關。「以前的方式是要先將畫面畫好,然後再進行切版,但其實設計師要切完所有的畫面,這實在太慢了,所以我們的步驟可能跟傳統的網頁設計公司不太一樣。我們是先打造按鈕、元件、選單這些東西,再把它組合起來成為所有的版本;也有可能是先做HTML/CSS,而沒有從設計端開始。」也讓我們瞭解到,如果要採取這樣的做事方式,Guideline自然是必須的一部分。

競選官網的存續

選後,網站的存續也令人好奇,Even為我們解惑,「其實現階段大家都在思考這個網站要怎麼處理,看是原封不動地留著,還是稍作改版把它變成什麼,但都還在討論階段。但目前確定『政見』是一定會留在網站上的。」未來,競選官網會作為什麼用途或其他改版,或許大家還是可以期待。

Photo Credit: 蔡英文競選官網截圖/CITYZINE城市誌

Photo Credit: 蔡英文競選官網截圖/CITYZINE城市誌

公布「點亮台灣」競選官網 Web Design Guideline

「我們大家都知道,以往跟政治相關,無論是政府機關或選舉,就算平面設計再好,數位設計一定是最邊緣、最不被重視的,更何況是製作一個嚴謹的規範來設計網站本身。2016年,是該將事情做好了。unfold開始把這半年來協助『蔡英文、陳建仁競選辦公室』開發網頁的規範、資源檔案公開展示與社會交流,讓民眾瞭解網站設計這一門專業該如何進行,才能將結果做的更好,也期許未來台灣的網頁設計能更上層樓。」──引自「Unfold Group 展開集合」粉絲團

2016年一月中旬,團隊在其粉絲團分享了以上內容,Even為此做了更詳盡地闡述,「其實在去年七、八月做完首頁後,我們就開始著手網頁的設計規範,當然也是因為實在太忙了,沒有辦法一開始就公開。我覺得Guideline不是需要刻意被強調,而是它本身就是做事情的方法,如果我們本來就是從打造元件出發,那自然就會擁有一份Guideline。它如果只是在公司內部使用,我覺得甚至可以只是以檔案的形式存在;這次是因為要把它公開,我們才整理成一個網頁。」

在如今網路閱讀興盛的時代,除了良好的使用者體驗,對於資訊工作者來說,網頁設計的進化與技術的推陳出新,勢必也都能讓這個載體擁有更多的創意空間。

其它《城市誌》「設計,打開對生活場域的各種想像」專題文章:

本文由CITYZINE城市誌授權轉載,原文發表於此

責任編輯:闕士淵
核稿編輯:楊之瑜

關鍵藝文週報

Tags: