设计者的工具集：工作流程，软件和网站

就像软件开发人员，内容编写者，市场营销人员等一样，设计师也需要拥有一个好的工具集来帮助他们处理日常工作。 我们在这里试图做的是概述这些工具，工作流程以及将它们组合在一起以加快工作速度并减少出现错误和错误的机会的方式。

收集信息

当一个新项目到来时，最初的几个小时主要是收集有关该项目的信息，即客户面临的问题，他们的目标是什么，他们喜欢什么等等。在这一关键步骤中，设计师应尝试获得尽可能多的有用数据，以后将用于做出有根据的决策。

印象笔记

Evernote是一款了不起的软件–它不仅是用于记笔记的应用程序。 它可以存储文件，将它们组合到集合，标签，组等中。通过其强大的搜索功能，您可以引用以前的项目，等等。 当然，它最强大的一面是如何使用它。 他们为某些组织方法提供了粗略的指导。

电子邮件，松弛，缩放...

接下来是另一个明显的例子，但是我们添加它是有原因的-推迟电话，消息或视频会议可能会严重延迟项目。 通常，共享屏幕并遍历模型，线框，概念和设计的能力可以挽救生命。 永远别忘了

寻找灵感

一旦有了足够的信息，下一步就是收集灵感–应用程序/网站的外观，样式，目标是什么等。对于使用新技术或使用不同类型的媒体，有没有很酷的想法？ ？ 所有设计师都在左右寻找灵感–网站，书籍，杂志等等。

Dribbble，Behance和类似网站

由于这个原因（为了让设计师吹牛），存在像Dribbble这样的网站。 在这里，设计师可以浏览解决当前问题的想法和方法。 有时，目标是建立“服务A的通用销售页面”。 该销售页面的字面意思是带有股票照片的几个段落。 完全没有目标，但这是现实的。 好吧，颜色，版式，间距等的组合都可能更加独特。 也许也尝试不同的布局！ 这个想法可以来自3-4年前发布的随机目标网页。 99Design的发现页面也是一个不错的地方！

阿瓦德

我们将像Awwwards这样的网站放在一个单独的类别中，因为它们实际上展示的是已构建且可以看到的内容。 而且，它更侧重于艺术性，而不是“任何设计作品”。 在大多数情况下，这些站点非常繁琐，以致只能在高端计算机上使用，但是您仍然可以从中获得启发。

调色板/品牌

对于没有预定义颜色的全新版本，开始工作的步骤之一就是选择适合新站点的内容。 有两种方法可以解决该问题–选择现有的配色方案或设置原色/副色，并根据它们解决整个方案。

色彩猎人

诸如Color Hunt之类的网站提供了社区制作的调色板集合。 您可以直接选择和使用它们，也可以选择主要的颜色作为开始。 “颜色爱好者”看上去不那么漂亮，但也很相似。

品牌色彩

BrandColors的目标稍有不同-它提供了主要品牌及其配色方案的列表。 您可以在那里找到一些不错的阴影和组合，以启发您的构建。 颜色不受任何版权保护，但是我们的建议是稍微玩些颜色，而不要复制粘贴所有颜色（例如来自Amazon之类的颜色）。

溢价和自由资产

没有总是足够的时间来处理网站的每个组件。 有时，最好拿起另一个设计师/摄影师制作的图标包，插图或股票照片，然后直接使用。

• 令人敬畏的字体–以字形形式显示的大量图标
• Envato Elements –以合理的价格选择大量优质资产。
• Unsplash-大量免费使用的高质量照片集
• SVG发生器，例如squircley，getwaves，blobmaker
• Adobe字体（付费）和Google字体（免费）

最好的提示是找到上述类似的几个站点并将其靠近，以便您尽可能减少搜索和找到最佳工作图形所需的时间和精力。

主要设计工具

随着最初工作的进行，涉及到实际构建设计。 由于所有面向设计人员的渐进软件都具有构建Web /应用程序设计所需的所有必要工具，因此我们将跳过线框图工具。

菲格玛

DevmaX在设计工作中的核心选择是Figma。 它提供了出色的协作功能以及基于浏览器的应用程序，团队中的任何人（无论是Linux，Mac还是Windows）都可以访问它。 以前我们使用Adobe XD，但是基于Linux的成员无法使用它，因此Sketch仅在Mac上被锁定。

插图画家/亲和力设计师

对于更多定制工作，Illustrator或Affinity Designer绝对是一些首选。 在过去的一两年中，自定义插图是网站上最流行的部分之一。 大型彩色图形占据了上风，并且使用正确的工具获得更多的经验绝对是一件好事。 在这里，我们还可以添加3D软件（例如Blender）来渲染3d模型，该软件可以用作网页上的资产。

Photoshop /相似照片

Photoshop是用于网页设计的领先软件。 今天，这听起来可能很奇怪，尤其是因为我们拥有所有主要针对Web的出色工具。 但是Photoshop仍然是一个很好的工具，当有需要编辑或裁剪形状/表格的照片时，我们经常使用它。

介绍

但这不仅仅是设计工作，而是静态PNG。 一些设计师将更多的精力放在运动图形和交互上。 一个很好的演示，说明元素如何在悬停，滑动或单击时表现如何，将大大有助于前端开发人员的工作。 Figma和Adobe XD都可以提供帮助，但是两者也都受到限制。

Adobe After Effects

After Effects被认为是动态图形的首选之一。 它提供了代表所有动作和动画的所有必要工具。 在此提醒设计人员的一件好事是动画应遵循网络的限制。 您无法执行添加运动模糊的操作。 因此，当您使用更高级的动画时，一定要与您的前端开发团队进行讨论，或者在网络上阅读有关动画的更多信息以及可行的方法。 UX和A11y也是如此。

存储

Figma和Adobe XD几乎都集中在云上，因此您不必担心丢失工作，但是并非所有事情都如此-Photoshop，Illustrator文件，下载的字体，照片等都驻留在您的计算机上。

最好备份它们并使它们始终可用，特别是如果您在多台计算机上工作时。 共享它们时，这非常容易。

投寄箱

首选是Dropbox。 凭借其易于使用的桌面应用程序，它将在您进行任何更改后立即监视您的文件并将其同步到云中。 只需单击一下，即可与客户或您的团队共享它们。