Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Web Design 
設計過程與合作經驗分享 
Abby Chiu
Abby Chiu 
邱靖瑄 
! 
email : 
abbychiu1002@gmail.com 
! 
前⾹香蕉⼈人角⾊色設計師。︒ 
⽬目前在永豐餘的⼦子公司:LiVEBRiCKS 
⽣生活磚擔任 UI/UX Designer。︒有兩 ...
分享⼤大綱 
01. 什麼是網⾴頁設計︖? 
02. 網站設計的過程 
03. 如何培養美感︖?
分享⽬目的 
Designer Programmer 
photoshop 
illustrator 
sketch 
+ html & css 
+ java script 
html & css 
java script 
Sketch 
...
01.什麼是網⾴頁設計︖? 
Web Design 
is Graphic Design? 
平⾯面設計基本原則:重複與交錯、︑節奏與韻律、︑對稱 
與均衡、︑對比與調和、︑比例與適度、︑變異與秩序、︑虛 
實與留⽩白、︑變化與統⼀一。︒
01.什麼是網⾴頁設計︖? 
對了⼀一點點! 
基礎排版原則是相同的。︒ 
! 
不管是網⾴頁設計還是平⾯面設計,設計者都需要具 
備平⾯面設計知識以及良好的設計美感。︒ 
!
不同的地⽅方 
平⾯面設計網⾴頁設計 
⾊色彩模式不同 : CMYK RGB 
媒介不同 : 紙張、︑不同材質之媒介不同尺⼨寸的顯⽰示器 
展現形式 : 純靜態擁有更多動態元素與互動性 
設計重點 : ⾊色彩運⽤用注重視覺的衝擊⼒力 
及視覺流...
01.什麼是網⾴頁設計︖? 
重點 
網⾴頁和平⾯面設計最⼤大的不同在於 互動性 與 呈現媒介 的不同。︒
01.什麼是網⾴頁設計︖? 
對於不同角⾊色⽽而⾔言 
1. ⼀一套 code 滿⾜足所有需求 
2. 維護容易。︒ 
Programmer 
痙㮳㮳⠫ 
為什麼要做響應式網⾴頁︖? 
因為 ...
01.什麼是網⾴頁設計︖? 
對於不同角⾊色⽽而⾔言 
為什麼要做響應式網⾴頁︖? 
因為 ... 
1. 提供最佳的視覺體驗 
2. 簡化操作⾏行為 
Designer 
痙㮳㮳⠫
01.什麼是網⾴頁設計︖? 
對於不同角⾊色⽽而⾔言 
為什麼要做響應式網⾴頁︖? 
所以 ... 
Designer 
設計師必須要做出至少 三種 排版。︒ 
痙㮳㮳⠫
分享⽬目的 
Designer Designer
02.網站設計的過程 
New Tab 
Web Design
( ⽣生活磚官網 )
02.網站設計的過程 
a. 前期研究 
b. 繪製草圖 
c. 實作
02.網站設計的過程 
a. 前期研究 
b. 繪製草圖 
c. 實作
02.網站設計的過程a.前期研究 
a. 前期研究 
1. 網站設計趨勢( Web Design Trends ) 
! 
2. 使⽤用者經驗研究( User Experience ) 
! 
3. 釐清思緒 
!
02.網站設計的過程a.前期研究 
a. 前期研究 
關鍵字: 
! 
響應式網站(RWD) 
⼀一⾴頁滾動式網站(Parallax Scrolling) 
扁平化設計風格(Flat design style) 
1. 網站設計趨勢( Web ...
響應式網站 
(圖⽚片來源:http://skinnyties.com/) 
02.網站設計的過程a.前期研究
響應式網站 
(圖⽚片來源:http://skinnyties.com/) 
02.網站設計的過程a.前期研究
響應式網站 
(圖⽚片來源:http://skinnyties.com/) 
02.網站設計的過程a.前期研究
02.網站設計的過程a.前期研究 
⼀一⾴頁滾動式加上視差滾動效果 
Sony tinke 53
02.網站設計的過程a.前期研究 
a. 前期研究 
1. 網站設計趨勢( Web Design Trends ) 
! 
2. 使⽤用者經驗研究( User Experience ) 
! 
3. 釐清思緒 
!
02.網站設計的過程a.前期研究 
使⽤用者經驗研究影響設計 
From Yahoo!’s Eye tracking studies: 
! 
• People scan the main sections of a page to deter...
02.網站設計的過程a.前期研究 
Z - Layout : Z 型佈局 
(資料參考:Understanding the Split Layout in Web Design) 
使⽤用者經驗研究影響設計 
轉化成
( iPad mini page ) ( Microsoft ) 
02.網站設計的過程a.前期研究 
使⽤用者經驗研究影響設計 
Z - Layout : Z 型佈局 
! 
不⽌止因為排版好看,更利⽤用巧妙的佈局,讓使⽤用 
者不知不覺瀏覽...
通常講到這裡... 
Programmer 
02.網站設計的過程a.前期研究
02.網站設計的過程a.前期研究 
基本原則: 
1. 清楚提供網⾴頁導覽功能 
! 
2. 簡單清楚的內容 
! 
3. ⼀一致性的版⾯面設計 
! 
4. 易懂的簡單圖⽰示
永遠讓使⽤用者知道他在哪裡, 
要往哪去。︒ 
02.網站設計的過程a.前期研究 
基本原則: 
1. 清楚提供網⾴頁導覽功能 
! 
2. 簡單清楚的內容 
! 
3. ⼀一致性的版⾯面設計 
! 
4. 易懂的簡單圖⽰示
02.網站設計的過程a.前期研究 
Youtube Pinterest 
案例分享
廢話就別說了。︒ 
請著重在內容的呈現。︒ 
02.網站設計的過程a.前期研究 
基本原則: 
1. 清楚提供網⾴頁導覽功能 
! 
2. 簡單清楚的內容 
! 
3. ⼀一致性的版⾯面設計 
! 
4. 易懂的簡單圖⽰示
02.網站設計的過程a.前期研究 
案例分享 
Google Dropbox
減少視覺上的負擔,增加專業 
感、︑美感。︒ 
02.網站設計的過程a.前期研究 
基本原則: 
1. 清楚提供網⾴頁導覽功能 
! 
2. 簡單清楚的內容 
! 
3. ⼀一致性的版⾯面設計 
! 
4. 易懂的簡單圖⽰示
02.網站設計的過程a.前期研究 
案例分享 
Codecademy redesign 
codecademy
⼈人都是懶散的。︒ 
02.網站設計的過程a.前期研究 
基本原則: 
1. 清楚提供網⾴頁導覽功能 
! 
2. 簡單清楚的內容 
! 
3. ⼀一致性的版⾯面設計 
! 
4. 易懂的簡單圖⽰示
02.網站設計的過程a.前期研究 
Spotify Wechat 
案例分享
1. 我們要表達什麼訊息給接收者(使⽤用者)︖? 
! 
2. 公司要的是什麼︖? 
重點 
02.網站設計的過程a.前期研究 
a. 前期研究 
1. 網站設計趨勢( Web Design Trends ) 
! 
2. 使⽤用者經驗研究( ...
02.網站設計的過程a.前期研究 
釐清思緒的⽅方法 
畫出既有的 sitemap ,幫助理清思緒,看看什麼是重要的什麼是不重要的。︒
02.網站設計的過程a.前期研究 
釐清思緒的⽅方法 
跟⽼老闆喝杯咖啡吧!
02.網站設計的過程 
a. 前期研究 
b. 繪製草圖 
c. 實作
02.網站設計的過程b.繪製草圖 
任何跟產品有關的⼈人,都應該使 
⽤用 wireframe 。︒ 
! 
優點: 1. 快速實現腦中的想法。︒ 
2. 討論可⾏行性,快速修改。︒ 
3. 減少開發前期的成本。︒ 
(圖⽚片來源:⽣生活磚官網...
02.網站設計的過程b.繪製草圖 
善⽤用 Grids 排版 
利⽤用 Grids 的概念編排 
出簡潔清楚的風格。︒ 
!
desktop pad phone 
.K8'$4K%-5 
лȞ˖Ө ʖˠўω ؾ̩֫Ž Ԕࣾāĵ 
лȞ˖Ө 
лȞॏ௟ 
.K8'$4K%-5 
лȞ˖Ө 
лȞॏ௟ 
02.網站設計的過程b.繪製草圖
02.網站設計的過程b.繪製草圖 
⼩小⽅方法:先縮兩邊的留⽩白,接著改變排版⽅方式,最後再縮⼩小。︒ 
лȞ˖Ө 
ࢨˠҹॏ 
Ȟײ̦̉ 
лȞ˖Ө 
ࢨˠҹॏ 
лȞ˖Ө 
ࢨˠҹॏ 
Ȟײ̦̉ 
響應式網站排版
02.網站設計的過程b.繪製草圖 
因應不同 devices 所做的調整。︒ 
desktop pad phone 
.K8'$4K%-5 лȞ˖Ө ʖˠўω ؾ̩֫Ž Ԕࣾāĵ .K8'$4K%-5 .K8'$4K%-5 
лȞ˖Ө ʖˠўω...
02.網站設計的過程 
a. 前期研究 
b. 繪製草圖 
c. 實作
Designer 
02.網站設計的過程c.實作 
重點 
術業有專攻,如果公司 
有 Designer , 就交給 
Designer 吧!
02.網站設計的過程c.實作 
與⼯工程師溝通的演化過程 
請畫⼀一個蘋果,寬20px ⾼高25px,像這樣! 
寬20px 
好了! 
⾼高25px 
Designer Programmer
02.網站設計的過程c.實作 
與⼯工程師溝通的演化過程 
請畫⼀一個蘋果,整體寬20px ⾼高25px ,蘋果的顏⾊色 
是#ec571d 葉⼦子顏⾊色是1e771d 蘋果左右要對稱... 
寬20px 
好了! 
⾼高25px 
⾼高15p...
02.網站設計的過程c.實作 
與⼯工程師溝通的演化過程 
1. ⽤用說的 
! 
2. ⽤用畫的、︑⽤用⼿手寫 
! 
3. 請⼯工程師先寫出⼤大致上的版型, 
細節部分⾃自⼰己微調。︒ 
! 
4. ⾃自⼰己寫出來...
跟寫程式⼀一樣,能重複利⽤用的部分 
就重複利⽤用。︒ 
! 
! 
設計師希望⼯工程師: 
! 
1. 先將標題的字型、︑字體⼤大⼩小、︑顏⾊色統⼀一 ; 
內⽂文與⾏行距也是。︒ 
! 
2. 能先對齊就對齊,設計師會謝謝你。︒ 
Ԇʛ 
...
02.網站設計的過程c.實作 
彼此的默契 
什麼叫對齊︖? 
! 
! 
! 
!
02.網站設計的過程c.實作 
彼此的默契 
什麼叫對齊︖? 
! 
邊界與邊界對齊 
⽂文字與⽂文字對齊 
區塊與區塊對齊 
⽂文字與區塊對齊 
! 
!
02.網站設計的過程c.實作 
彼此的默契 
什麼叫對齊︖? 
! 
邊界與邊界對齊 
⽂文字與⽂文字對齊 
區塊與區塊對齊 
⽂文字與區塊對齊 
! 
!
02.網站設計的過程c.實作 
彼此的默契 
什麼叫對齊︖? 
! 
邊界與邊界對齊 
⽂文字與⽂文字對齊 
區塊與區塊對齊 
⽂文字與區塊對齊 
! 
!
02.網站設計的過程c.實作 
彼此的默契 
什麼叫對齊︖? 
! 
邊界與邊界對齊 
⽂文字與⽂文字對齊 
區塊與區塊對齊 
⽂文字與區塊對齊 
! 
!
02.網站設計的過程c.實作 
彼此的默契 
這樣就是對齊! 
! 
!
02.網站設計的過程c.實作 
彼此的默契 
這樣就是對齊! 
! 
!
⼀一⾴頁滾動式的呈現⽅方式 
! 
產品服務,專業優勢,企業簡介, 
營運據點,聯絡我們 
( ⽣生活磚官網 ) 
02.網站設計的過程c.實作 
最後成果
1. 清楚提供網⾴頁導覽功能 
( ⽣生活磚官網 ) 
02.網站設計的過程c.實作 
最後成果
02.網站設計的過程c.實作 
最後成果 
2. 簡單清楚的內容
02.網站設計的過程c.實作 
最後成果 
2. 簡單清楚的內容
02.網站設計的過程c.實作 
最後成果 
3. ⼀一致性的版⾯面設計 
( ⽣生活磚官網 )
( ⽣生活磚官網 )
03.如何培養美感︖? 
前往未知的領域
03.如何培養美感︖? 
其實有沒有美感在出⽣生的瞬 
間就決定好了啊…
03.如何培養美感︖? 
好啦其實有辦法!
03.如何培養美感︖? 
資源分享 
Page Ruler 
Siteinspire Adobe kuler Page ruler
03.如何培養美感︖? 
資源分享 
整理: 
! 
找版型: html5up 找靈感: siteinspire selected webdesign 
! 
網站佈局:Understanding the Split Layout in Web...
Abby Chiu Thank u all ! 
email : abbychiu1002@gmail.com
Prochain SlideShare
Chargement dans…5
×

Web Design 設計過程與合作經驗分享

30 810 vues

Publié le

share web design experience to F2E !

Publié dans : Design

Web Design 設計過程與合作經驗分享

  1. 1. Web Design 設計過程與合作經驗分享 Abby Chiu
  2. 2. Abby Chiu 邱靖瑄 ! email : abbychiu1002@gmail.com ! 前⾹香蕉⼈人角⾊色設計師。︒ ⽬目前在永豐餘的⼦子公司:LiVEBRiCKS ⽣生活磚擔任 UI/UX Designer。︒有兩 年多的⼯工作經驗。︒
  3. 3. 分享⼤大綱 01. 什麼是網⾴頁設計︖? 02. 網站設計的過程 03. 如何培養美感︖?
  4. 4. 分享⽬目的 Designer Programmer photoshop illustrator sketch + html & css + java script html & css java script Sketch + sense of beauty
  5. 5. 01.什麼是網⾴頁設計︖? Web Design is Graphic Design? 平⾯面設計基本原則:重複與交錯、︑節奏與韻律、︑對稱 與均衡、︑對比與調和、︑比例與適度、︑變異與秩序、︑虛 實與留⽩白、︑變化與統⼀一。︒
  6. 6. 01.什麼是網⾴頁設計︖? 對了⼀一點點! 基礎排版原則是相同的。︒ ! 不管是網⾴頁設計還是平⾯面設計,設計者都需要具 備平⾯面設計知識以及良好的設計美感。︒ !
  7. 7. 不同的地⽅方 平⾯面設計網⾴頁設計 ⾊色彩模式不同 : CMYK RGB 媒介不同 : 紙張、︑不同材質之媒介不同尺⼨寸的顯⽰示器 展現形式 : 純靜態擁有更多動態元素與互動性 設計重點 : ⾊色彩運⽤用注重視覺的衝擊⼒力 及視覺流的引導 信息結構關係的整理 (資料參考:http://www.blueidea.com/design/doc/2012/8771.asp) 01.什麼是網⾴頁設計︖?
  8. 8. 01.什麼是網⾴頁設計︖? 重點 網⾴頁和平⾯面設計最⼤大的不同在於 互動性 與 呈現媒介 的不同。︒
  9. 9. 01.什麼是網⾴頁設計︖? 對於不同角⾊色⽽而⾔言 1. ⼀一套 code 滿⾜足所有需求 2. 維護容易。︒ Programmer 痙㮳㮳⠫ 為什麼要做響應式網⾴頁︖? 因為 ...
  10. 10. 01.什麼是網⾴頁設計︖? 對於不同角⾊色⽽而⾔言 為什麼要做響應式網⾴頁︖? 因為 ... 1. 提供最佳的視覺體驗 2. 簡化操作⾏行為 Designer 痙㮳㮳⠫
  11. 11. 01.什麼是網⾴頁設計︖? 對於不同角⾊色⽽而⾔言 為什麼要做響應式網⾴頁︖? 所以 ... Designer 設計師必須要做出至少 三種 排版。︒ 痙㮳㮳⠫
  12. 12. 分享⽬目的 Designer Designer
  13. 13. 02.網站設計的過程 New Tab Web Design
  14. 14. ( ⽣生活磚官網 )
  15. 15. 02.網站設計的過程 a. 前期研究 b. 繪製草圖 c. 實作
  16. 16. 02.網站設計的過程 a. 前期研究 b. 繪製草圖 c. 實作
  17. 17. 02.網站設計的過程a.前期研究 a. 前期研究 1. 網站設計趨勢( Web Design Trends ) ! 2. 使⽤用者經驗研究( User Experience ) ! 3. 釐清思緒 !
  18. 18. 02.網站設計的過程a.前期研究 a. 前期研究 關鍵字: ! 響應式網站(RWD) ⼀一⾴頁滾動式網站(Parallax Scrolling) 扁平化設計風格(Flat design style) 1. 網站設計趨勢( Web Design Trends ) ! 2. 使⽤用者經驗研究( User Experience ) ! 3. 釐清思緒 !
  19. 19. 響應式網站 (圖⽚片來源:http://skinnyties.com/) 02.網站設計的過程a.前期研究
  20. 20. 響應式網站 (圖⽚片來源:http://skinnyties.com/) 02.網站設計的過程a.前期研究
  21. 21. 響應式網站 (圖⽚片來源:http://skinnyties.com/) 02.網站設計的過程a.前期研究
  22. 22. 02.網站設計的過程a.前期研究 ⼀一⾴頁滾動式加上視差滾動效果 Sony tinke 53
  23. 23. 02.網站設計的過程a.前期研究 a. 前期研究 1. 網站設計趨勢( Web Design Trends ) ! 2. 使⽤用者經驗研究( User Experience ) ! 3. 釐清思緒 !
  24. 24. 02.網站設計的過程a.前期研究 使⽤用者經驗研究影響設計 From Yahoo!’s Eye tracking studies: ! • People scan the main sections of a page to determine what it’s about and whether they want to stay longer. ! • They make decisions about the page in as little as three seconds. ! • If they decide to stay, they pay the most attention to the content in the top part of the screen. (資料參考:Understanding the Split Layout in Web Design)
  25. 25. 02.網站設計的過程a.前期研究 Z - Layout : Z 型佈局 (資料參考:Understanding the Split Layout in Web Design) 使⽤用者經驗研究影響設計 轉化成
  26. 26. ( iPad mini page ) ( Microsoft ) 02.網站設計的過程a.前期研究 使⽤用者經驗研究影響設計 Z - Layout : Z 型佈局 ! 不⽌止因為排版好看,更利⽤用巧妙的佈局,讓使⽤用 者不知不覺瀏覽更多的訊息,增加使⽤用者繼續瀏 覽的意願。︒ !
  27. 27. 通常講到這裡... Programmer 02.網站設計的過程a.前期研究
  28. 28. 02.網站設計的過程a.前期研究 基本原則: 1. 清楚提供網⾴頁導覽功能 ! 2. 簡單清楚的內容 ! 3. ⼀一致性的版⾯面設計 ! 4. 易懂的簡單圖⽰示
  29. 29. 永遠讓使⽤用者知道他在哪裡, 要往哪去。︒ 02.網站設計的過程a.前期研究 基本原則: 1. 清楚提供網⾴頁導覽功能 ! 2. 簡單清楚的內容 ! 3. ⼀一致性的版⾯面設計 ! 4. 易懂的簡單圖⽰示
  30. 30. 02.網站設計的過程a.前期研究 Youtube Pinterest 案例分享
  31. 31. 廢話就別說了。︒ 請著重在內容的呈現。︒ 02.網站設計的過程a.前期研究 基本原則: 1. 清楚提供網⾴頁導覽功能 ! 2. 簡單清楚的內容 ! 3. ⼀一致性的版⾯面設計 ! 4. 易懂的簡單圖⽰示
  32. 32. 02.網站設計的過程a.前期研究 案例分享 Google Dropbox
  33. 33. 減少視覺上的負擔,增加專業 感、︑美感。︒ 02.網站設計的過程a.前期研究 基本原則: 1. 清楚提供網⾴頁導覽功能 ! 2. 簡單清楚的內容 ! 3. ⼀一致性的版⾯面設計 ! 4. 易懂的簡單圖⽰示
  34. 34. 02.網站設計的過程a.前期研究 案例分享 Codecademy redesign codecademy
  35. 35. ⼈人都是懶散的。︒ 02.網站設計的過程a.前期研究 基本原則: 1. 清楚提供網⾴頁導覽功能 ! 2. 簡單清楚的內容 ! 3. ⼀一致性的版⾯面設計 ! 4. 易懂的簡單圖⽰示
  36. 36. 02.網站設計的過程a.前期研究 Spotify Wechat 案例分享
  37. 37. 1. 我們要表達什麼訊息給接收者(使⽤用者)︖? ! 2. 公司要的是什麼︖? 重點 02.網站設計的過程a.前期研究 a. 前期研究 1. 網站設計趨勢( Web Design Trends ) ! 2. 使⽤用者經驗研究( User Experience ) ! 3. 釐清思緒 !
  38. 38. 02.網站設計的過程a.前期研究 釐清思緒的⽅方法 畫出既有的 sitemap ,幫助理清思緒,看看什麼是重要的什麼是不重要的。︒
  39. 39. 02.網站設計的過程a.前期研究 釐清思緒的⽅方法 跟⽼老闆喝杯咖啡吧!
  40. 40. 02.網站設計的過程 a. 前期研究 b. 繪製草圖 c. 實作
  41. 41. 02.網站設計的過程b.繪製草圖 任何跟產品有關的⼈人,都應該使 ⽤用 wireframe 。︒ ! 優點: 1. 快速實現腦中的想法。︒ 2. 討論可⾏行性,快速修改。︒ 3. 減少開發前期的成本。︒ (圖⽚片來源:⽣生活磚官網⼿手繪稿) 繪製 wireframe
  42. 42. 02.網站設計的過程b.繪製草圖 善⽤用 Grids 排版 利⽤用 Grids 的概念編排 出簡潔清楚的風格。︒ !
  43. 43. desktop pad phone .K8'$4K%-5 лȞ˖Ө ʖˠўω ؾ̩֫Ž Ԕࣾāĵ лȞ˖Ө лȞॏ௟ .K8'$4K%-5 лȞ˖Ө лȞॏ௟ 02.網站設計的過程b.繪製草圖
  44. 44. 02.網站設計的過程b.繪製草圖 ⼩小⽅方法:先縮兩邊的留⽩白,接著改變排版⽅方式,最後再縮⼩小。︒ лȞ˖Ө ࢨˠҹॏ Ȟײ̦̉ лȞ˖Ө ࢨˠҹॏ лȞ˖Ө ࢨˠҹॏ Ȟײ̦̉ 響應式網站排版
  45. 45. 02.網站設計的過程b.繪製草圖 因應不同 devices 所做的調整。︒ desktop pad phone .K8'$4K%-5 лȞ˖Ө ʖˠўω ؾ̩֫Ž Ԕࣾāĵ .K8'$4K%-5 .K8'$4K%-5 лȞ˖Ө ʖˠўω ؾ̩֫Ž Ԕࣾāĵ 空間⼤大,每個項⽬目可以獨⽴立出來。︒ 寬度變窄,變成兩⾏行顯⽰示。︒ 寬度最窄,使⽤用 menu btn 顯⽰示。︒ 導覽列的設計
  46. 46. 02.網站設計的過程 a. 前期研究 b. 繪製草圖 c. 實作
  47. 47. Designer 02.網站設計的過程c.實作 重點 術業有專攻,如果公司 有 Designer , 就交給 Designer 吧!
  48. 48. 02.網站設計的過程c.實作 與⼯工程師溝通的演化過程 請畫⼀一個蘋果,寬20px ⾼高25px,像這樣! 寬20px 好了! ⾼高25px Designer Programmer
  49. 49. 02.網站設計的過程c.實作 與⼯工程師溝通的演化過程 請畫⼀一個蘋果,整體寬20px ⾼高25px ,蘋果的顏⾊色 是#ec571d 葉⼦子顏⾊色是1e771d 蘋果左右要對稱... 寬20px 好了! ⾼高25px ⾼高15px Designer Programmer
  50. 50. 02.網站設計的過程c.實作 與⼯工程師溝通的演化過程 1. ⽤用說的 ! 2. ⽤用畫的、︑⽤用⼿手寫 ! 3. 請⼯工程師先寫出⼤大致上的版型, 細節部分⾃自⼰己微調。︒ ! 4. ⾃自⼰己寫出來...
  51. 51. 跟寫程式⼀一樣,能重複利⽤用的部分 就重複利⽤用。︒ ! ! 設計師希望⼯工程師: ! 1. 先將標題的字型、︑字體⼤大⼩小、︑顏⾊色統⼀一 ; 內⽂文與⾏行距也是。︒ ! 2. 能先對齊就對齊,設計師會謝謝你。︒ Ԇʛ ʮNJ ʮNJ ʮNJ ʮNJ Ԇʛ ʮNJ ʮNJ ʮNJ ʮNJ 02.網站設計的過程c.實作 彼此的默契
  52. 52. 02.網站設計的過程c.實作 彼此的默契 什麼叫對齊︖? ! ! ! !
  53. 53. 02.網站設計的過程c.實作 彼此的默契 什麼叫對齊︖? ! 邊界與邊界對齊 ⽂文字與⽂文字對齊 區塊與區塊對齊 ⽂文字與區塊對齊 ! !
  54. 54. 02.網站設計的過程c.實作 彼此的默契 什麼叫對齊︖? ! 邊界與邊界對齊 ⽂文字與⽂文字對齊 區塊與區塊對齊 ⽂文字與區塊對齊 ! !
  55. 55. 02.網站設計的過程c.實作 彼此的默契 什麼叫對齊︖? ! 邊界與邊界對齊 ⽂文字與⽂文字對齊 區塊與區塊對齊 ⽂文字與區塊對齊 ! !
  56. 56. 02.網站設計的過程c.實作 彼此的默契 什麼叫對齊︖? ! 邊界與邊界對齊 ⽂文字與⽂文字對齊 區塊與區塊對齊 ⽂文字與區塊對齊 ! !
  57. 57. 02.網站設計的過程c.實作 彼此的默契 這樣就是對齊! ! !
  58. 58. 02.網站設計的過程c.實作 彼此的默契 這樣就是對齊! ! !
  59. 59. ⼀一⾴頁滾動式的呈現⽅方式 ! 產品服務,專業優勢,企業簡介, 營運據點,聯絡我們 ( ⽣生活磚官網 ) 02.網站設計的過程c.實作 最後成果
  60. 60. 1. 清楚提供網⾴頁導覽功能 ( ⽣生活磚官網 ) 02.網站設計的過程c.實作 最後成果
  61. 61. 02.網站設計的過程c.實作 最後成果 2. 簡單清楚的內容
  62. 62. 02.網站設計的過程c.實作 最後成果 2. 簡單清楚的內容
  63. 63. 02.網站設計的過程c.實作 最後成果 3. ⼀一致性的版⾯面設計 ( ⽣生活磚官網 )
  64. 64. ( ⽣生活磚官網 )
  65. 65. 03.如何培養美感︖? 前往未知的領域
  66. 66. 03.如何培養美感︖? 其實有沒有美感在出⽣生的瞬 間就決定好了啊…
  67. 67. 03.如何培養美感︖? 好啦其實有辦法!
  68. 68. 03.如何培養美感︖? 資源分享 Page Ruler Siteinspire Adobe kuler Page ruler
  69. 69. 03.如何培養美感︖? 資源分享 整理: ! 找版型: html5up 找靈感: siteinspire selected webdesign ! 網站佈局:Understanding the Split Layout in Web Design ! sketch template 下載:Sneakpeekit 參考各⼤大網站的排版 :web without words ! 找顏⾊色:Adobe kuler ! 網⾴頁尺標⼯工具:Page ruler
  70. 70. Abby Chiu Thank u all ! email : abbychiu1002@gmail.com

×