Liu Yu Hong Portfolio 2017 - NOW
我是劉昱宏，資訊與設計，是同時存在我腦中的兩種訊號
ABOUT
共振
Reso nance
computer +
design
若資訊是規則的二進位數位訊號，那設計
仿佛是在發散與收斂之間跳躍的類比訊 號，在我腦海互相疊加與影響，彼此共振 出強大能量。
設計於我，是結合跨領域的思維與能力， 探索現有狀態的最佳可能。 國立中央大學資訊工程系
劉昱宏
mail joh66888@gmail.com phone +886-958-651-758
經驗
中央大學
Exp e r ie nce s 2019.4 - 2019.5 2019.5 - 2019.6 2019.9 - NOW 2019.10 - 2019.11 2019.10 - 2020.1 2020.3 - 2020.6
校外
暑期資工營 logo 設計 資工音樂會主視覺
藝文中心兼 107 電影院助理
23 屆校運會暨資電學院院服設計 中大生活 app 介面設計
網路學習研究所使用者經驗課程
2020.5 - 2020.6
飯店網站評論分析專案前端工程組
2018.9 - 2019.1
交大建築研究所基本設計課程
2020.3 - 2020.6 2020.7 - 2020.9 2020.10
技能
2017 - NOW
清大清華學院平面設計課程 悠福科技公司前端工程實習
台藝大視覺傳達系設計工作坊
Sk i l l s
設計
平面設計 介面設計
Xd
程式
網頁設計
HTML.CSS.JavaScript
前後端整合 程式設計
Ps.Ai.Id
Vue.Angular.SQL Java.Python.C++
CONTENTS 08
桃園鐵玫瑰 音 樂 節
14
01
中 大 生 活 A PP
02
Live in NCU APP UI Design
2021 Taoyuan Iron Rose Festival
為桃園在地的音樂節設計整體活動主視覺。
整合討論、活動、交通三大功能的校內生活
40
48
場域轉譯
05
Translation of Space
從距離、時間等客觀認知，到心理層面的主觀 情感，嘗試以不同思維分析自己的生活場域。
APP，我負責主導介面設計。
其他作品 Other Works
個人近期的插畫以及實驗性作品。
06
24
字型小書實 驗
34
03
Experimental Typography Book
運用點線面的概念編排文字，從中探討文字、 空間、材質彼此的互動關係。
資電學院院服設計
04
23th EECS Clothes Design
擷取各系的特色與精神進行資電院服設計。
202 1 Taoyu a n Ir o n Ro s e Fe s ti val
桃園鐵玫瑰 音 樂 節
01
鐵玫瑰音樂節於 2012 年於桃園展演中心首次舉辦，鐵玫瑰的名稱由來，源自桃園展演中心的鋼構幾何
建築。鐵玫瑰音樂祭常會舉辦青年、社會組的比賽，藉由桃園航空城地理區位的優勢，讓年輕有潛力的 樂團能夠在這座舞台上被世界看到，發揚新生代音樂成為鐵玫瑰的使命與精神。
桃園鐵玫瑰音樂節 2021 Taoyuan Iron Rose Festival 01
9
8
花瓣單元
+
海浪意象
=
視覺元素
設計 理 念
在視覺上，用螢光綠代表新世代的力量，用 1/4 圓
結合玫瑰花瓣與波浪向外發散的意象，體現鐵玫瑰 做為年輕世代的舞台，如海潮般向外擴散的精神。
桃園鐵玫瑰音樂節 2021 Taoyuan Iron Rose Festival 01
11
10
實際運用
重新組構視覺元素，運用在不同的傳達媒 介上，讓視覺上是合理且具有輔助意義。
桃園鐵玫瑰音樂節 2021 Taoyuan Iron Rose Festival 01
2.
3.
1. 活動毛巾 2. 人員識別 3. 活動摺頁
1.
13
12
中大生活應用介面設計 Live in NCU APP UI Design 02
中大生活
Live in N CU APP UI Des ign
中 大生活 A P P 介 面 設 計
02
本產品由本屆資訊工程系聯合中央大學學生會發起，旨在提供校內學生完善的社群、資訊平台，目前已 經實際推出第二階測試版，正在著手第三階段的優化與開發。在本次的計畫中，結合自身資訊背景以及 對設計的熱忱，主導介面設計組並與前端開發部們進行緊密合作。
logo 設計以校內常與學生互動的松鼠為靈感來源，結合松鼠尾巴與問號作為視覺形象，傳達生活中有 許多未知的驚喜，正等待大家探索與參與。
14
15
中大生活應用介面設計 Live in NCU APP UI Design 02
In fo r m at i o n Archi t e ct ure 本應用程式的目的除了提供學生方便的資訊，亦希望能活絡校內的互動 氛圍。透過整合中央學生們的需求，歸納出應用程式優先開發的三個方
向：討論、活動，以及交通，並且個別分析資訊架構作為設計的基礎。
16
17
討論版
選擇文章 發文
個人
熱門
看板
搜尋
貼文資訊 1
貼文資訊 2
貼文預覽
取消
文章資訊
交通版 選擇路線 加入最愛
公車列表
行動版
火車版搜尋
火車列表
加入班次
方向選擇
站牌選擇
公車時刻表
取消
站牌位置
中大生活應用介面設計 Live in NCU APP UI Design 02
活動版
發文
發現
我的
審查中
貼文資訊 2
貼文資訊 3
取消
貼文資訊 1
貼文資訊 4
Wi r e f lows
為了提供良好的使用者經驗，以資訊架構做為基礎，結合使用流程 與線框圖進行設計並與前端工程開發組溝通。
18
19
中大生活應用介面設計 Live in NCU APP UI Design 02
U I C o n si de rati o n
三種平台的介面設計，大致以簡潔的列表形式呈現。透過將內 容予以分類並制定一套共同的層級系統，以及介面布局的適當
留白，讓使用者在擁有舒適的視覺體驗之餘，能輕鬆分辨資訊。
20
21
中大生活應用介面設計 Live in NCU APP UI Design 02
Vis u al I d en t i t y
在中央大學裡，松鼠和松樹是學生們記憶的一隅，也成為介面配色的靈感之一。以橘黃色為主色調，湖 水綠為輔，塑造充滿活力、溫暖的視覺形象，呼應促進校內學生交流的核心理念。
1. 2.
3.
1. 討論版 2. 交通版 3. 活動板
22
23
Exp e r i m e n ta l Typ o g ra p hy Desi gn
字 型小書實驗
03
以點、線、面的尺度重新組構編排文字，探討文字的幾何、流線， 與材質疊加的可能，讓文字彼此之間有不同層次的互動關係。考 量 這 次 的 內 容 極 富 幾 何 與 線 條 的 精 神， 運 用 摩 斯 密 碼 的 線、 圓 作 為 視 覺 系 統， 彼 此 交 疊， 穿 透， 串 聯 每 一 次 字 形 實 驗 的 疊 加 概 念以及字體之間的互動關係。
字型小書實驗 Experimental Typography book 03
封面設計
封面設計將自己名字的摩斯密碼，轉換為在層中穿梭的樣 式，呼應本次作品是由一層一層的實驗疊加串連而成。
24
25
C
O
N
T
E
N
T
S
About this book
Composition Letterforms
1
Letterforms and words
8
Letterforms, words and text with graphic elements 13
Texture and positive / negative 20
目錄設計
小書的內容分為四個主題 : 字型、字型
與字串、字型字串與段落、材質與正負
空間。側面重疊而漸長的線，表達每一 個階段實驗都來自上一階段疊加演進。
字型小書實驗 Experimental Typography book 03
字型、字串的組合
Letterforms and words
29
28
字型、字串、段落、材質與正負空間
Letterforms, words, texts, texture and positive/negative
字型小書實驗 Experimental Typography book 03
31
28
字型小書實驗 Experimental Typography book 03
33
28
資電學院院服設計 23th EECS Clothes Design 04
2 3 t h E E C S Clothe s De si gn
資電學院院服設計
04
資電學院學生具備資訊與電子背景，不斷找尋創新突破的方法，在 科技洪流中力爭上游，各自開拓新時代的版圖；因此本次設計以力 爭上游為精神，並運用各系所的特色作為 logo 設計。
34
35
設計 理 念
資訊的邏輯能力、電機的爆肝日常、通訊的訊號 傳播、不分系的摸索，轉化不同科系的特色為器
官意象、以電路為血液，串聯成完整的人體。傳 達資電學院，彼此合作又不斷追求突破的精神。
顏色使用深藍、銀灰、亮紅強調創新能量與科技 氛圍。
資電學院院服設計
2.
3.
4.
1. 2. 3. 4.
資訊不分系 資訊工程系 通訊工程系 電機工程系
= = = =
23th EECS Clothes Design 04
1.
摸索 邏輯 收訊 爆肝
36
37
視覺 延 伸 到 更 多 實 際 運 用
將視覺元素延伸運用在宣傳小卡，給予各系館做自由運用。
資電學院院服設計 23th EECS Clothes Design 04
39
38
Tran sl ati o n o f S p a c e
場 域轉譯
05
嘗試以不同的思維，重新解讀、記錄自己與周遭場域的時空關係。
場域轉譯 Translation of Space 05
41
40
紀錄 自 己 的 生 活 軌 跡
大學時的我，時常因為課程與活動關係奔走於各地，對於不同地域的 印象是零散的。藉由蒐集自己行動的歷史數據，繪製出移動軌跡與活 動半徑，看見自己於大學生活裡的蛛絲馬跡。
Range of distance Connection of regions Location of activity
場域轉譯 Translation of Space 05
1. 2.
3.
1. 2. 3.
Jia'an Village, Longtan District, Taoyuan City National Chiao Tung University, Hsinchu City National Central University, Taoyuan City
42
43
以情感的尺度觀看
對於每一個地區的主觀情感會誕生不同的距離認知，以這樣的概念出
發，衡量每一個地區在我心裡代表的重要程度，轉譯既有的空間概念。
場域轉譯 Translation of Space 05 quality
45
44
1. Jia'an Village, Longtan District,
2. National Chiao Tung University,
3. National Central University, Taoyuan
Taoyuan City
Hsinchu City
City
場域轉譯 Translation of Space 05
透視情感
將每個場域於心中的質量轉換為穿透的深度，以多個面的 模型重疊組構出地域的厚度。在光影間得以隱約透視不同
場域之間的質量關係，打破單用距離衡量空間關係的認知。 46
47
突破
乘著愛與勇氣，突破自我，迎向海的神秘深邃。
其他作品 Other Works 06
O the r Wo r ks
其他作品
06
這個系列包含近期累積的實驗性作品以及自由創
作。透過這些作品，讓自己去發想文字、圖形重 新詮釋的可能，開拓更多的思考空間。
48
49
F A T
+
相撲力士
字 體 實 驗 系列 - FAT
其他作品 Other Works 06
51
50
其他作品 Other Works 05
字 體 實 驗系列 - 森
以森林之幽暗陰森做為發想，透過樹 幹營造出負空間，呈現森的字體型態。
52
其他作品 Other Works 06
字 體 實 驗系列 - 森
以森林之幽暗陰森做為發想，透過樹 幹營造出負空間，呈現森的字體型態。
52
53
其他作品 Other Works 06
字 體 實 驗系列 - 鬆
分別使用鬆散的塊體、鬆軟的泡沫，以 及鬆開的紗窗線條呈現「鬆」的意涵。
54
55
其他作品 Other Works 06
異 空 間 - 秩序
連結平面設計最基本的點線面概念，營
照出符合主題性質且有空間性的構圖。
56
57
其他作品
Other Works 06
自 畫像
59
58
58
59
共振的能量，將不斷朝未來推進。
Resonance of Computer and Design