Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Wordpress新手架站工作坊_網站視覺設計概論.pdf
Search
stereochen
August 15, 2018
Design
0
180
Wordpress新手架站工作坊_網站視覺設計概論.pdf
- 設計基本概念
- 網頁簡介
- 配色 Color
- 字型 Font
- 圖示 Icon
stereochen
August 15, 2018
Tweet
Share
Other Decks in Design
See All in Design
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
520
TrollsTopia: Funtography- Part 1
kenijam
1
210
PRDがデザインプロセスを高速化した話
tooomo
1
320
Design Leadership in Challenging Times
morganepeng
3
300
Ride or Die Animatics
warwatkar
0
140
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
330
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
3D空間を扱うUI表現とユーザビリティ
akinen
0
450
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
630
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Statistics for Hackers
jakevdp
789
220k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Bash Introduction
62gerente
604
210k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Testing 201, or: Great Expectations
jmmastey
28
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
A Philosophy of Restraint
colly
197
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Into the Great Unknown - MozCon
thekraken
10
990
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Transcript
Wordpress新手架站工作坊 FreeFolk Studio - Yi Ying Chen 網站視覺設計原則 &實作分享
https://goo.gl/aAijEz 小練習實作 請輸入網址,下載文件~
誠品生活 視覺企劃 科集科技 FashionGuide 風尚數位科技 FreeFolk Studio 工作室 經歷 2014
2015 2017 2018
設計師做什麼? 跟創作一樣?
『設計』最重要的目的是『解決問題』, 而非把事物變『美觀』而已。 美觀只是問題經過設計處理妥當之後, 的附加價值。 —— As A Product Designer 設計師的使命篇
Intro 前言 大家看到幾條路在圖片裡? —— 司馬庫斯,網路照片
觀察 就算有規劃設計兩條道路 (左邊、下方) 人們還是喜歡 ”抄近路” 去停車場。 —— 司馬庫斯,網路照片
欲行之路 傳達一個訊息:『 拜託!請在這邊開一條路。』 它告訴我們,人真正的自然動作。 利用此捷徑,做為指引設計的一個開始。 —— 好設計不簡單 | 唐納.諾曼(Donald A.
Norman)
有興趣知道更多設計工作,以下推薦: - [書籍] 唐納.諾曼(Donald A. Norman)設計界大神,可以從情感設 計、好設計不簡單,開始看。 - [頻道] High
Resolution :訪問世界級設計師的Know How - [文章] 設計大舌頭 - [文章] As A Product Designer - [文章] Conversion Lab 基礎 進階
開始實作之前,記得問自己 這網站要用來做什麼? 這個網站想讓使用者看到什麼?重點是什麼? 後面幾個網站比較一下,看得出來他們在表達什麼?
Nickelodeon 給大家八秒鐘,告訴我這網站是在做什麼?
Google 使用者都是來找東西,搜尋是最重要的功能。
Apple 最重要的是?最貴的那隻!
設計時一定要有重點 如果每個都是重點 最後都變成盲點 分享探險活寶-阿寶與老皮的小故事
User使用者是誰? 我們希望誰來光臨網站? #Dcard小故事
Dcard 有人問,為何Dcard團隊,強調針對女孩的設計體驗?
概述 開始了解網站,現在已經有的欲行之路。 簡述網頁的專有名詞,都是之前的前人智慧。 學這三個單字,專業度激增!
把網頁比喻成一個人 頭部:Header 身體:Body 腳底:Footer
導覽列Navigation & 設計公理Axiom
設計公理Axiom - 首頁按鈕 / Home / 左上角Logo / Hamburger Button
/ Menu - 搜尋Search - 登入&登出 - 註冊 提醒:以上不要藏起來,並放在大家認定的位置,以免使用者找不到抓狂。
視覺動線
有興趣知道網頁概念,以下推薦: - [書籍] 如何設計好網站:Dont Make Me Think - STEVE KRUG
- [網站] Good UI 以下是進階 - [書籍] 了解「人」, 你才知道怎麼設計!- Susan Weinschenk:相關 心理學跟科學的研究 基礎 進階
練習一下 請開啟Codepen
配色 網頁設計上面非常重視,階層重要性 (Hierarchy),有主副色的概念。 —— Fourdesire Blog
比較一下 七彩霓虹燈
比較一下 - 主色 - 副色 就連動態時都不眼花!
淺談配色原則 - 主色 Primary - 副色/強調色 Seconadry —— Fourdesire Blog
文章出處
顏色變化式 - 利用明暗來轉換 - 飽和度增加減少 - 以上需要繪圖軟體 這邊介紹一個網頁工具Color-hex - 輸入自己選的色碼:#399bb6
- 或是挑選自己喜歡的顏色 - 實作Wordpress即可挑選
有興趣知道更多配色工具,以下推薦: - [工具] Color-hex:詳細的顏色配色資訊 - [工具] Colorpick-eyedropper:Chrome外掛可以檢查喜歡的顏色 - [應用] ColorHunt:配色發想、還有讓心情好的Chrome外掛
- [網站] Dribbble:全球設計師的facefook,借助設計師的靈感網站。 - [網站] Pinterest:瀏覽別人的作品。 基礎 進階
練習一下 請開啟Codepen
字型Font - 比較觀感 - 基本知識 - 三大派系 - 使用原則
CAR - 字體多到數不清 - 會不會是太久的網站
CNN - 網站多種字體 - 廣告多種字體 - 直式、橫式 當資訊量非常大的時候 字型就會成為一門關鍵
彭博 - 字型2種 - 一樣是媒體資訊量大
字型會隨著瀏覽器異動 Chome Safari IE.9以上 ?????? > >
英文字型:三大派系 - 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 黑體(無襯線字):最通用的自由球員,每台電腦都有。
中文字型:三大派系 - Apple - 蘋果儷黑 , 蘋方字體 - Google -
思源黑體 , 思源宋體 (與Adobe合作開發) - 微軟 - 微軟正黑體 , 新細明體 建議以瀏覽器為導向,建議都用 Google Font 思源黑體NotoSans-unhinted
如果不是預設字體?客人說她的網頁上要用娃娃體, 除了做成圖片,還有其他選擇嗎? 網路字型內嵌技術(Web Fonts,或是比較潮流的講法 :雲端字型) 我們的電腦 雲端字體庫 風險:使用者的漫長等待 部落格出處
字型使用原則 - 1-2種搭配使用,其他要強調可以用粗細、顏色區別。 - 盡可能用預設字體。 - 依照使瀏覽器來選字型 - 預設字級:14px (避免過小的字級,別忘了還有手機版
) 目的:提升使用者的閱讀度。
有興趣知道更多字型,以下推薦: - [下載] Google Font:詳細的顏色配色資訊 - [下載] Adobe Typekit 以下是進階
- [文章] 部落格:網頁字體 - [文章] 20種盡量避免使用的英文字型,推薦字型 基礎 進階
練習一下 請開啟Codepen
圖示Icon - 正確的運用 - 工具推薦
實例 - Icon + Label - 那現在有嗎? - 請打開App
因為我們都學會了 - 用戶 - 學習時間 - 過程
原則 - 最好是以圖文並存為主 - 找辨識度高的使用,別人常用 - 5 second rule (註解)
- 測試
有興趣知道更多icon,以下推薦: - [示範] Flat Icon - [研究] Icon的易用性 基礎 進階
Flaticon 推薦工具 - PNG - Color
練習一下 請開啟Codepen
FAQ 有問有答
Q: Landing Page是什麼? - 使用者第一個看到 (著陸) 的頁面 - 不一定是首頁
Q: 如何讓的實作網站越來越好用 - 建議可以參考WP的外觀>佈景主題 - 找別人做的看看,購物車可以看看蝦皮、博客來 - 測試 - 使用者反饋
Thank you. -
[email protected]
- http://cargocollective.com/yi_ying_chen