做出上面的視窗陰影效果需要 Mac 嗎？不用，需要 Photoshop 或 Sketch 等繪圖軟體嗎？也不用，只要透過瀏覽器、無須下載或安裝任何軟體就能達成！記得之前介紹過 Browser Frame 可以為螢幕擷圖加入瀏覽器外框，接下來要推薦的工具跟它有點類似，或者說更像是 Standardized Screenshot，只不過操作上更簡單，也不僅限於網頁擷圖。
網頁設計
Google 行動網站速度測試工具，比較最多 10 網址在不同國家開啟時間
Google 這幾年不斷提倡網站速度的重要性，不僅有助於留住更多訪客、提升轉換率，就連搜尋引擎排名也會將網頁載入速度作為排序指標之一，如果你是使用 WordPress 架站，讓網站支援 AMP（Accelerated Mobile Pages）技術無疑可發揮如閃電般最佳效能，趕緊捲起袖子動手自己做吧！
Geomicons 免費 SVG 平面圖示集下載，為網頁設計開放原始碼
Site Palette 從網站獲取配色，快速產生完整調色盤資訊（Chrome 擴充功能）
最近介紹過一些令人印象深刻的色彩工具，多半都是 Google Chrome 外掛，例如我個人很喜愛的「CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表」，能以更簡單、有組織性的方式呈現網站樣式和各元件，對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多，包括一行程式碼將瀏覽器變成網頁編輯器，直接從網頁中修改內容，在開發網站測試時會省時省事很多。
Koa11y 檢測網頁有無符合網頁親和力 A11y 各項指標和最佳化建議
相信網頁設計師一定對 A11y（Accessibility，網頁親和力）不陌生，這個功能主要是透過軟硬體整合，讓殘疾或受過嚴重損傷的使用者可以正常瀏覽並操作你的網頁，雖然看起來有些困難，其實只要在開發時遵循網頁親和力的設計指南即可達成。不少佈景主題都已經內建支援 A11y ，如果你想自己手動研究，也有不少文件可參考，當然最重要的是知道自己網站有沒有符合網頁親和力規範。
CSSPeeper 為設計師量身打造，更聰明視覺化檢視網站 CSS 樣式表（Chrome 擴充功能）
對於網頁設計或開發者來說，想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手，我在發現不錯的網站都會去看一下原始碼或樣式表，雖然 Google Chrome 本身就有強大的開發人員工具可以使用，但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface Ninja、Type Sample 這類工具快速找到我要的資訊。
Paper-co 免費下載紙張紋理材質背景，高畫質圖片可做商業用途
網路上有各種素材資源可免費下載使用，如果花點時間搜尋通常能有收穫，當然在亞洲或美國網站找到的類型不太一樣，我個人比較喜歡日系素材，更為精緻細膩且符合我的需求，例如：Free line design 提供各種分隔線素材；Flat icon design 則有扁平化設計的圖示集免費下載，還有像是 Stockio 收錄各類型素材的整合式網站。
JotForm Cards 免費互動式線上表單，建立更友善的提問問答方式
當前要建立線上表單（Online Form）讓其他人填答、回收資料的服務很多，例如最常看到的 Google Drive 雲端硬碟就有「Google 表單」功能，此外，還有我個人很推薦的 Typeform 對於行動裝置和互動性有很好的表現。之前曾經常試過許多表單產生器，包括來自台灣的 SurveyCake 雲端問卷、Zoho Forms 都相當值得一試，功能上並不會差太多，主要還是以使用者需求為主。