瑪雅網頁設計LOGO

用細膩手感畫出暖心的地方特色,手繪彩繪,插畫網站設計作品

東海大學-大肚山地方知識插畫式網站設計平台

用細膩手感畫出暖心的地方特色,手繪彩繪,插畫網站設計作品

這個作品是瑪雅網頁設計公司-以客製化插畫網站為基礎精心製作的平台


我來自大肚山‧大肚山地方知識平台」插畫網頁設計與網站製作是由-東海大學USR計畫「大肚山地方教育創生」於110年創建, 目的是保存、推廣及加值大肚山社區在地文化,東海大學-大肚山地方知識平台,插畫式網站設計,本網站整個設計交由瑪雅網頁設計公司執行,其中為凸顯地方性的特色,瑪雅設計一整套的屬於網站專用的手繪插畫專用圖片,以動人的感觸點為設計目標。

地方知識平台主要重點 : 宣傳地方特色、產業特色、人文風情、歷史記憶、職人情報、文化的傳承與發展。

東海大學USR攜手瑪雅網頁設計,以細膩手繪彩繪,生動描繪u3大肚山地方特色,展現社區蓬勃的生命力與鮮活的文化底蘊,在這過程中,一群熱衷於在當地創造正向改變的教授希望幫助學子與家鄉建立更深入的聯繫,讓地方特色印象深刻,傳承當地生活記憶。網頁設計的成功體現在其所受歡迎程度-有助於凸顯插圖的力量,以及獨特風格平台製作。

因此,製作地方型知識型網站還需要額外豐富的地域創生知識,才以過去生活畫面提供地方靈感再進行插畫與網站功能開發,以確保網站內容符合需求,這也是為什麼我們喜歡與客戶學習,這個過程加深了我們對一個地方行動的了解,細心的去打造這個特別用插畫開發的網站。

以下我們將這個插畫網頁設計完成的一些細節與過程,做了一些介紹

在大肚山的平台上眺望台中海線景色


設計團隊與東海大學的團隊一大早便一同來到大肚山,面向東西兩側由高點去觀察整個景緻,透過地勢與地理環境的介紹,我們大概可以了解到大肚山整體的外觀,西側可以看到鯉魚狀的山型與走勢,綿延至水平線,最遠可以看到台中海線的風力發電車與夕陽,也是網站的主視覺第一印象。而從大肚山的東側則可以看到台中市中心的整個夜景,但只有觀察地勢其實對大肚山的初步印象還不夠強烈。

文化設計與田野調查相互借鑒|激發新的視角

我來自大肚山-土角厝建築


透過教授講解田野調查的細節成果,我們也耐心蒐集可以應用在設計與插畫上的素材,進行文化設計踏查,比如針對建築、材質、以前居住氛圍的部分,思考著當下這些懷舊的記憶,紅土、藍色屋頂的土角厝、煙囪、古井取水、地瓜、黃牛、信仰...等等。

田野調查 : 直接進入研究現場,透過觀察、訪談、參與等方式,收集第一手的資料。田野調查的目的是為了深入理解某種文化或社會現象,而文化設計踏查的目的是為了收集文化素材,為文化設計提供靈感。

我來自大肚山-大肚山早期意象


文化色彩凸顯網站視覺風格,整體配色以暖色調為主,放大一些在地獨有的感受,透過色彩的媒介去聯想某些畫面 : 紅土、地瓜、土角厝。台灣在地的文化色彩其實無所不在,每個人對色彩的喜好也不相同,在進行插畫設計時,仔細的配色,並像繪本一樣豐富,可以發現裡面也有不少藍色呼應著時間與畫面動線。

我來自大肚山-文化色彩採集


有了色彩與材質,但我們還在尋找一些現在保存的歷史痕跡。

我來自大肚山-遺跡探索


房屋內外側經歲月與修補的痕跡,廚房內的煙囪雖然破舊,卻充滿著落日時回家的景象,望向海邊是不是煙囪正在冒著煙,有人在等你回家呢? 呼應了該計劃的名稱『我來自大肚山』的核心意義。

我來自大肚山-在地產業


雖然現在傳統產業逐漸蕭條,還是有一些在地人保留著這些文化,舊時住民用牛車或人力車載運山上雜糧、花生、地瓜等...至茄投換取米糧,我們沿途發現不少居民還有在種植紅土地瓜,東海大學的團隊認為除了景觀與文化以外,在地人也很關心在地產業與教育,這些我們都想呈現在主畫面中,於是需要從豐富的資料中汲取一些特色,分成了三個時間去表現,傍晚-夜晚-早晨,其實也隱喻了期望(文化傳承-守望保護-新的活力),每張圖都有豐富的生命力,呈現出在地人渴望保護的寶貴寶藏。

設計目標

用最細膩的手感繪製出地方特色風貌
以插畫設計完成製作,是一個設計獨具風格的網站。

讓我們一起欣賞這個網站設計成果 - 我來自大肚山‧大肚山地方知識平台 → https://dadu3.thu.edu.tw/

東海大學我來自大肚山-視覺banner圖


網站需要插畫繪製會很快嗎? 由插畫師繪製都需要一段時間進行,即包含設計踏查-構想-設計討論等,但其實因為可以與網頁設計同步進行,只要不討論太久或決定不了風格,其實不太會影響整體製作時程。 每位設計師都有不同感知,去理解並詮釋人們與環境的想法、感受與行為,網站製作完畢上線後,東海大學後續也陸續請在地小朋友畫出自己的家鄉、家鄉的色彩...等,持續拓展無窮的想像力。

全站插畫式的網頁設計項目:

  • 獨特風格的手繪、彩繪、插畫設計 : 透過設計師團隊與教授實地考察,深入了解其地域特色、在地故事與文化背景,取用適當的文化色彩,並以手稿方式討論後續構圖與風格調整,最終呈現出完整的獨家插畫設計。
  • 數位化插畫 : 極其手感的插畫很難使用數位工具放大,我們將其盡可能的數位化放大,並使其能應用在展場背板。
  • 搭配巧思以小動畫展示 : 在平台首頁隨處可見的小動畫,是以逐格方式繪製而成,精細的調整保留可能引起共鳴的感受,目標是彌合想像與現實之間的差距,我們密切關注當地的「人-環境」的相互作用。
  • 手感文字的設計 : 手寫的字體,靈感來自烤地瓜桶上的字體,透過細緻的描繪書法的過程,像是拾起一些生活中曾經有過的片段,再次呈現到您的眼前。
  • 插畫網頁設計也需要RWD化 : 只要是需要手機也能瀏覽的網站,都必須要有RWD響應式的設計,這是因為以前技術還沒跟上智慧型手機時,網站大多是設計給電腦使用, 用手機看就會過小或內容被裁切,整體上不利於閱讀,因此RWD化這是目前網頁製作上非常重要的技術,所以針對要適應RWD網站的呈現,我們在插畫上也設計了不同的尺寸小,以配合瀏覽者使用。
  • 客製化程式設計 : 校方希望能更友善在地職人與教師的搜尋與使用,並且討論出許多客製化的設定,因此在程式設計上也是頗具巧思,也因校方對使用流程有某種程度的了解與想像力,幫助了我們在UX設計上相對更精確。