2019 年你必须拥有的 20 个网页设计工具
已发表: 2018-12-26网页设计是不能自满的行业之一。 如果您希望保持高效，您必须保持敏锐，并提供可以激发客户灵感的结果。 在 Photoshop 或您最喜欢的代码编辑器上花费大量时间的日子已经一去不复返了。 如今，几乎所有东西都有一个工具或应用程序。
最重要的是，新网页设计师的大量涌入确保了 UI 工具包和设计模式不乏。 如果您精通工艺，开始一个全新的设计可能需要不到一两个小时。 当然，还有其他方法可以个性化您的网页设计工作流程。 从工具到有见地的书籍，再到框架和有趣的图形元素。
在本综述中，我们正在汇总 2019 年值得关注的最佳网页设计工具——这些都是过去一年的继任者，并且通常成为网页设计过程中不可分割的部分。 您可能已经在您的工作流程中使用了 Sketch 和 Zeplin，但也许这篇文章可以让您了解其他尚未了解的工具。
1.素描
Sketch 是专业网页设计师的梦想，一款仅适用于 Mac 的实用软件，可提供矢量优先的设计工作流程。 矢量优先的方法意味着创建界面成为一种绝对的乐趣。 这意味着，Sketch 遵循严格的像素网格环境，确保可以转移到网站和应用程序的卓越设计质量。
谁知道有多少 Windows 用户不得不清空他们的存钱罐才能切换到 Mac，因为这个软件非常值得！ 众所周知，Sketch 是一种可插拔工具。 因此，您可以自己创建插件，也可以从现有用户已经提交的数千个插件中进行浏览。 它确实是一款革命性的应用程序，如果您希望在 2019 年及以后保持现代网页设计趋势的领先地位，则值得考虑。
2. Adobe 插画家
Adobe 仍然存在，尽管采用了全新的定价系统。 这个家喻户晓的品牌一直在提前推动矢量设计。 但是，现在越来越多的竞争正在出现，Adobe 面临着使他们的产品符合要求的挑战。 尽管有 Figma 和 Sketch 这样的亚军，Adobe 的 Illustrator 并没有失去与其核心客户群的联系。
除了令人惊叹的矢量编辑和创建工具之外，Adobe 的优势在于它与 Photoshop、XD 等姊妹产品的原生集成。 并且能够将这些工具整合到一个单一的工作流程中可以产生一些有效的设计结果！
3.无花果
你有设计理念吗？ 好吧，那你最好去工作。 但在您这样做之前，请考虑一下 Figma——一个将想法转化为可用产品体验的现代应用程序。 Figma 可让您创建线框，将它们转换为原型，并最终从同行那里收集反馈。
此外，团队可以在应用程序本身内使用用户界面、共同研究想法并简化 UX 设计。 Figma 的一个关键卖点是它的实时产品体验。 团队中的每个人都可以同时集思广益，以取得出色的成绩。
4.齐柏林
您想自动化设计和 UI 套件的样式规范吗？ Zeplin 就是这样做的——从 Sketch、Figma 或其他工具导入您的设计文档，并立即将它们转换为可用的设计规范。 此外，Zeplin 还充当协作工具。 一旦您导入设计并进行更改 - 任何人都可以看到某个元素被移动了多少或多少。 此外，单击一个元素并选择“转换”以将您选择的元素神奇地转换为可操作的代码。
5.异想天开的线框
线框是网页设计师最好的朋友！ 它们不仅可以在路上使用，而且非常适合在您有空闲时间时修改设计理念。 Whimsical 的 Wireframe 平台非常适合执行移动和桌面需求的设计理念。 有足够数量的 UI 元素可以帮助您对产品、应用程序或全框架网站进行线框图。
6.漫威应用
无论您的设计任务是什么，它都不会超出基于流程的结构的范围。 Marvel 希望通过开发一体化设计软件来帮助简化流程。 Marvel 最小但功能强大的软件基础让您可以在几分钟内完成设计、线框图、协作和原型制作。 现有用户称赞无需编写代码即可进行原型设计的能力。 以及将设计部分切换为可操作的前端片段的能力。
7.Avocode _
在开发人员和设计师的混合团队中工作？ Avocode 旨在解决双方时间线不同的问题。 相反，使用 Avocode - 每个人都可以在同一页面上了解产品预测的时间表。 Avocode 支持从 Figma、Sketch 导入文件，并为每个设计自动生成样式规范。
8.用户体验法
用户体验是伟大网页设计的基石。 每当您进行新设计时，您的首要任务始终是用户与您的网站或应用程序交互的方式。 这也适用于界面元素之类的东西。 Jon Yablonski 整理了一本数字书籍（免费），其中描述了 19 条“用户体验法则”的列表。 从本质上讲，每条“法律”都是对心理学和市场营销中常见主题的具体参考。
这些法律辅以示例和外部阅读等资源。 虽然不是您需要经常访问的网站，但偶尔提醒自己一些更重要的用户体验原则不会对您造成任何伤害。
9.溢出
受困于管理用户流？ 溢出来帮忙了！ 这款全新且令人兴奋的软件肯定会在新的一年中有所作为。 但它是什么，它有什么作用？ 溢出可帮助您使用已经预先制作的设计创建用户流。 您甚至可以直接从 Sketch 和其他设计软件解决方案导入设计文件。
流可以存储为可以与团队共享的单个文件。 一旦你进入开发阶段，拿出文档来看看你必须做什么。
10.iotaCSS _
框架应该有自己的帖子，但我们不能放弃强调 iotaCSS 的机会。 如果您希望引导不可知的用户界面，这个轻量级库是天赐之物。 SASS 模式之间有相似之处，但总体而言——iotaCSS 更像是一个生成器，而不是一个独立的框架。
11.莫宾
伟大的设计需要耐心，而这个过程并不总能保证成功。 但是，碰巧的是，被广泛接受的“好设计”之间存在相似之处。 您可以通过检查它们的设计模式来了解是什么让热门应用如此成功。
在这种情况下，Mobbin 提供了一个为 iOS 应用程序构建的基于移动设备的设计模式库。 该库包含数百个最流行的应用程序，有数千种模式可供轻松访问。 你能发现你的应用程序中的下一个重大设计变化吗？
12.图标8
图标和矢量弥补了许多现代设计过程。 当然，除非您仅基于容器和排版来设计纯粹的最小站点。 不大可能！ 不过，如果您需要免费的图标和矢量，请务必查看 Icons8。 这些人在过去 2 年里一直在稳步增长，设法提供了大约 90,000 个图标。
但这并不是 Icons8 如此出名的全部。 这些家伙脱颖而出的原因是他们的视觉编辑引擎。 在您点击下载按钮之前，您可以使用自定义颜色和其他选项从字面上自定义每个图标和/或矢量。
13.代码笔
CodePen 是您离不开的平台之一。 如果您是网页设计师，则不会。 CodePen 以其简单的代码共享功能而闻名，是一个惊人的灵感来源。 用户分享可以通过使用 CSS、HTML 和 JS 完成的片段、技巧和其他可能性。
最好的部分是一切都是开源的，您可以在自己的项目中快速复制结果。
14.运球
您是否掌握最新的网页设计趋势？ 当您有一百万客户要服务时，很容易偏离轨道。 不过不用担心，Dribbble 仍然存在，并且仍然是最可靠的设计趋势来源之一。 数以百万计的设计师将他们的创意作品提交到这个平台。 如果你很聪明，你甚至可以找到免费的东西，比如 UI 工具包和不同类型的插图。
最后，成为 Dribbble 社区的一员可以显着提高你的工作曝光率。 有很多人通过在 Dribbble 上发布他们的作品而找到了令人难以置信的工作机会！ 一直在做一些令人惊奇的事情吗？ 不要害羞，与世界分享。 谁知道它会把你带到哪里。
15.取消绘制
在对视觉内容的需求不断增长的世界中，像 unDraw 这样的网站使用起来绝对是一种乐趣！ 这个开源平台提供免费插图，可在任何情况下使用。 最值得注意的是，unDraw 在登陆页面设计中很受欢迎，其中插图可以帮助使设计变得生动。
您可以通过关键字或简单的浏览来搜索插图。 unDraw 包括一个自定义颜色选择工具，它适用——谢谢，SVG！ - 一次为所有插图着色。 当您需要使插图与设计中的配色方案相匹配时，这是理想的选择。
16. HolaBrief
无方向性设计导致绝对无处可去。 事实上，纯粹根据您的想法进行设计通常会导致资源浪费。 很多事情在我们的脑海中听起来很棒，但是当我们开始工作时——有时几个小时过去了，我们只完成了我们脑海中的一小部分。
问题是，你怎样才能避免在一个想法上停留太久？ 一方面，拥有工具（例如我们迄今为止列出的工具）来简化流程是一个很好的起点。 但是，为了真正将想法变为现实，您需要以简明扼要的方式将它们“原型化”。 HolaBrief 为编写设计简报提供了一个简单的数字解决方案。 它基于战略思维的概念。 这意味着您可以轻松简化整个设计过程。
HolaBrief 提供想法映射、头脑风暴界面、协作工具和简单的清单。 目标是尽快将您的想法用于实际设计。
17.色盲
可访问性一直是讨论的话题，但多年来它已成为网页设计师需要接受的明确趋势。 随着越来越多的人连接到网络，越来越需要让应用程序和网站对所有受众类型都感觉自然。
我们是 Colorblind，正如公司所称，我们提供服务来帮助品牌优化其对色盲人群的网络可用性。 但是，我们更关注这家公司提供的资源。 有大量的阅读材料、示例和案例研究展示了色盲如何影响网络体验。 当然，还有关于如何改善所有项目的上述体验的详细信息。
也许在 10 年后，像 Sketch 这样的软件将能够自动完成所有这些艰苦的工作，但在那之前——最好遵循严格的指导方针。
我们很想听听您对解决网页设计中的色盲问题的意见！ 您之前是否有优化颜色可访问性的经验？ 在下方与我们分享。
18.拉帕
当您始终一头扎进新设计的设计和原型设计时，很容易陷入例行公事。 使用相同的字体、相同的动画和相同的配色方案。 有时，在别人告诉你之前，你甚至可能都没有意识到你正在这样做。 这就是为什么保持灵感和了解其他网页设计师正在做的事情如此重要的原因。
尽管存在许多这样的平台，但我们发现 Lapa.Ninja 是新设计灵感的超级可靠来源。 它是 50 多种业务类型之间的各种组合，确保您可以为每个项目获得最大的灵感。 您还可以按颜色浏览，尝试使用相似的配色方案找到相似的设计。
您如何确保始终保持积极性并受到新鲜想法的启发？ 您是否发现其他设计师构建的登录页面是可靠的资源？ 请在评论中告诉我们！
19.浏览器堆栈
小型项目可以不针对所有浏览器和屏幕尺寸进行优化而侥幸成功。 但是，一旦您的公司开始发展并且客户种类增加，您就会注意到特定用户群的参与度下降只是时间问题。 这就是 BrowserStack 的用武之地，它为您提供了跨 2,000 多种不同浏览器测试您的设计的方法。
听起来很复杂？ 真的不是。 在最基本的层面上，您只需插入网站 URL 并手动检查兼容性即可。 在其他地方，BrowserStack 提供了可以自动化整个测试过程的工具。 确定在数千种不同设备类型上查看您的网站时存在的核心差异。
20.飞碟
我们在本综述的开头说了什么？ 网页设计的世界正在迅速变化。 多亏了机器学习和人工智能，设计师现在可以将他们的模型变成实时网站设计。 Uizard 是一个提供此类服务的新平台。 当然，它仍处于测试阶段，目前您只能注册为早期入门者。
值得注意的是，Uizard 正在公开研究这个概念，并将他们的研究免费提供给任何可能感兴趣的人。 想象一下这些类型的工具将为网站引导做些什么？ 启动功能布局可能只需要几分钟，让您有更多时间专注于构建功能等。
新的一年的新工具
如今，Web 和浏览器的容量正在迅速发展。 当我们处理现有项目时，新趋势出现，使我们重新考虑选择并做出相应调整。 随着越来越多的人开始探索成为网页设计师的潜力，我们正在看到提供新信息和设计信息的大门打开。
这篇文章不仅涵盖了目前最好的网页设计工具，还涵盖了 2019 年的有力竞争者。有很多令人兴奋的事情值得期待，我们肯定会看到一些重大的设计和技术飞跃发生在来年。
你兴奋吗？ 在评论中与我们分享您在日常网页设计工作流程中使用的工具。 我们很想听到社区的最爱和没人听说过的潜在新工具！