SlideShare une entreprise Scribd logo
1  sur  96
Télécharger pour lire hors ligne
Who are you?
Moon Chang 
子龍 
Graghic design 
Infograghic design 
GUI design 
Illustration 
Motion graghic design 
品牌設計、視覺設計、資訊圖表設計 
天大地大台科大、零時政府填坑獸、 
跨領域雜食動物 
自由設計工作者
我定義中的設計?
設計是整理的過程 
設計是可以幫助社會的工具 
設計是生活
Visual journey 
視覺設計 
經驗談
設計師的 
能⼒力配點
修煉之旅 
開始
設計師的 
特質⽣生活
Q:那個跨門檻的心情?
恩...聽起來好有趣歡迎來到新世界 
無知的勇士推坑的長老 
所有都是新的喲 
轉職前
工程腦vs設計腦
喔喔....好的... 
xxx是什麼???rr和uuu又是什麼, 
ooo是誰!?他是講中文嗎....? 
那個xxx不能這樣,不 
然rr會變成uuu,這樣ooo 
會很難做 
轉身回頭問google...
open mind放開眼界、 
“ 看見未來“
Q:視覺設計流程?
定義問題/需求資料收集設計發想修正/測試
完成設計!
Q:好的設計師需要什麼能力?
組織力 
美感 
觀察力 
學習力 
溝通力 
好奇心 
一個有故事的人
我看不到啊~~~~ 
! 
從感覺、模糊的影像、實體、可以通靈
傳送到達目的地 
要1000000元喲 
呃...我想一下 
拮据的勇士斂財的長老 
武功祕籍特價 
999999元 
轉職ing
先來講講畫面吧! 
Q:放多少東西、裝飾才好?
給任何元件存在的理由!
表演者 
音樂會主題 
時間地點票價 
音樂會主題蛻變 
相關表現插畫 
曲目資訊 
為求一貫性與畫 
面平衡
畫面平衡與物件的關係位置 
終於要說到跟grid有關了
三大要點! 
層次、平衡、對比重心
範例 
電子報封面 
需求: 
學校名稱、出刊日期、照片 
歡樂的感覺(?)交換學生 
主題
1 
2 
3 
3 
3 
視覺重心、注意力層次、律動感
排排看吧!
可是 
總是有人意見很多 
追加需求: 
內容標題一大堆,請加入
畫面平衡與物件的關係位置
畫面平衡與物件的關係位置
這跟網站有什麼關係? 
這跟網站有什麼關係? 
這跟網站有什麼關係?
零時政府-超農域系統入口
零時政府-超農域系統入口 
需求:農藥資訊查詢 
對象:民眾及農民 
定調:農業、親民、簡單明瞭
單位宣告 
⾓角⾊色引導 
功能 
說明⽂文字 
阿哈哈哈沒對⿑齊 
2. 
1. 1. 
2. 2. 
3. 3.
大象與螞蟻,我與1px計較的毛病
烤個肉也想要layout 
恭喜你得到設計師的潔癖與 
強迫症
Q:把軟體練得很強可以吧?
不行! 
軟體只是工具! 
不要忘記手繪、 
偶爾逼迫自己離開電腦
Q:顏色怎麼調才好?
1.偷參考他人的顏色 
2.吸取大自然的顏色 
3.歪一點點的驚喜
http://design-seeds.com/
TIPEI CITY 
WHO’S NEXT? 
市府快訊市長信箱便民資訊機關網路公告資訊觀光資訊 
TODAY’S TIPEI 
2014/08/29 SUNNY 23C 
臺北市政府秘書長陳永仁完成冰桶挑戰 並期府會和諧,市政達陣 
臺北市政府秘書長陳永仁,25日晚間8時在市府前廣場,完成冰桶挑戰。 陳永仁 
表示,能參與這項聲援漸凍人活動......詳全文 
著作權聲明 | 隱私權及資訊安全政策 | 本站使用正體字 | 聯絡我們 | RSS 
赴議會市政總質詢 議員關切 
天然瓦斯管線檢查 郝龍斌: 
督導業者落實年度檢查、確 
保公共安全 
2014-8-25
TIPEI CITY 
WHO’S NEXT? 
市府快訊市長信箱便民資訊機關網路公告資訊觀光資訊 
TODAY’S TIPEI 
2014/08/29 SUNNY 23C 
臺北市政府秘書長陳永仁完成冰桶挑戰 並期府會和諧,市政達陣 
臺北市政府秘書長陳永仁,25日晚間8時在市府前廣場,完成冰桶挑戰。 陳永仁 
表示,能參與這項聲援漸凍人活動......詳全文 
著作權聲明 | 隱私權及資訊安全政策 | 本站使用正體字 | 聯絡我們 | RSS 
赴議會市政總質詢 議員關切 
天然瓦斯管線檢查 郝龍斌: 
督導業者落實年度檢查、確 
保公共安全 
2014-8-25
來個勝文吧! 
勝文色的網站是什麼樣呢?
密買東京について|商品⼀一覧|ショッピングガイド|ご利⽤用規約|⽇日報|お問い合わせ 
密買東京 
について帝寶⼩小⺩王⼦子的私房傢私 
好穿木屐 
NT:250 
koko餐具 
NT:400 
雷雨 
NT:3000 
koko餐具
Q:其他國家怎麼做?
中國網民的口直心快 
字體、比例/歐洲德國... 
商業應用/美國
Q:美感sense培養術?
學習當個矯情的文青 
<title>進入夏季的秋</title> 
<head 1>微光。將一切都打亂了</head 1> 
<p> 
從那一天開始,我漸漸的發現到現實中飄落的碎片<br> 
是多麼的令人窒息、失落<br> 
如同<br> 
<a herf=“文青之神.com”>村上村樹</a>所提到的:那年夏天 
就像對不齊的描圖紙<br> 
我再也找不到對齊code的方法</p>
文青的核心價值在於 
美好生活品味的追求
觀察、觀察、愛觀察 
福爾摩斯的眼睛 
若有所思的 
野生喬喬!? 
包包衣服不搭 
在看臉書 
男子 
手機保護套 
ATM的特殊 
字體 
復古的手寫字 
鐵皮屋與窗戶 
的色彩搭配
收集收集收集 
With Pinterest
崇洋媚外、深根在地
看過一百個美女就知道美的極限、 
美是比較出來的過程 
但也時常帶著主觀意識
Q:畫面美麗就好了嗎?
適當的設計比外表重要 
甇嶠➢❔珮㼙⎔側⑙
Q:溝通不只是業務的事?
畫面的溝通 
與夥伴的溝通 
與老闆(金主)溝通 
與觀眾的溝通 
與自己的溝通
畫面的溝通
畫面的溝通 
與夥伴的溝通 
與老闆(金主)溝通 
與觀眾的溝通 
與自己的溝通
Q:自我修煉怎麼做?
寫探索工作日記 
!任何專業都無上限!
拍拍照吧!
非核家園聯署 
需要你我的支持
非核家園聯署 
需要你我的支持 
2014.4.11凱道見 
臨時前端反核聯盟 
聯盟介紹411反核遊行時程為什麼要反核? 連署書下載我要捐款聯絡我們
非核家園聯署 
需要你我的支持 
2014.4.11凱道見 
臨時前端反核聯盟 
1 2 
聯盟介紹411反核遊行時程為什麼要反核? 連署書下載我要捐款聯絡我們 
3
看電影不要只看劇情!
給自己課題、找一個偶像
Q:好設計像忍者?
「其實,良好的設計比不好的設計更難察覺。 
一方面因為好的設計是無形的,能滿足我們的 
需求,但設計本身卻不引起我們注意;另一方 
面,不好的設計卻非常明顯,讓我們很容易注 
意到它的不足之處。」
最後還是交個朋友吧:) 
shulusama29@gmail.com 
https://www.facebook.com/shulusama29 
業務範圍: 
疑難雜症、工商服務、推坑填坑

Contenu connexe

En vedette

HappyUX Education: Things beyond methodologies
HappyUX Education: Things beyond methodologiesHappyUX Education: Things beyond methodologies
HappyUX Education: Things beyond methodologiesDavid Chen
 
微軟的模版革命:OfficePLUS.cn
微軟的模版革命:OfficePLUS.cn微軟的模版革命:OfficePLUS.cn
微軟的模版革命:OfficePLUS.cnWade Jin
 
資料視覺化閃電秀-咖啡地圖徒手話
資料視覺化閃電秀-咖啡地圖徒手話資料視覺化閃電秀-咖啡地圖徒手話
資料視覺化閃電秀-咖啡地圖徒手話Mooon Chang
 
口語表達的第一課
口語表達的第一課口語表達的第一課
口語表達的第一課Wade Jin
 
精采簡報How
精采簡報How精采簡報How
精采簡報HowWade Jin
 
JACAL'S品牌簡介及設計禮贈品介紹 2014
JACAL'S品牌簡介及設計禮贈品介紹 2014JACAL'S品牌簡介及設計禮贈品介紹 2014
JACAL'S品牌簡介及設計禮贈品介紹 2014Hans Ho
 
第三屆台大簡報大賽-參賽使用的投影片
第三屆台大簡報大賽-參賽使用的投影片第三屆台大簡報大賽-參賽使用的投影片
第三屆台大簡報大賽-參賽使用的投影片Wade Jin
 
內容的力量
內容的力量內容的力量
內容的力量Wade Jin
 
智慧共享的社群人脈學
智慧共享的社群人脈學智慧共享的社群人脈學
智慧共享的社群人脈學Wade Jin
 
大學生玩簡報.幾個初步構想
大學生玩簡報.幾個初步構想大學生玩簡報.幾個初步構想
大學生玩簡報.幾個初步構想Wade Jin
 
UX design: The fast & slow (@ OpenHCI 2013)
UX design: The fast & slow (@ OpenHCI 2013)UX design: The fast & slow (@ OpenHCI 2013)
UX design: The fast & slow (@ OpenHCI 2013)David Chen
 
總是為配色苦惱嘛?善用品牌色,讓畫面看起來簡潔有力!
總是為配色苦惱嘛?善用品牌色,讓畫面看起來簡潔有力!總是為配色苦惱嘛?善用品牌色,讓畫面看起來簡潔有力!
總是為配色苦惱嘛?善用品牌色,讓畫面看起來簡潔有力!Wade Jin
 
Metro UI interaction design guidelines @Microsoft Tech.Days 2011
Metro UI interaction design guidelines @Microsoft Tech.Days 2011Metro UI interaction design guidelines @Microsoft Tech.Days 2011
Metro UI interaction design guidelines @Microsoft Tech.Days 2011David Chen
 
Lean UX - 精實設計的入門
Lean UX - 精實設計的入門Lean UX - 精實設計的入門
Lean UX - 精實設計的入門Lex Wang
 
HYOID|最有生產力的一年(The Productivity Project)
HYOID|最有生產力的一年(The Productivity Project)HYOID|最有生產力的一年(The Productivity Project)
HYOID|最有生產力的一年(The Productivity Project)Wade Jin
 
How to be Successful with Responsive Sites (Koombea & NGINX) - English
How to be Successful with Responsive Sites (Koombea & NGINX) - EnglishHow to be Successful with Responsive Sites (Koombea & NGINX) - English
How to be Successful with Responsive Sites (Koombea & NGINX) - EnglishKoombea
 
Design in Agile Development
Design in Agile DevelopmentDesign in Agile Development
Design in Agile DevelopmentAbby Chiu
 
Foundations of Service Design : 服務設計入門與應用
Foundations of Service Design : 服務設計入門與應用Foundations of Service Design : 服務設計入門與應用
Foundations of Service Design : 服務設計入門與應用Lex Wang
 
【1027簡報教學投影片】by大學生玩簡報
【1027簡報教學投影片】by大學生玩簡報【1027簡報教學投影片】by大學生玩簡報
【1027簡報教學投影片】by大學生玩簡報Wade Jin
 
【簡報的配色魔法(一)理論篇】
【簡報的配色魔法(一)理論篇】【簡報的配色魔法(一)理論篇】
【簡報的配色魔法(一)理論篇】Wade Jin
 

En vedette (20)

HappyUX Education: Things beyond methodologies
HappyUX Education: Things beyond methodologiesHappyUX Education: Things beyond methodologies
HappyUX Education: Things beyond methodologies
 
微軟的模版革命:OfficePLUS.cn
微軟的模版革命:OfficePLUS.cn微軟的模版革命:OfficePLUS.cn
微軟的模版革命:OfficePLUS.cn
 
資料視覺化閃電秀-咖啡地圖徒手話
資料視覺化閃電秀-咖啡地圖徒手話資料視覺化閃電秀-咖啡地圖徒手話
資料視覺化閃電秀-咖啡地圖徒手話
 
口語表達的第一課
口語表達的第一課口語表達的第一課
口語表達的第一課
 
精采簡報How
精采簡報How精采簡報How
精采簡報How
 
JACAL'S品牌簡介及設計禮贈品介紹 2014
JACAL'S品牌簡介及設計禮贈品介紹 2014JACAL'S品牌簡介及設計禮贈品介紹 2014
JACAL'S品牌簡介及設計禮贈品介紹 2014
 
第三屆台大簡報大賽-參賽使用的投影片
第三屆台大簡報大賽-參賽使用的投影片第三屆台大簡報大賽-參賽使用的投影片
第三屆台大簡報大賽-參賽使用的投影片
 
內容的力量
內容的力量內容的力量
內容的力量
 
智慧共享的社群人脈學
智慧共享的社群人脈學智慧共享的社群人脈學
智慧共享的社群人脈學
 
大學生玩簡報.幾個初步構想
大學生玩簡報.幾個初步構想大學生玩簡報.幾個初步構想
大學生玩簡報.幾個初步構想
 
UX design: The fast & slow (@ OpenHCI 2013)
UX design: The fast & slow (@ OpenHCI 2013)UX design: The fast & slow (@ OpenHCI 2013)
UX design: The fast & slow (@ OpenHCI 2013)
 
總是為配色苦惱嘛?善用品牌色,讓畫面看起來簡潔有力!
總是為配色苦惱嘛?善用品牌色,讓畫面看起來簡潔有力!總是為配色苦惱嘛?善用品牌色,讓畫面看起來簡潔有力!
總是為配色苦惱嘛?善用品牌色,讓畫面看起來簡潔有力!
 
Metro UI interaction design guidelines @Microsoft Tech.Days 2011
Metro UI interaction design guidelines @Microsoft Tech.Days 2011Metro UI interaction design guidelines @Microsoft Tech.Days 2011
Metro UI interaction design guidelines @Microsoft Tech.Days 2011
 
Lean UX - 精實設計的入門
Lean UX - 精實設計的入門Lean UX - 精實設計的入門
Lean UX - 精實設計的入門
 
HYOID|最有生產力的一年(The Productivity Project)
HYOID|最有生產力的一年(The Productivity Project)HYOID|最有生產力的一年(The Productivity Project)
HYOID|最有生產力的一年(The Productivity Project)
 
How to be Successful with Responsive Sites (Koombea & NGINX) - English
How to be Successful with Responsive Sites (Koombea & NGINX) - EnglishHow to be Successful with Responsive Sites (Koombea & NGINX) - English
How to be Successful with Responsive Sites (Koombea & NGINX) - English
 
Design in Agile Development
Design in Agile DevelopmentDesign in Agile Development
Design in Agile Development
 
Foundations of Service Design : 服務設計入門與應用
Foundations of Service Design : 服務設計入門與應用Foundations of Service Design : 服務設計入門與應用
Foundations of Service Design : 服務設計入門與應用
 
【1027簡報教學投影片】by大學生玩簡報
【1027簡報教學投影片】by大學生玩簡報【1027簡報教學投影片】by大學生玩簡報
【1027簡報教學投影片】by大學生玩簡報
 
【簡報的配色魔法(一)理論篇】
【簡報的配色魔法(一)理論篇】【簡報的配色魔法(一)理論篇】
【簡報的配色魔法(一)理論篇】
 

Similaire à Grid runner,let's talk about visual

交點高雄Vol.22 - 兩分鐘自我介紹
交點高雄Vol.22 - 兩分鐘自我介紹交點高雄Vol.22 - 兩分鐘自我介紹
交點高雄Vol.22 - 兩分鐘自我介紹交點
 
交點高雄開場簡報 - 11月份
交點高雄開場簡報 - 11月份交點高雄開場簡報 - 11月份
交點高雄開場簡報 - 11月份交點
 
交點高雄Vol.22 - 兩分鐘自我介紹
交點高雄Vol.22 - 兩分鐘自我介紹交點高雄Vol.22 - 兩分鐘自我介紹
交點高雄Vol.22 - 兩分鐘自我介紹交點
 
你媽知道妳在這裡發廢文嗎?
你媽知道妳在這裡發廢文嗎?你媽知道妳在這裡發廢文嗎?
你媽知道妳在這裡發廢文嗎?澤揚 羅澤揚
 
【虛擬世界。需你世界】 鍵盤救台灣,創造新世代公民運動
【虛擬世界。需你世界】 鍵盤救台灣,創造新世代公民運動【虛擬世界。需你世界】 鍵盤救台灣,創造新世代公民運動
【虛擬世界。需你世界】 鍵盤救台灣,創造新世代公民運動Hsiao-wei Chiu
 
交點高雄開場簡報 10月份
交點高雄開場簡報 10月份交點高雄開場簡報 10月份
交點高雄開場簡報 10月份交點
 
20171214 - 成果簡報培訓
20171214 - 成果簡報培訓20171214 - 成果簡報培訓
20171214 - 成果簡報培訓羅左欣
 
We起city_社會設計提案
We起city_社會設計提案We起city_社會設計提案
We起city_社會設計提案逸晟 林
 
孫子兵法與專案管理(Pmbok)1030
孫子兵法與專案管理(Pmbok)1030孫子兵法與專案管理(Pmbok)1030
孫子兵法與專案管理(Pmbok)1030Chang Richard
 

Similaire à Grid runner,let's talk about visual (9)

交點高雄Vol.22 - 兩分鐘自我介紹
交點高雄Vol.22 - 兩分鐘自我介紹交點高雄Vol.22 - 兩分鐘自我介紹
交點高雄Vol.22 - 兩分鐘自我介紹
 
交點高雄開場簡報 - 11月份
交點高雄開場簡報 - 11月份交點高雄開場簡報 - 11月份
交點高雄開場簡報 - 11月份
 
交點高雄Vol.22 - 兩分鐘自我介紹
交點高雄Vol.22 - 兩分鐘自我介紹交點高雄Vol.22 - 兩分鐘自我介紹
交點高雄Vol.22 - 兩分鐘自我介紹
 
你媽知道妳在這裡發廢文嗎?
你媽知道妳在這裡發廢文嗎?你媽知道妳在這裡發廢文嗎?
你媽知道妳在這裡發廢文嗎?
 
【虛擬世界。需你世界】 鍵盤救台灣,創造新世代公民運動
【虛擬世界。需你世界】 鍵盤救台灣,創造新世代公民運動【虛擬世界。需你世界】 鍵盤救台灣,創造新世代公民運動
【虛擬世界。需你世界】 鍵盤救台灣,創造新世代公民運動
 
交點高雄開場簡報 10月份
交點高雄開場簡報 10月份交點高雄開場簡報 10月份
交點高雄開場簡報 10月份
 
20171214 - 成果簡報培訓
20171214 - 成果簡報培訓20171214 - 成果簡報培訓
20171214 - 成果簡報培訓
 
We起city_社會設計提案
We起city_社會設計提案We起city_社會設計提案
We起city_社會設計提案
 
孫子兵法與專案管理(Pmbok)1030
孫子兵法與專案管理(Pmbok)1030孫子兵法與專案管理(Pmbok)1030
孫子兵法與專案管理(Pmbok)1030
 

Grid runner,let's talk about visual