清远网站建设:展示以人为本的设计过程

2019.08.12 mf_web

63

设计师非常擅长制作视觉文物。我们创建模型,图像,代码和各种其他材料来记录我们的解决方案。但仅查看这些工件并不能解释实际的创作过程。我们认为我们的设计方法具有直观性和情感性,因此我们很难开发记录在案的,以人为本的设计流程。

清远网站建设幸运的是,有一种更好的方法。设计师可以对他们的工作进行深入的,记录在案的案例研究。最好的解释了设计师必须做出的复杂选择,并解释他们在用户体验和视觉决策背后的思考。他们清楚地记录和传达这些知识,帮助我们的设计社区发展一种更加移情,以人为本的方式来谈论我们的设计过程。

Victor Papanek 在设计为人类规模写作时这样说:

设计是一种快乐,创造性的行为。它关注解决问题和决策。它为设计师提供了巨大的满足感,从一张纸上的第一个探索线到不同的开发阶段,观察概念。

本文分析了案例研究的一些主要特征,并提供了如何使用它们来使您的设计过程人性化的技巧。

陈述广泛而具体的目标

我总是试图用具体的可交付成果和具体目标来编写我的设计简报。但这并不意味着没有实验空间。这通常表现为广泛的目标,不一定能在客户简报中捕获。在案例研究中明确我们广泛而具体的目标,将重点放在解决问题上,而不仅仅是资产交付。

让我们来看看两个具有双重目标设定的案例研究。

在第一个例子中,Frog和Nike Foundations的女孩效应案例研究包含广泛和具体的目标:“探索生活在贫困中的年轻女性的社区价值”与“模拟简单形式的数字通信”相结合。尽管简单说明,这些都把重点放在问题和解决方案上。

Frog's Girl Effect案例研究阐述了广泛而具体的目标 - “女孩效应和耐克基金会要求Frog探索社区对生活在贫困中的年轻女性的价值”。
Frog's Girl Effect案例研究侧重于社区和代理行动。

在第二个示例中,Domain7也是这样做的。该案例研究结合了温哥华市的数字化和响应目标,同时也引用了Domain7团队的技术目标。使用诸如“我们完成任务!”之类的短语告诉我们,他们面临的挑战不仅仅是向城市提供代码,还要在内部解决他们可能引以为傲的问题。

温哥华04-domain7城市 - 的 - -OPT小
Domain7专注于城市数字化和响应的目标,以及他们自己的技术目标。

在这些项目中,客户的广泛目标(耐克,女孩效应,温哥华)与工作团队的需求相结合。这种双重框架使我们更深入地了解他们探索的一般结果,以及更具体的项目目标,始终将人放在流程的中心。

提示

  • 在案例研究的早期定义您的广泛项目目标,重点关注社区,环境或赋权等更大的问题。

  • 将您的具体目标附加到项目的可交付成果或您希望解决的技术问题上。

专注于神器之前的过程

我们迈出了制定以人为本的案例研究的第一步。接下来是我们如何在工件之前关注流程。但是当我说“设计神器”时,我到底得到了什么?Sandra Wolfe Wood解释说(PDF):

“设计为工件”围绕着解决方案,一个像徽标或网站的物理可交付成果; “设计作为过程”更加强调解决问题的过程。

记录良好的案例研究可以表明,设计需要远远超过客户可交付成果列表。首先关注流程将设计视为一种刻意的协作行为,而不是一个单独的行为。草图,用户旅程和模型都有助于读者可视化工作,更重要的是,看到它是由人类创造的。我们看到设计是如何形成的,而不仅仅是最终的部件是什么样的。

Gravitate的Sahale案例研究表明了这一点。从他们定义用户角色的工作到内容审核甚至是样式图块,我们看到团队如何优先考虑他们的设计过程,几乎使读者能够随着网站的成形而参与其中。

Gravitate优先考虑内容审核,seo分析和完成工作的草图。
Gravitate优先考虑内容审核,SEO分析和完成工作的草图。

在工件之前解决问题的另一种方法是突出贡献者和团队成员。Dan Mall的TechCrunch案例研究包含一个突出的合作者列表,然后是项目大纲,然后是草图。他专注于设计过程,从开始,而不是完成。

Dan Mall对Tech Crunch进行重新设计的案例研究,展示了谁而不是什么。
Dan Mall 对TechCrunch重新设计的案例研究突出了合作者,展示了谁而不是什么。

提示

  • 通过简单易懂的步骤向读者展示您的设计过程,这些步骤可以在他们自己的项目中复制。

  • 在说明您的设计过程的情况下,显示您的团队合作的照片。

  • 如果可能,请列出您的协作者及其扮演的角色。这将案例研究转向对人和过程的探索,而不仅仅是对设计可交付成果的描述。

在清晰的,面向过程的块中展示研究

无论您以人为本的设计过程的具体步骤是什么,都需要包括研究和探索。您可以将案例研究中的研究作为面向过程的块进行研究。这可能意味着墙上的照片覆盖着胶粘物,复杂的插图和结构草图,甚至数据模型和可用性结果。

在他的共同设计过程(PDF)文章中,Marc Steen发展了我们需要共同探究和协作探索的想法,以便为简报制定解决方案。我们将工件定义为解决方案,但它们需要来自以人为本的协作方法来实现设计目标。案例研究在展示研究,数据和解决方案之间的真实关系时是最好的。

那么,这些面向流程的块可以采取哪些关键形式?

草图和原型

对于厄斯金来说,从粗糙的交互式线框开始为他们提供了他们需要继续的概念框架。为了对快速,响应迅速的网站进行原型设计,他们开始使用概念和低保真模型,然后在他们改进原型时逐渐进入越来越多的细节。

Erskine Design的ETrade客户原型
Erskine Design的 Trade Clients应用程序原型(查看大图)

可视化研究

Mozilla的Save for Later案例研究是另一个特别强大的例子,侧重于解释。从案例研究开始,读者就可以浏览研究阶段和内容映射。概念性工作用图表和图标说明,以澄清调查结果。在本案例研究的每个步骤中,对研究进行了解释和背景化。

06 Mozilla的保存换后,选择小
(查看大图)

当我读完这些内容时,记住我做过类似事情的所有时间,我能够理解他们的研究过程以及它是如何被可视化的。

在这个例子中,我们看到@fat详细讲述了他如何接近Medium的CSS的重新架构。案例研究分为概念性步骤,列出了他所承担的五个不同的“项目”,以及来自这些探索的代码。不仅如此,还有更多。每个研究块都充斥着对团队的参考,“我们”以及重构CSS的协作努力。它将研究视为一个非常人性化的过程。

中等的CSS
Medium的CSS(查看大图)

用户体验笔记

作为设计师,我们非常熟悉从抽象研究到真实体验的心理转变。Maggie Salter讨论了她在开发模型以“重新人性化”信息设计方面的工作,他说:

从根本上说,信息是人性化的; 在系统化过程中,它失去了天生的人性。这......代表了将人性化的本性重新插入信息设计的尝试,因此其目标是重新设计信息设计。

当我看到成功的案例研究时,这个主题一次又一次出现。每个数据,每个工件,每行代码都需要首先与人类体验相关联。

在关于 FiftyThree的Paper应用程序中的缩放功能的文章中,对UX的关注是一种阅读的乐趣。通过诸如“它通常让人们第一次看到它们时会让人微笑”以及用户写的“你”的语言,他们的技术研究完全是关于体验的。

FiftyThree的论文引导读者了解其缩放功能的增强功能。
FiftyThree的论文引导读者了解其缩放功能的增强功能。(查看大图)

正如您在这些示例中所看到的,共享我们的设计过程最适合专注于研究过程的图像,代码和UX工作。最终,我们需要创建最终设计工件,网站和应用程序,但我们如何展示有时混乱的研究是使读者和其他设计师可以访问的工作。

提示

  • 使用照片,图表或调查结果列表显示您的研究,即使它没有整齐地打包。

  • 对于代码,GitHub的Gist或CodePen等工具可以说明您对技术娴熟的研究。

  • 显示数据,研究和设计工件之间的关系,可以是书面形式,也可以通过视觉方式将它们联系起来供读者比较。

解释组件和模块化部件的使用

网页设计越来越模块化,Matt Berridge称之为“ 现代网页设计的基石 ”。我们已经摆脱了笨拙的HTML文件和静态PSD的日子,取而代之的是更多的视觉和结构抽象。前端框架,模式库和样式图块的流行证明了模块化方法的吸引力。

在您的案例研究中,展示您设计的一些模块化元素,即使它们只是更大集合的一部分。

来自Werklig的Tele Finland案例研究包含丰富的图像和类型探索。异想天开的形状和颜色都作为模块化元素共同作用。即使是小细节,如元素上的圆角和自定义排版,也会感觉像是更大的模块化系统的一部分。

Werklig的Tele Finland案例研究包含丰富的图像和类型探索。
Werklig的Tele Finland案例研究显示了模块化的形状和颜色。(查看大图)

颜色,内容类型,UI元素甚至插图样式的选择都在这种模块化的块级方法中起作用。Eugene Spiecher谈到需要成为“杰出的形状制造者”,这听起来像我们作为网页设计师所做的那样完美。Haraldur Thorleifsson做得非常好,在视觉上向读者展示了他是什么样的造型师。他的网站上的案例研究包含大量的核心设计组件,例如图标,并展示它们如何在界面中组合在一起。

“超过地图”显示了上下文中的许多可交付成果和资产。
“超过地图”显示了上下文中的许多可交付成果和资产。(查看大图)

在本文的前面部分,我强调了人工制作的过程。那么,展示这些组件是否会在设计过程中促进设计工件?一点也不。在我们综合了之前查看的所有研究数据之后,视觉和UI设计选择。我们在案例研究中收集按钮样式,动画和视觉模式,以表明我们理解问题并可以制作解决方案。在展示解决方案的组成部分时,我们看到了工作中的人和知识。

提示

  • 设计工件可以使您的流程变得活跃。在您的设计中展示它们。

  • 将模块化元素一起呈现在图像精灵或图表中,以显示视觉关系和系统。

  • 使用动画和GIF显示模块化元素的不同状态或条件。

列出任何重要的经验教训

正如我们之前所看到的,案例研究应该强调设计知识和创作过程。当然,这包括视觉,代码和UX假设,但没有成功。在项目期间总会吸取经验教训,分享这些经验至关重要,以便其他人可以从中学习。

两种类型的课程大大增加了案例研究。

关于创作过程的经验教训

在许多制造团队会谈坦率关于他们的斗争不要妄下结论,而他们正在建造一个名为老太云新工具。他们还注意到在构建原型之后发生的事情以及对团队施加的新约束。

Made By Many对创作过程和经验教训有清晰的解释。
由许多人制作,清楚地解释了创作过程和经验教训。(查看大图)

您的案例研究的一部分应该明确列出您最终与研究相匹配的解决方案以及原因。

关于失败的教训

网络是一种复杂的媒介。很多事情都失败了。我们弄错了。很多。完成并推送的项目不需要暗示您遇到的所有死胡同和失败。案例研究是这些课程的一个更好的地方。通过这些时刻引导读者将设计作为探索和迭代的时间,而不仅仅是抛光。

在由特安+松懈美丽的案例研究包含了一些关于他们失败的教训:“我们知道我们需要停下来重新审视”一遍又一遍,他们的过程中,明确评估和观察带领读者一起他们的旅程一个更好的解决方案。

Teehan + Lax的精彩案例研究包含许多关于失败的课程。
Teehan + Lax对失败的设计过程提供了坦率的观察。(查看大图)

提示

  • 说实话。如果设计过程或工具不起作用,请告诉读者,这样他们就不必犯同样的错误。

  • 谈谈创造力和灵感的想法。您在设计和视觉创意方面的许多个人斗争将成为其他设计师的有力教训。

定义体验的质量

我们已经研究过概念,过程,组件甚至失败。我们的下一个回应可能是问:“那么,这是一次高质量的体验吗?”我们能否回顾一下我们所研究过的网站,并对设计产生真正的影响充满信心?

就我们谈论具体的可交付成果而言,我们作为网页设计师的工作与情感交织在一起。使用我们构建的网站和应用程序时,用户和客户会感到愉快,满意,充满信心,甚至感到困惑。案例研究使我们有机会确切地确定我们的目标是什么类型的经验以及我们的工作是否相符。

您可以通过几种不同的方式在案例研究中解释体验质量。

数字和分析

为读者提供数字证据,证明您的所有草图和原型实际上都有效。包括测试结果,因为它们告诉读者某些功能如何发展。它们帮助我们想象出我们设计所创造的人类反应。尽管数字与设计工件相关联,但它们是衡量用户体验的一种非常有效的方法。

很少与Target合作改善其企业和内部沟通。通过出版物和奖励系统的成功,他们可以在数字上显示他们的设计过程是有效的。对于在线销售其服务的设计师和工作室来说,这些对客户来说也很有说服力。

很少显示目标图像和增加的数字。
他们与Target合作的案例研究(查看大图)

行情和推荐

直接听取用户,团队成员和客户的意见有一些强大的功能。包含有关项目的个人观察的简短引号通常是读者最容易获得的。另一种选择是采访形式,来自客户或用户群的问答时间更长。来自相关人员的明确回应可以使案例研究真正以人为本。最有效的案例研究更进一步,提供团队设计经验的第一手资料,而不仅仅是用户体验。这为读者提供了真实的视角,他们往往是其他设计师。

在他们为Knight Fellowships进行的案例研究中,Mule Design提供了一个引用(注意:此链接指向archive.org上的一个版本,因为该示例最近已脱机。)来自他们的客户非常突出,验证了高质量的体验他们设计的。

骡子设计案例研究为骑士奖学金
Mule Design为奈特奖学金提供案例研究(查看大图)

提示

  • 使用连接到项目原始目标的分析和指标,建立一个回到案例研究开头的链接。

  • 通过将引号与照片配对,我们可以显示谁在说话,使读者能够与他们联系并同情他们。

项目是如何完成并启动的?

尽可能简单地向我们展示一个现实生活中存在的网站或项目。毕竟,我们付出的代价是什么,对吧?最终产品是您的人类设计思维和您的创作过程实际工作的证据的组合。自豪地展示它!

所有接口的研究,开发和测试都充当了案例研究这一部分的背景。最后,我们应该看到您的项目如何由公众发布和查看的明确示例。

结论

我试图通过关注过程而不是工件来表明,我们可以构建和分享深入的案例研究。这些研究使我们能够重新围绕设计过程和人类在我们创造的事物中的对话,而不是完美的可交付成果。

毫无疑问,案例研究本身就是一种复杂的设计工件。但是当我们用过度渲染和不切实际的工作模型填充它们时,我们对设计社区和我们自己都是一种伤害。例如,等距模型是最近的趋势,它们的分阶段闪烁模糊了任何真正的设计解决方案。重点不正确地将工件本身作为图像,而不是它们背后的流程和创造性解决方案。

Oliver Reichenstein 在其有说服力的文章“ 学会看 ”中说:

您对产品内部工作的了解越多,也就是说,如果您能够看到构造,隐藏机制,并瞥见导致其当前状态的过程,则更容易看到其设计。

数字设计是一个复杂的领域,需要同理心,视觉清晰度和概念深度。如果我们要继续学习和成长为一个行业,我们必须从同事那里直接了解战略,批判性思维和设计过程。研究其他人的过程,而不仅仅是文物,使我们能够为自己的过程开发一种更加细致入微,以人为本的方法,并在精心组织的案例研究中提出这种方法。

清远网站建设

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP