如果平常的工作和設計有關,對於色彩應該也會有一定的敏感度,若對顏色沒那麼熟悉,其實網路上有不少配色工具可以使用,通常會以不同方式產生調色盤,讓使用者在各種顏色裡快速選擇取用色碼,有助於降低色彩選擇的難度和時間。之前推薦過一些以特定主題收錄的色碼表,像是 NIPPON COLORS 就有代表日本傳統的 250 種顏色,BrandColors 收錄世界知名品牌使用的顏色資訊。
CSS
CSS Background Patterns 免費背景圖產生器,可建立純 CSS 背景素材
想想後來的網頁比較少有背景圖需求,多半都是以單色為主,如果覺得略顯單調,也能使用紋理材質或漸層色做為背景,例如 Paper-co 就有許多日系的紙張紋理材質可用做背景,不僅看起來可以提升質感,也不會影響閱讀造成負擔,另一個之前推薦過的 Subtle Patterns 也有超過 500 種紋理素材可供下載;若喜歡重複背景圖 Hero Patterns 可以在不下載任何檔案情況下產生好看的平鋪式背景圖,或是使用 ColorSpark、Gradient Backgrounds 製作漸層色背景,需要背景圖的朋友可以試試看這些服務。
Basicons 用於產品設計和介面開發免費圖示集,186 個基本線條圖案下載
Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果(Chrome 擴充功能)
對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google Fonts 和 Adobe Fonts(以前叫作 Typekit)就有提供思源黑體和思源宋體等中文網頁字型,只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用,讓網頁的中文部分更易於閱讀,設計看起來也更有質感。
Taiwan Icon Font 屬於台灣的免費圖示,收錄台北101、珍珠奶茶等圖案
Hexometer Website Analyzer 分析網站使用那些第三方服務或工具(Chrome、Firefox)
通常一個網站背後是由許多的技術和服務組成,舉例來說,使用 WordPress 做為內容管理系統,再以 Cloudflare 加速並保護網站、對圖片進行分流,透過 Google Analytics 分析流量等資訊,搭配 Google AdSense 和 Google DFP 管理廣告和營利等等,雖然可以直接從原始碼得知網站可能使用那些技術,但也有更快速的查詢工具,像是 SimilarTech 和 WhatRuns 都能立即顯示某個網站使用的第三方服務或程式庫。
Line Awesome 超過 4000 個免費線稿圖示,修改自知名 Font Awesome
如果說到最知名的免費圖示字型(Icons Font),我想大家一定聽過 Font Awesome,這套圖示最初發佈於 2012 年,現今則由 1,544 個圖案組成,主要分為免費、開放原始碼和付費 Pro 圖示兩大類型,在使用 Font Scripts 網站中佔有 20% 市佔率,可以想見我們看到的很多圖案可能都是來自它。若要使用這套圖示,除了直接從官方網站或 GitHub 下載整套圖示集,亦可透過開放式內容傳遞網路提供的鏈結載入相關圖案。
CSSgram 以 CSS 和 Sass 編寫而成 Instagram 濾鏡效果
Freebies.ByPeople 各種免費素材集散地,設計師開發人員必須收藏
免費資源網路社群本身已經是一個收錄超過六千篇文章的免費資源網站,因此我就比較少介紹同類型的服務,不過網路上確實有不少類似網站,例如 Evernote Design 設計師必備懶人包就在單一網站上整合各種設計相關素材資源;或是 The Stocks 精選免費圖庫,一站收錄更方便搜尋等等,這些集合式免費資源都非常值得加入書籤以備不時之需。
Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現

macOS 10.14 Mojave 加入全新「深色模式」功能,iOS 13 預告也會加入此模式,如果你曾經將電腦切換為深色,應該會發現有些應用程式可完美支援,也會一併轉為暗色介面,但在不支援深色模式的應用程式表現出來的顏色會更刺眼,嚴重影響到使用體驗。如果你是應用程式開發者,可能後續都得再加上對於深色模式的支援,讓顏色更接近暗色,亦可在使用者選擇不同模式時自動調整為最合適的配色效果。