標籤: 網頁素材

Dummy Image 假圖產生器,以網址快速載入各種尺寸顏色圖片

在設計網頁或是配置版面時經常會需要預先保留圖片位置,讓開發或示範時使畫面更接近最終樣貌,如果手邊的圖片還沒處理,我們可以透過佔位圖片(Placeholder)呈現出特定大小的圖片範圍。簡單來說,佔位圖片產生器利用網址直接調整、產生特定尺寸範例圖,省去必須自行裁切圖片的麻煩,因為是以網址形式載入圖片,即使沒有下載圖片依然能在網頁上顯示,我曾介紹過的 Unsplash It、Placekitten、Placemat 和 PlaceKeanu 都是類似應用。

Read More

iconmonstr 超過 4000 個免費圖示 SVG、EPS、PSD 和 PNG 格式下載

如果你在製作專案或開發網站、應用程式需要用到圖示,網路上有非常多免費圖示可供下載選擇,通常只需要找到合適的設計風格,稍微研究一下授權方式就能使用,不需要自己重新開發一套圖示,特別是一些線條較為簡單、精簡的圖案設計很適合使用在各種情境,例如修改自 Font Awesome 的 Line Awesome、具完整自訂性的 Ikonate、手工打造的高品質圖示集 Zwicon 和 Feather Icons、Octicons 等等。

Read More

Fluent Icons 免費下載 965 個漂亮專業的流暢設計風格圖示

在一些大公司推動的產品開發都會有「設計語言」(Design Language),簡單來說就是將設計的表達方式、偏好或風格系統化,寫成明確規範,讓設計師和開發人員間能夠溝通運用,另一方面也可重複使用設計元件,避免重複開發,將時間投入在真正重要的事物本質上。更重要的是讓產品在不同平台的設計風格維持一致性,以提升產品的識別度、強化品牌形象。

Read More

Taiwan Icon Font 屬於台灣的免費圖示,收錄台北101、珍珠奶茶等圖案

愛台灣可以有很多表現方式,例如拍照上傳社群網站讓世界看到台灣的美,走訪各鄉鎮看看台灣大街小巷,雖然大家都很熱衷出國自助旅遊,但其實台灣也有不少很美麗、很有特色的地方,可惜假日出去總是人擠人,不在台灣還是會想念台灣美食。對於亞洲鄰近國家觀光客來說,他們也非常喜歡台灣,不少日本人很愛到台灣旅遊,都能拍出讓我覺得很不像台灣的相片。

Read More

Background Image Generator 免費網頁背景產生器,可製作各種材質圖片

現在比較少網站會用到背景圖,但有時候為了要讓背景不要太過單調,或是有些變化又不影響閱讀,會選擇顏色較淺的紋理材質素材,例如 Hero Patterns 可產生平鋪式背景 SVG 圖,或是 Bg-Patterns、Paper-co 也有不少紋理背景可以免費下載,當然這些工具都提供基本的設定選項,像是調整大小、密集程度或圖片格式,就能透過小張圖片拼接成背景,對於速度較慢的行動網路來說也不會因此而延遲網站載入速度。

Read More

Colorinspire 推薦絕佳色彩組合,下個專案設計拿來試試吧!

免費資源網路社群推薦過不少配色工具,但如果不是色彩控或從事相關工作,可能還是很難從顏色中挑選出合適的組合,例如要為下一個專案計畫、概念或想法設計新的色彩組合,從顏色裡可能毫無頭緒,不確定兩三種顏色搭配是不是相得益彰,這可能會影響整體視覺感受,不如直接給出色彩預覽會更易於參考。如果你經常糾結在沒有好的配色組合,接下來要介紹的服務或許會對你有幫助。

Read More

Bg-Patterns 日本免費網頁背景素材,提供常見格式及向量圖下載

如果要找尋一些很細膩、有質感的網頁素材,日本網站是個很好的去處,像是之前介紹過的 FLAT ICON DESIGN 收錄許多扁平化設計圖示,還有 FREE LINE DESIGN 提供各種分隔線素材,相片的話可以找找東京デート、Model.foto、photoAC、BIZUTART 和 PAKUTASO 等等,應該都會有不少收穫。有些網站其實很適合使用這一類素材,放上後的裝飾效果更能提升頁面整體質感。

Read More

Line Awesome 超過 4000 個免費線稿圖示,修改自知名 Font Awesome

如果說到最知名的免費圖示字型(Icons Font),我想大家一定聽過 Font Awesome,這套圖示最初發佈於 2012 年,現今則由 1,544 個圖案組成,主要分為免費、開放原始碼和付費 Pro 圖示兩大類型,在使用 Font Scripts 網站中佔有 20% 市佔率,可以想見我們看到的很多圖案可能都是來自它。若要使用這套圖示,除了直接從官方網站或 GitHub 下載整套圖示集,亦可透過開放式內容傳遞網路提供的鏈結載入相關圖案。

Read More

Get Waves 線上產生 svg 格式波浪圖,可自訂類型顏色每次都不一樣

偶爾會看到帶有波浪形狀的網頁背景設計,通常會配合平面化設計風格一起使用,會讓整體看起來更活潑,但倒是從沒想過這個效果是怎麼做的,沒想到現在透過 .svg 向量圖程式碼就可直接帶入,讓整個設計流程加速不少。如果你平常工作和網頁設計有關,可能會用到類似上面圖片顯示的「波浪圖」效果,本文要介紹的產生器會很有用,趕緊把它收錄到書籤以備不時之需。

Read More

Eva Colors 深度學習的配色工具,找出可搭配主品牌使用的顏色

免費資源網路社群介紹過不少配色工具,但大部分都是提供使用者顏色代碼,或是幫你找出幾個相關色碼,在毫無頭緒的情況下或許派得上用場,卻很難在現有的配色下做更多運用,若不是把整體配色換掉,單獨只有加入顏色可能會略顯突兀,於是有開發團隊想到在使用者選擇色碼後就產生一些相關功能會用到的顏色,也算另類的色彩工具。

Read More

CSSFX 最美的 CSS 動態效果一鍵複製,提升使用者操作體驗

前陣子介紹過「CSSeffectsSnippets 收錄 CSS 動態效果,線上預覽一鍵複製程式碼」這個很有趣的網站,事實上現今 CSS 樣式表可以做的事越來越多,甚至透過幾段原始碼達到動態效果,看起來不僅互動性高,還能提升使用者體驗,完全不用額外載入其他的 JavaScript 程式庫,只不過這些原始碼不一定每個人都會寫,利用 CSSeffectsSnippets 網站直接線上預覽,找到需要的動態效果後就會給出相關 CSS 原始碼(和早期在學習做網頁很像)。

Read More
Loading