有時候製作報告、產品說明或投影片簡報時會用到插圖,你都去那些地方下載呢?雖然網路上有不少免費圖庫,但大多以攝影照片為主,要尋找插圖得找對網站,例如我之前介紹過的 unDraw 就收錄不少可商業用途的扁平化圖示下載,還提供向量圖格式,更棒的是可以線上直接調整主要顏色;另一網站 Illustration Gallery 和前者有點像,也算是 unDraw 替代方案,提供可使用於部落格或社群網站的各式插圖素材。
介面開發
Checklist Design 網頁開發者必備參考手冊,助於學習更好的設計方式
One Click Test 測試介面設計可否讓使用者快速找到需要的功能或資訊
Ikonate 具完整自訂性免費圖示下載,SVG 向量格式可設定邊框樣式
雖然網路上有無數免費圖示可以下載使用,卻很少有「量身打造」的選擇,只能盡量找出最符合自己需求的圖示圖案,有些圖示集仍有完整自訂選項,例如 Omg-img 用一段程式碼快速插入圖示,可自訂顏色、大小或樣式,大部分的圖示則會提供一些預設大小讓使用者選擇,例如 Iconshock 收錄超過 200 萬個免費圖示下載,或是 ICOOON MONO 圖示內建七種不同的尺寸大小。
Mockdown 線上將軟體介面、網頁或應用程式擷圖轉為 Mockup 視覺稿

如果從事網頁設計相關工作應該很常聽到一個名詞「Mockup」,中文稱為模型或原型,若翻譯成「視覺稿」可能比較容易理解,Mockup 通常在「Wireframe」(線框圖)之後,為了讓整體畫面更貼近最終成果,會將一開始的草稿線條圖加入更多視覺元素,例如將排版、圖形和配色呈現出來,也就能夠得出最後設計稿,而在我向設計師朋友詢問後得知 Mockup 通常是透過 Photoshop、Sketch 或 Adobe XD 等軟體繪製。
Illustration Gallery 免費扁平化插圖圖庫,SVG、PNG 格式可商業用途
如果你需要一些插圖素材,接下來要介紹的免費資源你一定會喜歡!通常在免費圖庫可以找到不少相片,插畫相對來說就比較難尋覓,且很多都必須付費購買才可下載,又會依照用途區分不同的授權售價,買起來也會花不少錢(而且不一定符合需求),想起之前介紹過的「unDraw 可商用扁平化圖示免費下載!適合用於網站、應用程式或簡報設計」算得上是開發者和設計師的救星,這些素材都相當有質感,而且可直接線上調整顏色後下載非常方便。
Potlab Icons 動畫 SVG 圖示免費下載,只要程式碼就能動起來
YourKit.pw 快速產生瀏覽器相關資訊,開發除錯更容易找出問題點
對網站站長來說,在開發網站的過程中會考慮到各種可能的問題,有時候只能想辦法使用更多不同的環境進行測試,但百密必有一疏,難免遇到一些很神奇、難以理解的狀況,通常都會先詢問對方的操作環境,才能從這些資訊中找出問題癥結。如果想快速獲取使用者的瀏覽器相關資訊,可以透過之前介紹過的「My Browser 產生完整瀏覽器資訊頁面,協助解決技術問題」或「yourbrowser.is 顯示瀏覽器完整資訊,為客戶免費建立自定檢測頁面」這兩項免費服務達到目的,也更節省時間。