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

三、字體圖標類

1、Fontea

網(wǎng)站地址：https://fontea.madebysource.com/

Fontea 可以幫你在Photoshop中直接調(diào)用涵蓋700多款在字體的Google Fonts。這款插件zui大的優(yōu)勢是你再也不用打開瀏覽器找字體，而是直接在程序內(nèi)調(diào)用了。

2、Perfect Icons

網(wǎng)站地址： http://perfecticons.com/

PerfectIcons是一款生成社交相關(guān)圖標的工具。

3、Font Awesome

網(wǎng)站地址： https://fortawesome.github.io/Font-Awesome/

我們曾經(jīng)推薦過Font Awesome 這款矢量圖標字體，你可以在CSS中直接調(diào)用，極為省心。

4、Boxy SVG

如果你此刻電腦上沒有安裝AI和Sketch，或者是壓根不想打開它們，那么你可以使用矢量圖形編輯工具Boxy SVG來編輯圖形。Boxy SVG 是一款跨平臺的矢量圖形編輯工具，只要你有瀏覽器就可以運行了，不需要安裝，還可以借助網(wǎng)絡(luò)導入Google Fonts 字體，各種圖形變幻、路徑編輯也都手到擒來，是個相當順手的替代工具。

四、主題類

1、Frontify

網(wǎng)站地址：https://frontify.com/

Frontify 可以讓你在5分鐘內(nèi)創(chuàng)建一套漂亮而完備的風格指南！這個在線工具有趣而簡單，讓你維護品牌風格和樣式快速而方便。由于Frontify 優(yōu)秀的用戶體驗設(shè)計，你可以很快上手，即使你有專業(yè)的需求，F(xiàn)rontify的說明文檔也可以引導你實現(xiàn)一些更細致更專業(yè)的東西。

2、Shopify Timber

網(wǎng)站地址：http://shopify.github.io/Timber/

ShopifyTimber 是一款前端框架，用于快速便捷地構(gòu)建Shopify主題。其實從廣泛意義上來說這是一款可以廣泛應用的主題制作工具，并不全限制于在Shopify中運 用。不論是經(jīng)驗豐富的設(shè)計師和前端還是新手都可以靈活運用，其中包含了模板、標記、模塊和CSS框架，根據(jù)你的需求調(diào)用就好了。

3、Be Theme

網(wǎng)站地址：http://themes.muffingroup.com/be/splash/

Be Theme 系列主題，這個團隊提供了超過200個預搭建網(wǎng)站，超過40項核心功能，覆蓋的網(wǎng)站類型非常的全面。如果你需要特定功能的Wordpress主題，就去挑一個吧。

4、X Theme

網(wǎng)站地址：https://theme.co/x/

如果你更傾向于功能完備可以自行定制的主題的話，那么這個幾乎在ThemeForest平臺上近乎登頂?shù)腦 Theme 可能就是你的菜。X Theme嚴格按照目前zui高的標準來開發(fā)，基礎(chǔ)扎實，設(shè)計創(chuàng)新，功能也足夠前沿。zui重要的是，圍繞著 X Theme 有一個完整的用戶社群，你可以得到zui全面的幫助。

5、Shopkeeper

網(wǎng)站地址：https://themeforest.net

Shopkeeper是 ThemeForest 平臺上的另外一個熱賣的電商類主題。這個主題為你提供了足夠優(yōu)秀的用戶體驗，并且沿著WooCommerce的思路來進行整體的設(shè)計，它能讓用戶近乎無障礙的使用，并且內(nèi)置了漂亮炫酷的主題。

6、Xstore

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

五、原型設(shè)計類

1、Proto.io

網(wǎng)站地址：https://proto.io/

Proto.io 是一款強大的原型設(shè)計工具，讓你可以在幾分鐘內(nèi)創(chuàng)建功能豐富功能完備的交互原型，無需編寫代碼。同時它還是一款協(xié)同工具，可以讓團隊成員、客戶和利益相關(guān)者都參與到項目當中來，在設(shè)計過程中實時分享設(shè)計原型。

2、Power Mockup

如果你更習慣使用PowerPoint，那么你應該會喜歡PowerMockup這個工具。作為一個PowerPoint 的庫，你可以使用你所熟知的PPT來快速搭建一個桌面端或者移動端界面的原型，簡單的托拽就可以搞定一切，有了它，展示起來也更加便捷。如果你愿意添加自己定制的形狀和控件，你還可以同其他的PowerMockup 用戶進行分享哦。

3、Grid.Guide

網(wǎng)站地址：https://css-tricks.com/snippets/css/complete-guide-grid/

Big Bite 的員工發(fā)現(xiàn)計算柵格的寬度是一件非常惱人的事情，尤其是在嵌套結(jié)構(gòu)下。正是在這種需求的驅(qū)動下，他們發(fā)明了這款Grid.Guide工具。這款工具會根據(jù)zui大寬度和列數(shù)來幫你計算可能的排列組合，生成對應的PNG文件，讓你可以直接托拽到相應的工具中使用。更重要的是，Grid.Guide是完全免費的！

4、XPRS

XPRS 也是一款網(wǎng)站搭建工具，它會讓你的網(wǎng)站搭建像樂高一樣簡單好玩兒。XPRS 讓你告別復雜、混亂、昂貴的開發(fā)過程，優(yōu)秀可靠的設(shè)計和可靠的托管服務，加上簡單易用的集成編輯環(huán)境，還有什么樣的Web項目搞不定的呢？

http://m.ezekroy.com/wangzhansheji/3322.html 這些實用網(wǎng)頁設(shè)計基礎(chǔ)工具和網(wǎng)站，你都知道嗎？（二）