长春做网站：提高团队效率的6个构建网页设计流程技巧_极简慕枫

时间：2019-08-05

编辑:网站制作公司

1045

无论您是刚开始，还是从头开始组建新团队，似乎都没有必要强调您的流程; 你正在推动项目，每个人都在掌控。

现实情况是，这正是将您的流程放在首位的时候，因为它将为您和您的团队提供一个工作结构，并在整个公司内有效提升。

以下是我们的流程以及我们多年来在业务中开发的流程：

长春做网站

1.做你的研究

创建设计过程的第一步是研究。为了帮助您或您的客户实现目标，您必须知道问题所在。

首先，研究您的客户现有网站。以下是一些可以帮助您入门的提示：

识别正在运行的元素和不运行的元素
识别品牌的声音
他们对自己的品牌有什么看法？
他们的目标是什么？
谁是他们的受众？
他们想要谁作为他们的潜在客户？
执行可用性测试以确定哪些有效，哪些无效

2.参加比赛

有时候你会有设计假设和假设，但通常会向外界寻找灵感。竞争对手如何制作功能？他们的策略是什么？您可以在多个竞争对手中识别哪些标准最佳实践？

以下是您应该尝试回答的其他一些问题：

谁是您客户的直接竞争对手，他们在做什么？
再次，识别正在运行的元素和不运行的元素。
竞争对手总是使用任何类似的元素吗？如果是这样，我们怎样才能重新发明它以使我们脱颖而出？
获取灵感。

3.获得灵感

在你知道问题是什么之后，是时候解决它，但首先你需要提出自己的想法。以下是我们用于开始收集灵感的网站聚合器示例：

Awwwards.com和Siteinspire.com拥有漂亮的网站。它们都是了解趋势或获得新想法的重要来源。
Designspiration.com和Behance.com具有鼓舞人心的视觉元素。
参观画廊和艺术博物馆。拍照，他们可能会激励你为未来的项目。
从已经存在的设计中获取灵感。路牌，广告牌，杂志，自然等
查看Shopify的电子商务灵感和创意文章集。

4.创建一个设计工作室

把你所有的想法集中到一个地方，这样你就可以一次看到它。在这个过程的这个阶段，所有关于数量，而不是质量。把你所有的想法，甚至你认为完全疯狂的想法都拿出来。它可能看起来很疯狂，但是直到你在现实生活中看到它才会知道。谁知道，这个疯狂的想法可能是使设计独特的一件事。

在Verbal + Visual，我们与主要项目团队成员一起开展名为设计工作室的创意活动，无论他们是否是设计师。从本质上讲，来自不同行业的一群人聚集在一起，将想法提到桌面上以解决问题。这些独特的视角与开发创新设计一样多（如果不是更多）潜力，成为设计师的孤立视野。

以下是我们的设计工作室的工作原理：

讨论一个机会领域。您可能已经完成了这项研究，但是在您将它们拖到设计工作室之前，您团队中的其他人可能一直在处理不同的项目。填写它们，以便您的团队在同一页面上。
指定您要设计的内容。这个工作室将关注什么？页眉？导航？主页？另外，指定您要设计的平台类型。这将如何影响设计？
给出背景。解释您正在设计的环境。示例：为当地杂货店设计一个登录页面，允许用户在不必访问唯一产品页面的情况下将商品添加到购物篮中。
发散。参与者有五分钟的时间来勾勒出尽可能多的想法。这些草图将包含UI内容的低保真渲染（图像，复制，按钮，手风琴，旋转木马等）。
汇合。每个团队成员都有一段短暂的时间来展示他们的设计并证明他们做出的决定是正确的。团队成员提供反馈和问题，以便从同行那里获得进一步的见解。
发散。一旦每个团队成员为他们的设计辩护，该小组将再次分歧五分钟以便进行素描。然而，这一次的目标是制作一个单一的设计，蚕食个人素描的最佳元素。
反射。团队将再次汇聚一堂，讨论他们的“最终”设计。此时，模式应该开始出现，并且设计之间应该出现共同的特征。

设计工作室是获得全新视角和新想法的好方法。在整个设计过程中根据需要经常使用它，它们不必限于开头。

5.构建线框和原型

按照我们的设计工作室，我们进入表格线框图流程。这个过程综合了我们的研究和设计工作室产生的想法，并将其置于第一个有凝聚力的视觉格式：线框和原型。

我们通过利用信息架构，研究和内容来设计线框，以设计仅适用于布局的布局。没有图像，只有一个字体，导航，徽标和内容框被适当地定位。

这个区域是您从当前站点进行可用性测试的地方，并且您的所有研究都会发挥作用。我们通常首先从桌面布局开始，但是我们从一开始就牢记移动设备，并且不断地在设计中挖掘与移动设备相关的漏洞。移动收视率现在高于桌面，因此始终考虑移动设计。

在整个线框图过程中，我们使用这些线框来创建可点击的原型。市场上有几种原型制作工具，但我们的团队更喜欢在InVision工作。这部分过程非常非常重要，只有几种不同的方式。首先，投入时间正确地构建线框意味着您将更加确定您的用户体验能够很好地工作，并且您将在设计和开发过程中节省大量时间。以下是一些正确执行线框部分的简单提示：

以开发为设计理念。找出开发团队将使用的响应式框架（即Twitter Bootstrap），为该框架购买Photoshop或Sketch模板，以及基于该网格进行设计。仅此一项就可以为开发团队节省大量时间。
原型和执行可用性测试。这也很重要，因为它确保您设计的内容实际上可用。查看我们关于可用性测试的帖子以了解更多信息。
设计相应。这应该是没有道理的，但始终要确保您正确地为每个屏幕进行设计（移动设备，平板电脑，笔记本电脑和大型桌面）。所有这四个都非常重要，您将希望在关键点包括视觉设计师（如果是其他人）和开发团队，以确保所有内容都看起来更合适。

6.具有强烈视觉设计元素的波兰语

如果您正在阅读本文，您可能会对视觉设计过程有很强的把握。一旦我们对线框的强烈感受，我们考虑的视觉设计的要点是：

让它成为一种体验。你正在创造的东西应该是令用户满意的东西。想想你如何使用动画，UI设计，视频，电影图形和其他独特的内容，以及微妙的体验功能，真正让客户满意，同时还要考虑到SEO和加载时间。这是当今数字设计挑战的一部分，也是每个设计师必须解决的问题。
保持品牌。保持核心结构和设计框架。这包括标题和正文副本，以及一致的整体视觉结构。让您的开发团队轻松完成您已完成的工作，并将其转换为实际网站。
创建动画和视频。创建简短的动画或视频以向开发团队展示网站应如何运作，可以节省数小时的来回。它将允许开发团队构建和视觉设计师真正控制网站的感觉。