Menu

網站服務項目

設計喃喃【華藝數位——島嶼營業中】

  • 意楨
  • 2024-02-02

整體網站的使用體驗，就像一場遊戲般的有趣！

     

本次協助華藝數位製作一個全新的活動網頁。
因應名稱為「島嶼營業中」，客戶也希望我們製作出島嶼意象的設計。
設計的初衷，是希望能製作出一款有趣又美觀的網頁，所以整體的風格，希望能帶給使用者像在玩遊戲一般的使用體驗。

         
         

首頁視覺

         

首頁的色系以藍色為主，令人聯想到海洋；「島嶼」二字則是做出臺灣島的形狀，並用對比色黃色加以強調島嶼的存在。周遭的建築物分別為車站、書店、柑仔店......等等的主題館，仔細看～有的主題館亮著燈、有的則是還沒點燈；至於這些主題館與內容有甚麼特殊的關聯呢？就讓我們繼續看下去吧！

           
         

桌機版——首頁介紹

         

散佈在島嶼周圍的主題館們，每一棟都是我們苦心繪製出的結晶。 從前期的資料蒐集、中期的草圖繪製、後期的彩圖上色，每一階段都與客戶來回確認，為的是能做出雙方都滿意的視覺。
中間這座「島嶼」的角度也是來來回回調整了許多次呢！還好最後的成果我們都很喜歡。
另外，在互動的部分，使用游標上下左右移動，整體的畫面也會跟隨游標移動喔！

 

可以看到上方主題館的草圖與彩圖還是有些微的不同。
如車站的部分，到彩圖階段覺得若加上火車，整體的感覺會更完整，所以便將火車補上。
酒吧的部分，則是因為造型與書店太像，所以又重新繪製了一款較為圓潤的版本。

         

手機版——首頁介紹

         

為了配合手機的尺寸，所以將主題館以地標的形式呈現。
有些地標是橘黃色的，有些則是藍色的，這是因為有的主題尚未開設，刻意不讓使用者點選而設計的！

 

我們原本設計了A、B兩個版的首頁，最後客戶很乾脆的選擇了A版本。
但其實我私心比較喜歡B版本XD

         

主題館的彈跳視窗

         

整體的網頁互動會以彈跳視窗為主，點選各主題館便會出現彈跳視窗。
因應華藝是電子書的相關公司，故視窗的造型使用打開的書本，這也是客戶提出的需求之一。
為了有手繪插圖的溫暖，所以在書本的外框線上特意使用蠟筆筆刷的效果。
內部也有該主題館的內部插畫點綴，整體的設計也參考常見的遊戲視覺，以第一人稱的視覺角度，更增添身歷其境的感受！
右側的按鈕也特意設計成碰觸就會下壓的鍵盤式設計，在使用上更加清楚哪些按鈕是可以點擊的。

 

手機版的彈跳視窗，為了符合載具的狹長尺寸，所以另外設計了卷軸造型的設計。（請見下圖）

         

計次借閱的彈跳視窗

         

除建築物有彈跳視窗的設計之外，頂端列的計次借閱也有做相同的設計喔！
只不過，外框不是用書本或是卷軸的方式設計啦～
而是使用線圈筆記本的造型去設計，如此也是想要做出兩者的區別。


一開始接觸到這個案子，想到需要繪製這麼大量且精細的插圖，其實還是多少有些不安的。
但有些事情做了才知道其實並沒有這麼困難，也才知道自己的不足之處。
這是一個非常有趣且充滿細節的專案！


若欲瞭解更多，請至正式發佈案例查看，帶我前往

都已經看到這邊了，想必我們的文章一定有幫助到你。
喜歡的話歡迎分享，或前往表單告訴我們你的需求，
樂活會有專業團隊為您解答！

聯絡我們

推薦好文

文章分類

最新文章

熱門文章

熱門標籤

如果文章讓你激盪出點子或疑問，歡迎致電或來信跟我們聊聊唷！

聯絡我們