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

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

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

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

谢天谢地，一些规划将帮助您避免混乱的构建过程。在与客户分享您的想法之前，让我们看看需要考虑的几个关键事项。

元素如何适应不同的屏幕

有一个原因，为什么有这么多的讨论“移动第一”的方法来网页设计。从本质上讲，这允许我们从网站的基本要素开始。从那里，我们可以随着视口变大而添加和增强。

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

如果您计划实现CSS网格或Flexbox，它们将在最大程度上帮助您充分利用可用的屏幕空间。但其他因素可能需要更多努力才能发挥作用。

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

在这种情况下，您可能需要决定滑块是否值得在手机上显示。或者可以对其进行重构，以更好地适应所有情况下的工作。

可达性影响

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

字体应清晰易读，大小适中。虽然花哨的文字和装饰性字体看起来很漂亮，但它需要足够大才能阅读，并且只能在标题中使用。如果无法合理满足这些要求，那么最好将它们从项目中删除。

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

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

除了这两个项目之外，最好有一个如何显示图标等元素的计划。它们是直观的吗？他们是否会附上文字？

向后兼容性

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

特别令人担忧的是，设计元素会使网站在旧软件中完全无法使用。即使某个特定的浏览器只占站点访问者的一小部分，这仍然会带来一些潜在的转化。

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

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

尚未发生的场景

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

例如，考虑添加一系列视频。虽然添加内容的过程可能很简单，但它如何与您已经建立的外观相匹配？你会利用一个默认的浏览器用户界面或手工制作一些东西来匹配你的品牌吗？

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

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

第一次就做好了

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

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

如果这听起来让人难以忍受，那就深呼吸。这是你的经验和专业知识可以用来救援的地方。正确的工具也可以插入。

想想在你过去的项目中哪些有效（哪些无效）。寻找实现弹性功能的方法。做到这一点，你就会在通往成功项目的路上！

来源：https://speckyboy.com/thinking-ahead-web-design/