跳到主要内容

Web设计器入门工具包

在网络的早期,设计师的工具包处于精益方面。除了网页设计工具由大玩家提供,选项非常有限。现在有一个工具可以改进产品设计的各个方面,使我们不仅能够创造更好的产品,而且能够更好地工作。

在本文中,我们选择了开始进行Web设计所需的五个基本工具。这里列出的工具可以帮助您开始作为网页设计师的旅程。

01.研究:Airtable 

The gallery view is great for collating design inspiration

画廊视图非常适合整理设计灵感

Airtable就像Excel或Google表格,但它可以做得更多。您可以将文档附加到单元格,例如录制或图像,这使得它成为整理用户研究会话反馈的好地方。添加“标签”的功能使得消化大型数据集和发现热门主题变得非常容易。

它就像创建电子表格和调整字段以使它们与您的输入相关一样简单。要分享信息,您只需发送链接即可。客户喜欢它,同事也喜欢它。

另一种使用Airtable的方法是将视图切换为“图库”并整理设计灵感。它比Pinterest更容易使用,并且没有进入或登录的障碍。另外,你可以附加GIF,谁不喜欢GIF?

02.协同设计:实时董事会

With this tool you can see other collaborators' cursors

使用此工具,您可以看到其他协作者的游标

如果您有分布式团队成员或客户,Realtime Board是一个很好的工具,可以远程实现线框草图会话。使用该应用程序,您可以添加草图的照片并查看其他成员的光标所在的位置,这有助于解释您绘制的内容,因为您可以指出您正在谈论的方面。您还可以添加注释和评论以对您最喜欢的解决方案进行投票。

03.用户测试:的InVision要么奇迹 

In Marvel you can link up artboards to test concepts on end users 

在Marvel中,您可以将画板链接到最终用户的测试概念

在最终用户测试解决方案时,这些工具至关重要。您导入屏幕然后将可点击的热点放在设计的顶部,用于链接页面,或者在悬停时更改状态以模拟工作软件。为了真正加快工作流程,InVision和Marvel使用Sketch插件直接从Sketch导入画板。

在对最终用户进行测试时,完成的效果看起来非常真实,特别是如果您花时间将悬停效果添加到按钮以及可点击区域。这意味着您可以非常快速地从有效的反馈中受益,而无需编写单行代码。

04.原型设计:折纸

Origami is helpful for mocking up animations

折纸有助于模拟动画

Origami是由Facebook团队建立的,很容易上手。虽然它可以做任何事情,但Origami擅长模拟产品中的微交互,例如打开菜单或用于增强UI的微妙动画。

他们将其称为“Sketch的完美伴侣”,因为您可以将Sketch文件中的图层直接复制并粘贴到应用程序中。将所有内容粘贴后,您需要调整资源的X和Y坐标,以便在动画制作之前将它们放在屏幕上的所需位置。然后通过添加交互逐步构建动画。

例如:点按,打开一个持续0.3秒的动画并转换元素。通过在动画结束时输入元素的位置来控制此移动。因此,如果你想旋转45度的东西,你将在过渡的'end'添加'45'并将其链接到相关的X或Y'旋转'。

05.沟通:松弛

Keep all your conversations in one place

将所有对话保存在一个地方

Slack是将所有产品对话集中在一个地方的好方法。它非常适合团队和客户,休闲自然有助于建立关系。如果您有分布的员工或客户,这也是一个很好的工具。如果您需要设计反馈,您可以快速启动Slack通话并共享您的屏幕。

这篇文章最初是作为网络杂志中的完整设计工具包的一部分出版的。购买问题303要么订阅杂志

网页设计活动生成纽约返回2018年4月25日至27日,提供行业领先的演讲者,一整天的研讨会和宝贵的交流机会 - 不要错过它。立即获取您的Generate门票

阅读更多:



翻译字数超限