今天分類推薦的這些基礎工具和網站中，涵蓋了素材、色彩、字型、圖示、主題、原型設計等多種類別，足以組成一個網頁設計師的日常用工具合集了，非常值得網頁設計從業者們收入囊中。
三、字型圖示類

1 、 Fontea

網站地址：https://fontea.madebysource.com/

Fontea 可以幫您在 Photoshop 中直接呼叫涵蓋 700 多款在字型的 Google Fonts 。這款外掛 zui 大的優勢是您再也不用開啟瀏覽器找字型，而是直接在程式內呼叫了。
2 、 Perfect Icons

網站地址： http://perfecticons.com/

PerfectIcons 是一款生成社交相關圖示的工具。
3 、 Font Awesome

網站地址： https://fortawesome.github.io/Font-Awesome/

我們曾經推薦過 Font Awesome 這款向量圖示字型，您可以在 CSS 中直接呼叫，極為省心。
4 、 Boxy SVG

如果您此刻電腦上沒有安裝 AI 和 Sketch，或者是壓根不想開啟它們，那麼您可以使用向量圖形編輯工具 Boxy SVG 來編輯圖形。 Boxy SVG 是一款跨平臺的向量圖形編輯工具，只要您有瀏覽器就可以執行了，不需要安裝，還可以藉助網路匯入 Google Fonts 字型，各種圖形變幻、路徑編輯也都手到擒來，是個相當順手的替代工具。

四、主題類

1 、 Frontify

網站地址：https://frontify.com/

Frontify 可以讓您在 5 分鐘內建立一套漂亮而完備的風格指南！這個線上工具有趣而簡單，讓您維護品牌風格和樣式快速而方便。由於 Frontify 優秀的多使用者體驗設計，您可以很快上手，即使您有專業的需求，Frontify 的說明檔案也可以引導您實現一些更細緻更專業的東西。
2 、 Shopify Timber

網站地址：http://shopify.github.io/Timber/

ShopifyTimber 是一款前端框架，用於快速便捷地構建 Shopify 主題。其實從廣泛意義上來說這是一款可以廣泛應用的主題製作工具，並不全限制於在 Shopify 中運 用。不論是經驗豐富的設計師和前端還是新手都可以靈活運用，其中包含了模板、標記、模組和 CSS 框架，根據您的需求呼叫就好了。
3 、 Be Theme

網站地址：http://themes.muffingroup.com/be/splash/

Be Theme 系列主題，這個團隊提供了超過 200 個預搭建網站，超過 40 項核心功能，覆蓋的網站型別非常的全面。如果您需要特定功能的 WordPress 主題，就去挑一個吧。
4 、 X Theme

網站地址：https://theme.co/x/

如果您更傾向於功能完備可以自行定製的主題的話，那麼這個幾乎在 ThemeForest 平臺上近乎登頂的 X Theme 可能就是您的菜。 X Theme 嚴格按照目前 zui 高的標準來開發，基礎紮實，設計創新，功能也足夠前沿。 zui 重要的是，圍繞著 X Theme 有一個完整的多使用者社群，您可以得到 zui 全面的幫助。
5 、 Shopkeeper

網站地址：https://themeforest.net

Shopkeeper 是 ThemeForest 平臺上的另外一個熱賣的電商類主題。這個主題為您提供了足夠優秀的多使用者體驗，並且沿著 WooCommerce 的思路來進行整體的設計，它能讓多使用者近乎無障礙的使用，並且內建了漂亮炫酷的主題。
6 、 Xstore

XStore 是一款迷人而小巧的主題，簡單看看他們官網上提供的演示模板就能體會到這一點。主題中所使用的特效被廣泛使用，但是在這裡用的恰到好處，不顯累贅。

五、原型設計類

1 、 Proto.io

網站地址：https://proto.io/

Proto.io 是一款強大的原型設計工具，讓您可以在幾分鐘內建立功能豐富功能完備的互動原型，無需編寫程式碼。同時它還是一款協同工具，可以讓團隊成員、客戶和利益相關者都參與到專案當中來，在設計過程中實時分享設計原型。
2 、 Power Mockup

如果您更習慣使用 PowerPoint，那麼您應該會喜歡 PowerMockup 這個工具。作為一個 PowerPoint 的庫，您可以使用您所熟知的 PPT 來快速搭建一個桌面端或者移動端介面的原型，簡單的託拽就可以搞定一切，有了它，展示起來也更加便捷。如果您願意新增自己定製的形狀和控制元件，您還可以同其他的 PowerMockup 多使用者進行分享哦。
3 、 Grid.Guide

網站地址：https://css-tricks.com/snippets/css/complete-guide-grid/

Big Bite 的員工發現計算柵格的寬度是一件非常惱人的事情，尤其是在巢狀結構下。正是在這種需求的驅動下，他們發明了這款 Grid.Guide 工具。這款工具會根據 zui 大寬度和列數來幫您計算可能的排列組合，生成對應的 PNG 檔案，讓您可以直接託拽到相應的工具中使用。更重要的是，Grid.Guide 是完全免費的！
4 、 XPRS

XPRS 也是一款網站搭建工具，它會讓您的網站搭建像樂高一樣簡單好玩兒。 XPRS 讓您告別複雜、混亂、昂貴的開發過程，優秀可靠的設計和可靠的託管服務，加上簡單易用的整合編輯環境，還有什麼樣的 Web 專案搞不定的呢？