如何更有效地建立网站

我们的首席开发人员分享了他准备有效构建网站并避免项目膨胀的技巧。

与任何项目一样，准备工作是成功的关键。 在这里，我分享了我们用来确保成功交付项目的一些关键流程。

开发启动

在您直接开始编写任何新网站之前，最好与开发团队坐 30 到 60 分钟来制定计划。 理想情况下，产品负责人应该在会议上回答您可能提出的任何问题。 他们可能参加过所有的客户会议，并且对网站在用户旅程和功能方面应该实现的目标拥有比其他任何人更深入的知识。

希望您事先已经看过这些设计。 使用本次会议来确定您看到的任何问题并与团队讨论您将如何解决这些问题是一个好主意。 例如，如果设计师自上次迭代以来选择了画布外飞出菜单，您可以讨论如何构建它。 您可能会发现团队中的某个人之前已经建立了一个，因此他们可以承担这项工作。

打印设计

这种与开发启动密切相关，但这个阶段应该只真正涉及前端开发团队。

我认为这是在开始站点构建之前采取的一个很好的步骤，因为可以布置打印输出以获得更清晰的全局视图。 使用 Sketch、Photoshop 或 Invision 等应用程序无法轻松做到这一点。 您要么必须缩小到目前为止才能看到所有设计，或者您可能只能在每个浏览器窗口中看到一个页面模板。

以触​​觉形式查看网页还可以为您提供不同的视角，并帮助您磨练您可能会错过的元素。 能够进行注释也很有帮助。

在 Hallam，我们倾向于对我们的打印输出进行注释，然后使用它们来帮助分配工作量并将它们贴在白板上。 然后，我们在整个构建过程的后续会议中参考它们。 模板构建完成并签字后，它就会从白板上删除，这使我们可以清楚地了解剩下的构建内容。

显然，我们都应该尽量减少我们所做的打印量，所以一旦你完成设计，一定要使用回收箱！

识别常见元素

我们在 Hallam 接受的原则之一是，我们创建的每一个设计都不应该由完全定制的模板组成。 相反，它们应该共享通用的设计元素，这些元素可以单独构建，然后插入到需要它们的模板中。

我并不是说页面模板上不应包含自定义元素，但仅在必要时才应如此。 例如，具有电台采访培训页面和电视采访培训页面的网站不需要两个模板，因为它们本质上都是“培训模板”页面。

通用元素还可以创造更好的用户体验，因为人们不会在每时每刻都被新事物轰炸。

一旦您确定了网站的所有主要元素，您就可以将它们写在白板上，制作票并将它们分配给各个团队成员。 然后，当您将页面放在一起时，您可以将各个部分“插入”到模板中并更快地创建它们。

先构建，还是风格和构建在一起？

这是我们过去尝试过的，现在我们同时构建和样式化模板。

过去，我们构建所有页面模板结构和元素时根本不使用任何 css（除了与 Bootstrap 或 Foundation 相关的任何布局样式）。 然后，一旦我们构建了整个站点，我们将检查并设置所有模板和元素的样式。 从生产线的角度来看，这种方法当然是有意义的。 在将汽车安装到底盘、插入发动机并安装所有固定装置之前，您不会为汽车的车身涂漆。 使用这种方法，您可以将功能与样式分开。 在初始构建阶段，您有兴趣在考虑网站外观之前从功能角度确保网站正常工作。

相反，我们已经切换到“设计和构建”阵营，以便我们可以创建可交付的产品。 换句话说，我们可以在任何阶段上线，因为该网站可以正常运行并且看起来不错。 实际上，使用“设计和构建”方法，您仍然可以在没有样式的情况下构建模板，但是一旦完成布局，您就可以对其进行样式设置。 您不会将其停在一侧并继续构建下一个模板。

基本厨房水槽

这里有一些适合“设计和构建”方法的东西。 它涉及设置一些元素的样式，例如排版、添加站点品牌颜色以及可能将按钮样式添加到主 settings.scss 文件中。 令人惊讶的是，这些元素的样式可以立即对网站产生什么影响。 您立即拥有一个不再像 Foundation 样板网站的网站，并且只需花费大约 30 分钟编写一些 CSS 规则，您就会真正感受到进步。

框架站点

我个人的偏好是尽早设置页眉和页脚的样式，因为它有助于构建站点并创建画布以继续样式和构建站点。 它使网站看起来更像成品。 然而，一个可交付的网站仍然可以有一个无样式但有效的导航和页脚。

结论

关于如何将网站设计从 Photoshop 带入构建过程，我们都有自己的想法，而以上恰好是我们喜欢做事的方式。

我确实认为至关重要的一件事是在开放开发环境之前制定计划。 无论您是独自工作的自由职业者，还是制定计划的大型开发团队的一部分，都是提高工作效率和速度的可靠方法。

如果您在 Web 开发方面需要帮助，请随时与我们联系。