史上最实用网页设计基础工具和网站大全

作者:静电        发表时间: 2017-04-19         文章来源:点击访问

“工欲善其事,必先利其器”,对于设计师而言,好工具和好想法同样重要。在信息爆炸的今天,设计师要通过网络寻找设计素材和工具是一件简单的事情。高质量的网页模板,丰富的设计灵感来源,实用可靠的生产力工具,都能从不同的层面加速你的网页设计项目。

 

 

于是设计师们需要寻找各种方法和工具,来改善自己的工作。探索的越多,就做的越好,做的越快。优秀的网页设计师总会跟随着最新的设计趋势,掌控最新的设计工具,不断进化的设计工具和服务会让日常的设计更加便捷。

 

今天分类推荐的这些基础工具和网站中,涵盖了素材、色彩、字体、图标、主题、原型设计等多种类别,足以组成一个网页设计师的日常用工具合集了,非常值得网页设计从业者们收入囊中。

色彩类
1、Coolors

网站地址:https://coolors.co/

Coolors 是一款直观的配色工具,你可以以更加简单的方式创建色彩组合,还可以生成不同的格式,比如SVG、PDF或者SCSS,可用于Android、iOS、PS和AI等不同的平台。

2、Color Hunt

网站地址:http://colorhunt.co/

Color Hunt包含了一系列漂亮炫酷的色彩组合,网站会每天更新配色方案,并且根据浏览数排列出最漂亮的配色方案。

 

3、Nipponcolors

网站地址:http://nipponcolors.com/

一个日本传统用色色谱网站,就好用程度而言,这个配色网站并不优秀。但是里面的颜色都非常好看,很有逼格。你可以选定一个背景色后目测着去选配色。

 

4、Flat UI Color Picker

网站地址:http://www.flatuicolorpicker.com/

如果你想制作出优秀的扁平风界面设计,Flat UIColor Picker可以为你提供扁平风配色方案。

 

素材类
1、Tech&All

网站地址: http://techandall.com/

Tech&All是网页设计资源的集散地,你在这里可以发现大量的代码、模板、视觉稿、UIKits、UI元素、导航设计等素材 。

 

2、Freebiesbug

网站地址: http://freebiesbug.com/

Freebiesbug搜集了许多免费优质的网页设计资源 ,包括模板、UI和各种插件。

 

3、Site Inspire

网站地址: http://www.siteinspire.com/

缺少灵感?不知道怎么用网站?Site Inspire 将会帮你重新恢复状态,网站还可以根据类别、平台和风格筛选你需要的素材。

 

4、Resource Cards

网站地址:https://resourcecards.com/

如果你是刚刚进入网页设计领域不久的新人,那么你有必要了解一下进行这项工作的过程中,有哪些工具、素材是可以使用,让你事半功倍的。而Resource Cards 就是帮你搞定这个事情的:所有的素材、工具和教程都被清晰地分成不同的类别,不论你是要设计原型、编写代码还是使用Photoshop来做设计,都能从中找到相应的教程和资源。

 

 5、Stockfresh

网站地址:http://stockfresh.com/

Stockfresh是另外一个值得推荐的图库,实际上在国外这个网站是相当一部分设计师的图片来源。这里图片的价格相对比较实惠,类别广泛,质量也足够上乘。收费方式也相当灵活,定期会有促销活动。

 

字体图标类
1、Fontea

网站地址:https://fontea.madebysource.com/

Fontea 可以帮你在Photoshop中直接调用涵盖700多款在字体的Google Fonts。这款插件最大的优势是你再也不用打开浏览器找字体,而是直接在程序内调用了。

 

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严格按照目前最高的标准来开发,基础扎实,设计创新,功能也足够前沿。最重要的是,围绕着 X Theme 有一个完整的用户社群,你可以得到最全面的帮助。

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工具。这款工具会根据 最大宽度和列数来帮你计算可能的排列组合,生成对应的PNG文件,让你可以直接托拽到相应的工具中使用。更重要的是,Grid.Guide是完全免费的!

4、XPRS

XPRS 也是一款网站搭建工具,它会让你的网站搭建像乐高一样简单好玩儿。XPRS 让你告别复杂、混乱、昂贵的开发过程,优秀可靠的设计和可靠的托管服务,加上简单易用的集成编辑环境,还有什么样的Web项目搞不定的呢?