如何确保网页设计的一致性?

平面设计 网站设计 工作流程 教育 一致性
2022-02-16 16:28:53

我在提出这个问题时遇到了很多麻烦,希望标题能代表所提出的问题。

目前,我正在协助/管理一名实习生的第一个大型“网页设计”项目。从概念到创作的所有过程。开始很好,实习生非常积极。

然而我注意到,当我们从线框到设计时,元素的制作方式缺乏一致性。几乎每次都是相同的元素。

让我举个例子,实习生无法“看到”字体大小为 12px 和 16px 之间的区别。实习生没有注意到 Ariel 和 Roboto 之间的区别。因此,假设您有一个“新闻”元素,相同的元素在页面上重复了 3 次,但每次显示的元素都不同(颜色/字体大小/间距等)

我不断在我们拥有的每个反馈时刻发现一致性错误。这让我很困扰,因为我没有解决核心问题的建议。我已经说过:确保对元素进行分组并复制它,而不是重新创建元素。

其他建议包括,创建一个链接元素,这样如果您在一个位置更改它,它就会随处更改。

当他创建一个标题 (H2) 时,他可能会使用 #333333 作为一个标题,然后使用 #707070 作为下一个 H2 标题。

您是否使用任何系统来保持一致性,或者您是否有类似的体验?

附加信息

似乎有关于 CSS 与基于图像的构建的讨论。实习生确实知道一些 CSS,足以创建一个简单的布局。然而,还不足以摆脱设计网页的任何限制。因此,对于这个特定的实习生,设计发生在一个工具中,之后它将由前端开发人员制作。

不同的实习生有不同的抱负,我/我们试图激励他们展示他们的创造力没有限制。我只需要满足用户需求的前 3 个设计,正如在早期过程中研究的那样。然后我们讨论这些设计,并在大多数情况下将不同的元素合并在一起以创建最佳设计。

我宁愿花时间讨论他为什么选择某个元素,而不是解释他如何制作某个元素。因此,如果这意味着使用 Sketch / Affinity Designer 等工具,那很好。

关于实习生3年学校教育的经历。

问题标题最初是:你能/你如何在网页设计中教授一致性吗?

4个回答

你能教一致性吗?是的。这就是实习的目的。

设计不是需要天赋才能表现出色的东西;通过足够的练习,您的实习生可以成为一名出色的设计师。不断指出他的错误让他知道哪里错了,还给他一些训练练习(有几个 配色游戏其他技能,你也可以设置几行文字,让实习生告诉哪个是哪个尺寸)。

熟能生巧。最终,如果你的实习生足够关注并且足够感兴趣,他会做得更好。

对我来说,这听起来像是一个验证和信息问题,而不是设计问题。虽然字体大小和样式问题应该在视觉上很明显,即使不是,实习生也应该有工具来验证样式。如果实习生能够如此不一致,则表明缺乏正确使用 CSS,因为正确的 CSS 使用围绕着对具有相同预期样式的多个元素的定义样式的使用。在我看来,这没有完成的事实是问题的根源。然而,即使这没有完成,这个人仍然应该拥有工具和知识来自己验证这一点。因此,对我来说,问题是多方面的:

  • 也许您的规范不够具体。是否在线框阶段提到了字体类型、样式和大小?
  • 对于相同样式的元素,它们不一致的事实意味着 CSS 的使用不当。例如,所有 H2 应该相同,由全局 H2 样式定义,并在需要时覆盖。
  • 他们允许不同的样式通过它们的事实也指出了验证自己的样式的问题。我什至不需要看到 X 是一种不同的风格,我会明确地查看 X 的风格设置并验证它是否符合规范。

每个视力正常的人都能看到,但大多数人(包括你的实习生)从不学习如何看。

如果你想让某人看到不一致的地方,你必须教他们去寻找它们。

你也可以通过(温和地)挑战实习生来证明他/她的决定是正确的,按照“你为什么选择让这两个实体不同大小/字体/颜色/什么?”来理解这一点。可能不涉及任何有意识的选择,并且了解“没有理由”永远不是一个好的理由是实习生的另一个基本课程。

我认为这里没有单一的方法。

如果这个人是实习生,大概是为了向团队中其他更有经验的人学习工作,包括经理。是的,这项工作有时会涉及到检查所有标题的字体大小和颜色是否相同的“无聊”部分。

作为实习生,他应该乐于了解什么是一致性,为什么客户要为一致性付费以及如何通过预定义样式应用一致性,这些样式在大多数编辑软件中都可用,对于颜色、字体大小的一致性非常有用,间距等。

我想说快速的答案是在可能的情况下实现和重用样式。