網頁UI資源分享(一)- Simple Icons 與 Brand Colors SVG 檔案及色碼查詢

網頁UI資源分享 內容綱要:

1.Simple Icons 網站介紹與使用方式

2.Brand Colors 網站介紹與使用方式

相信各位網頁設計師們在設計網頁時,難免會需要用到社群媒體圖示、知名品牌的 Logo 或是要尋找該品牌的色碼。鵠學苑來介紹兩個好用的設計資源網站,能快速地獲得品牌 Logo .SVG 檔案及標準色碼,讓大家不會再因為從 Google 抓取的 .png 圖檔解析度不夠,或是製作連結按鈕時找不到品牌主色色碼而傷腦筋。

Simple Icons 網站連結:https://simpleicons.org/

Brand Colors 網站連結:https://brandcolors.net/

• Simple Icons 網站介紹

第一步:一進到 Simple Icons 的網站中,可以看見收錄了許多知名又常見的品牌 LOGO , Simple Icons 開放 .SVG 檔案下載,讓設計師們省下不少繪製時間,同時也建議了該品牌的主要用色,讓設計師們面對五顏六色的 LOGO 時不用煩惱該使用哪種顏色才是正確的。

網頁 GUI 資源分享

第二步:雖然一進到網站中你可能會被 Simple Icons 的海量 Logo 嚇到,但是它提供了快速篩選及搜尋的功能,篩選功能能依照品牌名稱 A 到 Z 排列,或是由色彩依序呈現,左上角也有搜尋的功能,可以快速的找到想要的 LOGO 圖示。

網頁 GUI 資源分享

網頁 GUI 資源分享

網頁 GUI 資源分享

第三步:Simple Icons 下載方式也非常的簡單,只要點選該 LOGO ,就會跳出下載視窗了,是不是非常方便呢!?

網頁 GUI 資源分享

• Brand Colors 網站介紹

第一步:不同於 Simple Icons , Brand Colors 提供許多知名品牌的主要標準色,雖然該網站採條列示呈現,也沒有篩選功能,但是使用者還是可以透過左上角的搜尋查找。

網頁 GUI 資源分享

第二步:Brand Colors 獲取品牌 LOGO 標準色的方式也非常簡單,只要點選該品牌的顏色,就會自動複製了。

網頁 GUI 資源分享

第三步:若是想要直接看見顏色的色碼, Brand Colors 也提供不同的顏色瀏覽方式,只要在該品牌的空白處點選,就能自動切換顯示模式,滑鼠滑到該色上面就會顯示色碼。同時也會顯示品牌色彩更新日期,方便大家使用。

網頁 GUI 資源分享

 

結語:

介紹了兩種獲得常見品牌標準色與 LOGO .SVG 檔下載的網站,希望幫助設計師們能夠節省更多查找時間,畢竟設計的一項重要成本就是時間了。今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

架站資源 相關教學文章:

Pinterest 社群介紹 – 網站樣式設計作品資源分享及操作應用方法

印刷色碼轉換 – 利用 CMYK 色碼找出 Pantone 彩通接近色

網頁字體工具 – 識字體網站介紹,線上以圖找出網頁使用字型

Imgbot 免費圖片工具 – 線上調整圖片大小、壓縮、裁切、加入浮水印

ColorZilla 色碼工具教學,Chrome 擴充程式抓取網頁特定顏色代碼

Freepik 免費網頁素材 – 分享適合平面設計運用的免費圖形資源網站

網頁素材分享 – 可商用免費下載 icon 圖示,IconStore 網站介紹

網站架設知識推薦閱讀:

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

GA 新手實作入門班 – 網站分析實體課程重點內容分享

Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Scroll to Top