Ya-Li Lee Portfolio / Graphic design

Page 1


Education

2018 畢業

國立台灣科技大學 設計系 - 工業設計組

2011

新竹高工 室內空間設計科

2014

Work experience

2020 2019

2018 2019

2017

艾木實業有限公司 品牌視覺設計師 拉給集有限公司 平面設計師 / 攝影師 北京花海閣婚禮策劃公司 婚禮策劃 / 平面設計實習生


04

Brand visual design

16

Sticker

18

UI design

30

Picture book

34

Poster design

36

Wedding design

44

Case


ABOUT ME

Involve

UI Design Graphic Design Logo Design Furniture Design User-friendly Design Medical product Design Toy Design Interior Design Activity

2018 台科北科雲科三校聯合畢業展 2018 台灣科大設計系畢業展 2017 傑青會北京暑期實習活動 2016 台科電研社講師 - 會聲會影入門 2016 工研院創新物聯網產品分享會 2016 醒著做夢設計營 2015 說來話長設計營 2015 金歌盃 活動長 第九屆宏碁數位創作營 遊藝七十畫展 參展 竹工大眾傳播社 社長 竹工竹北竹東三校聯合影展 Award

第六屆全國高中職聯合影展 佳作 第九屆宏碁數位創作獎 佳作 第十屆宏碁數位創作獎 新人獎 2013 全國圖畫書創作獎 入選

Case

南科 AI_ROBOT 自造基地 CIS 設計 花海閣企劃經理名片設計 金美國小邀請函 石門國中特色學校成果冊 昌福國小特色學校成果冊 瑞柑國小特色學校成果冊 忠孝國小特色學校成果冊 金美國小特色學校成果冊 東安國小 105 性別平等教育手冊 東安國小飛行護照設計 東安國小集點小獎狀設計 東安國小解說牌校園特色解說牌 6 張 東安國小卓越方案手冊編排 東安國小聲動全世界解說牌 15 張 東安國小導覽摺頁設計 東安國小獎狀設計 東安國小信封袋設計 東安國小閱讀護照設計 東安國小食農教育 _10 張成果海報 東安國小大型掛報 東安國小 104 性別平等教育手冊 東安國小 IEYI 展版設計 大觀國中英語情境教室外牆彩繪 東安國小校刊 _ 東安報世界第四期 東安國小校刊 _ 東安報世界第六期 東安國小東安世界城導覽牌 75 張 東安品格牆教學看板 12 面 東安國小潔牙海報設計 東安國小 103 環境教育成果冊編排 東安國小環遊世界導覽學習手冊編排 寶山淨水廠展示導覽牆



4

brand visual design

Elos Skateboarding Tutorial Elos skateboard tutorial for beginner or experienced 2020


5

GIF 動畫 透過清晰線條的插畫,取代以往真人拍攝的錄像, 能夠清楚呈現難以拍攝的視角,以最易讀的圖像 幫助用戶學習。

分解動作 以動畫為主,靜態分解動作為輔,清楚地將每個 動作細節解釋清楚,包括重心位置、對齊輔助點、 先後順序等。

常見錯誤 當看完動畫也依照分解指示學習後,為避免部分 用戶在姿勢上有小錯誤卻難以察覺,於每個單元 後段提供常見錯誤圖示,幫助用戶除了學習正確 動作以外也能確實排錯。

Q&A 單元最後皆會提供 Q&A 連結,協助並整理解答教 程中未被留意到的用戶疑慮,也提供使用族群一 個互相交流的空間。

Before

After


6

brand visual design

Elos Illustration Design Skateboarding instruction design (regular/goofy) 2019

R L L

R

R

L R

L


7

L R R

L

L

R

R L


8

brand visual design

Before

經過分析動作的角度、分鏡以及適 合的畫風後,將其運用在產品說明 書上,取代舊版以照片呈現的模式, 並重新排版,印刷中英日三種版本, 提升客戶開箱體驗評分。 After


9

L R


10

brand visual design


11

Luggage Women's Fashion On-line Merchandising Co. 2019



13



15

Luggage Mascot Women's Fashion On-line Merchandising Co. 2018

Hello!


16

sticker design

Dino Line sticker design 2018

呆狐 Dino 是一隻頭腦簡單的狐狸,情緒總是顯露 在臉上,時常因為衝動犯錯,讓自己陷入尷尬的 局面。但幸運的 Dino 仍然樂觀地生活著,並且順 利地渡過每一次的危機。


17


18

UI design

TIGERDADA AR Installation art guide system 2017

TIGERDADA 是一款以台灣科大校園裝置藝術為對 象的藝文導覽 APP,旨在幫助新生或外賓透過與 藝術品的 AR 互動更加熟悉校園,並期許此導覽概 念能運用至動物園或展演等地方。 清華大學 李庠 李軒任 謝瑞璟 邱博蔚 台灣科大 陳思羽 共同製作 VID Lab 授權協作


19

TIGERDADA 的名稱靈感來源是台灣科大吉祥物 Tiger Duck,Tiger Duck 諧音台科大,由一隻老虎和一隻鴨子組成,是台灣科大極具代 表性的公仔。我們與原設計者取得授權,讓其成為 AR 互動導覽系 統的故事主角,帶領使用者進入台科大校園與周遭的藝文品互動。 此 導 覽 系 統 的 使 用 者 會 以 腳 步 的 圖 案 出 現 在 APP 上, 而 這 也 是 DADA 這個名詞的由來,象徵噠噠的腳步聲;而另一個意思為「大大」 意指使用者用過這個導覽系統之後,便會成為非常了解台科校園的 大大。


20

UI design

R255 G255 B255 C0 M0 Y0 K0

R35 G24 B21 C0 M0 Y0 K100

R245 G231 B53 C7 M4 Y84 K0

R191 G169 B21 C31 M31 Y98 K0

R50 G154 B198 C73 M23 Y12 K0

R30 G93 B107 C88 M60 Y52 K7


21

TIGERDADA 合作案裡我主要負責整體視覺和介面設計, 與夥伴共同擬定好文案和名稱之後便開始一系列的素材 產出,讓原先並非視覺傳達設計出生的我,積極收集大 量資料參考,包括台科大校園色彩研究、介面設計規格、 文 字 大 小 編 排 等, 最 後 才 產 出 最 適 合 TIGERDADA 的 LOGO 及主要視覺圖像。

Tiger/Yellow

經過大數據的問卷調查,86% 的台灣科大學生認為「藍 色」是最直覺的校園代表色,我們便選定以水藍作為基 底色調繪製地圖,並且將黃色作為次色調,源自於 Tiger 和 Duck 在大眾心中都有偏暖色調、橘黃色的印象色, 進而定下 LOGO 的配色。 Taiwan Tech Logo/Blue


22

UI design

TIGERDADA 合 作 案 裡 我 主 要 負責整體視覺和介面設計,與 夥伴共同擬定好文案和名稱之 後便開始一系列的素材產出, 讓原先並非視覺傳達設計出 生 的 我, 積 極 收 集 大 量 資 料 參考,包括台科大校園色彩研 究、介面設計規格、文字大小 編 排 等, 最 後 才 產 出 最 適 合 TIGERDADA 的 LOGO 及 主 要 視覺圖像。


23

精誠 獲得鬍子

水立方 獲得板手

飛躍的時代 獲得尾巴

室內種子 獲得頭髮

愛在大地 獲得腳掌

室外種子 獲得髮飾

生命之樹 獲得書本

室外種子 獲得腳掌

透過與藝文品互動破關後可以獲得吉祥物遺失的配 件。台灣科大校園內共有八件裝置藝術,玩家從收集 及積分排名產生動力,APP 也會順應季節與節日推出 新的互動與資訊,並且將積分獎勵與校園商家合作提 升使用率也帶動消費。

6 1

7

2 4

5 3

8


24

UI design

故事鋪陳

地圖導覽

AR 互動遊戲

第一次使用此 APP 時,會 透過十張 Tiger Duck 的前 提故事引導圖,讓使用者能 夠更加融入 AR 互動的地圖 世界與各項關卡。

打開 TIGERDADA APP,會 出現使用者在台科校園地圖 上的定位腳步以及藝文品的 位置。藝文品在破關前會以 色塊顯示,破關後則會已原 樣貌出現在地圖上。

AR 遊戲互動說明文字包含 一些藝文品的背景解說內 容,讓使用者在玩遊戲時, 對於藝文品也會有初步的認 識。

導覽資訊

破關引導

最終任務

資訊頁面,讓想更了解這個 藝文品的使用者,能透過文 字以及圖片更加了解其背後 的設計概念與意義。

每個 AR 遊戲互動由一個故 事將全部串連起來,使用者 的最終目標是在各個遊戲獲 得高分並取得獎勵才能幫助 臺科大的吉祥物完成任務。

每個互動遊戲所獲得的獎勵 收集齊全後,就可至 Tiger duck 的公仔實體所在地交 給公仔,並與公仔進行最後 互動任務。


25


26

UI design

E-Diary

Exchange diary APP 2016 E-Diary 是一款以交換日記為主要功能 的 APP,除了可以跟親人或好友分享 日記,每日皆可隨機與一位陌生人進 行日記交換來認識新朋友。

風格改編自復古風,靈感取自國際信 封的藍紅色,全部介面僅用簡單三個 色調做變化,並透過預設圖像營造出 復古卡通的討喜感。 本產品主要特色為,開始每日的日記 之前,會先選擇一個手勢圖示來代表 今日的心情,長期記錄下來能夠綜觀 月週的心情起伏,對自身的情緒管理 也能有所幫助。


27


28

UI design


29 日曆檢視

手勢心情圖示

排版格線對齊

日曆可輔助使用者快速檢視 自己每日收發了多少日記, 方便於特定時段或特定日子 找尋紀錄。

每日寫新日記時,會先選擇 今日心情手勢,可統計長期 心情指數。

撰寫日記時,文字照片的置 放和插圖皆能自由縮放大小 ,並且有格線對齊功能。

我的日記

朋友日記

今日陌生人

我寄出的日記,採一篇篇顯 示,以最新的一篇日記從最 上方開始排列,每日可以寫 很多篇傳送給不同人,也可 以寫一篇傳送給很多人。

我收到的日記,採一本本顯 示,最新聯絡的朋友日記在 最上方,左手邊有朋友分類 ,可以快速搜尋,也可以快 速篩選顯示的日記本。

每日系統會自動配對一位陌 生人與你交換日記,並且可 以選擇看完日記後成為朋友 繼續交換,而雙方都寄出朋 友邀請才會成為朋友。

交換日記是大部分人小時候都經歷過的記憶,日記裡充滿著許多 瑣碎的童年畫面,而長大之後還會每天寫日記的人越來越少,日 子過得忙碌又疲累,不僅與家人的話題越來越單一,朋友也久久 才見一次面。 以此概念為靈感來源,發展出 E-Diary 這項產品,希望人們不僅 能藉其培養與家人的感情,還能透過與陌生人交換日記來結交異 國朋友。 本 APP 是我第一次接觸 UI 領域,從概念、風格、市場調查、 FLOW 到功能細節規劃的過程都需一步步建構。雖然只專注於介 面設計,並未與程式搭配發展成能夠上線的產品,但卻讓我從一 個零經驗的菜鳥變成對 UI 設計流程熟知的設計者。


30

Picture book design


31

小藍鯨 2017

使用媒材:水彩 大綱:描述一隻小藍鯨在確認自己是藍色的 過程中,發現自己並認識自己的故事,也透 過各種放大及近距離的視角,讓小朋友體會 當小動物的感覺。


32

Picture book design

腳本 :

小鯨魚最喜歡藍色, 他喜歡藍藍的大海, 他喜歡藍藍的天空, 他喜歡藍藍的自己。 小鯨魚覺得藍色是世界上最美的顏色。 一天,小鯨魚在淺海玩耍的時候,一對海鷗母子經過, 小海鷗就說:「哇,是黑色的鯨魚耶!」 小鯨魚聽到後疑惑想著:「不是吧,我是藍色的阿?」 正當他浮出水面要詢問的時候,他們已經飛遠了。 小鯨魚越想困惑,他決定去問問其他人。 他先到了螃蟹先生的家門口,問著:「螃蟹先生,請問 我是甚麼顏色的?」 螃蟹先生回說:「黑色的。」 小鯨魚不放棄說著:「可是我是藍色的,你要不要再看 清楚一點?」 螃蟹先生這才緩緩走出洞口:「啊沒錯,你是藍色的。 可是你的眼睛是黑色的喔!」


33

原來如此。 小鯨魚覺得很有趣,他又去問了在水草中休息的海馬阿 姨: 「海馬阿姨,請問我是甚麼顏色的?」 海馬阿姨回說:「紅色的。」 小鯨魚不放棄說著:「可是我是藍色的,你要不要再看 清楚一點?」 海馬阿姨這才從水草間走出來:「啊沒錯,你是藍色的。 可是你的嘴巴是紅色的喔!」 原來如此。我身上似乎還有很多我不知道的顏色呢! 小鯨魚游到了在海葵中玩耍的小丑魚旁,問著: 「小丑魚小丑魚,我是甚麼顏色的?」 小丑魚回說:「白色的。」 小鯨魚不放棄說著:「可是我是藍色的,你要不要再看 清楚一點?」 小丑魚這才從海葵中走出來:「啊沒錯,你是藍色的。 可是你的肚子是白色的喔!」 原來如此。 小鯨魚愉快的游到海面上,此時天空已經滿是夕陽,經 過的海鷗又說話了:「是橘色的鯨魚耶。」 小鯨魚沒有再問了,他愉快的游著。

小巧思 : 透過頁面穿透及前後插畫互相 配合的設計,讓小朋友在閱讀 中充滿樂趣。


34

Poster design

二○一八

2018 The year of the Dog 2017

用二○一八簡單四個字,拼湊出生動的狗五 官,並且以手寫風格將 2018 與狗臉巧妙融 合,營造出書法家神來一筆題出巧妙祝詞的 感受,也讓西元年份與東方生肖在新年這個 節日做另類的文化結合。


35

這不是雞年海報

It is not the year of the Rooster 2017

在一波波忙碌繁雜的日子過後,即將又要迎 接新的一年到來,如同在一群的小雞中悄然 到來的福星,本作品用反向思考的方式讓狗 隱身在雞群中,暗示雞年將去,狗年已至。


36

Interior design

許戴聯姻 婚宴會場設計 2017.09.16

根據新人與策劃師討論之後的風格,鎖定大 理石、幾何、香檳色系三種元素,設計出優 雅高尚的婚宴會場平面圖,包含主背景圖、 T 字舞台、圓形小舞台、簽到背板以及新人 LOGO 設計。


37


38

Interior design

張解聯姻 婚宴會場設計 2017.09.10

根據新人與策劃師討論之後的風格,鎖定銀 河星系、花草剪影及月亮倒映三種元素,設 計出浪漫夢幻的婚宴會場平面圖,包含主背 景圖、T 字舞台、圓形小舞台、水牌以及新 人 LOGO 設計。


39


40

Interior design

王許聯姻 婚宴會場設計 2017.08.27

根據新人與策劃師討論之後的風格,鎖定漢 唐風格、黑紅色系及雲紋獸飾三種元素,設 計出別具情調的仿古婚宴會場平面圖,包含 主背景圖、簽到背板。


41


42

Interior design

李楊聯姻 婚宴會場設計

2017.08.27

根據新人與策劃師討論之後的風格,鎖定魔 法森林、藍綠色系及夜晚星光三種元素,設 計出宛如秘境的婚宴會場平面圖,包含主背 景圖、T 字舞台、圓形小舞台、水牌新人人 像以及新人 LOGO 設計。


43


44

case

南科 CIS 企業識別設計

南部科學工業園區 AIROBOT 自造基地 2018

智慧機器人創新產業蓬勃發展,科技部將藉此機構帶 動南部自造實作風潮與在地產業資源的投入,吸引創 新自造者聚集。LOGO 期望能有機器人、自造、基地 等元素融入,初步應用項目含名片、信封、紙杯等。


45

設計理念以機器人頭部造型及操作 桿為設計發想,將兩者結合表達出 核心、中心、智慧的意象,並且以 橘色環狀表示其影響力,可以遠播 到各地。

JOYSTICK

ROBOT

INFLUENCE


46

case

北京花海閣名片設計

策劃經理 果果 2017

對象為婚慶產業的專業策劃師,以高雅時尚為主要需 求風格,有別於名片給人簡潔俐落的印象,此設計以 大理石紋為主,香檳色為輔,打造出幹練又不失優雅 的個人名片。


47

金美國小邀請卡

2017

近幾年金美國小積極推動特色計畫,以金山區盛開的 百合花作為校園代表物,也在校園創作出許多百合花 及壁畫圖騰,校方想使用這些新素材以及手繪風格重 新將學校邀請卡做個革新。


48

case

桃園縣東安國小 品格教育插畫 2014

以抓住小朋友的注意力為主要目的來設計,透過小學 生喜歡的亮色色調搭配動物插畫,讓好品格的圖像深 植孩子們的腦海,以達到校方所期望的教育目標。




Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.