【互動網頁設計網聚】版塊的線上建築-版塊設計總監李明

2022年04月09日舉辦的【互動網頁設計】網聚,邀請到許多夥伴來分享,從互動式生成藝術藝術、NFT 介紹、虛擬設計展覽到聲音藝術和新媒體,多樣化的分享串起此次舉辦的【互動網頁設計】網聚,歡迎有興趣的朋友下一次可以來參與唷!本次分享人之一,版塊設計總監李明,此次主要分享兩個方法及五個專案,藉由總監的不同角度,來一起了解互動網頁設計的各種面向吧!

【版塊の線上建築】/版塊設計總監:李明

版塊設計總監:李明

李明畢業於實踐大學媒體傳達學系,他從學習動畫接觸到設計,再發展到現在的網頁,是版塊設計的作品多以動畫作為主要呈現風格的原因。他從 2010 年進入產業,至今將近 12 年的時間,於 2015 年時創立版塊設計。目前團隊人數 20 人以上並執行超過 200 個專案。公司目前業務以品牌識別設計和網站設計開發為主,擅長以互動網頁作為載體傳達品牌的精神和資訊。與前面講者稍有不同的是,板塊設計是先由品牌轉換成視覺,再從視覺轉換成設計與互動,達到一個網站所要傳遞的目的與樣貌。

重點專案介紹

高雄流行音樂中心

使用 3D 模型技術將場館呈現在網站上,希望藉此吸引外縣市人參觀當時臺灣第一座流行音樂場館。藉由鏡頭移轉細節,更有置身於場景內的效果。

高雄流行音樂中心官方網站(圖片擷取自版塊設計

放視大賞

與三頁文團隊共同執行的2021放視大賞專案,以主視覺做相關設計發想、動態海報視覺乃至於網站等。

2021年放視大賞主視覺(圖片擷取自 Shopping Design 報導

臺灣設計研究中心

使用臺灣文化策進研究院計延伸,以曲面方式呈現線上展覽,將展品環繞在視覺當中進行觀看和互動。 (相關報導:【2020 創意內容大會│Re: 眾感未來(Human Touch – A Closer Future)】Taiwan Creative Content Fest

Politics Design 政治設計

版塊設計的內部專案。團隊對於社會議題抱持著有趣的心態執行,希望能引起大眾對於公共議題的重視。

Politics Design 政治設計視覺(圖片擷取自版塊設計

實踐大學入學服務中心

實踐大學入學服務中心視覺(圖片擷取自版塊設計

遊戲橘子 -GAMA 25周年線上展

遊戲橘子 -GAMA 25周年線上展視覺(圖片擷取自版塊設計

與前面講者古健樺所分享的 LadyBug 專案概念相似,但呈現方法更加視覺化。

金曲獎GMA29 – 活動網站

金曲獎GMA29 – 活動網站視覺(圖片擷取自版塊設計

多元的客戶類型

除了上述多方面專案外,版塊設計的客戶從捷安特、實踐大學到可不可熟成紅茶官網,跨足多項領域。數位設計裡的規劃、設計與整合,到網站介面設計、前端後端程式開發和品牌視覺設計,還有許多延伸出來如攝影、動態包裝、線上展覽、ARVR、3D 或是品牌識別等等的小細節都是版塊設計執行的項目。

版塊設計重點客戶介紹(擷取自直播影片

版塊自己的官網又是如何設計的呢?

他們以地圖概念進行設計,從最外層衛星地圖,到街區景象,最後進到電腦螢幕,表達版塊設計整體一條路的概念。

版塊設計官網(圖片擷取自版塊設計

動態 SOP 與專案經驗

網站動態規則,從互動、設計到生成式藝術,要如何轉換成商業價值呢?其實在一般的網站,使用上與網頁可以進行互動的階段非常多,李明總監在這邊將其觀察到的部分進行 A 到 K 的設計規劃,形成規則 SOP。(延伸閱讀:動態特效網站規則 SOP

從載入動態到離場畫面都是需要注意的點,但如果全部進行對於效能上可能不是這麼平衡,所以李明總監建議著重或是以優先完成在 A、C、D、F、G、H 這六項上為目標,讓網站呈現更有魅力與互動性。

網站動態規則 SOP (圖片擷取自動態特效網站規則 SOP

李明也在講座分享中給上圖六個階段提出建議,像是從網頁 Loading 到進入一個完整頁面,這個載入環節的進場動態,不論是以文字或圖像呈現,都能讓網站細節和品牌視覺的延伸感有所加分。進入網站頁面後,第一個主要呈現的即為代表動態。而就版塊設計的作品舉例,大多皆會在代表動態當中呈現具有高強度視覺印象的圖像動畫,像是前面介紹的高雄流行音樂中心或是文策院專案;或是將頁面做移動時的滾動動態,不單單以平面化圖像呈現,而是經由滑鼠滾動,給予不同的反饋,傳達更多的資訊層級;以及使用游標動態傳遞給使用者如主動提醒般的作用。除去以上幾點必要的執行動作,轉場、持續、點擊、離場或是設備等等,以上動態在執行後會使整個網站體驗更加完整。依據不同的客戶、專案性質,甚至是網站使用情境或架構還有自己本身的技術含量,綜合評估後決定需要編輯哪些動態到網站上面。

接下來,李明以自身經營的網站趨勢社團經歷,與觀眾分享網站觀察上的 11 個重點,目的是在提供不同的觀察角度,不論是網站或是任何的設計作品,我們都能使用這 11 個觀點去練習欣賞或是分享給其他人不一樣的觀點。

  1. 了解網站在幹嘛?
    網站本身可能是要賣東西?是推廣活動?或者是線上展覽?
  2. 主動態是什麼?
    當觀者在關掉網站後,腦中會浮現對網站第一個印象的事物。
  3. 動態 SOP 分別是什麼?
    11 個不同的網站動態規則 SOP 是如何執行的呢?
  4. 可能採用什麼技術?
    從動態到整體設計是以什麼技術去執行,並且更進一步思考,這份技術本身可以被使用在何項專案上。
  5. 版面切版方式?
    觀察切版目前是否還有再創新的設計
  6. 網站突破點?
    例如:一般在執行文章頁面上下篇轉換時,以直接轉換最為常見。但,當你在換期間的三秒內,跳出具有解釋下篇涵義的圖片時,這就呈現了其網站的突破點。
  7. 品牌延伸到網站的設計元素
    不只動態技術,設計的含量也要加入思考。如何藉由網站持續傳遞品牌特質,可能是使用具標誌性的圖片,或是顏色上是否只使用了品牌主色,輔助色上面的配比又是如何呢?
  8. 缺點是什麼?
    將缺點提出來,並加以思考如果是自己本身在執行此專案的話,會如何修正缺點。
  9. 手機版做得如何?
    現代人在手機上面的使用遠遠大於電腦,因此手機版面設計顯得比以往更加重要。一般可能就會以資訊傳遞為主,但某些網站能將電腦版網站無痛轉移至手機版,此類的範例即可以馬上思考學習。
  10. 聯想到什麼設計作品?
    在專案與專案間發現類似或是元素擷取的部分,這樣的聯想與記憶幫助了腦中資料庫的建立。
  11. 如果是我來做的話會怎麼做?
    在閱覽完一個專案後,不妨開始思考如過是自己設計將會如何執行。

參考案例介紹

圖片擷取自網站

一開始進入網頁時,發現中間透明棋子會隨著滑鼠滾動而改變,誤以為中間的透明反光也會跟著變化,後來發現中間棋子只是單純的圖像呈現。這樣翻轉概念的設計和切版有許多跟平常不同的地方,連手機版也是無痛轉移。嘗試套入上述 11 點做自我問答,那這份專案如果是自己執行的話,有哪部分認為能再改進呢?棋子是否能轉換成其他方式的動態,或是能不能再更進一步的資訊分層?

圖片擷取自網站
圖片擷取自直播影片

一進入網站,在眼前呈現的便引人思考,它是如何設計出如此動畫卡通的風格呢?3D 地球上的點按動態是如何執行的呢?如此的進行探討練習,對於設計也將有一定幫助。

版塊設計專案介紹與執行流程分享

可不可熟成紅茶

可不可熟成紅茶在視覺傳達的全面性非常完整,網站動態以簡單的弧形視差效果呈現。整體專案從網站想要呈現的目的、品牌名背後呈現概念了解、理解客戶需求以及運用客戶品牌現有資源,為最一開始所需要知道的資訊。可不可熟成紅茶的特色之一為全台不同店家擁有不同的專屬店卡,店卡的設計特色以版畫和復古為主。「將世界各地的好茶,飄洋過海傳遞給你。」是品牌想要強調的核心概念,結合上述品牌特點,與客戶品牌設計師共同構想了網站主視覺的運茶船。

專案流程如下:運用品牌現有的資源、理解網站想要達成的目標,透過 CIS 的 MI(Mind Identity 概念)、 VI(Visual Identity 視覺)、 BI(Behavior Identity 操作)去思考問題。客戶在 MI 上想強調手搖杯精緻化、 VI 將品牌形象延續與獨樹一格的風範、 BI 能以易用性為主,接下來,為列出專案關鍵字。 Cutty Shark 、冒險、手搖杯、水面、側視和茶等等組成設計發想來源,而實際的設計圖像也看得出此類小巧思,像是網站主視覺其實是浮在手搖杯水面的船,希望這艘運茶船能夠乘風破浪將茶運給你喝。再來是主件、顏色與字體設定,以及綜合上述來完成整體樣貌。整體規劃流程以及經由觀察角度可以發現,設計一個網站的動態不需要每一步都完整做到也可以極具吸引力,只要將想法完整呈現、氛圍適度掌握,思考如何才是對此份專案最有利的規劃,就能形成一個好的成果。

可不可熟成紅茶視覺(圖片擷取自版塊設計

遊戲橘子 -GAMA 25周年線上展

遊戲橘子在2020年的合作專案,進行25週年線上展覽,回顧遊戲橘子經歷的歲月與不同遊戲的開發。也因此呈現上,埋設了許多以 Windows95 的特殊視窗操作,加上結合品牌與小遊戲的巧思。流程與上個專案雷同,顏色、字型到轉換遊戲橘子本身自有的 Icon, 與設計了許多彩蛋在網站體驗上,使整體更加活潑也貼近品牌舉行此線上展覽的目的。

遊戲橘子 -GAMA 25周年線上展視覺(圖片擷取自版塊設計

高雄流行音樂中心官方網站

在高雄流行藝術中心專案中,使用到 JL Design 品牌設計,發想各項 Icon 與進行3D 場館建置。

高雄流行音樂中心官方網站(圖片擷取自版塊設計

高雄流行音樂中心官方網站

整體以「港灣」為發想來源,像是首頁的進場動態就結合滑鼠按壓的時間長度與加速音波的呈現,或是除了首頁外,活動快訊等頁面也加進波型及小泡泡等小彩蛋。希望藉由這些細節,讓觀者在體驗上能感受到更多高雄流行音樂中心想要傳達的概念。

高雄流行音樂中心官方網站(圖片擷取自版塊設計

TDRI 台灣設計研究院網站專案

專案中,主要使用滾動動態與持續動態進行,以台灣設計研究院 Logo 裡的兩顆眼睛進行網站貫穿。根據品牌形象、點線圖片以及想要傳遞的政策想法做設計延伸,主要強調台灣過去與現在的政策是如何對接國外及擴散。在單頁式的網站中,也隱藏許多體驗性小彩蛋,使用滾動動態和數位體驗行為營造趣味性。

TDRI 台灣設計研究院網站專案(圖片擷取自版塊設計

Politics Design 政治設計

此為公司內部自行設計之專案,目的為蒐集台灣至今,與選舉相關的設計並希望引起民眾對選舉的注意。將原本的問卷調查型式轉換成類聊天室的互動,版塊丟出問題,兩位候選人政見描述以及互動者的回答,讓互動者在做完問答之後可以實際體會到,自己期望的理念與欲投的候選人是否相同。

Politics Design 政治設計視覺
(圖片擷取自版塊設計

網站趨勢

網站趨勢 WebCRACK 是李明總監經營的社團,主要分享現今網站趨勢,以及網站上的設計和技術分享,近期也有新手網頁設計師友善的圖文教學。最後,如果對網站設計有興趣並想增進能力的同學,講師在 HaHow 也有開設課程,深入了解如何將品牌轉換成網站、設計師與工程師之間的溝通、動態回推設計以及諸多動態與網站結合的教學。

版塊設計在 HaHow 上開設的課程(圖片截圖自 HaHow

閱讀完文章後,對於互動式網頁感興趣嗎?歡迎一同追蹤李明總監所開設的網站趨勢社團,或是加入動畫互動網頁特效入門(JS/CANVAS)互動藝術程式創作入門課程開始學習吧!還有不要忘了追蹤老闆 Twitter 和訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道讓學習不間斷!

此篇直播筆記由幫手熊柑協助整理

PHP Code Snippets Powered By : XYZScripts.com