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

+ sense of beauty

Web Design

is Graphic Design?

什麼是網⾴頁設計︖？01.

平⾯面設計基本原則：重複與交錯、︑節奏與韻律、︑對稱與均衡、︑對比與調和、︑比例與適度、︑變異與秩序、︑虛實與留⽩白、︑變化與統⼀一。︒

對了⼀一點點！

基礎排版原則是相同的。︒

!

不管是網⾴頁設計還是平⾯面設計，設計者都需要具

備平⾯面設計知識以及良好的設計美感。︒

!

什麼是網⾴頁設計︖？01.

不同的地⽅方

（資料參考：http://www.blueidea.com/design/doc/2012/8771.asp）

網⾴頁設計平⾯面設計

媒介不同 : 紙張、︑不同材質之媒介 不同尺⼨寸的顯⽰示器

⾊色彩模式不同 : RGBCMYK

設計重點 : ⾊色彩運⽤用注重視覺的衝擊⼒力及視覺流的引導

信息結構關係的整理

展現形式 : 純靜態 擁有更多動態元素與互動性

什麼是網⾴頁設計︖？01.

重點

網⾴頁和平⾯面設計最⼤大的不同在於 互動性 與 呈現媒介 的不同。︒

什麼是網⾴頁設計︖？01.

對於不同角⾊色⽽而⾔言

什麼是網⾴頁設計︖？01.

1. ⼀一套 code 滿⾜足所有需求

2. 維護容易。︒

Programmer

為什麼要做響應式網⾴頁︖？

因為 ...

對於不同角⾊色⽽而⾔言

什麼是網⾴頁設計︖？01.

為什麼要做響應式網⾴頁︖？

因為 ...

1. 提供最佳的視覺體驗

2. 簡化操作⾏行為

Designer

對於不同角⾊色⽽而⾔言

什麼是網⾴頁設計︖？01.

為什麼要做響應式網⾴頁︖？

所以 ...

Designer

設計師必須要做出至少 三種 排版。︒

分享⽬目的

Designer Designer

網站設計的過程02.

New Tab

Web Design

（ ⽣生活磚官網 ）

網站設計的過程02.

a. 前期研究

b. 繪製草圖

c. 實作

a. 前期研究

b. 繪製草圖

c. 實作

網站設計的過程02.

前期研究a.

網站設計的過程02. 前期研究a.

1. 網站設計趨勢（ Web Design Trends ） !

2. 使⽤用者經驗研究（ User Experience ） !

3. 釐清思緒 !

前期研究a.

網站設計的過程02. 前期研究a.

關鍵字： !

響應式網站（RWD） ⼀一⾴頁滾動式網站（Parallax Scrolling） 扁平化設計風格（Flat design style）

1. 網站設計趨勢（ Web Design Trends ） !

2. 使⽤用者經驗研究（ User Experience ） !

3. 釐清思緒 !

響應式網站

（圖⽚片來源：http://skinnyties.com/）

網站設計的過程02. 前期研究a.

響應式網站

（圖⽚片來源：http://skinnyties.com/）

網站設計的過程02. 前期研究a.

響應式網站

（圖⽚片來源：http://skinnyties.com/）

網站設計的過程02. 前期研究a.

⼀一⾴頁滾動式加上視差滾動效果

tinkeSony 53

網站設計的過程02. 前期研究a.

前期研究a.

網站設計的過程02. 前期研究a.

1. 網站設計趨勢（ Web Design Trends ） !

2. 使⽤用者經驗研究（ User Experience ） !

3. 釐清思緒 !

使⽤用者經驗研究影響設計

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）

網站設計的過程02. 前期研究a.

Z - Layout : Z 型佈局

（資料參考：Understanding the Split Layout in Web Design）

使⽤用者經驗研究影響設計

網站設計的過程02. 前期研究a.

轉化成

（ iPad mini page ） （ Microsoft ）

Z - Layout : Z 型佈局 !

不⽌止因為排版好看，更利⽤用巧妙的佈局，讓使⽤用者不知不覺瀏覽更多的訊息，增加使⽤用者繼續瀏覽的意願。︒ !

網站設計的過程02. 前期研究a.

使⽤用者經驗研究影響設計

通常講到這裡...

Programmer

網站設計的過程02. 前期研究a.

1. 清楚提供網⾴頁導覽功能 !

2. 簡單清楚的內容 !

3. ⼀一致性的版⾯面設計 !

4. 易懂的簡單圖⽰示

網站設計的過程02. 前期研究a.

基本原則：

永遠讓使⽤用者知道他在哪裡， 要往哪去。︒

網站設計的過程02. 前期研究a.

1. 清楚提供網⾴頁導覽功能 !

2. 簡單清楚的內容 !

3. ⼀一致性的版⾯面設計 !

4. 易懂的簡單圖⽰示

基本原則：

Youtube Pinterest

案例分享

網站設計的過程02. 前期研究a.

廢話就別說了。︒ 請著重在內容的呈現。︒

網站設計的過程02. 前期研究a.

1. 清楚提供網⾴頁導覽功能 !

2. 簡單清楚的內容 !

3. ⼀一致性的版⾯面設計 !

4. 易懂的簡單圖⽰示

基本原則：

案例分享

DropboxGoogle

網站設計的過程02. 前期研究a.

減少視覺上的負擔，增加專業 感、︑美感。︒

網站設計的過程02. 前期研究a.

1. 清楚提供網⾴頁導覽功能 !

2. 簡單清楚的內容 !

3. ⼀一致性的版⾯面設計 !

4. 易懂的簡單圖⽰示

基本原則：

案例分享

codecademy

Codecademy redesign

網站設計的過程02. 前期研究a.

⼈人都是懶散的。︒

網站設計的過程02. 前期研究a.

1. 清楚提供網⾴頁導覽功能 !

2. 簡單清楚的內容 !

3. ⼀一致性的版⾯面設計 !

4. 易懂的簡單圖⽰示

基本原則：

Spotify Wechat

案例分享

網站設計的過程02. 前期研究a.

1. 我們要表達什麼訊息給接收者（使⽤用者）︖？ !

2. 公司要的是什麼︖？

重點

前期研究a.

1. 網站設計趨勢（ Web Design Trends ） !

2. 使⽤用者經驗研究（ User Experience ） !

3. 釐清思緒 !

網站設計的過程02. 前期研究a.

畫出既有的 sitemap ，幫助理清思緒，看看什麼是重要的什麼是不重要的。︒

釐清思緒的⽅方法

網站設計的過程02. 前期研究a.

跟⽼老闆喝杯咖啡吧！

釐清思緒的⽅方法

網站設計的過程02. 前期研究a.

a. 前期研究

b. 繪製草圖

c. 實作

網站設計的過程02.

任何跟產品有關的⼈人，都應該使⽤用 wireframe 。︒ !

優點： 1. 快速實現腦中的想法。︒ 2. 討論可⾏行性，快速修改。︒ 3. 減少開發前期的成本。︒

（圖⽚片來源：⽣生活磚官網⼿手繪稿）

繪製 wireframe

網站設計的過程02. 繪製草圖b.

利⽤用 Grids 的概念編排出簡潔清楚的風格。︒ !

善⽤用 Grids 排版

網站設計的過程02. 繪製草圖b.

.K8'$4K%-5лȞ˖Ө ʖˠўω Žؾ Ԕāĵ

лȞ˖Ө

лȞॏ��

лȞॏ��

.K8'$4K%-5

лȞ˖Ө

лȞॏ��

desktop pad phone

網站設計的過程02. 繪製草圖b.

⼩小⽅方法：先縮兩邊的留⽩白，接著改變排版⽅方式，最後再縮⼩小。︒

лȞ˖Ө

ˠҹॏࢨ

Ȟײ

ˠЩբࢨ

лȞ˖Ө

ˠҹॏࢨ

Ȟײ

лȞ˖Ө

ˠҹॏࢨ

Ȟײ

ˠЩբࢨ

響應式網站排版

網站設計的過程02. 繪製草圖b.

因應不同 devices 所做的調整。︒

.K8'$4K%-5 лȞ˖Ө ʖˠўω Žؾ Ԕāĵ .K8'$4K%-5.K8'$4K%-5лȞ˖Ө ʖˠўω Žؾ Ԕāĵ

desktop pad phone

空間⼤大，每個項⽬目可以獨⽴立出來。︒ 寬度變窄，變成兩⾏行顯⽰示。︒ 寬度最窄，使⽤用menu btn 顯⽰示。︒

導覽列的設計

網站設計的過程02. 繪製草圖b.

a. 前期研究

b. 繪製草圖

c. 實作

網站設計的過程02.

Designer

術業有專攻，如果公司有 Designer ， 就交給Designer 吧！

網站設計的過程02. 實作c.

重點

請畫⼀一個蘋果，寬20px ⾼高25px，像這樣！

網站設計的過程02. 實作c.

與⼯工程師溝通的演化過程

Designer Programmer

寬20px

好了！

⾼高25px

請畫⼀一個蘋果，整體寬20px ⾼高25px ，蘋果的顏⾊色是#ec571d 葉⼦子顏⾊色是1e771d 蘋果左右要對稱...

網站設計的過程02. 實作c.

與⼯工程師溝通的演化過程

Designer Programmer

寬20px

好了！

⾼高25px ⾼高15px

1. ⽤用說的 !

2. ⽤用畫的、︑⽤用⼿手寫 !

3. 請⼯工程師先寫出⼤大致上的版型，細節部分⾃自⼰己微調。︒

!

4. ⾃自⼰己寫出來...

網站設計的過程02. 實作c.

與⼯工程師溝通的演化過程

跟寫程式⼀一樣，能重複利⽤用的部分就重複利⽤用。︒ !

!

設計師希望⼯工程師： !

1. 先將標題的字型、︑字體⼤大⼩小、︑顏⾊色統⼀一 ; 內⽂文與⾏行距也是。︒ !

2. 能先對齊就對齊，設計師會謝謝你。︒

Ԇʛ

ʮNJ

ʮNJ

ʮNJ

ʮNJ

Ԇʛ

ʮNJ

ʮNJ

ʮNJ

ʮNJ

網站設計的過程02. 實作c.

彼此的默契

什麼叫對齊︖？ !

!

!

!

網站設計的過程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.

Adobe kulerSiteinspire Page ruler

Page Ruler

整理： !

找版型： html5up 找靈感： siteinspire selected webdesign !

網站佈局：Understanding the Split Layout in Web Design !

sketch template 下載：Sneakpeekit 參考各⼤大網站的排版 ：web without words !

找顏⾊色：Adobe kuler !

網⾴頁尺標⼯工具：Page ruler

資源分享

如何培養美感︖？03.

Thank u all !Abby Chiu email : abbychiu1002@gmail.com