網頁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 網站連結:http://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 演算法更新,使用者搜尋後將出現多樣性的網站內容

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

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

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top