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

三、字體圖標(biāo)類

1、Fontea

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

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

2、Perfect Icons

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

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

3、Font Awesome

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

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

4、Boxy SVG

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

四、主題類

1、Frontify

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

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

2、Shopify Timber

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

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

3、Be Theme

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

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

4、X Theme

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

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

5、Shopkeeper

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

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

6、Xstore

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

五、原型設(shè)計(jì)類

1、Proto.io

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

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

2、Power Mockup

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

3、Grid.Guide

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

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

4、XPRS

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

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