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

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

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

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

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

一旦有足够的信息， 下一步是收集灵感–应用/网站的外观如何， 风格是什么 目标是什么 等等。 对于要使用的新技术或不同类型的媒体，有什么好主意吗？ 所有设计师都在左右寻找灵感-网站， 图书， 杂志， 任何事物。

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

我们将像Awwwards这样的网站放在一个单独的类别中，因为它们实际上展示的是已构建并可以正常使用的内容。 而且， 它更专注于艺术方式， 在“任何设计工作”上没有那么多。 大多数时候， 这些站点非常繁琐，以致只能在高端计算机上使用， 但您仍然可以从中获得启发。

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

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

BrandColors的目标稍有不同-它提供了主要品牌及其配色方案的列表。 您可以在那里找到一些不错的阴影和组合，以启发您的构建。 颜色没有任何版权， 但是我们的建议是与它们一起玩耍，而不是将所有颜色复制粘贴到诸如亚马逊之类的地方。

并非总是有足够的时间来处理网站的每个组件。 有时， 最好抓住一个图标包， 由另一位设计师/摄影师制作的插图或库存照片，并直接使用。

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

最好的提示是找到上述类似地点并将其靠近， 这样您就可以尽可能减少搜索和找到适合该工作的最佳图形所花费的时间和精力。

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

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

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

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

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

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

Figma和Adobe XD几乎都集中在云上， 这样您就不必担心失去工作， 但并非所有事物都是这样– Photoshop， Illustrator文件， 您下载的字体， 相片， 等等。 全部都驻留在您的计算机上。

最好备份它们并使它们始终可用， 特别是在多台机器上工作时。 分享分享时， 这非常容易。

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

也许是时候重新设计您的网站了。 DevriX可以帮助您根据技术规范构建定制的定制解决方案。 提交您的提案或请求一个完整的发现会话，以确定您的要求并评估您的业务需求。

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。