为什么提前思考在网页设计中至关重要

建立一个伟大的网站和一个平庸的网站之间的区别通常是很早就确定的。 这通常是网页设计师将他们的项目绘制成虚拟“角落”的问题。 这就是设计变得不灵活并且无法适应各种用例的地方。

这往往发生在原型设计阶段。 我们在一个看起来很棒的想法上花费了大量的时间和创造力。 我们的客户可能和我们一样喜欢它。 但只有当我们真正开始构建它时，我们才会开始充分理解其后果。

设计模型作为我们网站项目的指南针。 如果我们未能提前考虑某些要素的要求，则可能意味着陷入糟糕的境地。 最终结果是一个网站必须做出一些严重的妥协才能在不同的设备和浏览器上工作。 这会对可访问性、性能和对最佳实践的遵守产生负面影响。

值得庆幸的是，一些计划将帮助您避免混乱的构建过程。 在与客户分享您的想法之前，让我们先看看需要考虑的几个关键事项。

元素如何适应不同的屏幕

有这么多谈论“移动优先”的网页设计方法是有原因的。 从本质上讲，这使我们可以从网站的基本要素开始。 从那里，随着视口变大，我们可以添加和增强。

尽管如此，我们每个人对构建原型都有自己的偏好。 对于那些仍在使用基于桌面的方法的人来说，重要的是要考虑所有这些精美的设计元素将如何在手机上运行。

如果您计划实施 CSS Grid 或 Flexbox，它们将在充分利用可用屏幕空间方面提供很大帮助。 但其他元素可能需要更多的努力才能发挥作用。

例如，大滑块在小屏幕上可能会变得非常难以使用。 复杂的图像可能没有那么有影响力，文本可能会超出界限。 性能也可能滞后。

在这种情况下，您可能必须决定滑块是否值得在移动设备上显示。 或者也许可以对其进行重构以更好地适应所有情况下的工作。

可访问性影响

设计从选择合适的字体和颜色开始。 它们都与品牌和可访问性密切相关。

字体应该清晰且大小清晰易读。 虽然花哨的脚本和装饰字体看起来很漂亮，但它需要足够大才能阅读并限制在标题中使用。 如果不能合理地满足这些要求，最好将它们从您的项目中完全删除。

此外，颜色对比度也应该是一个主要问题。 背景和前景颜色必须达到可接受的对比度才能被认为是可访问的。 另外，这只是一个好习惯。

如果您不确定您的调色板，请使用在线工具来确定其适用性。 有时，只需稍作调整即可通过 WCAG AA 标准。

除了这两项之外，最好制定一个计划来显示图标等元素。 他们直觉吗？ 它们会附有文字吗？

向后兼容性

并非每个网站都必须与 Internet Explorer 9 等完全兼容。旧版浏览器不一定会阻止我们使用最新的 CSS 或 JavaScript。 但是应该考虑一些向后兼容性。

特别值得关注的是设计元素会使网站在旧软件中完全无法使用。 即使某个特定的浏览器只占您网站访问者的一小部分，这仍然会留下一些潜在的转化。

值得考虑的是设计决策将对这些用户产生什么影响。 给定技术的可用后备可能足以使事物看起来不错且可用。 更好的是，它们可以相当简单地实现。

过去，设计师被期望确保元素在所有浏览器中的外观和功能完全相同。 这些天来，这可能是一个太多的要求。 只要用户可以在一些更古老的软件上导航和消费内容，这可能就足够了。

尚未发生的情景

即使是最小的网站也需要随着时间的推移而发展。 随着新类型内容的添加，它们需要在设计中加以考虑。 如果您没有准备好，实施这些项目可能会与现有项目发生冲突。

例如，考虑添加一系列视频。 虽然添加该内容的过程可能很简单——它如何适应您已经建立的外观？ 您会使用默认浏览器 UI 还是制作一些与您的品牌相匹配的东西？

虽然您不能总是预测未来，但您可以计划各种可能性。 这是设计系统允许您完成的一部分。 通过从一开始就设置一些默认指南，您将更轻松地处理未来的添加。

现实情况是，我们今天的设计可能会在未来发生变化。 因此，为这种可能性做好准备是值得的。

第一次正确构建

制作第一个模型不仅仅是让事情看起来不错。 它甚至超越了给您的客户留下深刻印象。 确实，这是一项迫使我们将项目视为一个整体的练习。

美学必须令人赏心悦目。 但设计还必须易于访问并能够适应各种屏幕。 此外，随着事情的发展，它可能必须适应不同类型的内容。

如果这听起来势不可挡——深呼吸。 这就是您的经验和专业知识可以派上用场的地方。 合适的工具也可以参与进来。

想想在你过去的项目中什么有效（什么无效）。 寻找实现弹性功能的方法。 这样做，您将走向成功的项目！