Port f o i l o
施雨欣 作品集
2015 － 2020
G ra phi c D esi gn ＊ I llu stra tio n ＊ P hotog rap hy
Yu-Sin Shih
《誰的青春不迷茫 》
「你覺得黑暗就對 了，那樣才能分辨得出什麼是你的光芒」
Ta ichung , Ta iwa n 1997- 04- 09 2sin.d esig n@g ma il.com
2 0 1 5 － 2 019 亞洲大學 視 覺傳達設計學系 畢業 Asia Univer sity Dep a r t of Visua l Communica tion De s i gn 2 0 1 2 － 2 015 台中市立大里高級中學 普通科 畢業 Taic hung Municip a l Da li Senior Hig h School
經歷 | Ex pe ri e n c e 2020. 宏基蜜蜂生態農場有限公司 行銷視覺設計
官網 UIUX 發想及設計、網站及社群平台 Banner 製作、商品情境攝影
2019 泓運雲端科技有限公司 企劃美編
宣傳文宣形象及文案製作、官方網站維護及活動分享、UIUX 發想及設計
2019 亞洲大學視覺傳達設計學系
104 級畢籌會 攝影組
提報與展覽活動照片拍攝、校內展工作人員、影片拍攝
2018 D al i
Ar t 國際藝術村 粉絲專頁小編
活動分享、藝術家介紹等貼文排程
2018 自由人藝術設計 設計組實習生
活動 Banner 設計、駐村導覽、展覽工作人員
2017 奇福廣吿 美編工讀生 菜單、名片、DM 製作
2015 漢堡巴士個人插畫展
展覽期間販售所得全數捐給台灣世界展望會
2014 經營個人插畫粉絲專頁「兩雨兩雨」
競賽 | C o mpe t it i o n 2019 亞洲大學紅點校內初審 通過 2019 高雄放視大賞 入圍 2019 台北新一代設計展 2019 亞洲大學創意設計學院畢業聯展《最後的最後的最後》 2018 台灣學生創意設計大賽 2017 勤美誠品
2017 聖誕明信片徵件比賽
2017 天仁茗茶喫茶趣
Tog o 杯設計比賽
技能 | A bili t y 平 面 設計 / 插畫 / 攝影 印刷設計、數位處理
Ad obe il l ust rat or、 Phot oshop 、Pr ocr ea te 網頁設計、介面設計
D r e a mweaver、 Adobe Xd 編排設計
I n D esign 動態剪輯
Af t e r E ffec t 、Premiere 文書處理
E x c e l 、Word、PowerPoint 作業系統
Windows、 Mac O S 正在學習
H t m l、 Css
0 1 牽牽手共育平台 2.0 UI 設計 02 中華幼兒敎育關懷協會官網設計 03 宏基蜜蜂生態農場官網優化
介面設計｜ User Iter face Design
01
牽牽手幼兒共育平台 2.0 UI 設計
UI / UX
家 長 版 介 面 以 好操作、好閱讀，容易理解的 icon 設計，搭配上活潑的配色，而 形 成 的 畫 面 。因為是第一次做 UI 的大型專案，其中也是不斷的修改調整，希望 每 個 使 用 者 都 有良好的體驗。
目標用戶
幼 兒 園 家 長 及 老師 30 ～ 50 歲
標準字選擇
Noto sans cjk tc
使用好閱讀的思源黑體為字體。
標準色選擇
# 3 C9D 9B
#FA C83E
#FC476 E
使 用 老 少 咸 宜 的 藍 綠 色 作 為 主 色 調， 黃 色 及 紅 色 作 為 輔 助 色， 且 將 明 度、 飽 和 度 稍 微 降 低 ， 螢 幕 顯示較不會這麼刺眼。
# A4D 1C 8
#B 4B 4B 4
#707070
使 用 比 主 色 淺 一點的藍綠色作為輔色 。字體顏色選擇深灰色，耐看又好閱讀。
8
登入形象頁面 登 入 頁 為 牽 牽 手 平 台 的 主 要 形 象， 一 家 人 攜 手 共 同 陪 伴 孩 子 的 意 象， 搭 配 藍 天 白 雲 ， 打 造 「 出 遊 」 的 景 象。 揮 別 1.0 的 色 塊 形 象， 希 望 多 一 些 生 動 的 感覺。
yusin's por tfolio
9
介面設計｜ User Iter face Design
icon
10
選擇相片
聯絡簿
電子看板
親屬管理
代接委託
學習紀錄
通知
用藥委託
小朋友功能
請假單
線上客服
園區
刪除
複製
編輯
園區通知
健康管理
檔案
訊息群聊
檔案分享
傳送簡訊
傳送訊息
系統通知
全部通知
app 畫面
＊由於 2.0 版本尙未正式上線，因此只展示部分介面。
A
B
C
D
（A）平台首頁 - 主要 顯示所有的通知與提 醒，讓家長一目瞭然
今日行程與注意事項。 （B）小朋友功能 - 分 為園區功能與基本功 能，上方可切換不同 小朋友的資料，按鈕 特意放大方便點選。 （C）設定 - 關於家長 本人的操作功能皆在 此處。
（D）用藥委託 - 用藥 為家長十分重視的功 能之一，列表以簡單 的顏色分區，希望家
長使用能更快速方便。
yusin's por tfolio
11
介面設計｜ User Iter face Design
02
中華幼兒教育關懷協會官網設計
編排 / Banner / C S S
官 方 網 站 為 推 廣「 幼 兒 共 育 計 畫 」 作 使 用， 使 用 了 綠 色 做 為 網 站 主 色， 黃 色 為 輔 色， 增 添 輕 鬆 且 明 亮 的 氣 息， Wor d Pr ess 架 站 需 一 點 點 程 式 語 法 基 礎， 因 此 也 學 了 一 點 點 的 CSS 及 HT ML。 官方網站：a ssn.ho ldinghands.c o m.t w 12
yusin's por tfolio
13
介面設計｜ User Iter face Design
03
宏基蜜蜂生態農場官方網站優化
UI / UX
鑒 於 舊 官 網 不 敷 使 用， 新 官 網 緊 急 上 架 的 情 況 下， 進 行 了 對 於 新 官 網 的 調 整 與 優 化 。 以 原 官 網 設 計 的 基 礎 進 行 優 化： 增 進 不 完 善 的 功 能， 以 及 將 介 面 進 行 些 微調整。 官方網站：www.hgbees.c o m.t w 14
商品加購 區
Before
After 增 加 加 購 區 邏 輯：限購 1 瓶、限購上限數量、不限購上限數量 更 改 加 購 區 樣 式以滿額可加購商品的 金額做為區分 yusin's por tfolio
15
介面設計｜ User Iter face Design
商品介紹 頁
Before
After 增 加 提 示 欄 位 ，害怕影響 SE O 表現，因此設置 增 加 短 描 述 欄位，於分類頁顯示縮短完的商品介紹 增 加 商 品 照 切換按鈕，方便消費者做切換動作
16
商品分類 頁
Before
After 上 方 B a n n e r 影響選購視覺動線，因而縮短 B a nner 長度 增 加 商 品 分 類 ic on，以便消費者選購 增 加 圓 標 功 能 ，可在後台輸入文字， 不必再額外設定一張商品圖 增 加 排 序 功 能 ，以便消費者找尋 統 一 「 熱 門 」 、「促銷」、「最新」 標籤
yusin's por tfolio
17
介面設計｜ User Iter face Design
折價券系 統
Wireframe 醒 目 字 樣 可 一 目瞭然折價券用途 顯 示 領 取 及 可 使用狀態
18
Before
After 將 折 價 券 欄 位 移置總金額之上 新 增 折 價 券 選 擇欄位 新 增 折 價 券 邏 輯：減價、贈品、免運 、折扣
yusin's por tfolio
19
介面設計｜ User Iter face Design
DIY 預約 系 統
Wireframe 選 擇 場 次 本 是 想做成下拉單選擇，但 主管要求最後更改設計。
20
After
＊原系統未完善，故未顯示 Before
消 費 者 選 擇 體 驗 日 期 時， 會 自 動 將 無 法 報 名 日 期 關 閉， 使 消 費 者 無法選取。 消 費 者 選 擇 體 驗 日 期 後， 系 統 可 透 過 消 費 者 選 擇 的 參 加 人 數， 判 別 該 場 次 活 動 能否再容納該消費者進 行體驗。
yusin's por tfolio
21
0 1 聊蓋 Oh ！ Hole 0 2 牽牽手幼兒共育計畫宣傳文宣 0 3 109 年度幼兒共育計畫文宣 0 4 享饗蛋捲包裝設計 0 5 Lo g otyp e& Typ og r a p hy 0 6 Banner & 文宣品
平面設計｜ Graphic Design
01
聊蓋 Oh!Hole
攝影 / 文案 / 編排 / 色彩計畫 / 粉專管理
將 台 中 市 2 9 個 行 政 區 的 故 事 化 為 圖 騰， 氛 圍 融 入 色 彩， 刻 劃 於 人 孔 蓋 之 上， 希 望 藉 由 「 人 孔 蓋 」 讓 到 訪 的 遊 客 能 夠 停 下 匆 匆 的 腳 步、 慢 慢 欣 賞， 一 起 認 識 我 們 眼 中 ｢ 屬 於台中的美 ｣ ！
孔 蓋 介 紹本
以 建 築 、 景 觀 、 農 產 小 吃 、 產 業 文 化， 將 70 個 人 孔 蓋 分 類 為 「 蓋 好 行 、 蓋 好 看 、 蓋 好 吃、 蓋 好 玩 」 置 於 四 本 介 紹 本 中 ， 內 文 介 紹 人 孔 蓋 所 在 地 區 的 特 色， 以 及 透 過 問 答 式 小 機 關， 與 讀 者 做 互 動， 加 深 對 台 中 各 行 政 區 的 認識。
yusin's por tfolio
25
平面設計｜ Graphic Design
26
A
D B
（A）等比大小 60cm 人孔蓋模擬
C
（B）孔蓋著色本 E
（C）聊蓋粉絲專頁 Banner
（D）校內展展位佈置 - 右方為大型著色牆 （E）新一代展位佈置
yusin's por tfolio
27
平面設計｜ Graphic Design
02
牽牽手幼兒共育計畫文宣
插畫 / 設計 / 文案 / 編排
因 為 是 與「 幼兒」有關的主題，因此，使用了比較童趣、溫暖的配色帶出氛圍， 再 以 較 溫 馨 且 富有想像力的插畫作為 形象，藉此吸引受眾關注共育計畫。
28
A
B
C D
D
F
F
E
E
（A）中華幼兒敎育協會官網 Banner - 一起玩玩具吧！ （B）牽牽手幼兒共育計畫 Banner - 我有一個夢 （C）DM 印刷模擬圖
（D）共育計畫示範 DM - 我有一個夢 （E）共育計畫示範 DM - 啟程
（F）共育計畫示範 DM - 我們的城堡
yusin's por tfolio
29
平面設計｜ Graphic Design
03
109 年度幼兒共育計畫文宣
插畫 / 設計 / 文案 / 編 排
此 計 畫 為 募 資 計 畫 ，Banner 用 以 吸 引 民 眾 捐 款 支 持 共 育 計 畫 運 行， 以 計 畫 主 要 執 行 的 「 牽 牽 手 幼 兒 共 育 平 台 」 為 主 要 畫 面， 期 待 民 眾 能 夠 一 同 關 注 這 項 計 畫 ， 一 同 攜 手 打造更多友善、更多關 愛的幼敎環境。 30
主要強調「陪伴」以及「共育」的功能，因此文案撰寫以「親 情」與「親師溝通」為出發點。 yusin's por tfolio
31
平面設計｜ Graphic Design
04
享饗蛋捲包裝設計
插畫 / 色彩計畫 / 文案
以 「分享饗宴」為主軸，分享快樂、分享開心、分享幸福，跟大 家 一起吃蛋捲，就像一場饗宴。 主 視覺以台灣本土動物作為形象，故事為：一群動物來到森林共 赴 饗宴。 32
包 裝 放 置 在 一 起 可 組 成 連 續 圖 ， 在 商 品 陳 列 時 可 供 大 範 圍 的 展 示。 六 隻 吉 祥 物 代 表 六 種 不 同 口 味 ， 除 了 代 表 口 味 的 吉 祥 物 之 外， 我 們 也 運 用 諧 音 的 小祝福語為每個口味命名。
yusin's por tfolio
33
平面設計｜ Graphic Design
05
Logotype&Typography 焅 焅雞排 - log o 設計
焅焅雞排
34
取「 焅 」 字 的 諧 音「 酷 」 做 為 發 想， 幫 焅 焅 雞 戴 上了墨鏡，藉以提醒來店客人「焅」的發音。 以熱情的紅色以及炸油的黃色作為焅焅雞排的標 準色，藉著高對比色吸引民衆注意。
東 德 成米粉 - 再設計
東 德 成 米 粉 專 製 手 工 純 米 米 粉， 以「 米 粒 」 作 為 l ogo 基本組成，做成「風車」形狀，帶出新竹「風 城 」 的 意 象， 選 用 原 log o 的 標 準 色 及 標 準 字， 連接老 客戶的情感。
城 市 行銷 - 斗六 lo g o 設計
自 淸 領 時 期 開 始， 斗 六 就 一 直 是 雲 林 重 要 的 經 濟、 文 化、 政 治 中 心， 因 此 涵 養 了 十 分 龐 大 的 古 蹟 群， 但 由 於 都 市 的 進 步， 環 境 開 發 已 是 人 類 必 須 達 成 的 目 的， 進 而 破 壞 了 可 貴 的 歷 史 文 物。 以 「 斗 六 」 的 二 字 加 上「 古 蹟 」 意 象， 期 許 斗 六 能 繼續將其文化底藴發揚光大。
牽 牽 手 幼 兒 共 育 平 台 - l o g o 設計槍稿
以 「 牽 手 」 、「 擁 抱 」、「 陪 伴 」 為 設 計 核 心， 配 色 選 用 對 比 色 加 上 童 趣 溫 暖 的 配 色 。 （ A ） 款 為 標 準 字 ， 牽 牽 手 為 彼 此 的 羈 絆， 以 纏 繞 的 方 式 表 現 意 象 。 （B ） 以「 愛 心 」 + 「 小 手 牽 大 手 」 的 意 象， 代 表 牽 牽 手 平 台 對 幼 兒 共 育 的 關 愛 及 友 善 。 （C ） 用 「 無 限 」 代 表 「 愛 」 及「 敎 育 」 是 無 止 盡 的事情。
（A）
（B）
（C）
yusin's por tfolio
35
平面設計｜ Graphic Design
05
Banner& 文宣品
A
36
焅焅雞排名片設計
B C
D
（B）奇福廣吿 - 麥味登 Menu
E
（D）假日賞味 - 包裝主視覺設計
F
（C）奇福廣吿 - 家廚坊 DM
（E）岩一拉麵 - FB 粉絲頁 Banner （F）岩一拉麵 - 菜單
yusin's por tfolio
37
平面設計｜ Graphic Design
38
A
B
C
D
F G
E
（A）自由人藝術設計 - 實習招募 Banner
（B）自由人藝術設計 - Open Studio Banner
（C）自由人藝術設計 - 《給我一本書》插畫個展 （D）自由人藝術設計 - 駐村藝術家裝置側拍
（E）自由人藝術設計 - 駐村藝術家彩繪玻璃側拍 （F）自由人藝術設計 - 駐村藝術家桌面側拍 （G) 自由人藝術設計 - 駐村藝術家裝置側拍
yusin's por tfolio
39
平面設計｜ Graphic Design
A
B
C
（A）母親節優惠官網 Banner
（B）母親節優惠商品優惠單圖 （C）母親節優惠 FB 宣傳圖
2020 母親節優惠
以「手寫小字條」帶出留言給媽媽的感覺，整體配色以低飽和的粉色、藕色 作為呈現，希望呈現出母親節的溫馨感。
40
D
E
（D）醫護節官網形象 Banner F
（E）醫護節門市 A3 海報
（F）醫護節官網活動小圖
南投縣 5 月醫護節活動
以醫護代表色：藍色、綠色，為此次主視覺配色， 背景 patter n 代表「病毒」的形象，而四個小醫護 人員代表著守護者的角色。
yusin's por tfolio
41
平面設計｜ Graphic Design
A
B
鳳梨蜜 2020 夏日限定！
（D）鳳梨蜜官網形象 Banner C
（E）鳳梨蜜門市 A3 海報
（F）鳳梨蜜官網活動小圖
因為鳳梨蜜口感略帶酸甜，是較淸爽的口感，因此以較淸新、夏日的配色作為主視覺主軸， 並搭配上手繪鳳梨，打造夏日感！
42
2020 端午節快樂賀圖
胖粽子搭上蜂蜜水的意象，象徵「吃太多」的人，總有「我」當後盾！
2020 安心旅遊
標準字以較活潑的圓體字 + 上一根小旗子，有種導遊帶領觀光客來到農場的感覺。背景象徵 埔里的山景，一位農夫捧著蜂蜜迎接遠道而來的客人，代表我們對於客人誠摯迎接的心意！
D
E
（D）端午節賀圖官網形象 Banner （E）安心旅遊官網形象 Banner yusin's por tfolio
43
平面設計｜ Graphic Design
A
B
C
（A）三倍券優惠門市 A3 海報 （B）全面防疫門市 A3 海報
（C）蜂蠟紫草膏 DIY 說明
44
D E F
G
（D）花粉特價
（E）蜂膠優惠活動 （F）新蜜上架
（G）蜂膠優惠 FB 廣吿
yusin's por tfolio
45
0 1 去斗六！ 0 2 2020 0 3 快一點～來不及送禮物了！ 0 4 圖文創作
插畫｜ Illustration
01
去斗六！
把 自 己還有玩具熊裝在發條車裡面，然後出發去斗六吧！
48
02
2020
03
快一點～來不及送禮物了！
yusin's por tfolio
49
插畫｜ Illustration
04
圖文創作
以 前 有 一 段 低 潮， 每 天 給 自 己 一 個 小 期 許 加 上 一 張 小 圖， 畫 著 畫 著 Meina 就 這 樣誕生了。 我 相 信 圖 畫 和 文 字 都 是 有 力 量 的， 希 望 我的「它們」能夠帶著溫暖佔領這世 界 。
A
B
50
（A）受傷的地方補起來就好 C
（B）夏天就是要喝西瓜汁！
（C）你覺得黑暗就對了，那樣才能分辨出什麼是你的光芒
D
E
F （D）「雨」、「欣」 D
（B）兩欣 instagram 頭貼 （C）帶著勇氣出發吧！
yusin's por tfolio
51
插畫｜ Illustration
52
A
B
C D
（A）嘗試其他畫風的測試圖 （B）每天都要想你 100 次
（C）情侶桌布圖 （D）2 月生活
yusin's por tfolio
53
0 1 商品攝影 0 2 日常攝影
攝影｜ Photography
01
56
商品攝影
yusin's por tfolio
57
攝影｜ Photography
58
yusin's por tfolio
59
攝影｜ Photography
02
60
日常攝影
yusin's por tfolio
61
攝影｜ Photography
62
yusin's por tfolio
63
《誰的青春不迷茫 》
「你覺得迷茫就對 了，誰的青春不迷茫」
施雨欣 作品集
2015 － 2020