2018年的网站制作工具

在过去的几年中，出现了大量新的网页设计工具。以静态像素为基础的屏幕复古的旧模型正在慢慢被更现代的设计理念所取代。这些新的设计工具使用基于约束的组件，甚至整个布局系统，它们使用机器学习来建议你的颜色和字体，它们让你对设计进行版本设计，或者让你设计组件系统而不是静态页面。

有了这些新概念，我们正在慢慢弥合设计和开发之间的差距。作为一个在设计和开发方面都有一席之地的人，这是非常令人兴奋的。

下面是我遇到的设计工具列表，我认为这对任何想要改进工艺的设计师都是有用的。我把它们分为几类，但是这里的大多数工具都可以很容易地适用于多个类别。为了清楚起见，我只提到每个工具一次。

这份清单并不是详尽无遗，我也没有尝试过这些工具中的每一种（还！）。我确定我错过了一些非常酷的工具，所以，如果我需要在这里添加新的酷工具，请做 @我！

活版印刷

网页设计是95％的印刷术，所以你最好把它做对。这些工具将帮助您选择字体，然后为您的设计创建一组完美的尺寸和设置。

Fontbase
Fontbase是一个非常快速，跨平台和免费的字体管理器。它速度很快，提供了一个很好的概述，并让您只需单击一下即可安装谷歌字体。我希望它索引字体（如分类），但它是一个有用的工具不管

选择一种字体的一千个字体的解剖是困难的，在大多数设计工具中找到一个好的字体是一个耐心的练习。大多数工具只是给你一个单一的下拉，字体按名称排序。祝你好运！一千种字体的解剖学，现在只是一个实验，可以让您根据其属性搜索和过滤字体：对比度和重量，x高度。需要一个高x高的厚字体？只要过滤下来，从一个更小的列表中选择。我不能等待这个索引您的硬盘上的字体。

Fontjoy
挑选一个字体是困难的，但挑选一个字体配对更加困难，而且你经常回归到“尝试和真实”的组合。通过使用深度学习，Fontjoy可以让你找到新颖的组合，使用神经网络来找到组合，“共享一个总体的主题，但有一个令人愉快的对比。

原型
一旦你有你的字体配对，他们来真正的工作：为您的标题和段落创建一个不同的字体大小，重量和行高。当然，这些都应该在一个适当的垂直节奏，并在他们周围有一个愉快的空间。原型允许您快速设计和设置标题和段落样式，实时预览并导出到CSS或Sketch。

Modularscale
如果原型给你提供了太多的选择，那么Modularscale很快就会为你提供一个模块化的字体大小的缩放比例。选择一个基本大小，比例，这个网站会给你一个很好的字体大小使用。

Typeshift
是在谷歌的字体或Typekit众多，很多字体还不够吗？为什么不把你自己的可变字体调整成适合你设计的东西？使用Typeshift，您可以原型和实时预览您的字体，然后将其导出到您的网站上使用。

处理真实的数据

我认为用假冒内容进行设计是错误的做法。我认为在2007年，我认为现在在设计网络应用程序时更是如此。我们并不总是能够访问真实的内容，但我们至少可以使用以下工具来使用真实的数据或实际的数据。

Lists.design设计中
使用的各种实际数据（地址，标题，文件格式，逼真的马拉松时间，名称）的集合。可以复制粘贴，或下载值为JSON并使用它。

Tadviewer
一个跨平台，免费的应用程序来快速检查CSV文件。从客户端得到一个很大的数据集，你需要理解？将它载入Tad，在那里显示一个很好的数据透视表中的数据。

原型/样机

“ 测试想法所需的时间应该是零。“。虽然我们可能并不都能够训练一个神经网络来将我们的粗略草图映射到组件库中的相应组件，但以下工具将加速您的原型设计阶段。

Fermion
Fermion.js可以创建您的设计的块布局，并附加行为，以快速创建一个低fi原型。它导出到React组件的工作，所以你可以设计和优化你的原型。

TrueUX
TrueUX尚不可用，但是是一系列详细描述“完美的ux应用程序”原型的文章。他们正在描述一些非常令人兴奋的东西，我等不及想玩了。

文件/版本管理

如果你正在使用设计，你必须处理文件和版本。没有人想弄清楚他们是否有使用homepage_v3.4_final_Final.sketch或homepage_v3.4_final_2.sketch，没有人希望保持半打文件的音轨无论是。幸运的是，基于矢量的设计版本要容易得多，而且有很多工具可以帮助你。

Plant
Plant是Sketch的简单版本控制插件。它允许您在Sketch中从不同的人中创建，更新和同步草图文件。

抽象
摘要是另一种与Sketch兼容的工具，可让您轻松地在团队中共享和版本设计。你甚至可以分支你的设计。

Kaktus
再次为素描，Kaktus是一个应用程序和界面，让您使用Git（因此您自己的Git托管！）版本和草图设计工作。它声称将Git的所有功能带到您的设计工作流程中。所以这意味着合并，分支和拉动设计请求。

现代平面设计工具

我非常高兴大多数设计师（与我一起工作）已经从Photoshop中放弃了自己。基于矢量的设计工具的当前作物使得创建连贯的网页设计和与开发人员共享这些设计变得非常容易。

草图
如果没有草图，此列表将不会完整。这已经过去了几年，但现在是网页和应用程序设计的最佳设计工具。丰富的插件和不断更新的令人兴奋的功能（符号，约束，库）使它成为最好的设计工具。这是一个耻辱，它只适用于Mac，这意味着窗口上的设计师正在被抛在后面。

Adobe XD
XD是Adobe对现代设计工具的有力竞争者，它很好。它工作正常。如果你在Windows上，这是一个不错的选择，但是如果你使用Adobe XD，与开发人员一起工作的方法也不多。它有简单的原型内置，这是一个不错的奖金。

Figma
我通常将Figma描述为“多人素描”，因为多位设计师可以同时在同一个设计上进行工作，并且可以看到彼此更新。它也有一个简单的原型模式以及基本的代码导出功能。Figma在浏览器中工作，因此在Mac，Windows和Linux上工作。就个人而言，我在Sketch和Figma之间切换很多。当我在Mac上工作的时候绘制草图，在我的主要操作系统Ubuntu上工作的时候Figma。我真的希望Figma在Linux上发布他们的桌面应用程序。这是电子的，所以应该比可行的。不过，它在浏览器中的工作也没有太多问题。对于大多数用途也是免费的。

Gravit设计师
Gravit最初是一个免费的矢量工具，但已经迅速发展成为网页和其他矢量设计的强有力的竞争者，同时也是运动符号，库和基于约束的响应式设计布局。此外，Gravit是免费的，跨平台的，所以你应该尝试一下。

设计工具与布局引擎

所有的开发平台都使用某种形式的布局引擎，根据规则自动将元素放置在屏幕上。因此，无论何时您专门为这样一个平台设计，并被迫手动推动和移动元素，您基本上正在做一个电脑自动执行的工作，这是浪费时间，坦率地说，愚蠢。这些设计工具是未来。

Antetype
尽管UI看起来十分陈旧，但Antetype实际上拥有一个非常强大的网页式设计系统，可以让您感觉自己可以与您一起创建设计。你真的应该看看他们在网站上的介绍视频。不幸的是，只有Mac。

Webflow
Webflow不仅仅是一个设计工具，同时也为您提供了一个CMS并在这个过程中托管，但是对于那些想要更好地了解Web工作方式的设计师来说，这是一个非常强大的工具。它很好地结合了一个设计工具的界面与真正的网络属性。

Framer Design
Framer最初是基于草图设计创建和测试原型的一种方式，但已经成长为自己的设计工具，支持约束布局和超级强大的原型设计和交互功能。当然，你正在使用真正的代码。不幸的是，只有Mac。

子窗体
一个CAD设计灵感的工具，带来了很多表：响应布局，约束一致的造型和，东西，在几乎所有的设计工具是很难：多国对您的设计组件（想按钮与悬停按钮）。目前只有他们的Kickstarter支持者可以使用，而beta版则显示出很多的承诺。

STUDIO
基于网络的工具，基于设计（响应）屏幕和一组可定制的组件。它可以让你插入真实的数据，并基于它生成用户界面。免费试用，功能非常强大，但对文档非常轻松，所以您现在需要自己计算一下。

Interplay
和STUDIO一样，Interplay可以让你创建基于组件系统的响应式设计。他们正在内测，所以我还没有机会尝试。

InVision Studio
这看起来很棒。它勾选所有的框：响应式设计，布局系统，原型，组件，代码导出。如果它在视频中表现的光滑，那么这可能就是2018年使用的设计工具。我希望在 11月16日试用。

基于组件的设计

随着React和原子设计的普及，越来越多的重点放在设计不仅仅是屏幕，而是设计系统，而且在大多数实际的情况下，设计一系列可重用组件来构建屏幕。

Compositor Lab
Compositor Lab在基于组件的设计方面处于领先地位。彻底易怒，它仍然看起来足够可用于设计回暖。是的，设计师应该在代码，但在合成器实验室，他们不具备对。提供一种简单的方法来创建和设计各种（反应）组件，并作出替代和组合。您已经在使用真实的组件，因此与开发人员一起工作变得非常简单。

Modulator调制
器是一个网页，可以让您快速写出您的（印刷）刻度值，并查看预先设定的常用组件（按钮，列表，卡片等），以响应您选择的尺寸。

故事书
这更像是一种开发工具，但是我想我们会在接下来的一年中看到更多的这种“程序设计工具”。故事书管理您的（React）组件，并在更新代码时自动更新各种状态。

模糊设计和代码之间的界限

这一部分是以Sketch为中心的，但是这是因为它有最多和最有趣的插件。这些插件让你导入和导出代码到Sketch中。这开创了设计与开发之间的整体合作世界。

React-sketchapp
React-sketchapp可以让你在Sketch中渲染反应组件。这提供了一种“完整的真相”styleguide，因为Sketch中呈现的元素是真实的代码。需要做一些工作，特别是在开发方面（您必须切换到 react-primitives），但是我可以看到这加快了设计的迭代周期，并且使用现有组件创建新页面。

html-sketchapp
和react-sketchapp是一样的，但它可以处理任何类型的html。不能给出完美的表示，但是它是一个非常有用的工具，可以快速地设计一个设计或检查现有设计的一致性。

Sketch-to-react-native
这个就是另一种方式！在Sketch中设计您的组件，然后将它们导出到svg并通过sketch-to-react-native运行它们以生成准备使用的React（-native）组件。它使用机器学习来猜测组件的哪些部分意味着什么并正确地转换事物。那有多好？

动画

动画现在是网页设计的重要组成部分。它可以使你的设计做得高雅，或者在不注意的情况下打破你的设计。许多动画工具都是以代码为中心的，所以我只有一个：

精神
我急切地等待着这个精灵接替Flash补间的测试版。到目前为止，我所见过的所有东西都非常令人印象深刻，展示了一个非常好的界面来手工制作动画。

响应式设计

屏幕设计固有地意味着设计未知的边界。对于设计师来说，这意味着更复杂的程度。一个好的设计师不会设计他们看到的东西，而是设计他们之间的关系，所以它适用于很多屏幕尺寸。这是一件困难的事情，但有工具可以帮助你！

Browsersync
Browsersync将所有浏览器（包括移动浏览器）连接在一起。它将同步所有浏览器中的点击，滚动和表单，使得在一堆不同的环境中测试网站变得非常简单。

Polypane
免责声明：我制作了Polypane。Web开发人员的浏览器，它显示您的网站在任意多的视口，只要你想。它有许多预置，同步你的滚动，让你生成所有窗格的截图，并建立了真棒铬devtools权。它在积极的发展，有许多有用的和很酷的功能来！从网站请求邀请。