Page 1

Xiao Rong Wei 魏筱蓉

00:00

2019

4:05

PO R TFO LI O


GR E ETI NG !

A B OU T M E

魏筱蓉 W e i , X ia o R o n g

juli eya. w e i @ g m a i l . co m

2016

NTUB 第一屆 Line 原創貼圖競賽

靜態組佳作

教育部第二屆全國校園雲端創新應用大賽

入圍

臺北商業大學專科部資訊專題成果競賽

第二名

C r a sh F e v e r 第 二 次 徵 稿 活 動

原創組佳作

YKH 第五屆插畫比賽

入圍

巴哈姆特 ACG 創作大賽

入圍

NTUB 資訊管理科學會

美宣長

國立臺北 商 業 大 學

NTUB 資訊研究社

副美宣長

資訊管理 科 專 科

S I T C ON 學 生 計 算 機 年 會

文創組繪師

國立臺北 商 業 大 學

NTUB 通識教育中心

美宣設計

NTUB 創新經營學院二技畢籌會

副美宣長

蜂巢行動,飛越同溫層

UI/UX

+ 886- 9 2 2 - 4 5 9 - 1 0 9 2017 希望創造 出 有 溫 度 的 設 計 , 為這個世 界 帶 來 更 正 面 的 力 量 。

2019

天生喜愛 美 術 、 創 造 , 樂於奉獻 技 能 。 2015

數位多媒 體 設 計 系 二 技 A型,摩羯座 。

2018


CO N T E N T

03

平面設計 設計展設計與策展 書冊與海報

25

動態影像 動畫專案 Storyboard

35

網頁互動 Web/Mobile UI/UX

41

手繪 / 漫畫 / 動畫 創作,是最美好的事


平面設計 調配公式 子時三刻 校園護照設計 圓世界畫展 S I T C ON 另類怪談 Line 貼圖 美德芙若網站系列 Banner 教育電子書配圖


05

調配公式

調配公式 1

國立臺北商業大學 創新經營學院 108 級畢業展


平面設計

Credit

形象視覺設計 | 魏筱蓉 標準字設計 | 張紋綺、李冠儀 展場設計 | 魏筱蓉、陳姿吟、張紋綺 主視覺宣傳片製作 | 魏筱蓉、陳婕蓓 主視覺周邊設計 | 魏筱蓉、陳姿吟、張紋綺、李冠儀

調配公式主視覺形象宣傳片

影片播放

人文、 才 能 的 調 和 , 調 配 公 式 的 由 來

設計就像搾汁,人人都有調配公式

二技生大多是由各種不同的科系集結而成

似量角器般規矩,又似切割過的檸檬片般

一班,大家都有不同的背景專長。國立臺

不規矩。我們就像不同的果粒、來自不同

北商業大學創新經營學院由「數位多媒體

的果實。

設計系」、「商品創意經營系」、「商業設計

製作一杯特調,都有它需要的比例。按照

管理系」三系所組成,專精以擅長的部分

比例加減乘除、日以繼夜的榨汁,這就是

也不盡相同。集合這種不同原料 ( 科系 )、

調配公式。

素材 ( 人才 ) 與色彩 ( 專長 ) 而成的就是我

用你的色彩,充填純白的公式。

們的主題——調和。

06


07

調配公式

各式展覽需求平面輸出

Facebook banner、網站用 banner、表單圖 ... 等等


平面設計

展場處指標立座、節目單、大型窗框 ... 等等大件輸出

08


09

調配公式

展場環境概覽

展場入口|簡潔的入口創造大器感,結合主視覺豐富入口內容,創造攝影場所。

三元素的組合、聯合展覽的分支

調配公式底下又有三支三系各自獨立經營 的視覺,分別是數位多媒體設計系的「子 時三刻」、商品創意經營系的「攪色」以及 商業設計管理系的「聚交」。 三系主題「時間」、「色彩」、「光線」聚集 在一起,因此調配公式同時意指創作所需 的顏色、光學以及光陰。

以純白為底的展場規劃

展場以白色為主色,為在三系不同的主色 系下做出調和及平衡感,也增加展場的通 透感。入口處的球池飲料杯,色球可以自 由調度以配合「調配」的主軸,讓來客可 以與自己調出的飲料杯合影。

會場最後在牆上放置了每位設計師的信箱 (左中),並用三系色彩區分成三塊,讓每 位貴賓都可以分享觀展心得給喜歡的設計 師。


平面設計

調配公式周邊

呼應主視覺的周邊設計

周邊持續以調配公式主視覺作為形象包裝, 設計系列宣傳周邊。 紙膠帶做了一點變化,只取了調配公式的 概念「量度」,設計了刻度於紙膠帶上,並 且會隨著長度改變數字內容。此設計為減 少商業宣傳感,增強紙膠帶愛好者搜集的 慾望。

販賣周邊們的販賣氛圍設計

販賣處牆面(左頁最下圖)以白色黑線描 繪幻想空間,創造出貴賓在調配公式世界 中探索的氛圍,在幻想空間牆上擺出三系 代表的物件:沙漏(數媒,時間)、放大鏡 (商設,光線)、調色量杯(商創,色彩)。

10


11

子時三刻

子時三刻 2

國立臺北商業大學 數位多媒體設計系 108 級畢業展


平面設計

Credit

形象視覺設計 | 魏筱蓉、丁咨引 標準字設計 | 李冠儀 展場設計 | 魏筱蓉 主視覺宣傳片製作 | 魏筱蓉 主視覺周邊設計 | 魏筱蓉、李冠儀、陳婕蓓

子時三刻 Facebook 動態 banner

影片播放

調配公式 的 子 展 覽

子時三刻係調配公式的子展覽,為展覽內部的其中一分區。 其主軸除了主視覺的展現之外,最主要為展品的陳列,與其自主的周邊。

動畫的時 間 、 日 夜 的 時 間 、 創 造 的 時 間 , 子 時 三 刻 的 由 來

設計科學生經常是夜行性動物,尤其身處動畫系更是不分日夜的工作。 絞盡腦汁,奉獻精神時間,獻給同樣以時間為單位組成的動畫、遊戲。 子時三刻,就是這麼誕生的。 沙漏代表時間、大腦代表精神投入,中間圍繞的圓弧代表物換星移的宇宙。

12


13

子時三刻

展場環境概覽

夜色的展場環境

黑色調背景讓展場從白天走近寧靜的黑夜, 能以更平靜的狀態觀賞動畫與體驗遊戲, 也增添了身處電影院的氛圍。 主視覺牆有互動裝置——可轉動的羅盤, 上頭標記了十二地支以及月亮陰晴圓缺, 代表著時間的流動,更可從轉動時月亮的 變化窺見動畫幀數的隱喻。

絹印展場活動

展覽現場因呼應周邊,我們舉辦了絹印體 驗活動。貴賓可以自己設定顏色與選擇我 們設計的圖樣,自己手動體驗絹印、製作 周邊,並把完成的袋子帶回家。 絹印圖樣設計也是以子時三刻為中心概念。


平面設計

子時三刻周邊

夜裡的 紅 星 , 展 覽 最 後 的 綴 飾

周邊共有三款:金屬徽章、明信片、絹印 杯套。 明信片以兩色孔版印刷,上方的圖案並非 只連結子時三刻而已,而是將所有專題組 以其印象 logo 印於上方。配合特殊紙質讓 明信片更具紀念價值。 金屬徽章讓周邊多了分嬌貴的氣質,更強 調了時間是珍貴的寶物。徽章也可以別在 絹印杯套上成為一體的裝束帶回家。

14


15

校園學習護照

校園學習護照 3

@ 國立臺北商業大學 通識教育中心

護照書封

護照內頁概覽


平面設計

校園學 習 護 照

校園舉辦各式通識課堂活動(如:演講), 學生只要參與就可收集點數兌換獎品。 因此,護照用以記錄學生在校期間的各式 學習歷程。

獨立設 計 書 刊

受學校通識中心之託製作的這本書冊。 利用莊重的氛圍建立學習的形象,並且精 緻的描繪細節、帶給學生學習是精巧美好 的形象。 地球儀代表世間萬物,月亮與星星圍繞表 生生不息、學無止境。希望學生們能帶著 這本護照,充滿朝氣地聽課、參與演講。

小巧思

點數收集的貼紙也是由我製作,以桂冠為 型,增添貼紙嘉獎的榮耀感。 搜集欄位的頁數,每累積到固定頁數就會 有小小的提示告訴護照主人:快要可以換 到獎品了!

16


17

圓世界畫展

圓世界畫展 4

李瑞慶老師 圓世界畫展

畫名卡|現場用來標明著作名稱使用

三折 DM

按照畫家 想 要 的 方 式

圓?半圓?

製作期間,持續地與畫家本人多方討論,

圓世界,卻將圓剖成兩半,寓意為畫展尚

定調了整體的主色以及想要給人的感受。

未完成。嘉客必須造訪,畫展才是圓滿。

畫家也非常信任我,讓我自由地詮釋了他 描述出的境界,作為畫展的主視覺。 主視覺用的中心圖畫是畫家的作品。我以 輔助的形式襯托出他的作品之美。 非常榮幸有這樣的機會與畫家合作!


平面設計

畫展現場張貼大型輸出

18


19

SITCON

SITCON 系列人物設計 5

2015-2017 系列角色

學生計算機年會


平面設計

製作角色走路動圖

學生計 算 機 年 會 ?

是一個由學生自治組成的籌備組織,每年 定期舉辦資訊講座、推廣開源、程式撰寫 等等。

人物設 計

在參與 SITCON 的這段期間,我是以繪師 身分提供活動舉辦上的協助。設計形象角 色,並將角色製作成周邊、立牌 ... 等等。 偶爾也需支援平面輸出上的缺口。大家都 是可活動的人力,互助互愛的友善組織。

20


21

另類怪談

另類怪談 line 貼圖 6

NTUB 第一屆 原創貼圖 競賽

自主經營角色群

佳作

專案成員 角色設計、草稿、上色 | 魏筱蓉、林秉蓉

上架貼圖

分工合作

這是一個與朋友長期經營的專案,目的是

與朋友之間的分工是最容易出狀況的,但

未來可以以漫畫形式公開作品。

從頭到尾我們都很有條理的溝通、協調彼

在真正成型出書之前,先以貼圖開始慢慢

此的腳步,最後順利產出貼圖並參加比賽。

亮相了!


平面設計

22


23

美德芙若

美德芙若網站 banner 7

美德生訊股份有限公司

實習與網 站 維 護

於美德生訊股份有限公司實習期間,負責維護公司網站與製作宣傳圖片。 整體基本採用柔和、舒服的印象做圖,以配合公司溫和的茶品。


平面設計

教育電子書配圖 7

國立臺北商業大學 資訊管理系 陳增娟副教授

能畫圖很 好 , 能 畫 電 子 書 插 圖 更 好 !

配合教授之託完成的電子書配圖,與教授 溝通、與繪圖期間,一直是很愉悅的合作 關係!雖然教授為了節省成本,只讓我配 了三張圖,但事實上好想要整本畫完呀!

24


動態影像 生,在枯萎之後 上學途中


27

生,在枯萎之後

生,在枯萎之後 1

2D 逐格動畫

影片播放


動態影像

Credit

2019 巴哈姆特 ACG 創作大賽

導演 | 魏筱蓉 入圍

製片 | 林糠汝 原畫、角色設計 | 魏筱蓉 場景美術 | 林糠汝、何希 補間 | 尹姿閔、呂泓熠、李昀陽、魏筱蓉 上色 | 何希、尹姿閔、呂泓熠、魏筱蓉 音效 | 李昀陽、呂泓熠 攝影、特效|魏筱蓉、李昀陽、呂泓熠、尹姿閔、林糠汝 Video|https://www.youtube.com/watch?v=L51Y4ntiHok

肯定自 我 , 生 在 枯 萎 之 後 。

昨天的我已經過去,今天的我已獲新生。

經濟成長的現代,雖然不太需要擔心溫飽,

年幼的我們總是無所畏懼,充滿勇氣和天

但現今的年輕學子卻需要面對和以往不同

真,也許一些觀點是長大過後的我們看不

的社會問題。以生命價值為中心思想,透

見的。如果找回最初的自己,我們現在望

由霸凌帶出面對困境的心理觀。當別人批

向的天空是否會有所不同?

判我們的時候,我們最該做的是肯定自己

全劇以風信子作為設計概念,如同風信子

的價值,拒絕接受批判。

的特性——花謝了還能再開——的道理。

劇照

28


29

生,在枯萎之後

角色設計三視圖(主角、小主角)

主角共有兩位,一位是第一主角向禹,另一位是年幼版的主角。 兩位的代表色為藍與綠,分別象徵陰鬱與健康的生命,也代表主角衝突的內心。


動態影像

按照顏色影響劇情觀看情緒,讓劇情從沈重變得困惑卻溫暖,最後輕盈透徹。同時色彩環境色變 化代表了主角心境的轉變。 正片的顏色按照色彩計畫的安排做上色,以完成全片製作。

30


31

生,在枯萎之後

周邊

設定集

輕巧溫暖 的 設 定 集

少量印製的設定集寫下了專題製作的背景

整體製作上以溫馨精緻為主軸,想要做出

設定,角色與發想的由來等等,以及收錄

一本輕盈溫暖的設定集,因此書冊前後頁

大圖明信片及重點原畫張數與補間。

都加上了「我愛你」、和「你是美麗的」等 正向鼓勵字眼,表達對讀者的關切。


動態影像

精神的小孩作為吊飾主角

吊飾的製作獻給特別喜 歡、想以特殊意義收藏本 吊飾 6x6cm

篇動畫的人,以正能量的 小孩背著風信子點題,為 動畫收藏做個總結。

風趣貼紙包

貼紙組分別製作了主角、 小主角及夢境裡的壞蛋, 在這裡稍微以可愛的方式 呈現了,讓周邊顯得更風 貼紙組

趣溫馨。

以美麗的文字陪伴觀眾

在淚水中浸泡過的微笑最燦爛, 從迷惘中走出來的靈魂最清醒。

心情小語為動畫首播時的 贈品,贈與每位觀覽者。 任何不會致你於死的

希望在動畫之外的地方,

都會讓你變得更強

也能有一點美麗的心意陪 伴所有看過動畫的朋友 沒人能替你承受痛苦,

們。

也沒人能拿走你的堅強。

心情小語

32


33

上學途中

上學途中動態腳本 2

Storyboard

編劇、分鏡、製作|魏筱蓉 Video|https://www.youtube.com/watch?v=bN06BKPChaQ

上學途中動態腳本

影片播放

赤子之心 , 一 直 都 在 。

就算在這個混亂的、寂寞的世界,也要永

身為在亞洲社會的學生,經常被灌輸學業至上

不害怕做自己,並且熱愛這個世界。

才有前途的觀念,在電車上也常見高中生在上 學途中唸書背單字的情景。被書海與卷試淹沒 的學生們,為了符合大人們的期待,經常會遺 忘自己真正想做的事,被社會包袱所束縛。


動態影像

部分分鏡

在競爭中生存的小孩

拉比的主色是咖啡色,傳統、固執的顏色, 卻有明亮的雙眼(藍粉色)。 是一個在壓迫的學業生活中被壓抑著自己 個性的小女孩。 兔子的顏色和小女孩眼睛顏色一樣做呼應。

主角拉比與小主角兔太

34


介面互動 蜂巢行動,飛越同溫層


37

蜂潮行動

蜂巢行動,飛越同溫層 1

婚姻平權募資專案


介面互動

Credit

Client|婚姻平權大平台 UI / UX|謝馥羽、林凱偉、魏筱蓉 Visual Design|林致維 Front-End / Motion|許家程 Copywriting|簡維萱、沈奕均、郭宜婷、陳凌、呂欣潔 Link|http://beebee.equallove.tw

彩虹前 夕 的 最 後 飛 行

與婚姻平權大平台合作,為了組織傳遞平

首頁透過彩虹下滑線引導視覺向下,作為

權理念之信念,需要群眾力量而誕生的募

全篇引導的開頭。內文透過資訊整理,做

資網頁。

了特殊排版與圖像化的編排,讓觀覽者在 吸收資訊及了解重點更加容易且易讀,增 加閱讀慾望。

網站首頁

38


39

蜂潮行動

圖像化資訊整理

手機版介面


介面互動

normal

募資區塊

hover

0-16%

17-33%

34-50

51-66%

67-83

>= 84%

懸浮提示

以「深度對 話 」 的 概 念 整 理 資 訊

募資小巧思

為了呼應婚姻平權大平台所倡導「深度溝

網頁版於全站右側固定懸停出現的蜂窩,

通」,全站不離「對話」之概念,持續以對

為顯示募資進度,同時會偷偷震動吸引觀

話框的形式做設計,清楚整理募資方案以

覽者注意力,進而點擊前往募資區塊。

及資訊排版、行動呼籲。

40


手繪 / 漫畫 / 動畫 創作,是最美好的事。 喜歡美的事物,是人類的本能。


43

我熱愛創造

我熱愛創造! 手繪 / 電繪作品

自小就有 的 熱 忱

比起文字更喜歡圖畫,我喜歡文字 轉釋成圖畫,構成的過程也總是感 到喜悅!喜歡讓生活環境充滿美的 事物。


手繪/漫畫/動畫

漫畫作品

人類在有文字前,就有壁畫

能夠用圖案說話,或表達故 事,是我一直以來致力於做 的事情! 我認為「圖畫」本身是「令 人開心的事物」。即便不開 心,也會令人「感同身受」。

44


45

我熱愛創造

我熱愛創造!

現在也計劃推出的 line 貼圖系列

想要更 進 步

上一次推出貼圖已經有一段時間了,這次 想要用自己的力量規劃貼圖。想要更突破 以往的自己。 圖案的背後都有故事,貼圖之餘也在想還 能以什麼方式輔助呈現貼圖後的故事。


手繪/漫畫/動畫

微型動畫練習

影片播放

影片播放

持續學習

設計、藝術,這塊領域偌大無比。倘若沒 有一直學習,很容易跟不上新的世界。 各方面的技能都略及,讓自己更全方位, 創造更多樣的價值。

46


THANK YOU!


4:05

4:05

Profile for Julie Wei

Julie Wei's portfolio 2019  

contact me: julieya.wei@gmail.com

Julie Wei's portfolio 2019  

contact me: julieya.wei@gmail.com

Profile for 780890