素材模版

提供網頁設計或與設計相關的免費資源,包括免費圖示、網頁模版、音樂音效等素材。

Google 釋出數百個 Material Design 圖示,可免費下載、使用

Google 釋出數百個 Material Design 圖示,可免費下載、使用

Google 在今年的 Google I/O 大會上發表 Material Design,做為未來 Android 與 Google 服務的設計風格,Google 也發佈了一系列可愛、設計簡潔的圖示集,讓使用者用於行動應用程式開發,或是任何想使用的地方,更棒的是它們完全免費!

閱讀全文 »

iconmelon 為網頁設計而生的免費 svg 圖示資料庫

iconmelon 為網頁設計師而生的免費 svg 圖示資料庫

iconmelon 是一個相當好用的 svg 圖示資料庫,svg 圖示是比較新的 HTML5 技術,透過簡單的語法來載入向量圖案,利用 CSS3 來加入樣式,也具備檔案原有的濾鏡效果,優點是在跨瀏覽器時可以得到一致的效果,而且檔案較小,不過僅支援較新的瀏覽器。如果你開發網頁時也需要用到圖示,不妨來 iconmelon 找找,這裡有大量的免費圖示可以免費下載使用。

閱讀全文 »

Stylify Me 快速獲取網站配色、字型等風格資訊

Stylify Me 快速取得網站配色、字型等風格資訊

設計網頁除了參考現有網站的排版、架構外,更需要的就是觀摩別人是怎麼配色、選擇字型,好的設計不但能讓整體網頁質感加分,還有助於讓訪客更容易了解網站動線,而不會在瀏覽時迷路。Stylify Me 是一個讓你快速獲取某個網站配色、字型設定的線上工具,只要輸入網址,即可分析出網頁使用的所有顏色配置,包括背景顏色、文字顏色、字型、字體大小等資訊。

閱讀全文 »

Placekitten 產生特定大小的小貓範例圖片,製作網頁、平面設計師適用!

Placekitten 產生特定大小的小貓範例圖片,製作網頁、平面設計師適用!

對於製作網頁或平面設計師來說,當主要的圖片尚未放入時,仍需要先使用範例圖片來填充某些區塊,這在英文稱為 Placeholder,意思就是佔用某個範圍的意思,不過若要自行製作特定大小的圖片也太費時間,先前我介紹過可以透過修改網址,產生特定大小範例圖片的服務,例如 Fake Images Please 或是 Placehold.it,都可以利用一行鏈結來產生圖片,如果你覺得這些服務產生的圖片太過呆板,可以使用本文要介紹的 Placekitten,它能依照你的需要,產生特定尺寸的小貓圖。

閱讀全文 »

0to255 實用網頁選色器,快速查顏色深淺、色碼 HEX 值

0to255 實用網頁選色器,快速查顏色深淺、色碼 HEX 值

影響一個設計的三大要素,分別為排版、佈局以及色彩,其中色彩是最難、也最需要費心來調整的項目,顏色不但會影響到整體的感覺,適當的配色也能為網站或設計增添質感,讓它看起來更與眾不同。對於非專業的設計者來說,可能經常為色碼所苦,畢竟要從一堆色碼中挑選出合適的顏色還是有些難度,我先前曾經介紹過不少網站配色工具,例如 Adobe Kuler 能提供你許多配色組合,讓你從不同的顏色組合中挑選出正確的配色。

閱讀全文 »

46 個免費圖庫網站總彙整

本文參考資料為 53+ Free Image Sources For Your Blog and Social Media Posts, 原作者為 Courtney Seiter。

Buffer 部落格已思考了大多數關於視覺內容的議題。我們曾分享過圖片對於 Twitter 內容的重要性,我們也探索過可以幫助任何人建立視覺內容的工具

但還有一個問題是我們經常被問到的:在那裡可以找到免費、高品質的圖片,能用於部落格文章或社群網站呢?

閱讀全文 »