Rong's portfolio 2013

201 3

Rong ´s port folio

w w w . r o n g . co m . t w

WELCOME TO RONG'S PORTFOLIO

201 3

Ro n g ´s p o r tf o li o

i s s u u .c o m / r o n g r o n g hu

4

Prologue

用 不 同 的 角 度 看 世 界， 會 看 到 更 多 不 同 的 風 景。 用 這 小 小 設 計 本 事 兒， 紀 錄 曾 發 現 這 大 大 世 界 的 可 能 性。 不 知 不 覺， 設 計 已 成 為 我生活中的一部分 .....

2012.12.27 in Osaka

Prologue

5

學歷 Education 南台科技大學 資訊傳播系 高雄高商 綜合高中廣告設計科

設計專長 Design skills HELLO!

產品設計、手繪、視覺設計、多媒體動畫

電腦應用技能 Software skills Alias、Keyshot、Photoshop、Illustrator、Flash、Dreamweaver、 Maya、Premiere、After Effects、InDesign

證照 Certification and License

6

Resume

Resume

Autodesk Alias Studio 國際原廠證書 (certificate of completion)

胡容榕

畢業專題 Final Year Project

rong rong hu

95 年．台南中華店「85 度 C 慈善音樂饗宴活動企劃」 美術設計

0988702660

品牌形象設計 : 活動 DM、舞台布幕、店內佈置…等視覺規劃。

long20031001@hotmail.com

除臭公仔提案 : 結合店家免費提供咖啡渣的服務，設計除臭公仔週邊商品。

廣告設計丙級

工作經歷 Work experience 96-102 年．勝典科技 多媒體設計師 擔任主力多媒體設計師，設計專案風格與品質控管，協助分配工作、掌控進度、指導新人。 專案經歷 : [ 台北大眾捷運股份有限公司 ] 102 年捷運新文化影帶及翻頁電子書串接案 媒體設計 [ 行政院人事行政總處公務人力發展中心 ] 101 年數位教材製作 媒體設計 [ 臺南市政府教育局 ] 101 年度南瀛網路社區大學 數位學習課程增建服務委託案 媒體設計 [ 歐芳 ( 天津 ) 日化有限公司 ] kc.standard 2012 網站暨系統開發 網頁設計 [ 臺北市政府公務人員訓練處 ] 臺北 e 大 100 年度數位教材委外製作暨行銷推廣案 媒體設計 「Hot 剋任務 - 愛地球關鍵行動」教材 - 榮獲 數位典藏與數位學習國家型科技計畫 數位學習品質服務中心 AAA 認證標章 [ 教育部 ] 99 年兒少保護數位課程建置專案 媒體設計 [ 中國文化大學 ] 99 年新產品開發管理師 (NPDP) 課程製作 媒體設計

獲獎經歷 Awards 99 年．復古與創新 台灣原住民文創產品設計競賽博覽會 【守護．HOOK】入圍參展 95 年．中華電信加值軟體大賽 寬頻數位學習應用組 【子宮樂園孕婦數位學習網】佳作 95 年．第 1 屆 年代數位媒體 「I’m TV 創作大賽」入圍影片 3 隻 95 年．第 15 屆時報廣告金犢獎電視廣告類 - 華人廣告網【精采篇】校長獎 + 卡尼爾【儀容篇】入圍 94 年．第 14 屆時報廣告金犢獎電視廣告類 - 教育部【人暖篇】+【微笑篇】入圍 94 年．台灣客家文化發展協會 Flash 動畫甄選比賽 - 客家女性轉變 全國第三名 Resume

7

Contents

8

Contents

Part 1.

01

Part 2.

畢業專題

final year project

85 度 C 慈善音樂饗宴 行銷 & 週邊產品 產品設計 product

10

design

01

守護 ‧ HOOK 鑰匙圈掛勾

26

02

Elephant USB 小象隨身碟

42

03

Tower Night Light 夜燈塔

56

04

ID Holder USB 證件套隨身碟

76

Part 3.

多媒體設計

multimedia design

01

eBook 電子書

86

02

Webpage 網頁

94

03

UI 使用者介面

98

04

Animation 動畫

106

Contents

9

Part 1. 畢業專題 final year project

85 度 C 慈善音樂響宴

行銷企劃 & 週邊產品

小組團隊經與業主討論後，企劃以社會公益行銷活動，舉辦慈善募款音樂晚 會，邀請社區團體共同參與表演，建立良好關係與形象，並以互動性活動與 消費者進一步的接觸。於聖誕節前夕著手規劃佈置台南永康中華店，為 85 度 C 打造溫馨過節的氣氛，創造一個別具意義的非商業性活動。 活動地點：85 度 C 台南永康中華店 贊助單位：大橋教會、YMCA 公園托兒所、快樂兒童美語、大橋國中、南台附設 幼稚園及學生社團、黃鐘葉凌小提琴演奏 受贈單位：高雄市鼎金國民小學、財團法人創世社會福利基金會

10

Final year project / 85 度 C 慈善音樂響宴

Final year project / 85 度 C 慈善音樂響宴

11

12

Final year project / 85 度 C 慈善音樂響宴

1

2

3

1. 大橋國中管樂社 2. 中華店聖誕佈置 3. 工作人員活動前準備

Final year project / 85 度 C 慈善音樂響宴

13

1 2

3

1. 吳致和師傅與創世小朋友製作手工餅乾 2. 媒體記者招待會 3. 趣味闖關遊戲

14

Final year project / 85 度 C 慈善音樂響宴

Final year project / 85 度 C 慈善音樂響宴

15

活動 DM 1

2

3

4

1.2. 夾報 A4 雙面 DM ：活動前，夾報宣傳。 3.4. 活動流程兩折 DM：活動當天現場發送。

16

Final year project / 85 度 C 慈善音樂響宴

Final year project / 85 度 C 慈善音樂響宴

17

心願卡活動文宣 1

2

3 4

5

1. 心願卡宣傳海報：張貼店家。 2.3. 雙面心願卡：供消費者拿取書寫。 4. 心願卡抽獎名單海報：活動當日抽獎張貼。 5. 白色聖誕樹 : 來店消費者懸掛卡片。 18

Final year project / 85 度 C 慈善音樂響宴

Final year project / 85 度 C 慈善音樂響宴

19

活動文宣 1

2

3 4

1. 聖誕變裝秀報名表：發送於社區幼稚園。 2. 感謝狀：寄予參與表演的各社區團體表達謝意。 3. 活動識別證：發給活動當日的工作人員。 4. 邀請卡雙面 : 邀請貴賓參與活動的卡片。 20

Final year project / 85 度 C 慈善音樂響宴

Final year project / 85 度 C 慈善音樂響宴

21

除臭公仔系列週邊產品 尺寸：7.5cm( 長 ) x 7.5cm( 寬 ) x 15cm( 高 ) 材質：陶瓷、塑膠 活動佈置時發現店家所提供的免費咖啡渣，在推廣咖啡渣 的用處與創造商機的前提下，利用咖啡渣的除臭特性發想 公仔造型，設計除臭公仔系列週邊產品與加價購提案。

22

Final year project / 85 度 C 慈善音樂響宴

Final year project / 85 度 C 慈善音樂響宴

23

1

2

1. 煙灰缸：鋪層咖啡渣後使用。 2. 糖罐 & 奶精罐：公仔造型容器。 24

Final year project / 85 度 C 慈善音樂響宴

3

4

3. 攪拌器：頂端為公仔，底端為咖啡豆造型。 4. 馬克杯：杯蓋亦為杯墊。 Final year project / 85 度 C 慈善音樂響宴

25

Part 2. 產品設計 product design

守護‧HOOK

鑰匙圈掛勾

復古與創新 台灣原住民文創產品設計競賽博覽會 入圍參展 尺寸：6.5cm( 長 ) x 2.5cm( 寬 ) x 8cm( 高 ) 材質：檜木 兼具鑰匙圈與掛勾的功能，解決外出時雙手不夠用的困擾。 造型來自於台灣原住民的圖騰 - 百步蛇，菱形則代表眼睛的 意思。將蛇的身體轉化成掛勾的主體，用蜷曲的蛇體懸掛物 品。延伸百步蛇圖騰守護的意義，「守」護的諧音「手」， 隨時保護著我們的東西、祖靈庇佑族人的意思。

26

Product design / 守護 ‧ HOOK

Product design / 守護 ‧ HOOK

27

MIND MAP

設計方針 Design guidelines 1. 針對年輕到中產階級的族群設計。 2. 實用與美觀裝飾兼具。 外觀 : a. 造型利用各族特色發展，使用彷生、彷物的手法設計。 b. 材質使用木、金屬、塑料。 c. 色彩以大地色原主。

how much 價格 300~500 元

Why 為何使用 ★臨時找不到地方掛東西 ★機動性高：方便攜帶與懸掛拿取 ★裝飾性

3. 功能上兼具鑰匙圈與掛勾的特性。 4. 附著於橫桿或物體邊緣，機動性高。

story 故事 5. 價格設定於 300~500 元。 6. 藉由懸掛的小動作延伸祖靈守護的故事。

28

Product design / 守護 ‧ HOOK

排灣族的祖靈化身－百步蛇

how to use 如何使用 蛇頭向上，翹起來的尾巴是掛勾的開合扳手， 可任意夾在橫桿或物體邊緣上固定， 用蜷曲 的蛇體懸掛包包、袋子、衣服等。

When 何時使用 ★掛包包、提袋、衣服等 ★需臨時放置東西，手不方便拿時

who 目標對象 守護 ‧HOOK

★年齡：20~30 ／ 30~40 ／ 40~50 ★性別：不拘 ★職業：學生／上班族／家庭主婦 ( 夫 )

Where 在哪裡使用 ★橫桿類：門把／毛巾架 ★物體邊緣類：桌邊緣／門上緣／包包內的鐵環或線圈

what 外觀．功能 ★彷生：動物（百步蛇） ★色彩：暖色－褐（大地色）/ 金屬色－銀、鐵灰 / 飽和純色－紅、藍、橘…等。 ★材質：木 / 金屬 / 塑料 ★尺寸：6.5cm( 長 ) x 2.5( 寬）cm x 8cm( 高 ) ★功能：鑰匙圈－機動性高，尺寸小，攜帶方便 ; 掛勾－隨意增加支點懸掛東西。 Product design / 守護 ‧ HOOK

29

1 2

3

1 top 2 front 3 right

30

Product design / 守護 ‧ HOOK

Product design / 守護 ‧ HOOK

31

32

Product design / 守護 ‧ HOOK

Product design / 守護 ‧ HOOK

33

收合施力點 懸掛處

菱形紋

外觀細節 Detail 34

Product design / 守護 ‧ HOOK

旋轉栓

Product design / 守護 ‧ HOOK

35

36

Product design / 守護 ‧ HOOK

plastic

mental

wood

Product design / 守護 ‧ HOOK

37

使用說明 How to use 當手提太多東西不便做事時，暫時將提袋等隨身物品勾進鑰匙圈內，掛在門邊的把手上或桌緣 邊等懸掛處。

38

Product design / 守護 ‧ HOOK

Product design / 守護 ‧ HOOK

39

40

Product design / 守護 ‧ HOOK

Product design / 守護 ‧ HOOK

41

Part 2. 產品設計 product design

Elephant usb

小象隨身碟

尺寸：5cm( 長 ) x 3.5cm( 寬 ) x 3.5cm( 高 ) 材質：矽膠、塑膠、金屬、led 燈 為年輕族群設計的小象造型隨身碟，象鼻為 usb 接頭，蓋子則 用矽膠彈性的特質做不掉蓋設計。眼睛為 led 燈，接上 usb 時 會發亮。尾巴為吊飾孔。並以三種色彩作為８G、16G、32G 容量的區別。

42

Product design / Elephant usb

Product design / Elephant usb

43

隨身碟市場分析 ImageBoard for USB 1. 單功能的多於多功能的，造型圓滑的多於幾何的。 2. 材質大多是塑膠類 ( 軟硬皆有 )、其次是金屬，少數 有紙質與木材質。 3. 非自然材質的色彩較單純，人造材質的色彩較豐富 多變。 4. 分離與不掉蓋設計比例相當。不掉蓋包含：無蓋、 一體成型、按壓、旋蓋、組合式。

44

Product design / Elephant usb

ImageBoard for USB

01

ImageBoard for USB

02

Product design / Elephant usb

45

1 2

3

1 top 2 front 3 right

46

Product design / Elephant usb

Product design / Elephant usb

47

48

Product design / Elephant usb

Product design / Elephant usb

49

吊飾孔 LED 燈泡

外觀細節 Detail 50

Product design / Elephant usb

不掉蓋設計 usb 接頭

LOGO / 儲存容量

Product design / Elephant usb

51

使用說明 how to use

step1

52

Product design / Elephant usb

step2

step3

step4

Product design / Elephant usb

53

54

Product design / Elephant usb

Product design / Elephant usb

55

Part 2. 產品設計 product design

Tower Night Light

夜燈塔

尺寸：4.5cm( 長 ) x 4.5cm( 寬 ) x 15cm( 高 ) 材質：陶瓷、塑膠、金屬、led 燈 為習慣熄全燈睡眠族群所設計的感應照明燈，可放置於臥房、 走廊、玄關、樓梯旁、陽台等。當半夜醒來或遇緊急狀況，走 到之處便會自動亮燈，不需摸黑找開關。既是小夜燈也是備用 照明的手電筒。

56

Product design / Tower Night Light

Product design / Tower Night Light

57

小夜燈市場分析 ImageBoard for Night Light 1. 大多以單一照明的功能為主，少數有附加的功能。( 與時鐘、 手電筒、精油檯、喇叭的附加功能結合 ) 2. 偏暖色調及色彩豐富的居多。 3. 整體以塑膠材質製成居多，少部分運用木、布、金屬的材質。 4. 固定插座型的與移動充電型的分佈數量相當，可移動設計有增 加趨勢。 5. 可針對原本不使用小夜燈的族群開發，思考附加功能，創造其 需求而使用。 6. 依不同空間搭配不同的造型特性，設計移動型小夜燈，營造特 殊氛圍。(ex: 門口、陽台、旅館 )

58

Product design / Tower Night Light

ImageBoard for Nightlight

01

ImageBoard for Nightlight

02

Product design / Tower Night Light

59

設計方針 Design guidelines 1. 使用對象男女不拘、年齡 20-50 的上班族，針對原本不使用小夜燈的 族群開發設計。 2. 室內使用。 3. 成本設定 400-600 元。 4. 使用 LED 燈。 5. 造型與材質皆以自然風格發展，使用木、布、竹、陶瓷等自然的材質。 6. 照明功能為主，可充電分離式電池，遇緊急狀況可充當手電筒使用。 7. 機動性或對使用環境有加分效果的造型。

60

Product design / Tower Night Light

MIND MAP

Product design / Tower Night Light

61

1

2

1 front 2 back 3 right

62

Product design / Tower Night Light

3

Product design / Tower Night Light

63

64

Product design / Tower Night Light

Product design / Tower Night Light

65

產品外觀功能說明 Product appearance Function 塔頂燈罩 內含二組 led 燈，具小夜燈、 手電筒與備用照明燈功能。

亮燈模式旋轉鈕 on 恆亮

66

Product design / Tower Night Light

auto 自動感應

off 關閉

紅外線感應窗 感應移動物體所熱能而亮 燈，並在離開後關燈。

塔身燈罩 霧面 PC 材質，內 含 led 燈。

底座 粗糙表面增加 旋轉磨擦力。

Product design / Tower Night Light

67

。旋轉插頭 90 插頭式充電，插頭旋轉收合不佔空間。少了電源線的限制可隨意放置，也可當手電筒攜帶使用。

1

2

3

1 側面：插頭旋開 2 背面：插頭收合 3 斜背面：插頭旋轉收合 68

Product design / Tower Night Light

亮燈模式設定 1

1 2 3

2

3

恆亮 : 旋鈕轉左 自動感應 : 旋鈕置中 電源關閉 : 旋鈕轉右 Product design / Tower Night Light

69

使用環境 1

2

1 小夜燈 : 樓梯旁 2 手電筒 : 室內走廊

70

Product design / Tower Night Light

Product design / Tower Night Light

71

72

Product design / Tower Night Light

Which

one

is

your

taste?

Product design / Tower Night Light

73

Tower Night Light recyclable

74

Product design / Tower Night Light

charging

夜燈塔 led

save

Product design / Tower Night Light

75

Part 2. 產品設計 product design

ID Holder USB

證件套隨身碟

尺寸：14cm( 長 ) x 1.5cm( 寬 ) x 13cm( 高 ) 材質：皮、塑膠、金屬、布 為減少隨身碟的遺失率，結合上班族常用的證件套，外加拉 鍊袋可放零錢或鑰匙，設計一體成形的證件套隨身碟。以掛 頸的方式貼身攜帶，使用隨身碟時將金屬釦解開分離皮繩， 使用完畢後，掛在身上的皮繩可提醒將它收回。萬一遺失， 名片上的資訊也能提高被尋回的可能性。

76

Product design / ID Holder USB

Product design / Product design / ID Holder USB

77

1 2

3

1 top 2 front 3 back

78

Product design / ID Holder USB

Product design / Product design / ID Holder USB

79

80

Product design / ID Holder USB

Front

back

left

ĺ‘ą Product design / Product design / ID Holder USB

81

拉鍊袋

USB

82

Product design / ID Holder USB

卡片插入孔

皮繩

卡片放置處

金屬鈕釦

Product design / Product design / ID Holder USB

83

84

Product design / ID Holder USB

你的 隨身 好幫手!

ID Holder USB 證件套隨身碟

16G USB 2.0 Flash Drive ID Holder / USB / Pocket

Product design / Product design / ID Holder USB

85

Part 3. 多媒體設計 multimedia design eBook

2013 台北大眾捷運股份有限公司

［捷運新文化影帶及翻頁電子書］ 主視覺 : 捷運路線圖 封面標題文字以捷運路線圖繪製，搭配主題意涵，排列的簡易人形表示關懷各種捷運乘客。封面 與封底背景是台北城市風景。前言的視覺編排，以路線圖顏色與簡單圓球帶出活潑感。目錄與內 頁的章節名稱也都延伸路線圖的站點與顏色來設計。

86

Multimedia design / eBook

封面 + 封底 Multimedia design / eBook

87

前言 88

Multimedia design / eBook

目錄 Multimedia design / eBook

89

影片 + 圖文編排 90

Multimedia design / eBook

點按播放鈕立即切換至大尺寸影片 Multimedia design / eBook

91

測驗題 92

Multimedia design / eBook

設計教案表 Multimedia design / eBook

93

Part 3. 多媒體設計 multimedia design Webpage

2012 歐芳 ( 天津 ) 日化有限公司

［ kc.standard 網站暨系統開發 ］網頁設計 主視覺 : 自然、大幅風景圖 搭配客戶的芳療產品，以自然生機、四季結合節慶的主題製作網頁樣版首頁設計，供不同時節 替換使用。

94

Multimedia design / webpage

［自然療法專頁］ Multimedia design / webpage

95

［春櫻。春節］

96

Multimedia design / webpage

［夏。母親節］

［秋豐收。中秋節］

［冬雪。聖誕節］

Multimedia design / webpage

97

Part 3. 多媒體設計 multimedia design UI

2011-2013 各大專案

［UI 使用者介面設計］ 主視覺 : 依各門的課程內容與客戶風格喜好而設計 課程 UI 為整門課的使用介面，在成品製作前先製作完成並需經客戶確認。而 demo UI 則是前期 標案用的 UI，專案得標後依此風格製作各門課程 UI。

98

Multimedia design / UI

2013 李長榮化學工業股份有限公司［三乙基鋁卸程序］課程 UI Multimedia design / UI

99

2013 高雄市政府公務人力發展中心［高雄特色 easy talk］課程 UI 100

Multimedia design / UI

2013 臺北市政府公務人員訓練處 臺北 e 大 demo UI Multimedia design / UI

101

2011 國民健康局 demo UI 102

Multimedia design / UI

2011 台灣大哥大［資安停看聽］課程 UI Multimedia design / UI

103

2011 行政院人事行政總處公務人力發展中心 ［媒體溝通］課程 UI 104

Multimedia design / UI

2011 行政院人事行政總處公務人力發展中心 ［職場女強人的兩難］ 教學影片 UI Multimedia design / UI

105

Part 3. 多媒體設計 multimedia design Animation

2012 臺北市政府公務人員訓練處

［Hot 剋任務 - 愛地球關鍵行動］ 以星球科技風呈現課程包裝，用情境動畫描寫未來地球升溫不再適合人類居住。主題人物－蓋 婭教授找到拯救暖化問題的方法，搭乘時光機回到過去，尋找更多的線索，並陸續將他的發現 傳遞給學習者，以六項關鍵任務的方式傳遞給大家，必須完成任務後才能具備有拯救地球的知 識和能力。 榮獲「數位典藏與數位學習國家型科技計畫 數位學習品質服務中心」- 數位教材 AAA 認證標章 年度【最佳數位教材品質】獎 : 教學策略具創意且教學媒體製作精緻，促進學習者理解。 年度【數位學習全方位品質精進】獎 : 挑戰 Epprobate 國際數位學習品質認證，皆獲得佳績。 http://www.elq.org.tw/news_detail.php?info_id=104 106

Multimedia design / Animation

UI 設計

Multimedia design / Animation

107

108

Multimedia design / Animation

角色設計 1

2

1 蓋婭教授 2 努特小北極熊

Multimedia design / Animation

109

功能鈕版型 / 開場動畫 / 情境動畫 110

Multimedia design / Animation

課中測驗版型 / 單元目標版型 / 圖說動畫 Multimedia design / Animation

111

單元小試 : 關鍵任務 112

Multimedia design / Animation

總測驗 : 關鍵行動大考驗 Multimedia design / Animation

113

Part 3. 多媒體設計 multimedia design Animation

2012 行政院人事行政總處公務人力發展中心

［希望與導向 - CEDAW 公約介紹］ 主要場景 : 希島 法條教材以主題樂園呈現，每個單元皆設計為島上的景點，並以導向性的纜車作為 循序漸進閱讀的方向。此場景也設計為 UI 上的功能鈕「課程目錄」選單供點按， 藉由樂園包裝引發學習動機、加深閱讀印象與樂趣。

114

Multimedia design / Animation

Multimedia design / Animation

115

2 1 116

Multimedia design / Animation

3

4

6 5 各單元場景畫面 Multimedia design / Animation

117

右上角小手提示點按「課程目錄」功能鈕 / 課程目錄選單 / 圖文動畫 118

Multimedia design / Animation

圖文動畫 Multimedia design / Animation

119

課中互動測驗題 120

Multimedia design / Animation

單元小試 Multimedia design / Animation

121

201 3

R o n g ´s p o r t f o li o

i s s u u . c om /r on gr o n ghu