智能工具和应用程序——尤其是那些能够节省时间的工具和应用程序，是设计人员的工具清单中应该必备的。今天，我们将对我们准备的这份清单做一个罗列和说明，看看我们收集了哪些最新最好的设计师免费工具！

从可以帮助元素排版到代码片段和调色板，你可以完全免费的下载这个列表中的所有工具，以使你的设计生活更轻松。尝试实际使用并收集一些免费的，方便的工具来简化你的工作流程。

1.Web Gradients

渐变是今年网站设计领域的“大势”，谁不喜欢一个看起来可以满足你视觉审美的渐变呢？WebGradients收集了包含180个线性渐变的集合，你可以在你的网站设计中的任何部分使用它们用作内容背景。通过复制CSS样式或下载PNG，Sketch或Photoshop版本，你会发现渐变其实并不难。

2.Flawless Typography Checklist

Typewolf的列表是针对排版所做的一个详尽的“大师级”课程，可以作为一个交互式工具，帮助您避免类型灾难。该列表是全面的，提供简单的指导，以帮助你纠正错误。

3.LOL Colors

急需一个可以足够吸引人眼球的调色板？LOL中包含有众多的色彩搭配集合（和HEX代码），以帮助你快速找到你可能没有考虑到的组合，并能够激发你的灵感。

4..resizr

此工具可以测试网站的响应能力，通过输入网址，并按用户在不同的设备上进行查看。你也可以在横向和纵向视图之间切换。

5.CSS Stats

你的样式表看起来怎么样？CSS Stats是一个很好的工具，可以将所有内容解析成可用的格式（如果你想看到设计中包含什么颜色或字体，这是一个很好的帮手）。

6.Adobe Spark

Adobe的Spark工具是一个免费的图像构建器，非常适合为社交媒体构建图形。该工具很快，可以有效的节约你的时间在这些杂乱的小图像上（它的工作原理与大多数其他Adobe产品一样，所以学习起来并不困难）。

7.Google Web Designer

此应用目前仍处于测试阶段，但可帮助你创建可在任何设备上运行的基于HTML5的设计和运动图形。谁不想从Google中获得专业的帮助呢？

8.Font Library

通过使用这个工具可以“跟踪”google正在使用的流行的字体，并将帮助你标记和组织你正在使用的所有内容。

9.What Font Is

不确定适合你网页设计的字体？什么字体你是可以使用在图像上或通过URL来获取字体匹配。它还提供了一个很直观的对比列表，以帮助你找到正确的字体。

10.Death to Stock

该网站本身在网站设计上就不同于传统的图片集网站。每个月，订阅者可以免费使用一些照片，而他们想要的每张照片都由不同的摄影师策划。

11.Todoist

Todoist是一个方便的清单管理应用程序。使用它来跟踪项目的每一个不管是设计还是其他方面的各项进度，易于使用的同时还可以帮助你避免杂乱无章。

12.Bulma

Bulma是一个基于Flexbox的简单而现代的CSS框架。它具有模块化和响应化的特点，同时，每一个代码都是在GitHub上开源的。

13.Music for Programming

让我们暂且抛开该网站在页面设计上的“狂野”风格，该应用具备音乐编程的几乎所有优秀的功能。通过在程序上重新编程，你可以在编程过程中实时进行聆听审核。

14.PlaceIt

如果你需要一个模型来辅助展示你的项目，该网站有超过2,500个创意型公共选择可供你选择。

15.CSS Ruler

使用此工具可以查看CSS长度之间的差异——字体相对值，窗口百分比和绝对值。

16.Patterninja

这个小应用程序可以提供你任何类型的图像——你可以使用你自己的或其中配有的免费的图片集，并将其转换为用于各种项目类型的模式。这是一个工具，你可以玩一整天，而不会觉得无聊。

17.Theme.Cards

在同一个地方你可以找到所有最好的免费主题WordPress，Bootstrap或者更多。此外，网站上的每个主题和模板都是响应性的，所以你不必经历很多混乱的选择。

18.Type Anything

你可能认为你有一个完美的调色板，直到前端输出css样式后，你才意识到事情不按计划工作。该工具可以帮助你创建可以在屏幕上看到的最佳的字体组合，调整从字体到大小到间距的所有内容。以便在你编码之前就能直观的看到并测试它。

19.Img2CSS

可以将任何图像转换为纯CSS。只需上传你的图像然后就等待奇迹发生吧。

20.Glyphdiff

你可以使用此工具比较两种字体。从同一个字体集中选择两个字体或非常不同的组合，只是为了乐趣。

21.Impalette

在这里，你可以使用基于Pantone色的标准来检查图像中的主要颜色。该工具之所以成为推荐清单的一员，是因为它提供了大量相关的颜色选项。

22.Visual Center

使用此工具查找对象的视觉中心（你可能会惊讶于某些图像是实际的中心位置）。你也可以在Sketch或Illustrator通过相关的插件脱机使用该工具。

23.Hero Patterns

该数据库包含可重复的SVG背景，可用于任何的Web项目。可以调整前景色和背景颜色，不透明度并支持下载。

24.Site Auditor

不必担心搜索引擎优化的问题。Site Auditor会对你的网站进行全面的分析，以找到可能会干扰网站在像Google这样的搜索引擎上排名的SEO问题。它找到问题并可以提供针对性的解决方案，以帮助你更好地优化你的网站。

25.Sketchpacks

直接从菜单栏中查找和管理Sketch应用程序的插件。只需点击一下即可安装。

26.Ethical Web Development

帮助创建一个更好的网站以一个更逻辑设计师的身份。这份清单包含了许多原则和准则，以帮助你保持最佳的状态。

27.Responsive Image Breakpoint Generator

该工具可帮助你通过使用算法概念为不同的屏幕尺寸选择最佳图像分辨率，以便你能更好的规划实际图像的大小和尺寸。

28.Unsplash

Unsplash是高分辨率图像的另一个图片库。通过搜索数据库或订阅，可以在你的收件箱中获取照片。

29.Material Design Palette

几乎每一个Material Design都是时尚潮流的象征，特别是明亮的色彩选择。此工具可帮助你选择颜色，了解它们将如何表现在设计中，并提供可替换的可下载的调色板。

30.Type Terms

如果文句的排版对于你来说还是比较陌生的，这个可通过动效展示排版的作弊表将帮助你在最短的时间内学会它。