Successfully reported this slideshow.

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

464

Share

Upcoming SlideShare
響應式網頁教學
響應式網頁教學
Loading in …3
×
1 of 70
1 of 70

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

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

×