Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Upcoming SlideShare
Loading in …5
×

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

30,041 views

Published on

share web design experience to F2E !

Published in: 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

×