Download pdf - Wendy Yang

Transcript
Page 1: Wendy Yang

WENYANG

PORTFOLIO2015

Page 2: Wendy Yang

期許自己 在這有規範的世界裡能有不一樣的生活

01

Page 3: Wendy Yang

CONTENT

02

自我介紹

網站設計

APP設計

UI 設計

動畫設計

插 畫

03

07

15

25

29

33

Page 4: Wendy Yang

03

自我介紹

Page 5: Wendy Yang

04

2015 資訊工業策進會Web/APP前端設計36期工程師養成班

2015 樹德科技大學視覺傳達設計系

2012 明道高級中學設計群

女性台中市南區復興路一段390號1992年11月27日[email protected]+886 977207419

楊 琇 雯

學 歷

視覺平面設計

圖像插畫設計

動態動畫規劃

系統分析(UML)

網頁版面設計

手機介面設計

使用者互動設計(UI)

使用者經驗設計(UX)

專 長

軟 體

Illustrator Dreamweaver InDesign

Lightroom Sketch

FireworksCorel Painter

Sublime Text

After EffectsPhotoshop

Balsamiq Mockups

Page 6: Wendy Yang

05

HTML5

CSS3

Javascript

jQuery

PHP

MySQL

AJAX

RWD行動網頁

程 式 技 術

經 歷

2015 資策會進修專題COMMA網站製作

2015 共同參與TravelWithMe APP / UI/UX設計

2014 4C數位創作競賽 / 動畫劇本組 / 不日城 / 優選

2014 感動99校園組 / 動畫類 / 針情綿綿 / 優選

2014 金犢獎 / 技術類CF製作技術 / 優等

2014 金犢獎 / 動畫廣告類 / 優等

作 品

Behance

https://www.behance.net/wendy89033

APP-TravelWithMe

https://goo.gl/H3tMDu

個人專題-BOOM冰淇淋

http://140.115.236.72/demo-personal/zd702/web/C1500253/

專題網站-COMMA

http://140.115.236.72/demo-projects/ZD702/ZD702G2/

工 作

2013.10-2015.01 漢秦文化事業有限公司 / 設計助理

2013.07-2013.09 上印山商業設計有限公司 / 實習生

Page 7: Wendy Yang

06

關 於 自 己

從小就喜歡畫畫,國中小也常跟著畫室老師參展,但是還想要多方面的瞭解其他美

感的部分和體驗和藝術不一樣的方向,所以高中選擇了設計類群就讀。大學進了樹

德科技大學視覺傳達設計系,覺得設計越來越有趣,所以以後也打算繼續走下去。

我是楊琇雯,個性隨和活潑,喜歡在團體裡

分工合作,樂於和大家彼此分享想法,

學習的過程中,軟體使用的部分通常我都自

學比較多,都會透過網路和自己去實際使用

摸索,充實自己技術不足的部分。

高中做專題的項目是產品類設計,大學的專題項目是動畫,畢業後學習程式,其實

都是我最不擅長的部份,過程艱難並且困惑,但是我樂於挑戰自己的其他可能性,

還是慢慢的學習並且克服障礙,也找到了自己確切的目標邁進。

製作專案的時候,我喜歡事前規劃好進度並且在時間內進行,也會預留修改時間,

防止問題出現可以有效解決。

團體溝通的時候,組員經常討論交換想法,我們都會各自聆聽對方的想法,並且加

以改善解決。作品上或許我並不完美的,但是我會努力達到最好,更想要盡力的去

克服困難尋找答案。

Page 8: Wendy Yang

07

網站設計

Page 9: Wendy Yang

08

網 站 設 計

C O M M A L O G O 設 計

W e b W i r e f r a m e

設計理念

以逗號為主要形象

開了一個口代表每個展覽都有

一座舞台讓別人看見不同的自己

LOGO 展覽資訊 場地種類 瀏覽檔期 會員中心

場地種類

展覽資訊

介紹我們

關於我們

廣告

Q&A LOGO 展覽資訊 場地種類 瀏覽檔期 會員中心Q&A

時間 內容

LOGO 展覽資訊 場地種類 瀏覽檔期 會員中心Q&A

所有場地

搜尋場地

場地一

內容

場地二

內容

關於我們

內容

評價

日曆

關於我們

LOGO 展覽資訊 場地種類 瀏覽檔期 會員中心Q&A

年月份 日期

關於我們

有空場地

LOGO 展覽資訊 場地種類 瀏覽檔期 會員中心Q&A

Q

關於我們

LOGO 展覽資訊 場地種類 瀏覽檔期 會員中心Q&A

A

Q

A

內容 選單

關於我們

LOGO 展覽資訊 場地種類 瀏覽檔期 會員中心Q&A

http://140.115.236.72/demo-projects/ZD702/ZD702G2/

Page 10: Wendy Yang

09

網 站 設 計

W e b M o c k u p

Page 11: Wendy Yang

10

網 站 設 計

W e b M o c k u p

Page 12: Wendy Yang

11

網 站 設 計

W e b M o c k u p

R W D

17:00

SITE場地種類

木心坊2015

11Sun Mon Tue Wed Thu Fri Sat

01 02 03 04 05 06 07

影知森2015

11Sun Mon Tue Wed Thu Fri Sat

01 02 03 04 05 06 07

EXHIBITIONS

17:00

YEAR MON DATE

2015 07 1109:00

YEAR MON DATE

2015 07 1517:00

日本人們的日常日本人從早到晚一直都是忙碌的生活騎腳踏車,吃早餐,在外蹓躂,搭電車然後去上班,對於他們而言,這就是一天雖然每天平凡無奇但他們每天都過得十分充實

17:00

價格/

地點/

坪數/

請選擇

請選擇

請選擇

搜尋

紅磨坊

陶淵明

Moulin Rouge

一個安靜的小天地讓人沉浸在藝術的氛圍裡

Former Residence

一個安靜的小天地讓人沉浸在藝術的氛圍裡

@comma Popsicle .comma.design .wendy yang

Contact Information電話 0384736253

信箱 [email protected]

營業時間 每日09:00-17:00

傳真 0483928302

@comma Popsicle .comma.design .wendy yang

17:00

木心房木心房木心房木心房一日3,000 NT

座落於台北市區,環境卻相當安靜老木匠最後打造的建築依然想讓世人記住他的唯一傑作

設備:

地點:台北市萬華區一段435號

顯示地圖

諮詢服務

馬上預約

檔期可預約

2 0 1 5

容納人數:30人

01 1502 01

Page 13: Wendy Yang

12

網 站 設 計

R W D

B O O M L O G O 設 計

17:00

首 頁

展覽資訊

場地種類

瀏覽檔期

會員專區

17:00

1 2 月01 02 03 04 05 06 0708 09 10 11 12 13 1415 16 17 18 19 20 2122 23 24 25 26 27 2829 30 31

18影知森

木心坊

金澤寧

洞庭湖 目黑場

荒野屋

蘅蕪苑

孟風軒

紅磨坊 陶淵明

Contact Information電話 0384736253

信箱 [email protected]

傳真 0483928302

@comma Popsicle .comma.design .wendy yang

Contact Information電話 0384736253

信箱 [email protected]

營業時間 每日09:00-17:00

傳真 0483928302

@comma Popsicle .comma.design .wendy yang

會員資料修改

上傳展覽資訊

訂單查詢

評價

會員資料修改

聯絡電話 /

電子信箱 /

原始密碼 /

修改新密碼 /

再輸入新密碼 /

上傳圖像 /

送出重新輸入

請使用電腦版

BOOM

設計理念

用BOOM的B冰淇淋的形做為LOGO

的主要圖形,下面加了一個圖形,就

是爆炸的時候會出現的一團煙霧做為

簡化,也像是冰淇淋融化的水滴http://140.115.236.72/demo-personal/zd702/web/C1500253/

Page 14: Wendy Yang

13

網 站 設 計

B O O M 商 業 用 品

W e b W i r e f r a m e

BOOM Popsicle

BOOM Popsicle

BOOM Popsicle

BOOM

BOOM

訂購專線:04-58974568

廣告

重點連結

推薦清單

Head

Footer Footer

廣告

內文

Head

Footer

內文

其餘連結

Head

Footer Footer

Page 15: Wendy Yang

14

網 站 設 計

W e b M o c k u p

Page 16: Wendy Yang

APP設計

15

Page 17: Wendy Yang

16

A P P 設 計

A R U N T H E W O R D L O G O 設 計

A R U N T H E W O R D 架 構 圖

設計理念

名字和主題結合

營造出星球的感覺

意思跑遍每個世界

Functional map

Flow chart 跑步流程

跑步APP

跑步選單

個人記錄

排行榜

設定

一般跑步

挑戰跑步

所有跑步記錄

2.0

3.0

4.0

5.0

2.1

2.2

成功/失敗

2.2.1

3.1

主畫面

1.0

當週排行

累積排行

4.1

4.2

APP

是否註冊

註冊會員

選擇跑步

開始跑步

YesNO

Yes

顯示首頁

Yes

YesNO

開始跑步

申請帳號

直進進入首頁

開始環遊世界

個人記錄統計

排行榜

設定

自由探索

任務成就

成功

失敗

UI Flow

Page 18: Wendy Yang

17

A P P 設 計

A R U N T H E W O R D W i r e f r a m e版面尺寸:ios@2x

開啟APP:第一次使用啦啦電信 上午9:00 83%

入門設定

確認

首先,請輸入您的身搞體重方便我們計算您的健康管理

台灣

開啟APP:之後使用,未註冊啦啦電信 上午9:00 83%

直接進入

註冊會員

啦啦電信 上午9:00 83%

註冊會員

完成

用facebook註冊

用Google註冊

啦啦電信 上午9:00 83%

顯示已達成公里數

達成

200Km

未達成

台灣 香港

RUN

800Km

顯示未達成公里數

顯示目標國家的圖像距離

跳出1.0主畫面:顯示

跳出5.0主畫面:設定

跳出2.0跑步選單

啦啦電信 上午9:00 83%

達成

200Km

未達成

台灣 香港

RUN

800Km

1.0 主畫面開啟APP:已註冊

跳出3.0主畫面:個人記錄

跳出4.0主畫面:排行榜

Page 19: Wendy Yang

18

A P P 設 計

A R U N T H E W O R D W i r e f r a m e

跑步選單

2.1Km

2.2

1.0

自由探索

任務成就

啦啦電信 上午9:00 83%

2.1啦啦電信 上午9:00 83%

Km

2.0

00:00:00

00km

RUN

點擊地球往下推出現正在跑步的路線圖

啦啦電信 上午9:00 83%

Km

00:00:0000km

RUN

啦啦電信 上午9:00 83%

Km

00:00:0000

km

STOP

點擊RUN之後顯現出跑步模式會出現停止按鈕

自由探索:跑步頁面

2.1啦啦電信 上午9:00 83%

Km

顯示路跑距離

00:40:0052km

3500 kal

spn75

.

台灣 香港

自由探索:結束畫面 2.2啦啦電信 上午9:00 83%

Km

2.0

初階

中階

高階

30分鐘5公里

30分鐘8公里

30分鐘10公里

跑步頁面

任務成就:起始頁面

2.0

Page 20: Wendy Yang

19

A P P 設 計

A R U N T H E W O R D W i r e f r a m e

啦啦電信 上午9:00 83%

Km

2.2

00:50:0030km

RUN

2.2 任務成就:開始頁面

啦啦電信 上午9:00 83%

Km

00:40:00

52km

3500 kal

spn75

.

NEXT 跳到2.2.1

2.2 任務成就:結束頁面

2.2.1啦啦電信 上午9:00 83%

Km

104.達成

2倍

台灣 香港

任務成就:成功 2.2.1 任務成就:失敗

啦啦電信 上午9:00 83%

Km

失敗

km

入門

台灣 香港

12.再接再力

Page 21: Wendy Yang

20

A P P 設 計

A R U N T H E W O R D W i r e f r a m e

3.0

點選想看的記錄上面的文字就會顯示出不一樣顏色

元件圖像呈現熱量,時速,公里,心律,文字可點擊,點擊後就會跳到單獨想看的記錄

個人記錄總量 熱量 時速 公里 心律

熱量時速公里心律

總量

個人記錄總量 熱量 時速 公里 心律

熱量時速公里心律

個人紀錄啦啦電信 上午9:00 83%啦啦電信 上午9:00 83%

4.0啦啦電信 上午9:00 83%

4.1 當周排行

累積排行4.2

排行榜 4.1啦啦電信 上午9:00 83%

元件圖像呈現熱量,時速,公里,心律,圖像點擊後就會跳到想看的排行

熱量

心律

時速

公里

總量

4.2 4.0

排行種類

Page 22: Wendy Yang

21

COMMA逗點

Our office is something we are proud of. We call it the little magnet; it is desired to come here anthen impossible to leave. After winning the first place in“Interior of the Year 2014”competition it became known worldwide.

To enjoy the arts

Contact Information電話 0384736253

信箱 [email protected]

營業時間 每日09:00-17:00

傳真 0483928302

@comma Popsicle .comma.design .wendy yang

01 02 03 04 05 06 0708 09 10 11 12 13 1415 16 17 18 19 20 2122 23 24 25 26 27 2829 30 31

其他場地:

影知森

木心坊

金澤寧

洞庭湖 目黑場

荒野屋

蘅蕪苑

孟風軒

紅磨坊 陶淵明

Comment評價

拉魯拉魯拉嚕拉拉魯拉魯拉嚕拉拉魯拉魯拉嚕拉

2015.07.09

拉魯拉魯拉嚕拉拉魯拉魯拉嚕拉拉魯拉魯拉嚕拉

2015.07.09

沒歸

心靈

Contact Information電話 0384736253

信箱 [email protected]

營業時間 每日09:00-17:00

傳真 0483928302

@comma Popsicle .comma.design .wendy yang

A P P 設 計

A R U N T H E W O R D W i r e f r a m eA R U N T H E W O R D W i r e f r a m e

啦啦電信 上午9:00 83%

當周排行

105妳的排名

魯拉拉拉拉1

魯不卡拉拉2

哈不嗚拉魔

哈不嗚拉魔

哈不嗚拉魔

哈不嗚拉魔

3

4

5

6

4.14.2

排行種類

5.0啦啦電信 上午9:00 83%

達成

200Km

未達成

台灣 香港

RUN

800Km

啦啦電信 上午9:00 83%

設定帳號設定 公司簡介法律聲明

法律聲明公司簡介

美商明尼蘇達礦業製造(3M)股份有限公司本網站內含之各項資料均已由3M公司登記1995-2006年之著作權,所有著作權之相關權利均由3M保有。3M茲此授權本網站之使用者在符合下列條件下閱覽、印製及散播本網站之資料:1. 本網站資料僅限於內部資訊用途使用。2. 複製本網站資料或其任何部份時,必須同時加註上述之著作權聲明。3. 3M得隨時撤銷或變更前述授權。

本網站資料中述及之任何產品、製程或技術,均可能另受3M所持有之其他智慧財產權保護,且3M於茲並未為任何授權行為。

具美國政府機關身份之使用者:美國政府機關對於本網站資料之使用、複製或揭露行為,均須符合美國聯邦政府國防採購法令(DFARS)第252.227-7013(c)(1)(ii)條及美國聯邦政府採購法令(FAR)第52.227-19條暨其他任何後續應適用之法令所規定之限制條件。

3M暨3M之標誌均為3M公司之商標或註冊商標。於本網站所述及之其他所有產品名稱,則分別屬於各該產品之商標專用權人之商標。

本網站所包含之資訊均係「依現狀」方式提供,僅供使用者之資訊用途參考,並未附帶任何形式之保證(包括可商品性、特定用途之適合性或不具侵害性有關之任何默示保證)。

設定

5.0啦啦電信 上午9:00 83%

達成

200Km

未達成

台灣 香港

RUN

800Km

1.打完內容,按下修改會跑出loading畫面,等待修改

啦啦電信 上午9:00 83%

設定帳號設定 公司簡介法律聲明

修改

台灣

skdoe

*******

190

80

日本

2.loading跑完後會出現完成畫面然後跳回5.0畫面

啦啦電信 上午9:00 83%

Km00km

修改完成

帳號設定

設定

Page 23: Wendy Yang

22

A P P 設 計

A R U N T H E W O R D U I D e s i g n

Page 24: Wendy Yang

23

A P P 設 計

T r a v e l W i t h M e L O G O 設 計

T r a v e l W i t h M e M o c k u p

設計理念

以背包的圖像作為設計

意象旅遊https://goo.gl/H3tMDu

Page 25: Wendy Yang

24

A P P 設 計

T r a v e l W i t h M e M o c k u p

Page 26: Wendy Yang

25

UI設計

Page 27: Wendy Yang

26

U I 1 0 0 D a y s

B e h a n c e https://www.behance.net/wendy89033

Page 28: Wendy Yang

27

U I 1 0 0 D a y s

Page 29: Wendy Yang

28

U I 1 0 0 D a y s

Page 30: Wendy Yang

29

動畫設計

Page 31: Wendy Yang

30

動 畫 設 計

不 日 城 - 初 稿 設 計

Page 32: Wendy Yang

31

動 畫 設 計

不 日 城 - 動 畫 片 段

h t t p s : / / w w w . y o u t u b e . c o m / w a t c h ? v = x a X Z 1 A q i Y K Y & f e a t u r e = y o u t u . b e

Page 33: Wendy Yang

32

動 畫 設 計

感 動 9 9 - 針 情 綿 綿

h t t p s : / / w w w . y o u t u b e . c o m / w a t c h ? v = s d 8 i - - _ k u B 0

金 犢 獎 - 樹 德 科 技 大 學 廣 告 形 象

h t t p s : / / w w w . y o u t u b e . c o m / w a t c h ? v = _ 7 R v u 6 b h v j U

Page 34: Wendy Yang

33

插畫

Page 35: Wendy Yang

34

插 畫

Page 36: Wendy Yang

35

插 畫

Page 37: Wendy Yang

36

插 畫

Page 38: Wendy Yang

37

謝謝

Page 39: Wendy Yang

38

Page 40: Wendy Yang

39

Page 41: Wendy Yang

40

插 畫

Page 42: Wendy Yang

41