SlideShare une entreprise Scribd logo
1  sur  25
Flat Design Presentation
關 Flat Design
Flat Design 簡 流
Flat Design簡 範例
本簡 由kome製作
kome808@gmail.com
Kome 張家祥
Work
‣ 凌網科技股份有限公司 企劃經理
‣ 元華創意 www.audot.com.tw
Expertise
‣ 跨領域創意整合企劃、 策略分析與規劃
‣ 產品服務與資訊系統創意規劃
‣ 企劃提案、簡報製作
網路資訊 X 文化創意 跨界創意整合
關於 Flat Design
扁平化設計(Flat Design)—這個早在多年前非常流行的設計領域-又
再一次捲土重來了。許多新網站以及需要重新設計的網站都紛紛採用了
扁平化設計的方案,這種趨勢無論是在網頁設計或者行動端的設計方面
都已經蔓延開了。
扁平化設計具有著一種讓人心醉的美麗,沒有大量的修飾,它能以一個
簡單直白的方式來傳遞一個信息或者幫助一個產品以及思想變得更加深
入人心。
來源:http://www.inside.com.tw/2013/03/25/flat-design
來看案例
http://pinterest.com/warmarc/flat-ui-design/
http://www.spelltower.com/
http://ournameismud.co.uk/
Flat design presentation  扁平設計式簡報
http://pinterest.com/pin/135671007496614228/
Flat design presentation  扁平設計式簡報
Flat design presentation  扁平設計式簡報
Flat design presentation  扁平設計式簡報
Flat Design 簡報設計流
整合或是刪除多餘的資訊
給聽眾需要的東西
清晰地把重要的東西傳達出來
以色塊搭配照片配上文字
運用鮮明顏色搭配穿插
Flat Design 簡報設計流
將Flat Design 技巧運用在簡報設計上 具有簡約愉悅特色
傳遞重點 運用色彩 字型運用
主題、內文選用適當字體
與大小,提昇閱讀效果
為何想要嘗試這種風格?
‣ 越來越多網站採用這種設計,挺好看的,於是想要融入在簡報製作當中
‣ 希望讓簡報比較有趣、好看,不要那麼單調或是過於複雜
這種簡報好製作嗎?
‣ 要學會精簡內容,一旦習慣後簡報不需要放一堆東西上去速度就快了
‣ 參考國外網站用色、內容區塊配置,不需要會設計軟體也可以製作
顏色與字體如何選擇?
‣ 選比較明亮看了會開心的顏色,也可以用黑色灰色反差凸顯主題
‣ 投影出來會比電腦螢幕上暗,所以要試著放到投影機看再調整顏色
‣ 標題字體會選比較粗的字體,去做強調
製作小技巧
‣ 以白底簡報為主,穿插有色版簡報頁面以增加變化性
‣ 簡化每頁簡報內容,只放重點
顏色選擇參考
icon參考
http://dribbble.com/shots/977506-Flat-UI-Release/attachments/113160?return_to=%2Fmonstercritic%2Fprojects%2F106165-Flat-UI%23attachment-113160
文字框設計參考
來看實作範例
COMPUTEX:引領潮流 形塑未來
反映趨勢與未來
B2B資通訊專業採購平台
ICT產業新產品發表國際舞台
色塊方格設計 DIESEL
Fitbit
長頁面設計
PayPal
聚焦簡潔
色彩計畫
ICON設計
字體設計
網站設計規範
2010台北國際花博+夢想館
Visual Design Department
kome
2013.5
講好的故事、走出自我風格

Contenu connexe

Similaire à Flat design presentation 扁平設計式簡報

【Maker商品化】跨越工業設計難關
【Maker商品化】跨越工業設計難關【Maker商品化】跨越工業設計難關
【Maker商品化】跨越工業設計難關MAKERPRO.cc
 
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享Justin Lee
 
網站規劃的二三事
網站規劃的二三事網站規劃的二三事
網站規劃的二三事Hsiang Lee
 
前端工程與使用者經驗(榮總課程):Front-End Develop & User Experience
前端工程與使用者經驗(榮總課程):Front-End Develop & User Experience前端工程與使用者經驗(榮總課程):Front-End Develop & User Experience
前端工程與使用者經驗(榮總課程):Front-End Develop & User Experience彭其捷 Jack
 
海外工作經驗談(東京):跨國企業的UX設計師工作日常_Simonlin_2019
海外工作經驗談(東京):跨國企業的UX設計師工作日常_Simonlin_2019海外工作經驗談(東京):跨國企業的UX設計師工作日常_Simonlin_2019
海外工作經驗談(東京):跨國企業的UX設計師工作日常_Simonlin_2019Simon LIN
 
設計跨界與事業設計
設計跨界與事業設計設計跨界與事業設計
設計跨界與事業設計Ting-Han Chen
 
2023 設計驅動創新實務:全面體驗思維與管理
2023 設計驅動創新實務:全面體驗思維與管理2023 設計驅動創新實務:全面體驗思維與管理
2023 設計驅動創新實務:全面體驗思維與管理NTUST
 
Service design 20180918 week 2
Service design 20180918 week 2Service design 20180918 week 2
Service design 20180918 week 2Winny Wang
 

Similaire à Flat design presentation 扁平設計式簡報 (9)

【Maker商品化】跨越工業設計難關
【Maker商品化】跨越工業設計難關【Maker商品化】跨越工業設計難關
【Maker商品化】跨越工業設計難關
 
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
 
網站規劃的二三事
網站規劃的二三事網站規劃的二三事
網站規劃的二三事
 
前端工程與使用者經驗(榮總課程):Front-End Develop & User Experience
前端工程與使用者經驗(榮總課程):Front-End Develop & User Experience前端工程與使用者經驗(榮總課程):Front-End Develop & User Experience
前端工程與使用者經驗(榮總課程):Front-End Develop & User Experience
 
海外工作經驗談(東京):跨國企業的UX設計師工作日常_Simonlin_2019
海外工作經驗談(東京):跨國企業的UX設計師工作日常_Simonlin_2019海外工作經驗談(東京):跨國企業的UX設計師工作日常_Simonlin_2019
海外工作經驗談(東京):跨國企業的UX設計師工作日常_Simonlin_2019
 
設計跨界與事業設計
設計跨界與事業設計設計跨界與事業設計
設計跨界與事業設計
 
Medialand 2013
Medialand 2013Medialand 2013
Medialand 2013
 
2023 設計驅動創新實務:全面體驗思維與管理
2023 設計驅動創新實務:全面體驗思維與管理2023 設計驅動創新實務:全面體驗思維與管理
2023 設計驅動創新實務:全面體驗思維與管理
 
Service design 20180918 week 2
Service design 20180918 week 2Service design 20180918 week 2
Service design 20180918 week 2
 

Plus de kome chang

圖書館大未來
圖書館大未來圖書館大未來
圖書館大未來kome chang
 
Casa brutus made in usa 雜誌版型設計
Casa brutus made in usa 雜誌版型設計 Casa brutus made in usa 雜誌版型設計
Casa brutus made in usa 雜誌版型設計 kome chang
 
標案簡報心法架構篇 精華分享版
標案簡報心法架構篇  精華分享版標案簡報心法架構篇  精華分享版
標案簡報心法架構篇 精華分享版kome chang
 
串連行動與實體應用的關鍵 -ibeacon分享版
串連行動與實體應用的關鍵 -ibeacon分享版串連行動與實體應用的關鍵 -ibeacon分享版
串連行動與實體應用的關鍵 -ibeacon分享版kome chang
 
20140701苗栗文創多元通路發展註解版
20140701苗栗文創多元通路發展註解版20140701苗栗文創多元通路發展註解版
20140701苗栗文創多元通路發展註解版kome chang
 
如何規畫更友善的政府網站
如何規畫更友善的政府網站如何規畫更友善的政府網站
如何規畫更友善的政府網站kome chang
 
5分鐘簡報輕鬆學系列-問題現況視覺呈現法
5分鐘簡報輕鬆學系列-問題現況視覺呈現法5分鐘簡報輕鬆學系列-問題現況視覺呈現法
5分鐘簡報輕鬆學系列-問題現況視覺呈現法kome chang
 
5分鐘簡報輕鬆學系列 -故事開場法
5分鐘簡報輕鬆學系列 -故事開場法5分鐘簡報輕鬆學系列 -故事開場法
5分鐘簡報輕鬆學系列 -故事開場法kome chang
 
GO GO Lamigirls
GO GO LamigirlsGO GO Lamigirls
GO GO Lamigirlskome chang
 
0925 文創旗艦 -文化創意通路開拓經驗分享
0925 文創旗艦 -文化創意通路開拓經驗分享0925 文創旗艦 -文化創意通路開拓經驗分享
0925 文創旗艦 -文化創意通路開拓經驗分享kome chang
 
文創通路開拓經驗分享
文創通路開拓經驗分享文創通路開拓經驗分享
文創通路開拓經驗分享kome chang
 
蔡倫開會不帶紙 -凌網科技無紙化會議系統簡介
蔡倫開會不帶紙 -凌網科技無紙化會議系統簡介蔡倫開會不帶紙 -凌網科技無紙化會議系統簡介
蔡倫開會不帶紙 -凌網科技無紙化會議系統簡介kome chang
 
文創通路開拓經驗分享~講義版
文創通路開拓經驗分享~講義版文創通路開拓經驗分享~講義版
文創通路開拓經驗分享~講義版kome chang
 
思考的藝術:52 個非受迫性思考錯誤
思考的藝術:52 個非受迫性思考錯誤思考的藝術:52 個非受迫性思考錯誤
思考的藝術:52 個非受迫性思考錯誤kome chang
 
企劃提案簡報力提昇
企劃提案簡報力提昇企劃提案簡報力提昇
企劃提案簡報力提昇kome chang
 

Plus de kome chang (15)

圖書館大未來
圖書館大未來圖書館大未來
圖書館大未來
 
Casa brutus made in usa 雜誌版型設計
Casa brutus made in usa 雜誌版型設計 Casa brutus made in usa 雜誌版型設計
Casa brutus made in usa 雜誌版型設計
 
標案簡報心法架構篇 精華分享版
標案簡報心法架構篇  精華分享版標案簡報心法架構篇  精華分享版
標案簡報心法架構篇 精華分享版
 
串連行動與實體應用的關鍵 -ibeacon分享版
串連行動與實體應用的關鍵 -ibeacon分享版串連行動與實體應用的關鍵 -ibeacon分享版
串連行動與實體應用的關鍵 -ibeacon分享版
 
20140701苗栗文創多元通路發展註解版
20140701苗栗文創多元通路發展註解版20140701苗栗文創多元通路發展註解版
20140701苗栗文創多元通路發展註解版
 
如何規畫更友善的政府網站
如何規畫更友善的政府網站如何規畫更友善的政府網站
如何規畫更友善的政府網站
 
5分鐘簡報輕鬆學系列-問題現況視覺呈現法
5分鐘簡報輕鬆學系列-問題現況視覺呈現法5分鐘簡報輕鬆學系列-問題現況視覺呈現法
5分鐘簡報輕鬆學系列-問題現況視覺呈現法
 
5分鐘簡報輕鬆學系列 -故事開場法
5分鐘簡報輕鬆學系列 -故事開場法5分鐘簡報輕鬆學系列 -故事開場法
5分鐘簡報輕鬆學系列 -故事開場法
 
GO GO Lamigirls
GO GO LamigirlsGO GO Lamigirls
GO GO Lamigirls
 
0925 文創旗艦 -文化創意通路開拓經驗分享
0925 文創旗艦 -文化創意通路開拓經驗分享0925 文創旗艦 -文化創意通路開拓經驗分享
0925 文創旗艦 -文化創意通路開拓經驗分享
 
文創通路開拓經驗分享
文創通路開拓經驗分享文創通路開拓經驗分享
文創通路開拓經驗分享
 
蔡倫開會不帶紙 -凌網科技無紙化會議系統簡介
蔡倫開會不帶紙 -凌網科技無紙化會議系統簡介蔡倫開會不帶紙 -凌網科技無紙化會議系統簡介
蔡倫開會不帶紙 -凌網科技無紙化會議系統簡介
 
文創通路開拓經驗分享~講義版
文創通路開拓經驗分享~講義版文創通路開拓經驗分享~講義版
文創通路開拓經驗分享~講義版
 
思考的藝術:52 個非受迫性思考錯誤
思考的藝術:52 個非受迫性思考錯誤思考的藝術:52 個非受迫性思考錯誤
思考的藝術:52 個非受迫性思考錯誤
 
企劃提案簡報力提昇
企劃提案簡報力提昇企劃提案簡報力提昇
企劃提案簡報力提昇
 

Flat design presentation 扁平設計式簡報