TDRI
  • 關於TDRI
  • 最新消息
  • 趨勢觀察
  • 場域服務
  • 公告
  • 加入TDRI
  • 追蹤TDRI
  • 繁體中文
繁體中文   English

Search

TDRI
  • 關於TDRI
    • 互動式簡介
    • 功能任務
    • 組織架構
    • 經營團隊
    • 誠信經營
    • TDRI年報
    • 出版刊物
    • 全球夥伴
    • 媒體報導
  • 最新消息
    • 新聞資料
    • 活動展覽
  • 趨勢觀察
    • 人物觀點
    • 趨勢分析
    • 焦點報導
  • 場域服務
    • — 參觀購票 —
    • 營運場域|台灣設計館
    • 營運場域|不只是圖書館
    • 營運場域|設計點
    • 場租服務|創意劇場
    • 場租服務|TDRI 會議室
    • 實境導覽|1F 場域
    • 實境導覽|2F 辦公室
  • 公告
    • 綜合公告
    • 採購案公告
    • 輔導資源
    • 財務資訊
    • 設計名錄
    • IDDI補助
    • COC跨域平台
  • 加入TDRI
    • 人才招募
    • 2023年暑假實習生招募中 ʜᴏᴛ!
    • TDRI 設計志工隊
    • TDRI 場域會員服務
  • 追蹤TDRI
    • TDRI @ Facebook
    • TDRI @ Instagram
    • TDRI @ YouTube
    • TDRI @ LinkedIn
    • TDRI @ Medium
趨勢觀察 / 人物觀點

專訪松菸口網站幕後推手王宗欣:「像閱讀雜誌一樣地瀏覽松菸口吧!」

2018-08-17

分享:

  • Facebook
  • LinkedIn
  • Twitter
  • Pinterest
專訪松菸口網站幕後推手王宗欣:「像閱讀雜誌一樣地瀏覽松菸口吧!」

▲ 松菸口「最新消息」的瀑布流形式。圖片來源:松菸口網站。

前言

「松菸口」網站的迷人之處,在於特殊的瀏覽路徑、細緻的互動視覺效果,以及別具設計感的網頁佈局(layout),其幕後推手就是王宗欣率領的dosomething studio團隊。

為了體現松菸口的品牌精神,網站設計團隊從風格、字體到版式佈局皆經過縝密思考,讓藝術性與可用性達到和諧的共存。 從初期名稱定調,到網站平台的開發,「松菸口」品牌誕生的每一個階段,王宗欣皆參與其中。

本篇專訪除了邀請他聊聊品牌的發展過程、網站設計思維,也請教其多種創作身份的心路歷程。

王宗欣 Wang Tsung Hsin (Cowper)

2000畢業於台北華梵大學美術系,主修中國水墨畫
2008成立多媒體藝術團隊dosomething studio

個人網站
dosomething studio工作室作品集

 

Q:在網站規劃過程中,用什麼角度來延伸品牌精神、Logo色系/結構?

王宗欣(以下簡稱王):一開始是受到方序中的邀請,一起建構品牌印象。從金鐘獎到金馬獎,跟方序中合作了好幾年,他知道我對於數位多媒體比較熟悉,也懂得從品牌的角度導入,因此就找我一起到台灣創意設計中心(後簡稱台創)了解現有場域的規劃與問題點。在了解過後,我們都認為需要再創立一個新的名字來定義這個場域,不是就現有的方式繼續操作。

「松菸口」名稱的由來

王:台創在松菸做了很多很棒的事情,例如台灣設計館是台灣唯一的設計博物館,但提到松菸一般都是想到五連棟倉庫或是松菸誠品。所以跟台創討論的過程中,確定應該要給它(台創服務場域)一個新的名字,以品牌思維來操作,整合台創所管理的這些區域。

發想過程中,出現了「口」這個字,發現不管在口語還是視覺都非常有趣,進行社群調查時也發現「松菸口」有辨識度且尚未被使用過,可以成為網路關鍵字,在多方驗證後就確認品牌名稱為「松菸口」。

Q:松菸口網站的瀏覽路徑相當特別,請談談整體規劃設計的概念。

王:網站規劃的概念為動線、匯聚以及探索空間,將這三個線索轉譯成網站。 

首頁口字型瀏覽路徑,大膽挑戰使用者習慣

原本松菸口場域的動線就是一個口字型的移動路徑,所以設計、文字上面才用「口」這個字,網站首頁也以「口」來轉動它;當我們在首頁點選下一頁或是滑鼠滾輪往下捲動,它是走一個口字型的瀏覽路徑,打破網站習慣的上下瀏覽動作,是一個大膽的挑戰。

圓點溶解特效,象徵人們與松菸口的匯聚

在互動視覺的回饋部分,是運用「溶解」(Dissolve)和「Meta ball」的特效作為視覺上互動的呈現;具體來說,使用者在瀏覽首頁時,滑鼠游標指到之處,會產生一個亮橘色圓球(Meta ball),當游標移動到同色系的色塊時,Meta ball的球體會像液體般溶解到色塊裡,呈現「匯聚」在一起的意象,這個意涵是期望所有來到松菸口的人,都能聚集起來討論設計。

細緻互動設計,網站探索的創新體驗

進入網站內頁,指標觸碰到一般文字時,是產生亮橘色的小圓點,圓點觸碰到有超連結的錨點文字時,會產生半透明的亮橘色光暈。使用者就像利用這個小圓點去探索網站,藉由滑鼠移過文字、色塊,或是點擊網頁零件,在使用過程中出現細緻的小驚喜;透過這些互動效果,我們期待讓使用者感受到這個網站充滿了想像空間,用探索的體驗去記憶松菸口這個品牌。

▲ 立即動手玩!前往松菸口首頁動動滑鼠,試試口字型瀏覽路徑和Meta ball溶解這兩個功能吧!

美麗瀑布流形式,突破資訊整合限制

松菸口是四個品牌的集合,一開始做使用者訪談時,了解到原來台創在管理網站的時候,其實是品牌各自經營,並不是透過統一的美編單位去把所有東西彙整起來,每個品牌想展現資訊的形式可能不盡相同。

為了讓所有管理者上稿時都很輕鬆,不會有管理網站上的負擔,所以我們才提出以「瀑布流」的方式整合網站的方案。不同的banner到網站上,都可以編排成合適的閱讀方式。為了瀑布流,我們寫出一個演算的規則,可以兼容所有比例尺寸不同的圖片,這個邏輯其實是考慮到使用者體驗,以及視覺上面的平衡,同時讓整個網站資訊的呈現方式可以比較活化一點。

Q:這個網站最令dosomething studio團隊驕傲的特色?

像閱讀一本雜誌的松菸口網站

王:dosomething studio在規劃初期,保留了一部分玩性。不過網站的主要功能還是資訊呈現,因此我們設定比例30%是玩,70%是使用者對於網站上手的操作性,我們希望整體是很靈活,像是在閱讀一本雜誌的layout。

超級輕鬆的上稿機制

為了讓松菸口網站的管理群能以直覺的方式上稿,工程師特別客製化編輯系統。過往在後台編排圖文時是比較僵硬的,一個蘿蔔一個坑在做,因此這次在後台針對管理者使用體驗也下了很多功夫。

從一開始文章要怎麼呈現,內部就做過很多次砍掉重練的過程,不希望是很傳統的編排,因此前台的編排形式是採取不規則、錯落的方式,再對應到後台管理者的操作是所見即所得,很直覺化的編輯,那邊要塞什麼就把東西拉進去,讓前、後台的操作者體驗都是可以直接呼應的。

Q:對松菸口的想像?

王:像紐約MOMA美術館會有展覽空間、咖啡廳、設計商店,一個美術館來說它可以包含這麼多事情,因此想像松菸口應該是這樣的一個地方,你一進去可以吃東西、買東西、看展覽,包含設計的一切體驗,都在松菸口。

期待松菸口變成一個生活圈,而網站就形成很重要的溝通環節,透過一個會員帳號結合線上、線下的所有事情,一切都可以透過這個ID不斷的累積,並且這個累積可以轉換成優惠,讓松菸口成為一個讓大家來這邊持續運轉的地方。

Q:從美術到影像執行,再由影像跨足到網站規劃與設計,請跟我們分享不斷跨界的經驗與所做的準備,與中間遇到的挑戰。

從斜槓青年到斜槓中年,還開了一家斜槓公司

我大學唸的是純藝術,快畢業那一年簽約成為動畫作家。大學畢業以後第一份工作是網頁設計,開始學網頁設計介面、程式,約有五年到十年間,一直到2006年Youtube出現了,網路頻寬開始變很快,發現動畫傳播在網路是可行的,於是進入了動態視覺、拍片這一塊;慢慢地,從我的工作歷程中,我做的事情被不同人認識,增加了非常多的抬頭。創立dosomething studio以後,公司其實是我這些經歷的縮影,所以向來很難定義「我」是怎樣的位置。好險最近有多出了一個新的名詞「斜槓」,我是從出社會就開始斜槓,斜槓青年到現在變斜槓中年(笑),斜槓中年還開了一家斜槓公司。

我們公司就是一個斜槓到底的公司,沒有辦法被定位。我們認為資訊和品牌觀念的傳播,不應該只有單一管道,可以透過不同的手段傳遞價值,管道非常多元,沒有界線,這也是我們公司想要去彰顯的一個價值。

斜槓不是壞事,但要把自己最重要的專長磨好,接下來你的斜槓才有意義

現在的年輕人最想做的事情就是「斜槓」,他們其實不滿足於被認定單一個身分,我覺得很多方向的涉略絕對是好的,但一定要先有第一把刀磨出來,就是一定要有第一個專業,在沒有第一個專業之前,其實沒有辦法帶動其他事情。以我們公司來說,是在網頁設計領域被業界認可了,才開始接到拍片的邀約,第一個專業會讓你在跨第二個斜槓的時候變得輕鬆許多。所以我認為斜槓的開始是先把第一個專業做到最好好,第二個斜槓的能力才可以順勢上去。

一定要把自己最重要並能養活自己的專長磨練好,接下來你的斜槓才有意義,不然你只是有很多興趣的業餘愛好者,而不是專家。

延伸閱讀:專訪松菸口品牌識別設計師方序中:「找到與古蹟相處最舒服的模式」

前往 松菸口

松菸口

分享:

  • Facebook
  • LinkedIn
  • Twitter
  • Pinterest

相關文章

「極瑞士SWISS MAX」加碼場:獨立出版的精神領袖 Nieves Zine 不只是圖書館登場

「極瑞士SWISS MAX」加碼場:獨立出版的精神領袖 Nieves Zine 不只是圖書館登場

瑞士設計師Benjamin Sommerholder創立Nieves,專門研究藝術書籍、Zine的出版和推廣。「極瑞士SWISS MAX──瑞士設計展」特邀Nieves於不只是圖書館展出,歡迎大家來感受獨立出版的魅力!

不只是圖書館, 松菸口
瑞士設計展系列講座 ① 瑞⼠藝術書美學 Swiss Nieves Zines

瑞士設計展系列講座 ① 瑞⼠藝術書美學 Swiss Nieves Zines

每翻讀一本Zine,就是一場充滿驚喜的閱讀體驗,共鳴可能發生在任何地方,作品即是創作者本身參與他生活中一部分的風景。本活動邀請長期關注Zine創作的兩位專家:《PAR表演藝術》總編輯江家華以及草字頭創辦人《黃偉倫》,透過多元視角分享Zine背後型塑的個體性特色。

不只是圖書館, 松菸口
極瑞士SWISS MAX:瑞士設計展9月28日台灣設計館登場

極瑞士SWISS MAX:瑞士設計展9月28日台灣設計館登場

今年九月,台灣設計研究院再度攜手「歐洲設計觀察家」龔維德及張軒豪共同合作「極瑞士-瑞士設計展」,將瑞士設計的極致、極狂、極簡、極美、極有趣,帶進你我的視野。

台灣設計館, 松菸口

專訪松菸口品牌識別設計師方序中:「找到與古蹟相處最舒服的模式」
2018年金點設計獎及金點概念設計獎大陸複審精彩落幕 共328件大陸作品榮獲標章晉級決審

發表迴響 取消回覆

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Slider

搜尋本站

  • 關於設研院
  • 全球夥伴
  • TDRI 會員服務
  • 營運場域實境導覽
  • 辦公室實境導覽
選單
  • 關於設研院
  • 全球夥伴
  • TDRI 會員服務
  • 營運場域實境導覽
  • 辦公室實境導覽
  • 新聞資料
  • 活動展覽
  • 焦點報導
  • 趨勢分析
  • 人物觀點
選單
  • 新聞資料
  • 活動展覽
  • 焦點報導
  • 趨勢分析
  • 人物觀點
  • 關於設研院
  • 全球夥伴
  • TDRI 會員服務
  • 營運場域實境導覽
  • 辦公室實境導覽
選單
  • 關於設研院
  • 全球夥伴
  • TDRI 會員服務
  • 營運場域實境導覽
  • 辦公室實境導覽
  • 新聞資料
  • 活動展覽
  • 焦點報導
  • 趨勢分析
  • 人物觀點
選單
  • 新聞資料
  • 活動展覽
  • 焦點報導
  • 趨勢分析
  • 人物觀點
Copyright © Taiwan Design Research Institute. All rights reserved.
  • Juliet by LyraThemes.com