Lorem Picsum 線上測試圖產生器,快速插入特定長度、寬度 CC0 圖片

Lorem Picsum 線上測試圖產生器,快速插入特定長度、寬度 CC0 圖片

在開發網頁或設計版型可能會需要放入圖片進行測試,除非你原本就有自行準備測試圖片,否則就需要使用佔位圖片(Placeholder),簡單來說,佔位圖就是依照使用者所需的長度寬度快速產生圖片,以填充特定的圖片空位,好處是不用手動裁切圖片,大多數的佔位圖片產生器都是透過圖片網址來指定要顯示的大小,有些還能加上特效、選擇不同類型的範例圖片,我覺得可以在圖片中顯示長寬尺寸對於要辨識來說也很有用。

Fluenticons 微軟 4000 個開放原始碼免費圖示下載,線上預覽風格配色

Fluenticons 微軟 4000 個開放原始碼免費圖示下載,線上預覽風格配色

微軟(Microsoft)釋出超過 4000 個開放原始碼免費圖示Fluent UI System Icons」,一系列大家都感到熟悉、友好和現代化的圖案設計,不過在 GitHub 取用這些圖案、瀏覽上並不是很方便,因此有國外開發者另外開發了一個「Fluenticons」網站做為 Microsofts fluent icons 檢視器,透過這個工具就能在線上預覽、搜尋特定的圖示圖案,也能切換淺色或深色背景,讓下載圖示變得更簡單。

Mesh 漸層色背景產生器,加入顏色以拖曳方式扭曲漸變效果

Mesh 漸層色背景產生器,加入顏色以拖曳方式扭曲漸變效果

如果你喜歡 iPhone、Mac 漸層顏色背景圖片,其實也可以自己動手做,之前介紹過不少漸層色的背景產生器,像是「Gradient Backgrounds」就是一站式的漸層背景產生工具整合各種服務(有點像是 The Stocks 2 整合免費圖庫、影片、圖示和字型的感覺),或是 WebGradients 收錄超過 180 種漸層色背景免費下載,產生 CSS 3 語法在取用顏色更方便。 其他還有像是 BlendColorSparkCoolHue 都是類似的圖案產生器服務。

Lineicons 超過 5000 個線條圖示,適合設計師或開發使用者介面

Lineicons 超過 5000 個線條圖示,適合設計師或開發使用者介面

Lineicons 是一套收錄超過 5000 種圖案的圖示集,主要設計風格為手工製作線條圖示,適合使用於各種現代化使用者介面,例如網頁、行動裝置應用程式、桌面軟體等等,對於設計師或開發專案來說非常有用。其實類似的圖示資源還真不少,例如之前介紹過 UiconsUnicons Icon LibraryiconhubHeroiconsIcoMoon App,這些圖示多半都已經完整覆蓋常見常用圖案,差異在於細節或是授權方式,如果需要尋找開發用的素材可找找免費圖示分類。

DOTOWN 前任天堂設計師開發免費點陣圖網站超過 600 種素材免費下載

DOTOWN

之前介紹過「俐方體11號:免費、開放原始碼 11×11 中文點陣體字型下載」,一款帶有復古感覺的點陣免費字體,看起來非常有時代感,彷彿回到二十年前的 DOS 老遊戲風格,一格一格的營造出早期解析度不高的效果。如果你喜歡這種點陣圖設計,現在還有專門提供類似素材的網站(不過當然以日文為主),無論要使用於海報、投影片或是做為報告插圖,將它套用於實體商品都非常適合。

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

如果想知道某個網站配色方式,除了打開開發人員工具或是檢視原始碼,也有第三方服務可以使用,即使無法完整複製別人的配色,也能快速得知網站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務或許可以滿足,這項服務會擷取特定網頁使用的顏色,讓顏色相關資訊更一目瞭然。

SEO Checker 專業 SEO 報告工具,找出各種網頁問題並提供解決方案

SEO Checker 專業 SEO 報告工具,找出各種網頁問題並提供解決方案

如果說到要怎麼改善搜尋引擎最佳化(SEO)成效,我通常會說先把程式碼寫對寫正確,然後檢查一下網站速度使用者體驗,尤其是 Google 已經將網站使用體驗核心指標(Core Web Vitals)列為搜尋排序的因素,如何最佳化三項指標:LCP、FID 和 CLS 就是目前最重要的工作,另一方面,必須要仔細閱讀「Google 搜尋引擎最佳化入門指南」有助於建立起正確的觀念。以往各項網站最佳化操作依然可行,也是網站管理者必須要注意而且時時刻刻檢視的項目,透過一些工具進行分析有助於找出並且釐清應該進行的相關操作。

Uicons 超過 4000 個免費圖示下載!適合網頁、應用程式開發者使用

Uicons

很多年前介紹過「FlatIcon 超過 12000 個平面化圖示設計免費下載」設計資源,時至今日它已經是個非常龐大的素材庫,這家公司旗下還有包含 FreepikSlidesgo 等知名的網站,前陣子剛推薦過 Icons Pattern 以 Flaticon 提供的圖示製作無接縫背景圖片工具,對於要產生重複拼接效果的素材很有用,接下來還要再推薦一個也是 Flaticon 旗下的免費工具,如果需要開發網站、軟體或應用程式可以研究一下。

How Big Is My Browser? 打開網頁顯示目前的瀏覽器可見範圍尺寸

How Big Is My Browser? 打開網頁顯示目前的瀏覽器可見範圍尺寸

因為工作需求我時常需要對螢幕進行擷圖,擷取瀏覽器、應用程式視窗畫面,透過 SizeUp 工具可快速調整視窗大小(SizeUp 不是免費軟體,Spectacle 是功能類似的免費替代方案),不過很難得知實際瀏覽器顯示解析度,如果是開發者或設計師想調整頁面,可能需要設定一個確切的顯示範圍進行更精準測試,接下來要介紹的小工具可以滿足類似需求。

Placy 線上佔位圖產生器,製作特定尺寸範例圖三種格式下載

Placy 線上佔位圖產生器,製作特定尺寸範例圖三種格式下載

在開發網站、測試網頁模版設計時經常會需要用到佔位圖(Placeholder),這是什麼呢?簡單來說就是範例圖片,用於填充一些可能要預留、之後顯示圖片的位置,既然是佔位圖片就要符合幾個要件,像是快速設定要產生特定尺寸大小、可以快速取用(甚至不用下載圖片、直接給使用者圖片鏈結),或是在圖片上方會清楚標示出這張佔位圖的尺寸,對於開發來說就會更方便更省時間。