Yuting Liao《泥》

泥

2018－2020

YUTING LIAO

廖昱婷

作品集

泥

2018－2020

YUTING LIAO

廖昱婷

作品集

LIAO YUTING 廖昱婷 YUTING-LIAO 1996/11/12

學歷 | Education

技能 | Skill

國立台中教育大學 文創系 (2015-2020)

平面設計 、 插畫繪製 、 印前製程

國立彰化女中 普通科 (2012-2015)

HTML/CSS 、 R WD網頁設計 、 動態製作

關於我 | About me 從 繪 畫、設 計、動 態 到 介 面 設 計。

憑 著 對 視 覺 的 嚮 往，從 普 通 高 中 進 到 設 計 相 關 科 系，相 較 於 相 關 科 系 畢 業 進 入 就 讀 的 同

學，從 零 開 始 學 習 平 面 設 計，並 在 實 習 階 段

經 歷 | Ex p e r i e n ce

中教大文創系期末展 交譯所 主視覺

中教大文創系期末展 第七市場 主視覺

業成資訊 網頁設計相關班級 助教(2020)

數 位 方 塊 D I G I PA C K 網 頁 設 計 ( 2 0 1 8 - 2 0 2 0 )

接 觸 了 網 頁 設 計。

一路從自娛自樂的繪畫興趣到須考慮普羅

大 眾 需 求 的 介 面 設 計，其 中 熱 情 與 志 趣 不 改，我 希 望 能 將 喜 愛 的 所 學 運 用 在 對 於 他 人 有 益 的 事 上 面，期 許 自 己 設 計 思 維 能 更 加 成 熟，讓 作 品 更 加 完 善 並 體 貼 使 用 者。

WEB DESIGN 網頁設計

Web Design

01 御鼎興純手工柴燒醬油

04 誠品文化藝術基金會

0 3 Unicornplus LLC

06 老虎堂黑糖專売 TIGERSUGAR

0 2 Unicorn Kids International School

05 客家商城

07 舊城漫漫 漫漫台中

05

01

YDSIN

YDSIN

YDSIN

御 鼎 興 純手工 柴燒醬油 御 鼎 興 純 手 工 柴 燒 醬 油，是 西 螺 在 地 經 營 超 過 一 甲 子 的 老 品 牌，品 牌 本 身 堅 持 手 工 柴 燒 與 古 法 釀 造，傳 承 至 今 已 是 第 三 代 傳 人 經 營。

WEB RE-DESIGN 由 於 官 網 為 御 鼎 興 主 要 販 售 通 路，本 專 案 主 要 目 標 為 翻 新 官 網 視 覺 形 象 與 調 整 為 響 應 式 網 站，希 望 以 新 的 形 象 與 概 念 重 新 出 發，同 時 讓 使 用 者 能 夠 在 流 暢 使 用 與 購 物 的 同 時，接 收 到 老 品 牌 真 誠 實 在、貼 近 自 然 與 講 究 工 法 的 形 象。

YDSIN

06

「 一 本 の 醬 油、一 生 分 の 思 い 」 「 一 瓶 賀 欸 醬 油，一 世 人 欸 情 分。」

“A bottle of black bean sauce, a lifelong friendship.”

07

YDSIN

Web Des ign / Vis ual C om m un i cati on D es i g n

御鼎興純手工柴燒醬油

08

由 於 御 鼎 興 講 究 傳 統 工 法 與 純 天 然 食 材，並 且 有 著 深 厚 的 在 地 底

蘊 與 故 事 感，在 網 站 內 大 量 使 用 了 業 主 所 提 供 的 攝 影 作 品，去 述 說 品 牌 的 形 象 與 故 事，從 品 牌 歷 史、製 醬 美 學、到 購 物 流 程，運 用 這 些 來 傳 達 給 使 用 者 富 有 文 化 感 且 獨 特 的 醬 油 品 牌 形 象。

09

網站地圖 首頁

品牌故事 製醬美學 系列介紹

系列介紹-列表頁 系列介紹-內容頁

前往購買

前往購買-列表頁 前往購買-內容頁

職人筆記

職人筆記-列表頁 職人筆記-內容頁

常見問題 聯絡我們 登入/註冊 購物車

購物車-確認購買清單 購物車-填寫運送資料 購物車-購物完成

會員專區

延 續 舊 網 站 架 構，主 要 優 化 了 消 費 者 對 系 列 認 識 途 徑 與 購 物 流 程，並 依 此 在 視 覺 上 重 新 編 排 與 設 計。

會員專區-折價券 會員專區-訂單查詢 會員專區-會員資料

YDSIN

Web Des ign / Vis ual C om m un i cati on D es i g n

御鼎興純手工柴燒醬油

10

11

02

Unicorn Kids International School

為 位 於 日 本 的 U n i c o r n p l u s L LC 設 立 的 國 際 兒 童 學 校 所 設 計 的 一 頁 式 網 站，網 站

包 含 建 立 起 源、授 課 理 念、課 程 介 紹、環 境 介 紹、入 學 流 程、最 新 消 息 與 聯 絡 我 們。 網 站 為 多 語 系 設 定，分 為 日 語 與 英 文 兩 種 版 本。

Color Palette Fonts

Font Family

Font Weight

Noto Sans

Bold

Medium Regular

Aa Bold

Aa Medium

Aa Regular

ＵＮＩＣＯＲＮ

Web Des ign / Vis ual C om m un i cati on D es i g n

UNICORNP

ＫＩＤＳ

12

13

導覽列

下滑後轉為白色導覽區塊 釘於螢幕上方

展開顯示網站目錄

Slider

滿版形象照片輪播

辦學宗旨

顯示部分文章

點開彈出視窗顯示全文

課程簡介

課程目標&介紹

Learning Benefits

圓圈按鈕顯示各項目標題 點開按鈕顯示優點介紹

每日行程

一課程一卡片簡短介紹 卡片顯示課程照片

點開顯示詳細介紹與課表

教學環境

介紹學校環境

滾動更換介紹項目

招生說明

入學資格與入學流程介紹

相關文件

入學相關文件下載 預設顯示5筆

訊息介紹

最新消息更新處 預設顯示6筆

社群平台與聯絡我們 Google地圖嵌入

留言後彈出視窗寄送成功

頁尾

地址與聯絡資訊

ＵＮＩＣＯＲＮ

Web Des ign / Vis ual C om m un i cati on D es i g n

UNICORNP

本 網 站 包 含 日英 雙 語 版 本，由 於 語 系 不 同 而在設計上進行了細微調整。 網 站 視 覺 根 據 名 稱 中 的 獨 角 獸 進 行 設 計 概 念 發 想，在 設 計 中 加 入 森 林 元 素，如 花 草、 森 林、雲 朵 與丘 谷，並 大 量 運 用 高 明 度 低 彩 度 色彩，營造網站童趣與幻想氛圍。

ＫＩＤＳ

14

15

03

Unicornplus LLC 為位於日本的Unicornplus

L LC 所 設 計 的 企 業 入 口 網 站，企 企

業 同 時 營 運 電 子 零 件 與 幼 兒 教 育 事 業，需 同 時 整 合 兩 項 不 同 領 域 業 務 於 同 一 入 口 網 站 中，因 此 採 取 對 比 色 設 計，統 合 藍、黃 兩 色 於 同 一 畫 面 中，並 使 用 期 待 企 業 願 景 的 天 空 動 畫 作 為 背 景。

16

17

W eb D es i g n / Vi s ua l C om m un i cati on D es i g n

誠品文化藝術基金會

04

ESLITE

誠 品 文 化 藝 術 基 金 會 為 誠 品 旗 下 非 營 利 組 織，主 要 透 過 官 方 網 站

來 推 廣 閱 讀 計 畫、募 集 志 工 與 書 籍 等 相 關 業 務，本 次 專 案 主 要 需 求 為 翻 新 舊 官 網 視 覺，傳 達 文 化 感，並 且 加 強 業 務 功 能。

Style Guide Color Palette Fonts

Font Family

Font Weight

Noto Serif

Bold

Medium Regular

Aa Bold

Aa Medium

Aa Regular

18

19

導覽列

左側選單為三個功能按鈕，

右側形象圖可輪播切換至下一張圖片。

Slider

滿版形象照片輪播

業務統計

顯示業務統計資料數字，呈現當

內容 首頁

前運作情形，以便讓使用者快速

認識基金會當前狀態。

重點計畫

共5個項目，

點擊ICON、圖片、閱讀更多按鈕

都能跳至該項目詳細頁面。

基金會影片

為基金會介紹之影片。

最新消息

此區塊以淺色漸層淡入消息區塊。

最多顯示3項消息，每項最多26個字， 超出字數以…表示。

相關連結

呈現誠品其他單位的連結

頁尾

LOGO、聯絡資訊、聲明與社群。

20

21

與插圖 初版設計稿

22

23

05

客家商城

為 行 政 院 客 家 委 員 會 的 客 家 文 化 發 展 中 心 所 設 計 的 購 物 網 站，主 要 販 售 商 品 為 委 員 會 所 設 計 的 文 創 商 品 與 相 關 書 籍。

本 次 專 案 主 要 包 含 網 站 介 面、商 品 攝 影 與 販 售 企 劃 發 想 規 劃。

HAKKA

Web Des ign / Vis ual C om m un i cati on D es i g n

客家商城

24

25

26

首頁

商品條列LP頁 商品內容CP頁 一般NP頁 一般LP頁

功能選單列

顯 示 L O G O、登 入 註 冊、子 頁 面 連 結、搜 尋 功 能 與 商 品 分 類 等 功 能。

功 能 列 將 釘 選 在 畫 面 左 側，不 隨 滾 輪 移 動，使 用 者 在 頁 面 任 何 高 度 都 可 以 輕 鬆 選 擇 所 需 功 能。

一般CP頁 註冊 基本資料頁 登入/註冊

訂單查詢-訂單條列頁

訂單查詢

訂單查詢-訂單明細 訂單填寫-訂單填寫

訂單填寫

訂單填寫-訂單送出

27

客家商城商品攝影

HAKKA

Web Des ign / Vi s ua l C om m un i cati on D es i g n

客家商城

28

圖 上 以 客 家 器 皿 與 客 氣 的 諧 音 為 企 劃 概 念，主 題

為 瓷 器 陶 藝 等 相 關 工 藝 品，包 含 器 皿、陶 笛 等 相 關

工 藝 品，品 項 以 正 視 角 拍 攝，並 進 行 去 背。使 用 工 藝 品 與 文 字 構 成 的 方 式 進 行，畫 面 內 以 雲 霧 煙 氣

進 行 裝 飾，同 時 表 現「 客 氣 」 「 客 器 」主 旨 與 客 家 庄 位 處 山 間 的 地 域 文 化 意 象。

圖 下 主 要 呈 現 適 合 送 禮 的 盒 裝 商 品，畫 面 將 會 以 好 客 茶 具 組 為 主 體，盒 子 敞 開 並 展 示 出 內 部 的 茶

具 組，視 角 為 上 視 拍 攝，盒 裝 主 體 旁 散 落 零 散 物 件 與 布 料 進 行 裝 飾 與 營 造 豐 滿 熱 情 的 氛 圍。

29

06

老虎堂 黑糖專売 為 老 虎 堂 所 設 計 的 B a n n e r，右 側 為 網 站 主 圖 設 計，使 用 P a r a l l a x 效 果 製 作，畫 面 元 素 可 隨 滑 鼠 軌 跡 移 動，下 方 則 為 不 同 語 系 之 網 站 B a n n e r 設 計。

TIGER SUGAR

TIGERSUGAR

Web Des ign / Vis ual C om m un i cati on D es i g n

老虎堂黑糖專売

30

31

07

舊城漫漫

誠 品 文 化 藝 術 基 金 會 為 誠 品 旗 下 非 營 利 組 織，主 要 透 過 官 方 網 站 來 推 廣 閱 讀 計

畫、募 集 志 工 與 書 籍 等 相 關 業 務，本 次 專 案 主 要 需 求 為 翻 新 舊 官 網 視 覺，傳 達 文 化 感，並 且 加 強 業 務 功 能。

誠品文化藝術基金會 W eb D e s ig n / V is u al C o m m u n icat i o n D e s ig n TAICHUNG

32

MOTION GRAPHIC

動態設計

M ot i o n G ra p h i c

01 電力小精靈

0 2 CC P 中華資金交易所

35

01

電力小精靈

所 有 電 器 都 依 賴 著「 電 器 小 精 靈 」在 運 作，他 們 辛 苦 為

人 類 供 電，但 人 類 卻 貪 圖 方 便 而 做 出 許 多 浪 費 電 力 的 行 為。此 部 動 畫 藉 由 詼 諧 的 手 法 傳 達 隨 手 節 電 的 正 確 觀 念，期 許 能 使 大 眾 落 實 節 電 好 習 慣！

2018 台電節電 多媒體競賽 佳作

36

動畫畫面

使 用 高 明 度 低 彩 度 的 色 彩 作 為 畫 面 主 體，並 適 當 加 入 一 些 高 彩 度 粉 紅 色 作 為 點 綴。

37

38

39

02

中華資金交易所

為 中 華 資 金 交 易 所 製 作 的 業 務 介 紹 動 畫，配 色 以 藍 色 系 來 代 表 企 業 的 冷 靜 理 性，給 予 觀 眾 安 全 感 和 信 任 感。並 溫 暖 舒 緩 的 色 調 來 平 衡 藍 色 調 的 冰 冷 感，帶 來 說 服 力、安 心、信 任 感、與 貼 近 人 心 的 效 果。

普 羅旺斯藍

嬰兒藍

紀念碑灰

粉 刷泥灰

蜜桃石英

玉 米殼黃

杏仁白

40

GRAPGIC DESIGN

平面設計

G ra p h i c D e s i g n

01 深澳 SHENAO 02 設計食驗室

0 3 Anning 凝 光 極 皙 霜 04 上益資訊名片 05 五龍肉包名片

06 在玫瑰之下 書封設計

43

01

深澳 SHENAO

以 深 澳 鐵 路 為 媒 介 呈 現 多 元 面 貌、活 化 地 方 觀 光。

企 劃 主 要 為 樹 立 鐵 路 支 線 形 象、創 造 鐵 路 和 當 地 遊 程 活 動 的 連 結、加 強 對 外 的 行 銷 推 廣。

T HE S HE N 'AO L I N E

44

45

深澳鐵路車票套組

結 合 在 地 特 色 遊 程 所 設 計 的 票 卡，基 本 款 的 車 票 圖 案 呈 現 全 年 皆 可 遊 玩 的 景 點，每 一 款 都 代 表 一 種 當 地 活 動。以 票 卡 來 增 加 各 種 遊 程 活 動 的 曝 光 率。

46

標準字設計

融 入 山 海 意 象，改 變 以 往 海 港 雨 都 的 地 域 印 象，採 用 曲

海

線 呈 現 較 活 潑 的 風 格。

山 T HE S HEN 'AO L I N E

47

48

深澳海味套組

石 花 菜 果 凍、小 魚 乾、乾 小 卷 及 小 泡 麵 等 深澳地區獨特零嘴為一組合套組

49

02

設計食驗室

專 題 成 果 發 表 專 刊，設 計 專 題 以 日 常 生 活 中 常 見 的 三 種 食 材：花

椰 菜、洋 蔥、蛋 做 為 發 想 起 源，經 過 理 解、觀 察、想 像、分 解、編 輯 與 可 視 化，依 循 設 計 的 六 步 驟，讓 事 物 的 語 意 表 達 在 呈 現 上。

50

The Lab of Ingredients Design 專 刊 與 共 同 展 覽 名 為 設 計 食 驗 室，使 用 設 計 室 方 格 網、斑 駁 草 圖 感 作 為 主 要 設 計 元

素。 內 頁 包 含 該 次 課 程 十 五 組 共 四 十 五 人 的 設 計 作 品 成 果。

51

03

Anning凝光極皙霜

為 A n n i n g 品 牌 所 設 計 的 第 一 款 保 養 品 包 裝，此 包 裝 為 將 舊 款 包

裝 更 新，內 容 包 含 重 新 繪 製 包 裝 插 圖 與 重 新 編 排 畫 面 構 成。另 外 也 為 此 包 裝 進 行 了 商 業 攝 影。

52

包裝提案

以 黑 白 兩 色 作 為 主 軸，共 發 展 四 款 不 同 風 格 的 包 裝，四 款 則 一 進 行 最 後

編 排 與 修 正。業 主 最 終 選 擇 右 上 與 左 下 款 式，但 因 考 量 不 同 語 言 市 場，最 終 選 擇 以 全 英 文 為 主 體 的 左 下 包 裝 來 進 行 最 後 發 展。

53

相關細節

除 了 外 盒 包 裝 以 外，同 時 設 計 了 內 盒 圖 案 與 附 贈 小 卡，小 卡 下 方 將 會 黏 貼 放 置 供 使 用 者 挖 取 保 養 品 的 挖 勺。

54

99

56

商品攝影

包 含 內 盒、外 盒、與 內 外 盒 合 照，照 片 將 會 呈 現 在 品 牌 官 網 與 相 關 文 宣 品 上。

57

58

左頁

上益資訊名片

右頁

在玫瑰之下

五龍肉包名片

書籍封面

59

60

CG 插 圖

從 小 便 喜 歡 繪 畫，在 國 中 時 興 趣 使 然 開 始 接 觸 電 腦 繪 圖，便 將 過 往 學 習 的 傳 統 技 法 融 入 其 中。左 頁 右 頁 皆 為 2 0 2 0 繪 製。

泥 YUTING LIAO

廖昱婷 作品集 2018－2020