Wordpress新手架站工作坊_網站視覺設計概論.pdf

- 設計基本概念
- 網頁簡介
- 配色 Color
- 字型 Font
- 圖示 Icon

Transcript

1. Wordpress新手架站工作坊 FreeFolk Studio - Yi Ying Chen 網站視覺設計原則 &實作分享
2. https://goo.gl/aAijEz 小練習實作 請輸入網址，下載文件～
3. 誠品生活 視覺企劃 科集科技 FashionGuide 風尚數位科技 FreeFolk Studio 工作室 經歷 2014 2015 2017 2018
4. 設計師做什麼？ 跟創作一樣？
5. 『設計』最重要的目的是『解決問題』， 而非把事物變『美觀』而已。 美觀只是問題經過設計處理妥當之後， 的附加價值。 —— As A Product Designer 設計師的使命篇
6. Intro 前言 大家看到幾條路在圖片裡？ —— 司馬庫斯，網路照片
7. 觀察 就算有規劃設計兩條道路 (左邊、下方) 人們還是喜歡 ”抄近路” 去停車場。 —— 司馬庫斯，網路照片
8. 欲行之路 傳達一個訊息：『 拜託！請在這邊開一條路。』 它告訴我們，人真正的自然動作。 利用此捷徑，做為指引設計的一個開始。 —— 好設計不簡單 | 唐納．諾曼（Donald A. Norman）
9. 有興趣知道更多設計工作，以下推薦： - [書籍] 唐納．諾曼（Donald A. Norman）設計界大神，可以從情感設 計、好設計不簡單，開始看。 - [頻道] High Resolution ：訪問世界級設計師的Know How - [文章] 設計大舌頭 - [文章] As A Product Designer - [文章] Conversion Lab 基礎 進階
10. 開始實作之前，記得問自己 這網站要用來做什麼？ 這個網站想讓使用者看到什麼？重點是什麼？ 後面幾個網站比較一下，看得出來他們在表達什麼？
11. Nickelodeon 給大家八秒鐘，告訴我這網站是在做什麼？
12. Google 使用者都是來找東西，搜尋是最重要的功能。
13. Apple 最重要的是？最貴的那隻！
14. 設計時一定要有重點 如果每個都是重點 最後都變成盲點 分享探險活寶-阿寶與老皮的小故事
15. User使用者是誰? 我們希望誰來光臨網站？ #Dcard小故事
16. Dcard 有人問，為何Dcard團隊，強調針對女孩的設計體驗？
17. 概述 開始了解網站，現在已經有的欲行之路。 簡述網頁的專有名詞，都是之前的前人智慧。 學這三個單字，專業度激增！
18. 把網頁比喻成一個人 頭部：Header 身體：Body 腳底：Footer
19. 導覽列Navigation & 設計公理Axiom
20. 設計公理Axiom - 首頁按鈕 / Home / 左上角Logo / Hamburger Button / Menu - 搜尋Search - 登入&登出 - 註冊 提醒：以上不要藏起來，並放在大家認定的位置，以免使用者找不到抓狂。
21. 視覺動線
22. 有興趣知道網頁概念，以下推薦： - [書籍] 如何設計好網站：Dont Make Me Think - STEVE KRUG - [網站] Good UI 以下是進階 - [書籍] 了解「人」, 你才知道怎麼設計！- Susan Weinschenk：相關 心理學跟科學的研究 基礎 進階
23. 練習一下 請開啟Codepen
24. 配色 網頁設計上面非常重視，階層重要性 (Hierarchy)，有主副色的概念。 —— Fourdesire Blog
25. 比較一下 七彩霓虹燈
26. 比較一下 - 主色 - 副色 就連動態時都不眼花！
27. 淺談配色原則 - 主色 Primary - 副色/強調色 Seconadry —— Fourdesire Blog 文章出處
28. 顏色變化式 - 利用明暗來轉換 - 飽和度增加減少 - 以上需要繪圖軟體 這邊介紹一個網頁工具Color-hex - 輸入自己選的色碼：#399bb6 - 或是挑選自己喜歡的顏色 - 實作Wordpress即可挑選
29. 有興趣知道更多配色工具，以下推薦： - [工具] Color-hex：詳細的顏色配色資訊 - [工具] Colorpick-eyedropper：Chrome外掛可以檢查喜歡的顏色 - [應用] ColorHunt：配色發想、還有讓心情好的Chrome外掛 - [網站] Dribbble：全球設計師的facefook，借助設計師的靈感網站。 - [網站] Pinterest：瀏覽別人的作品。 基礎 進階
30. 練習一下 請開啟Codepen
31. 字型Font - 比較觀感 - 基本知識 - 三大派系 - 使用原則
32. CAR - 字體多到數不清 - 會不會是太久的網站
33. CNN - 網站多種字體 - 廣告多種字體 - 直式、橫式 當資訊量非常大的時候 字型就會成為一門關鍵
34. 彭博 - 字型2種 - 一樣是媒體資訊量大
35. 字型會隨著瀏覽器異動 Chome Safari IE.9以上 ?????? > >
36. 英文字型：三大派系 - Apple Safari - San Francisco, Lucida Grande , Helvetica, Arial , Verdana , Sans-serif - Google Chrome - Arial, Sans-serif , Roboto(暱稱蘿蔔頭) - 微軟 IE - Arial, Sans-serif , Microsoft JhengHei 建議Sans-serif 黑體(無襯線字）：最通用的自由球員，每台電腦都有。
37. 中文字型：三大派系 - Apple - 蘋果儷黑 , 蘋方字體 - Google - 思源黑體 , 思源宋體 (與Adobe合作開發) - 微軟 - 微軟正黑體 , 新細明體 建議以瀏覽器為導向，建議都用 Google Font 思源黑體NotoSans-unhinted
38. 如果不是預設字體？客人說她的網頁上要用娃娃體， 除了做成圖片，還有其他選擇嗎? 網路字型內嵌技術(Web Fonts，或是比較潮流的講法 :雲端字型) 我們的電腦 雲端字體庫 風險：使用者的漫長等待 部落格出處
39. 字型使用原則 - 1-2種搭配使用，其他要強調可以用粗細、顏色區別。 - 盡可能用預設字體。 - 依照使瀏覽器來選字型 - 預設字級：14px (避免過小的字級，別忘了還有手機版 ) 目的：提升使用者的閱讀度。
40. 有興趣知道更多字型，以下推薦： - [下載] Google Font：詳細的顏色配色資訊 - [下載] Adobe Typekit 以下是進階 - [文章] 部落格：網頁字體 - [文章] 20種盡量避免使用的英文字型，推薦字型 基礎 進階
41. 練習一下 請開啟Codepen
42. 圖示Icon - 正確的運用 - 工具推薦
43. 實例 - Icon + Label - 那現在有嗎？ - 請打開App
44. 因為我們都學會了 - 用戶 - 學習時間 - 過程
45. 原則 - 最好是以圖文並存為主 - 找辨識度高的使用，別人常用 - 5 second rule (註解) - 測試
46. 有興趣知道更多icon，以下推薦： - [示範] Flat Icon - [研究] Icon的易用性 基礎 進階
47. Flaticon 推薦工具 - PNG - Color
48. 練習一下 請開啟Codepen
49. FAQ 有問有答
50. Q: Landing Page是什麼？ - 使用者第一個看到 (著陸) 的頁面 - 不一定是首頁
51. Q: 如何讓的實作網站越來越好用 - 建議可以參考WP的外觀>佈景主題 - 找別人做的看看，購物車可以看看蝦皮、博客來 - 測試 - 使用者反饋
52. Thank you. - stereochen@gmail.com - http://cargocollective.com/yi_ying_chen