MING-YU / 2020 PORTFOLIO by Miyu

賴明俞 / 作品集

MING Y U L AI

期許創造獨特之風。面向無限蔚藍之海，猶如打開世界之窗，初來乍到設計之土，也是人心中的表現。設計不只真實呈現，也是人對美的表現；設計不只解決問題，

也是日式美學代表。是從佛教衍生的詞，寧靜、精神的嚮往。不注重物質卻追求，與粗糙簡單的概念。代表不完美、無常，侘寂。

經驗改變了價值觀。即使跌倒在所不惜，再加上好奇心驅使，眷戀上未知的崇景，，

自我介紹

平面設計

專題製作

插圖作品

攝影作品

è&#x2021;ªæ&#x2C6;&#x2018;ä»&#x2039;ç´¹ ã&#x201A;¸ã&#x201A;³ã&#x201A;·ã&#x192;§ã&#x201A;¦ã&#x201A;«ã&#x201A;¤

é&#x2014;&#x153;æ&#x2013;¼ è&#x2021;ªå&#x201A;³ æ&#x160;&#x20AC;è&#x192;½ è&#x2030;ç&#x2026;§ ç¶&#x201C;æ·

賴明俞

@ 臺中科技大學應用日語系

我來自台中，畢業於國立台中科技大學的應用日語系二技部，接觸學習日語的經歷包含五專共七年，就學期間除了也習得英語與基礎貿易知識。興趣是旅遊與繪圖，喜歡用照片、繪畫搭配文字記錄日常生活，也藉機培養自我的觀察力與表達能力。時時秉持好奇心的我，總是樂於學習新的知識。期待著充實自我並投身興趣相關的領域發展，於是開始尋找設計相關的課程展開自主學習，起初接觸網頁設計是在「六角學院」學習，逐漸產生興趣的同時，也受到社團中各位轉職成功的前輩們的啟發，從此才真正下定決心挑戰轉職。

技能

證照

多益英文檢測日本語能力檢定

經歷

介面設計到網頁程式跨平台前端設計暨工程師培訓班

容克光機科技股份有限公司

國立臺中科技大學應用日語系

日本海外實習

協助JASPIC中譯日逐步口譯

平面設計グラフィックデザイン

化妝品專輯封面等角建築街景設計

馬來西亞的雙峰塔曾經是世界最高的大樓，隨後被台灣的101給超越了，但仍是目前世界上最高的雙棟大樓。為記錄下這雄偉的建築，試著用等角透視的手法畫出建築物的插圖。等角透視的畫法不像插畫那般直觀，需要先構想、拆解與分析物件才行，但是完成後的效果很好。很適合運用在活動的海報，或是網站的。

絕望與希望曾經掉進對任何事情都失去熱情的大海，就像是水母在海中漫無目的地飄阿飄，發現越是在意就越陷越深，這名為憂鬱的海洋。

但在黑暗的背後就是光明阿！絕望的反面就是希望，只要還不忘記夢想的藍圖，都還有實現的機會。

專案作品プロジェクトス

民眾技藝補習班名片設計告白咖啡網站設計林聰明沙鍋魚頭網站設計

就業兩年後期望能轉職往設計領域的我，參加勞動局的職前訓練課程，來到民眾技藝展開了為期三個月的學習。學習系列的與期間很開心了解到如何運用可創作的工具，對於設計的概念與原理也有了更進一步的認識。之後我便默默觀察生活周遭的廣告、文宣、手冊等等的編排方式，期望有朝一日能夠親手設計。

橫式名片直式名片

告白咖啡

國道四號底下的告白咖啡，

고백카페

寫在店家設計的明信片上，

Gobaek Cafe

有著韓系咖啡屋的簡約風，店內販售老闆的手沖咖啡，與親手自製的隱藏版甜點，如果有想念的人想說的話，再投入放在桌上的信箱裡，店家就真的會幫你寄出喔！這家店，可以是咖啡廳，可以是名景點，也可以是骨氣勇氣的地方。如果被更多人認識該有多好，於是告白咖啡的網站誕生了。

告白咖啡 Drafts & Wireframe

藉著店家的社群網站，觀察店內風格與貼文，本著設計的初心，描繪出適合的草稿圖，雖然一次也沒有去過。

告白咖啡位於市郊，如果不是透過網路，一般人會很難發現的一家咖啡廳，於是選擇當作此次練習的題材進行規劃。原先在找題材的時候就知道店家無建置網站，於是當確定了主題之後，開始找尋店家有的社群平台。除了臉書與Instagram 之外，所幸有許多人在造訪後打卡或上傳評論留下的足跡，因此在蒐集資料的部分並無遇到太大的問題。風格定義也在瀏覽完資料後就能大致定下，店家的風格是帶韓系的極簡咖啡屋。整理資料過程中，先將店家擁有的資訊（實際情況）記錄下來，不足的部分會在網路上尋找適合的資料再決定（虛擬情境）。架構都大致確定之後，再來就是找符合店家風格的圖片，圖片可說是營造風格很重要的一環，這部分會花比較多時間，除了圖片的風格、角度、色調還有解析度都很重要，也是這次學習到最多的重點！ 21-賴明俞-告白咖啡-網站地圖

這次的企劃由於是第一次，因此花了不少時間在瀏覽網站尋找範本之間摸索，但是相較於快速完成，若能替未來扎下部分的根基也好，相信花點時間是必須的。

區塊

網站地圖項目內容

內容

Header

● ●

ABOUT 關於 MENU 菜單 EVENT 活動

備註

Banner NAVBar ○ 關於 ABOUT ○ 菜單 MENU ○ 小舖 SHOP ○ 情報 NEWS ○ 聯絡 CONTACT ○ FB Link

告白咖啡 GOBAEK CAFE

●

歡迎光臨告白咖啡 ○ 小故事

實際上的告白咖啡： https://www.facebook.com/g obaekcafe/

● ●

風味飲品佐茶小食

●

幫你告白

NOTIFY 公告

● ● ● ●

寵物友善餐飲須知座位說明環境公約

CONTACT 聯絡

● ● ● ● ●

地圖地址電話時間公休

Footer

●

HEADER ● Banner ○ 首圖的色系以淺色為主，網頁body也設為白色 ■ 參考效果-01

■

參考效果-02

○

字體 ■

參考效果-01

○

首圖輪播：三張照片 + 一張LOGO設計圖

告白小舖為虛構項目。

置於navbar的右側，與 fb link一同放在右側 ■ 參考資料-01 ■ 參考效果-01

●

NAVBar

■

參考效果-01

■ ■ ■ ■ ■ ■

關於 ABOUT 菜單 MENU 小舖 SHOP 情報 NEWS 聯絡 CONTACT 參考效果-01

ABOUT 關於 ● 品牌故事：一個曾在這個咖啡店裡告白失敗的男人，看著店外那張貼著的租讓紅紙條。心想著，是怎樣的原因讓自己告白失敗？是這間咖啡店的情調不夠好？還是因為自己的告白方式不對？是她真的不喜歡我？還是這張紅紙條害的！因緣巧合之下，頂了這間咖啡店，開始簡略的重新裝潢。這是自己當老闆的權力之一，把以前看不順眼的地方，重新設計過，開始找店員跟取店名，之前的店名實在沒什麼創意。既然自己在這個地方告白失敗過，開個咖啡店來讓那些曾經跟我有過同樣遭遇的人們，至少讓他們有個好一點的機會。不要跟我以前一樣悲慘，即使不成功，也要讓對方在記憶裡留個美好的回憶。

●

心智圖手稿網站地圖

○

效果：底色為白底，頁面往下滾動時，會固定於頁首

○

文字效果：深灰色、字小、間距大、Hover時文字顏色變淡 ■ 參考效果-01 ■ 參考效果-02

○

Link效果：Share 字樣+ FB的icon (超連結) 置於navbar的右側 ■ 參考效果-01

○

Logo設計：店家的韓文+英文

這回憶是：有個人曾經在這裡跟我表白過！「告白咖啡」這個名字似乎還不錯。 ■ 參考資料-01 告白咖啡標語：把咖啡遞給他，對他說「如果好喝，請跟我交往」，我們店的咖啡很好喝，所以他一定會和你交往，如果被拒絕的話，也請約他來店裡喝杯咖啡。 ■

●

參考資料-01

效果： ○ 文字的背景圖使用層層堆疊的四邊形，呈現紙張零散的效果 ■ 參考效果-01 ○

文字內容與紙張效果置於頁面偏右側，左側空白處放圖或是繪製咖啡小插圖 ■ 參考效果-01

告白咖啡實際上在店家裡有提供明信片，只要寫好並投進店裡的郵筒，店家就會幫你寄出去。這個發想很有特色，如果也能延續到網站上該如何呈現呢？於是在活動專區的地方設計了互動視窗，點擊後只要填寫完成，系統設定就會將訊息寄出。

Primary Color

此次練習的程式除了手寫之外也運用了Bootstrap套件編輯，在寫電腦版（1920*1080）的切版時還算順利，但是當要切換RWD時發現才是挑戰的開始。所幸有些地方使用的是Bootstrap的套件，只要學會運用就可順利切換。手寫的部分可就要在不斷的測試與改寫中度過，特別是圖片。

〈Wireframe〉

嘉義超人氣小吃林聰明沙鍋魚頭創立至今已交接至年輕第三代，傳承的好味道始終未變，不僅深受老顧客們的喜愛，也吸引了許多外地人遠道而來。

瀏覽了林聰明的社群平台，我們發現店家在行銷上的各種嘗試，已逐漸將這份嘉義小吃行銷國際。但官網的介面設計卻遲遲未跟上時代的腳步，與團隊小組討論過後決定嘗試著手改造！望能發揚地方特色。

製作團隊勞動部勞動力發展署中彰投分署 UI介面設計到RWD網頁程式跨平台前端設計暨工程師培訓班

方浩 / 許卜升 / 潘信維 / 賴明俞

協助團隊指導單位：數位方塊有限公司培訓單位：私立民眾技藝短期補習班主辦單位：勞動力發展署中彰投分署

林聰明沙鍋魚頭原始網站改善分析 1

資訊繁雜閱讀不易

宅配專區不夠明顯

社群連結建置不完善

網頁無RWD效果

心智圖

網頁改版執行目標網路的崛起帶動許多網路行銷的商機，認識林聰明之後，希望能透過改建官網，串聯其他社群平台的流量導向宅配訂購系統，以提升了店家的經濟效益。使用者方面，只要搜尋「林聰明沙鍋魚頭」，不僅能對店家有更深的了解，也能快速地知道訂購的流程。如此一來，即便遠在外地的饕客們也能隨時品嘗到這傳承三代的美味。

網站地圖首頁

導覽列

最新消息

● 活動分享 ○ 台灣滷肉飯節等區域性的活動宣傳。

營業時間

沒想到許多客人一吃，都覺得這道手路菜好吃極了，紛紛誇讚想要吃這道菜，奈不住顧客的要求，就乾脆加入這道新菜，開始了砂鍋魚頭的緣份。

(二)林聰明愛木頭-日式建築

社群連結

● 店休公告 ○ 示意圖如右。 ○ 因疫情等狀況有臨時公休的情形會發布的公告。

民國45年，林聰明的父親在文化路夜市上擺小吃攤養家，平時的興趣是釣魚與跳舞，後人談論到林聰明的父親時，常常誇讚他的釣魚功夫。但是釣到太多的魚，就算分送給親朋好友也都吃不完，索性結合平時自己料理的私房菜，拿到自己經營的小吃攤販售。

電話號碼

二、最新消息

● 內文：賣魚頭的由來，起源於林聰明之父 – 林進卿的興趣，釣魚而展現出的一道好料理！（照片攝於民國59年，林聰明本人在攤位上顧店）

連絡方式

海外專訪、報章雜誌、節目採訪

(一)林聰明沙鍋魚頭的由來

分店地址

媒體報導

分頁資訊簡單的圖文排版，權益聲明先放，再加上按鈕連結 GOOGLE表單。

● 短片連結：https://www.facebook.com/OrangeJiu/videos/832463147222555/

交通資訊

●

表單連結與FB 、LINE的icon一起定位在網頁側邊 (使用者可迅速點選訂購按鈕)

● 效果主頁：消息/公告，單純放最新3則標題，加入more按鈕，可以連結到分頁。分頁：與媒體報導設計排版相同。

三、關於我們

自駕路線

●

配合業者：711的統一黑貓宅急便宅配規格：全程低溫冷凍車-18℃配送宅配範圍：全省，含外島訂購方式： ○ 電話預定 ○ 官網下單服務專線： ○ (TEL) 05-2270-661 ○ (FAX) 05-2280-537 ○ (LINE) 0977117318 訂購按鈕 (前往表單連結)

一、主頁(Index)

大眾運輸

權益聲明 ○ 呼籲消費者勿購買未經授權的產宅配相關 ○ 年菜、宅配的訂購資訊

主色調：海軍藍 + 白 + 黃 + (木頭)

● Banner ○ 形象照片 ○ 效果：形象4張圖輪播 ● Navbar ○ 最新消息 ○ 關於我們 ○ 招牌美食 ○ 宅配服務 ○ 媒體報導 ○ 回到首頁上方的按鈕 ○ 呈現內容 ■ Logo ■ 店名：林聰明沙鍋魚頭 ■ 標語： ● 嘉義60年道地的知名傳統小吃。 ● 聰明傳家燴，在地好滋味。 ■ 起源：1953

聯絡資訊

報導文章

● ●

下單頁面

宅配服務 Delivery Service

● ● ● ●

注意事項

在主頁可以放簡介，製作一個分頁特別裝此內容。分頁，直接做一頁式的方法，可做parallax，或是簡單的圖文排版。

訂購專區

顯示3則於主頁，再以more按鈕連接至頁面

短片連結林聰明沙鍋魚頭的由來林聰明愛木頭–日式建築老街二通情，劃時代的中正路

備註

﹒食安聲明：歸類在Footer內放小標，食安聲明、法律顧問，點擊後跳分頁。

媒體報導

網站地圖項目內容

● ● ● ●

Navbar做左側邊。 Banner

沙鍋魚頭

● ● ●

Navbar ○ FB Banner ○ LOGO、店名、標語、起源 (1953@嘉義) 最新消息/最新公告關於我們招牌美食(Gourmet) ○ 菜單導覽 ○ 招牌美食 ■ 沙鍋魚頭 ■ 冬菜蝦仁蛋 ■ 火雞肉飯 ■ 阿菁健康涼菜宅配服務媒體報導 Footer ○ 食安聲明 ■ SGS商品檢驗報告 ■ SGS商品營養標示 ■ 行政院衛生局食品安全管制證書 ■ 法律顧問 ○ 聯絡資訊 ■ 營業時間 ● 中午12點 - 晚上10點 ● 不定時公休，請注意官網與臉書訊息 ■ 服務專線 ● 電話 ● 傳真 ■ 社群連結 ● 臉書、LINE資訊 ○ 停車資訊 ■ 有特約/無特約 ■ 地址 ● 中正總店 ● 光華分店 ● (聲明) 僅此二家，別無分店 ■ Google 地圖

宅配服務特色美食

內容

● ● ●

火雞肉飯

網站地圖架構 ● ●

● ●

歷史故事

○ ○

店休公告 ○ 防疫期間，店內消毒暫停營業活動分享 ○ 全台小吃活動的宣傳

關於我們 About

最新消息 News

冬菜蝦仁

特色涼菜

臉書

吃魚變聰明隊長：方浩隊員：許卜升、潘信維、賴明俞

區塊

簡介

消息內文

快速訂購

分頁連結

社群連結 IG

吃魚變聰明-林聰明沙鍋魚頭-網站地圖 Github網址 https://dawn-syu.github.io/team/html/index

頁首 Header

關於我們

成就現今店的契機，於民國94年中正路商店造街活動，翻修路面，數個月的工程，林聰明趁此時，決心改造自己的店鋪，因沒有經驗所以改造時間也比一般工程耗時更久，整修老建築及改造內部是為了打造心中的綠建築。 ○ 「作自己的設計師」首席設計師是林聰明老闆，創意美學顧問是林太太與女兒們，彼此共同的意念是要保留老建築的美，堅持使用檜木，一木一木的木頭卡榫慢慢修補，慢工出細活的精神，才得以保存這百年的建築。 ○ 「自己的喜歡也帶給客人」林聰明常說裝修過程比生孩子還辛苦，也因修改而意見紛歧，與其說房子是用蓋的,更貼切的形容是「吵」出來的。這些過程真的很不容易。裝修完的店面，成為全家人心中的驕傲，辛苦是值得的。歡迎蒞臨本店,貼近林家的建築用心，享受時空下的建築美。

(三)老街二通情，劃時代的中正路 ● 【起灶處】日據時代，中山路習稱大通，即日語大街意思，中正路則稱「二通」。當時二通的振山眼科診所由頗負盛名的劉傳來醫師經營，劉院長是林聰明創業時期的恩人，且知道林聰明的創業困難，加上大女兒剛出生，讓一家人在診所的騎樓下擺設路邊攤，且不收店租達數十年，使林聰明一家人，永遠感恩大德。 ● 效果主頁：放CF廣告影片 + 簡介文字分頁：直接做一頁式的方法，可做parallax，或是簡單的圖文排版。

四、招牌美食 ● 菜單總覽：中文 & 台語版本 ○ 圖片來源：

http://www.smartfish.com.tw/ploy/ploy_detail.asp?id=1841&ClassID=627

● 內文：中正總店鋪為歷史悠久的傳統日式建築（約90年歷史），經林老闆自己巧思改造，注入了更強的生命力，展現出木頭之美，讓顧客彷彿置身於森林裡享受著淡淡的檜木香，品嚐著60年道地的傳統小吃。 ○ 「為何會保有老建築？」嘉義－為檜木的故鄉。林聰明老闆對於家鄉的濃厚情誼，同時也萌生熱愛檜木的心，因此，常與家人出國時，除了欣賞不同的建築物外，對於木建築，更有獨特的情感，因此決定打造ㄧ個自己喜愛的家。 ○ 「加入自己的創意，親身設計參與裝潢重修」

這次專題負責的部分也包含分頁設計，設計理念是希望能有個簡易明瞭的使用者經驗，因此內容大多往中間靠齊，標題也以大字呈現。頁面上下兩端的橫幅，捨去死板的四角形，其中一邊改以波紋，再加上波紋線條做裝飾，呈現從容不迫的悠閒感。 1. 最新消息與媒體報導以條列式呈現標題，若想更進一步了解可直接點選。 2. 宅配的頁面於上方附上示意小圖以提升操作簡易度，使用者可方便下單。 3. 關於我們的部分則採部落格的方式，就像是在閱讀文章往下滑動即可。

〈最新消息〉

〈宅配服務〉

〈關於我們〉

配色的設計依照原本店家使用的藏青藍與芥茉黃兩色，但在官網與社群平台

上呈現的這兩色似乎沒有統一，因此在設計上選擇了較飽和與明亮的這兩個

色號作為主色調。最新消息與媒體報導的篇幅不一，因此採「Tab分頁」點擊後即在原頁面上展開，看完再點擊一次即收合的方式閱讀，如此一來使用者不需反覆切換頁面，浪費了重新整理的時間。

〈媒體報導〉

〈媒體報導展開〉

〈宅配服務〉

看似簡單的設計，但應用到不同裝置使用時，文字的大小、間距、行距該如何拿捏就值得思考。設計理念希望使用者在閱覽的過程是感到舒適的，因此這部分與接下來負責程式的同學花較多時間討論。有句話「你必須非常努力，才能看起來豪不費力」，或許也可以運用在這個地方吧！

導覽列的設計理念一方面是讓熟客們可以進到官網後直接就能找到訂購的地方，因此加重了立即訂購的版面比例。另一方面是為了讓新客人們能快速掌握操作網站，所以將其他重要資訊也都添加在導覽列。縮小後的導覽列，則是僅放上重要icon，以免遮蔽內頁。

最新消息關於我們線上訂購