ARCEL POSTAL P
寄
數量 er of items Numb
地址 sender 姓名d及 寄件人 a dress of Name and 品 ts 內裝物co ten List of n
收
秘密於
黑箱裡
的成長
7 -201 2013
重量 ht Weig
禮品 Gift
作業
貨樣 le Samp
及地址 address 姓名d 收件人 a dress of Name and 尺寸 nsions in CM Deme
文件 ments Docu
商品 handise Merc
其他 Others
黑箱資料 03-04
實務設計 08-20
俗畫說 豐樂號 勺藥居
平面設計 21-34
關於愛的那些電影 品德教育手冊 可口可樂絲帶公益海報 安迪沃荷展-孤獨的永恆 猴吉祥
字體設計 35-44
黑金豚排 左營 盛花海 早日咖啡 品德教育 設計師工作室 瘋狂的陽光 玫瑰色的你 Deserts Xuan 轉變 協和蒸籠 漢河
插畫設計 45-52
城市-千變萬化 一咬上癮 修復 黑幕資訊 Just in the dream 人體當下，衣服當道
包裝設計 55-62
Wool-felt 巧克力包裝 酒瓶包裝
網頁設計 63-66
浮世繪
影片製作 67-70
動態圖形 Motion graphics 紀錄片-共業區
致謝
03
71-72
黑 箱
Black
作 業
Box
看的到的稱為身體上的取悅 感受到的稱為心靈上的滿足 所有程序都藏於黑箱中 想看見設計的本意 必須將鎖打開 並一一慢視其中的所有符號 並將黑箱放置於它適合的位置 給下個打開黑箱子的人所看 秘密於黑箱裡的成長作業
第一箱
＝
二個盒
＋
一桶黑漆
＋
一把鎖
＋
一支鑰匙
02
寄 內裝物品 List of contents
名
陳俊
CHEN, JUN-HAN
寄件人姓名
學歷
Education
樹德科技大 學 視覺傳達 設計系 Vsual comm unication d esign Shu-Te Univ ersity
2013
03
-201
7
寄件人姓名及地址 ame and address of sender 數量 Number of items
收
收件人姓名及地址 Name and address of address
尺寸 Demensions in CM
文件 Documents
黑箱資料
展覽
重量 Weight
禮品 Gift
貨樣 Sample
商品 Merchandise
其他 Others
Bkack Box Data
Exhibition 2016
做好回收才是真英雄 大型量販店ARM啟用記者會 資源回收藝術拼貼 青春設計節 視覺傳達設計類 入圍 Ｙouth innovative design festival Vsual communication design
2017
放視大賞 視覺傳達設計類 入圍 Vision get wild Vsual communication design 金點新秀設計獎 金點新秀贊助特別獎得獎 入圍 Ｙoung designer exhibition
經歷
Experience
詠騰科技顧問有限公司
實習生
仕倉國際企業 SMARTCLASS+ 最新教學軟體平台 DM製作 樹德科技大學 三好校園 立 製作
樹德科技大學 品德教育 手冊製作
法治學習-大學生應具之法律素養及案例宣導
海報製作
法治學習-性別平等法及案例宣導 海報製作 墨說品-品德教育手冊 海報製作 04
05
平面設計
1
四色黑
c=100 m=100 y=100 k=100
2
黑吃黑
dog eat dog
3
墨
ink
4
夜
night
1 3
排版 layout
字體設 type desig計 n
2 4
企業識別系 統 CIS
插畫 illustratio n
Chapter.
Cha
1 06
NICE
7
實務De sign 設計W orks
10
12345
7890
remain
ing tim
07
es
6
Chinese Proverb
俗畫說 三字格俗諺插畫圖鑑
概念
concept
華語文中，紙老虎、夜貓子、炒魷魚等等這類俗語三字格在現代，經常 被使用在我們的生活當中。但三字格的數量上百種，更因現今是地球村 社會，有許多外國人來到華語地區，在字面上與溝通上經常照成誤解。 我們希望改善這個問題，將其乏味的文字以趣味圖像化的方式來做詮釋 ，使外國人能以趣味方式來學習及了解。
團隊
陳俊翰
林一超
林曉彤
Team
配色，排版設計
插畫設計，企劃統籌
字體設計
08
藉由詞彙使用性質歸類三系列書籍，書籍內容包含圖像話詞彙、詞彙個別發音、原始由來典故及現今解 釋，與相近詞彙介紹。使外國人更能快速學習如何正確使用，並也能深入了解其內涵意義。 09
俗畫說專題製作 2017.05 Book design/Illustration design/Font design 10
1 2
3
4
5
6
7
8
9
1.地頭蛇 2.夜貓子 3.紙老虎 4.放鴿子 5.喝墨水 6.一窩蜂 7.鐵公雞 8.白眼狼 9.金龜婿 俗畫說專題製作 2017.05 Poster/Illustration design size:260mm×120mm 11
俗畫說專題製作 2017.05 Poster/Illustration design size:260mm×120mm 12
豐樂號 帆布品牌 形象設計
Feng Le Hao Canvas
概念
concept
以袋子的型態作為發想，想做出古早味的感覺所以採用籃子的形象，在 早期圓有圓滿的意思，所以整體形象以圓識別，LOGO上方的圖騰是想表 現出物資豐滿的樣子，整體看來會有豐富財富的形象。
13
廣富號有限公司
線
魚
台南市安平區安平路774號
花
菜
鳥
(06) 221 6567
筆
14
豐樂號帆布袋 Canvas 2015.05 Canvas design/cis design size:400mm×330mm
15
豐樂號名片設計 Card design 2015.05 Card design/cis design size:66mm×35mm
16
Shao Yao ju Hand soap
芍藥居 手工藥皂 形象設計
概念
concept
將品德教育分為七大類，包括孝敬，有禮貌，自律，誠實，環保，性別 平等，多元文化，並以較為可愛的插畫來呈現以上主題，希望能以輕鬆 自在的方式來學習品德教育。
17
團隊
陳俊翰
仇俞心
歐陽玉珍
盧丹
Team
排版設計
企劃統籌
插畫設計
插畫設計
勺藥居藥皂包裝 Soap package 2015.10 Package design/cis design size:120mm×120mm
18
19
勺藥居藥皂DM Soap Dm 2015.10 Dm design/cis design size:120mm×170mm
20
平面Graphic 設計Design
command + s ?
關於愛的那些電影 品德教育手冊 可口可樂絲帶公益海報 安迪沃荷展-孤獨的永恆 猴吉祥
21
關於愛的那些電影 雜誌設計
About loves movies
概念
concept
這世界的愛有很多種，雜誌裡找出10部充滿愛的電影，並做出電影的簡 介跟經典台詞，希望本雜誌能帶給在愛裡奮不顧身的所有人一個勇敢。
電影雜誌 Movie magazine 2015.01 Layout design size:182mm×257mm
22
1.
電影雜誌 Movie magazine 2015.01 Layout design size:182mm×257mm
23
2.
3.
4.
5.
1. 2.
目錄 盛夏光年
4. 5. 6.
女朋友。男朋友 藍色大門 藍宇
24
1.
4.
電影雜誌 Movie magazine 2015.01 Layout design size:182mm×257mm
25
2.
3.
5.
6.
1. 2. 3.
為巴比祈禱 藍色是最溫暖的顏色 愛情的模樣
4. 5. 6.
媽媽要我愛男人 愛在暹羅 春光乍洩
26
品德教育 手冊設計
Moral Education
概念
concept
將品德教育分為七大類，包括孝敬，有禮貌，自律，誠實，環保，性別 平等，多元文化，並以較為可愛的插畫來呈現以上主題，希望能以輕鬆 自在的方式來學習品德教育。
品德教育手冊 Moral Education manual 2016.10 Layout design size:182mm×257mm
27
1.
2.
1. 2.
目錄 孝親尊長
28
1.
4.
品德教育手冊 Moral Education manual 2016.10 Layout design size:182mm×257mm
29
2.
3.
5.
6.
1. 2. 3.
有禮貌 自律 誠實
4. 5. 6.
環保 性別平等 多元文化
30
可口可樂 絲帶公益海報
Coca-cola Public posters
Fighting AIDS With You
概念
concept
將可口可樂與有色絲帶做為集合，由於可樂LOGO形似彩帶，做出屬於紅 絲帶及粉色絲帶所代表的公益海報，，紅絲帶所代表的為愛滋，粉色絲 帶則為乳癌，希望可樂能帶給這兩種族群一個力量。
31
1.
2.
1. 2.
紅絲帶-愛滋公益海報 粉絲帶-乳癌公益海報
可樂公益海報 Cola Public posters 2016.10 Poster size:420mm×297mm
32
安迪沃荷展-孤 獨 的 永 恆 海報設計
33
安迪沃荷展海報設計 Andy Warhol poster 2015.10 Poster size:420mm×297mm
猴 吉祥 - 2016賀 年 卡
賀年卡 New year card 2015.10 Poster size:420mm×297mm
34
What are you looking for
字體Type 設計Design
黑金豚排 左營 盛花海 早日咖啡 品德教育 設計師工 瘋狂的陽 玫瑰色的 Deserts 轉變 協和蒸籠 漢河
35
作室 光 你 Xuan
黑金豚排 豬排店 商標設計
Black gold Pork chops
概念
concept
「黑」所代表的是黑豬肉，「金」則代表炸衣所呈現的金黃色，黑下半 部代表筷子，金字上半部則呈現出山峰，藉此表現出用筷子吃片好山好 水，整體呈現出一種最為珍貴，健康的豬排，喚起人們對食物品質的追 求及重視。
36
左營 新/舊 字體設計
Zuoying New/Old
概念
concept
現今的左營被火車隔出新與舊，靠近巨蛋這邊的為開發較高的新左營， 另一邊則是古蹟保存完整的就左營，因此左營有了兩種字體設計，左邊 的為新左營，以理性的幾何圖形組成，並以機械作為要素，代表左營的 開發。
37
在右手邊的為舊左營，主要有著明鄭時期的建築特色，著名景點為蓮池 潭龍虎塔及高雄孔廟等等，因此字體多採納舊式建築的屋簷，及城牆， 表現出有著許多廟宇的傳統左營。
38
盛花海 春夏裝上市
Flowers and the sea
Spring and Summer be in seas
概念
concept
春天是初生的日子，夏天是豐收的季節，盛花海代表四季中最為豐盛的 春夏天來到，春天孕育著種子，夏天等著豐收，在這春夏季能以盛裝打 扮。
39
盛花海-春夏裝上市 Flower and the sea 2017.06 Poster size:420mm×297mm
40
早日咖啡 咖啡店 字體設計
Early Coffee
概念
concept
希望能為早起開始勤奮工作的上班族一些打氣，讓整天下來能有十足的 精神工作，早日的命名由來是希望工作者能像早上的太陽，在接下來的 整天都能努力打拼，做出一番成就。
41
1.
2.
1. 2.
品德教育 設計工作室
42
1.
2.
3.
43
4.
5.
HAN HE
1. 2. 3.
瘋狂的陽光 玫瑰色的你 De s e r t s Xu a n
4. 5. 6.
6.
轉變 協和蒸籠 漢河
44
西瓜？青椒？ watermelon? green pepper?
插畫Illustration 城市-千變萬化 一咬上癮 修復 黑幕資訊 Just in the dream 人體當下，衣服當道
45
城市-千變萬化 City-Ever-changin g
城市拼貼 City Collage 2016.06 Illustration size:240mm×320mm
46
一咬 上 癮 A bit e a d d ic t io n
47
蘋果拼貼 Apple collage 2015.10 Illustration size:210mm×297mm
修復 repair
修復拼貼 Repair Collage 2014.06 Illustration size:210mm×297mm
48
黑幕 資 訊 Sha d y in f o rma t io n
49
資訊拼貼 Information collage 2014.03 Illustration size:210mm×297mm
Just in the d re am
Just in the dream Illustration 2013.10 Illustration size:210mmĂ—297mm
50
人體 當 下 ， 衣 服 當 道 The bo d y o f t h e mo me n t , c l o t h e s in po we r
51
姿勢下的衣服 Clothes Illustration 2014.10 Illustration size:210mm×297mm(6 sheets)
52
字體設計 Font design
插畫 illustration
1 . r e t p a Ch
53
站 Website d網 esign
拉哩拉 everythin雜 g
包裝設計
網站設計
1
翻箱倒櫃
rummaging through
2
一盒
a box
3
展開圖
open cube
4
搬家
move
p a h C 1
3
2 . r te
包裝e g a p cla
2 4
網站 esign d e t i s b We
圖形 動態raphic on g moti 拉雜 拉哩 thing y r eve
54
1.
2.
3.
4.
5.
6.
裝 7.
=
8.
包裝設計 Package Design
Wool-felt 巧克力包裝 酒瓶包裝
55
9.
Wool-felt Package
Wool-felt 羊毛 包裝設計
概念
concept
羊毛長期被手工藝愛好者使用，但羊毛容易混色，使羊毛間整理不易， 羊毛混色讓手工藝品品質不佳。此包裝的設計，用一體成型的結構去隔 開羊毛間觸碰的地方，能節省資源，也可達到收納的好處，讓人更方便 自在地使用羊毛。
團隊
陳俊翰
仇俞心
李冠毅
盧丹
周盛芳
王維德
Team
結構設計
展場設計
企劃統籌
插畫設計
結構設計
攝影
56
Idea 1
波浪型包裝
Before 易混色 互相沾染
A fter 波 可 一 可
浪 防 體 有
式 止 成 效
的 羊 型 減
Idea 2
包 毛 的 少
裝 直接沾染 結構 垃圾量
圓球型包裝
Before 易混色 互相沾染
After 兩 互 能 也
57
片 相 將 能
相 卡 個 避
同模組 住 體組成群體 免彼此染色
Ste p :
Ste p :
or
上 下
波浪型包裝 圓球型包裝
58
Idea 3
單一型包裝
Before 易混色 互相沾染
After 左右共兩個卡榫 將羊毛保護於包裝裡 能避免彼此染色
Idea 4
波浪型包裝
Before 無收納功能 分開包裝 浪費社會資源 After 波浪式的包裝 將兩塊羊毛片分開 避免沾染
59
Ste p :
Ste p :
上 下
單一型包裝 波浪型包裝
60
Idea 5
波浪型包裝
Bef or e 無收納功能
A f t er 波 羊 一 可
浪 毛 體 有
式 片 成 效
St ep:
波浪 型 包 裝
61
的 緊 型 減
包 緊 的 少
裝 卡於包裝裡 結構 垃圾量
上 下
巧克力包裝 酒瓶包裝
62
網站 Website 設計 Design 浮世繪
<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"><!doctype html><html lang="en-US"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1"><title>Light Theme</title><link href="file:///Macintosh HD/Users/chenjunhan/Library/Application Support/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eam1b531b19.TMP/css/singlePageTemplate.css" rel="stylesheet" type="text/css"><!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommendthatyou do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head><body><!-- Main Container --><div class="container"> <!-- Navigation --> ead><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Light Theme</title> <link href="file:///Macintosh HD/Users/chenjunhan/Library/Application Support/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eam1b531b19.TMP/css/singlePageTemplate.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> <script>var __adobewebfontsappname__="dreamweaver"</script> <script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <![endif]--> </head> <body> <!-- Main Container --> <div class="container"> <!-- Navigation --> <header> <a href=""> <h4 class="logo">LIGHT</h4> </a> <nav> <ul> <li><a href="#hero">HOME</a></li> <li><a href="#about">ABOUT</a></li> <li> <a href="#contact">CONTACT</a></li> <title>Light Theme</title> <link href="file:///Macintosh HD/Users/chenjunhan/Library/Application Support/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eam1b531b19.TMP/css/singlePageTemplate.css" rel="stylesheet" type="text/css"> <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> var __adobewebfontsappname__="dreamweaver"</script> src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script> 63 HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
浮世繪 網站設計
Ukiyo-e Website
64
<nav> <ul> <li><a href="#hero">HOME</a></li> <li><a href="#about">ABOUT</a></li> <li> <a href="#contact">CONTACT</a></li>
1.
浮世繪網頁設計 Ukiyo-e Website 2016.10 Website design/Illustration size:1024px
65
2.
3.
3.
2.
4.
5.
1. 2.
關於浮 世繪 葛飾北 齋
3. 4. 5.
喜多川歌麿 電影百日紅 連結
66
影片製作
Film editing
動態圖形 Motion graphics 紀錄片-共業區
67
動態圖形
Motion graphics
片長
45秒
68
Gong Ye qu Documentary
共業區 紀錄片
概念
concept
隨著我們大量的使用資源，我們犧牲了許多關於環境的部分，不管在土 地上，水中還是天上，我們都造成大量污染的程度，紀錄片錄製了環保 局跟工業區附近居民的感受，隨然兩邊說法有些不同，但兩邊想要得到 更乾淨的空氣理念是一致認同的，到底誰造了這片黑天，實在難找到元 兇，唯一最快能讓空氣更好的方法，就是監督自己別浪費資源。
69
團隊
陳俊翰
Team
採訪，企劃統籌
仇俞心
葉佳欣
陳盈蓁
攝影，剪輯
片長
5分55秒
70
感謝
71
本作品集「黑箱作業」的產生要感謝許多人，感 謝那些在 本書背後幫助我的那群人，就像 本 書的理念一樣，真正完成設計的是在幕後悄悄地 跟我一起完成 本書的同學老師及路人，我想任 何傑出的作品通常都有一群能在背後幫你 腰的 朋友和那些路過的甲乙丙丁，從高中學設計到大學 畢業也有了7年， 7年謝謝有你們，也謝謝自己的 持之以恆，也要面對未來自己的角色改變，不過我 想，我已經準備好了。
致謝 thanks 90°鞠躬
72
POSTAL PA
寄
內裝物品 List of co ntents
寄件 姓 Name人 及 and名 addr地 e
數量 Number
PARCEL
地址 ess of sen der
r of item s
收
收件人姓 Name an 名及地址 d addres s of addr 尺寸 ess Demens ions in C 重 量 M Weight
文件 Docume nts
禮品 Gift
貨樣 Sample
商品 Mercha ndise
其他 Others
件
NT
急件 UR G EN T
急件 UR G EN T
急件 UR G EN T
急件 UR G EN T
急件 UR G EN T
急件 UR G EN T
急件 UR G EN T