CONTENTS ABOUT ME
01
WEB DESIGN
04
APP USER INTERFACE DESIGN
20
GRAPHIC DESIGN
32
吳婕榆 WU CHIEH YU Visual designer. Illustrator 1988.01.27
+886 937 280 983 mizuto121@gmail.com 中原大學商業設計學系 畢業，現居台北 具平面設計多年經歷，擅長視覺傳遞想法 和訊息、把舊有的設計原型再設計。在佳 音英語參與多項大型重要專案，包含吉祥 物再設計、日本子公司視覺識別、官方響 應式網站＆實習網站再設計。隨後在新創 博弈遊戲公司擔任 UI/UX 設計師，負責規 劃和設計母公司旗下網站的著陸頁、後台 介面以及 IOSapp 的流程規劃和設計。 自幼就喜歡寫寫畫畫，高中畢業後即投入 設計，認為設計就是帶給人愉悅的心情和 讓生活更方便的美好事物。喜歡讓自己的 專業和工作內容不斷擦出火花、樂於和團 隊成員分享和討論並提升產品的品質。
01
EXPERIENCE UI/UX 設計師 I 環盛有限公司
2017
▪進行 IOS 平臺 app 的流程規劃和介面設計。 ▪規劃＆設計母公司網站的著陸頁以及後台介面。 2014 - 2017
視覺設計師 I 佳音英語教育集團 ▪負責設計對外文宣品以及招生贈品。 ▪改造舊有吉祥物使其造型更加親近孩童。設計獲全台加盟校和家長一 致好評。 ▪與資訊部門為官方網站和大學實習網站設計新的響應式介面，優化使 用者的閱讀體驗。
2011 - 2012
平面設計師 I 新優生技有限公司 ▪設計公司新的自有品牌視覺識別和包裝。 ▪設計公司所有對外文宣品以及網路行銷 banner
2009
暑期實習生 I 蕭青陽個人工作室 ▪協助工作室舉辦蘭嶼熱寫生活動以及各項事務。
AWARDS 2010
第 29 屆新一代設計展 平面設計組
入圍
2010
全國青年和平志工競賽 設計組
銀獎
2009
中原大學全人關懷獎 創意設計組
銀獎
SKILLS 平面設計
I 插畫 I 企業識別 I 包裝設計 I 網頁設計 I 介面設計
02
03
WEB DESIGN
網站設計
04
05
01 佳音英語官方響應式網站 Joy English Official website 佳音英語官方網站近十年的大型改版，這也是公 司第一次嘗試製作響應式網站以符合現代使用者 的觀看需求。我主要負責首頁跟一些頁面的規劃 和設計以讓資訊部的同仁接手後續其他頁面的設 計跟製作。
Creative Direction / Nami Chu Art Designer / Chieh yu Wu Copywriting / Nadia Hsu Programing / Vivian Wan Website / http://je.joy.com.tw Year / 2016
06
佳音品牌的紅色並不適合使用者 長時間觀看且大面積使用，因此 設計初期就決定以白色作為版面 基底色再酌以少量的紅色做搭 配。頁首頁尾底部的紅色配合紙 張紋路的質感，企圖營造出繪本 風格，更希望帶給使用者有溫度 的親切感。
07
08
09
▲ 官方網站首頁
▲ 置頂選單
▲ 官方網站首頁頁底
▲ 企業介紹頁面
#E50012
#FF6D77
#FF8600
#85BF3F
#00A98B
#1593D0
#1464B4
中文字型 標題
內文
微軟正黑體 BOLD 20pt
微軟正黑體 REGULAR 14pt
英文字型 標題
內文
ARIAL BOLD 20pt
ARIAL REGULAR 14pt
設計過程 由於專案成員們都是新手上路，在
決定在桌機版本上使用雙欄式的結
規劃前期企劃和我找了很多響應式
構，在手機版本變為單欄式結構。
網站的範例和流程進行討論 ，並在
桌機版本左邊內容用彈性的格狀設
改版網站架構前先跟上層討論了解
計去編排訊息，使其看起來整齊穩
他們的需求。業主們希望主頁面有
重；右邊輔助區塊為使用者的快速
許多快速連結能讓使用者一點進官
連結，四色方塊按鈕是企劃部討論
網就能快速到達想要去的頁面、整
出來學生和家長使用度最高的四個
體風格要有繪本的感覺且閱讀起來
連結，下方的快速連結則可應需求
要清爽。
而隨時增減。上方導覽列因為連結 頁 面 眾 多 而 使 用 了 megamenu， 在
舊版網站為三欄式結構且圖片和資
頁首跟頁尾皆有設置以供使用者隨
訊眾多，在參考許多案例後，我們
時能前往想要的頁面。
10
02 佳音英語實習生招募網站 Joy English Intern Recruiting Website Art Designer / Chieh Yu Wu Illustration / Aling Cheng Copywriting / Julia Chu Programing / Vivian Wan Website / http://jo.joy.com.tw/action/college/ Year / 2017
11
12
13
▲ 首頁底部
▲ 工作項目頁面
▲ 薪資福利頁面
▲ 應徵頁面 14
設計過程 這次專案由上層提出想法跟需求，企劃設
同於以往佳音英語形象色的氛圍。但由於
想出網站整體的架構後再由我去規劃版面
佳 音 英 語 本 質 還 是 要 彰 顯 出 來， 所 以 除
跟設計形象和風格。
了表現大學生青春活力的形象以外再和 兒 童 繪 本 跟 品 牌 紅 色 這 兩 個 元 素 結 合。
初次規劃網站形象時是以大學生對未來
15
的嚮往以及青春活力作為設計主軸所以
由於要快速開發和方便讓使用者快速瀏
採 用 天 空 和 藍 色 為 主 題， 特 意 營 造 出 不
覽，所以在排版上是採取一頁式的設計。
▲ 英語老師
▲ 安親課輔
▲ 教育行政
▲ 教材研發
16
17
APP USER INTERFACE DESIGN
APP 介 面 設 計
18
03 126 遊戲網 IOS app 126 gamesite IOS app 126 遊戲網為提供線上博弈遊戲的電子平 台，此 app 製作目標是為了讓用戶持手持 載具時更方便地遊玩機台和即時交易。我 主要負責整體的流程規劃、功能分析和首 頁、登入註冊頁、錢包系統的設計。
Process Planning / Chieh yu Wu Logo Design / Fish Lin UI Design / Chieh yu Wu, Fish Lin Programing / William Wen Year / 2017
WIREFRAME
19
20
FUNCTIONAL MAP APP 版本有別於網站平台的部分在於強化了遊戲機台收藏列表、錢包交易 和記錄搜索功能，方便用戶更快速、精確地找到想要玩的遊戲和進行金錢 交易；以往在網站無法即時預覽轉帳平台的金額，現在 IOS APP 也改善了 這點，讓用戶在轉帳頁面當前就能知曉各平台餘額使其方便操作。
21
22
WIREFRAME 由於必先成為平台會員才能進行遊玩，因此第一次進入 app 會先跳出登入 註冊頁，完畢後才進入遊戲大廳。首頁大廳將各種類型遊戲分類，方便用 戶尋找自己喜歡的機台類型，點擊後將出現遊戲介紹頁面，除了點擊遊玩 以外可以分享給朋友或是加入收藏。若有優惠活動、站內信或是帳戶訊息 皆會進行推播，底部通知圖標也會呈現未讀取的提醒狀態。
登入頁面
首頁遊戲大廳
用户名
密码 忘记密码？
登录
还没有帐号？点击立即注册
23
▲ 註冊頁
▲ 收藏頁
▲ 通知頁
▲ 個人資訊頁面
24
▲ 存款頁 - 銀行在線支
錢包系統 錢包首頁即時顯示用戶目前主帳戶以及遊戲帳戶的餘額， 下拉即可刷新餘額狀況，下排的遊戲帳戶會隨著操作而橫 向滑動。而錢包主要有六大功能：存款、轉帳、提款、銀 行卡、存提款記錄、轉賬記錄。用戶需先綁定個人資料和 銀行卡設定後才能使用，透過四種支付方式將現實金錢儲 存至主錢包，再將主錢包的金幣轉至各遊戲帳戶中。若要 把金幣提領出來則透過提款功能將遊戲金提至原本預設的 銀行卡帳戶內。若沒設定銀行卡將會出現提醒視窗將用戶 引導至銀行卡頁面。 25
▲ 提款頁
支付
▲ 存款頁 - 收銀台，將跳轉其他平台
▲ 銀行卡列表
▲ 轉帳頁，轉出轉入方必定有一方為主錢包
▲ 交易記錄
26
126GAMESITE
UI STYLE GUIDE
27
Luna Diary 紀錄屬於自己的月亮
註冊 登入
帳號 密碼
忘記密碼?
登入! 還沒有帳號？
註冊
04 DAILY UI 小練習 01. 女性月事紀錄 app Year / 2017 28
自在主流．秒殺韓版．2017...
自在主流．秒殺韓版．2017夏季 新款百搭紳士便鞋 NEW
$1200
喜歡
分享
$2400
商品選項 尚有庫存
商品資訊
33
加入購物車
立即購買
02.Single Product 購物網站單一商品頁面， 置底的選項可讓使用者快速購物
29
122345 噗文
karma
520
7777
朋友
粉絲
100.00
Emma Liao Chieh me @wwiiiinmmdd
走走停停看世界 Ｔaipei / 1997 / Design / Illstrator / Photography
加為朋友
關注河道
傳送私噗
TODAY
Emma Liao Chieh me 喜歡
14:30 pm
收到新單眼了(*´艸｀) 100
100
100 13:30 pm
Emma Liao Chieh me 問 大家有推薦的音樂播放app嗎？ 最近KKBO到期了很想換其他間試試 100
100
100
03.User Profile PLURK 用戶簡介頁面重新設計， 將上方用戶資訊排版更加清楚明瞭， 並把 PLURK 原有的時間軸河道作為縱向放置在視覺最優先的左側
30
31
GRAPHIC DESIGN
平面設計
32
05 佳音英語 35 週年主視覺 Joy English 35th Anniversary 佳 音 英 語 深 耕 台 灣 英 語 教 育 30 多 年， 配 合 此 次 35 週 年 的 核 心 標 語 More than
English， 我 們 以「 積 木 」 和「 堆 疊 」 這 兩個元素來做設計發想，代表著佳音英語 創立 35 年來一直以教育為基石，除了英 語教育還給予孩子們更多生活的知識和品 格，無限的可能性，沒有絕對的答案。
Art Designer / Chieh yu Wu Copywriting / Nadia Hsu Year / 2015
33
34
35TH ANNIVERSARY
an Engl i sh ! re Th Mo
設計過程 最初上層的設計需求是類似第 26 屆金曲 獎的風格以及配合『More than english』 這句核心標語。 由於『More than english』這句概念的範 圍很廣泛，充滿各種可能性；加上學習是 一個循序漸進的過程，很適合用“物體堆 疊”的方式去表現，且“堆疊”有不斷往 上的意象，能給予觀看者正面的印象。因 此初稿就從草稿裡選出有“堆疊”跟”立 體”的概念輔以一些趣味的元素去設計了 三款讓上層選擇。 最終定案為可讓孩子們自由創造組合且又 能堆疊的積木塔概念勝出，並再進行後續 的設計計畫。 35
More Than English!
中文字型 華康細圓體(P)
華康儷特圓(P)
佳音英語
佳音英語
英文字型 VAG Rounded Thin
Aa123
Freehand
VAG Rounded BT
Aa123
Aa123
Critical Thinking
Creativity
Solving problems
Improving work with innovation
pantone 485c
pantone 7406c
Communication
Collaboration
Understanding & exchanging ideas
Helping each other
pantone 7461c
pantone 339c 36
37
38
06 佳音英語新版吉祥物設計 Joy English Mascot Redesign 佳音寶寶是以企業 LOGO 中的音符和成長中的小豆芽這兩 種元素揉合後誕生出來的吉祥物，在企業創立的三十五年 間歷經兩次改版，在 2014 年由我和企劃部著手進行第三次 改版。
Creative Direction / Nami Chu Story / Nadia Hsu Art Designer / Chieh yu Wu Year / 2014
39
40
第三代吉祥物以前面兩代的造型做為 原型基礎，分別設計為男生版與女生 版並加入人物故事和背景設定，讓吉 祥物的設定更加立體，且修改造型跟 微調使其手腳、身體更能靈活做各種 動作和小朋友進行互動。 ◀ 舊版吉祥物
C 40 M 0 Y 90 K 0
41
C 0 M 65 Y 85 K 75
C 0 M 80 Y 80 K 0
42
43
44
45
46
d n a r G i ng p e n O
幕！ 開 校 京 東
07 佳音英語東京校主視覺 & 文宣品 Joy Language School Tokyo Branch 佳音英語東京校於 2015 年開幕落成，在此次專案裡我負責 用課本主角 -- 魔貓做為東京校吉祥物特別設計一套專屬於 日本子公司用的視覺識別文宣品 ｡
Creative Direction / Nami Chu Copywriting / Nadia Hsu Year / 2015
47
48
Sunday, July 27, 2014 Opening Celebration
School Counselor
JOY 国 際 教 育 グループ 東 京 事 務 所
E-teaching Demonstration
〒170-0005 東京都豊島区南大塚3丁目32-9西島ビル3F 3F, 3-32-9, Minamiotsuka, Toshima-ku, Tokyo, 170-0005, Japan +81-3-xxxx-1190 www.joylanguage.jp x x x .jo y.ja p a n @ g m a il.c o m
大塚
駅
南口 1F
JOY International Educational Group Tokyo Office
北口 大塚 駅前
線
線
荒川
山手
東京都豊島区南大塚三丁目32-9西島ビル3F 03-5952-1190
K i d s To d a y , L e a d e r s To m o rr o w ! w w w. j oylan gu age . j p
49
スクールカウンセラー
奧山 加奈美 Kanami Okuyama
Joy International Educational Group Introduction Tea Time
パーティー ン記念ティー 東京校オープ
Our in Us For vited To Jo ! on ti You Are In ra eb ning Cel Grand Ope
10:30-11:30 am.
都電
Grandi ng Open
INVITATION
幼児親子コース Juniorコース Prepコース Teensコース TOEICコース
JR大塚駅 改札を出て南口右側/徒歩1分 （ １ 階 の ロ ーソン が 目 印 ）
50
51
52
08 12 年國教 & 英檢須知精華指南 Compulsory Education & GEPT Essential Guide Art Designer / Chieh yu Wu Copywriting / Christine Lin Year / 2016 53
54
55
56
09 心靈黑洞：意識的奧秘
台灣大學第十七期科學探索講座主視覺 利用抽象幾何元素來呈現人類思考時的腦部運作。 共兩款提案。
Copywriting / Yi Shan Chang Art Designer / Chieh yu Wu Year / 2017
57
58