如何制作吸引人的网站

当我开始从事 Web 开发时，我完全不知道该从哪里开始创建一个新网站。我被各种各样的可能性淹没，就像面对着一张空白的画布，却不知道该画什么。

随着时间的推移，我找到了一个流程，它不仅帮助我入门，还帮助我使网站更加用户友好、更加美观。

在这篇文章中，我想分享这个过程。

准备

首先，我强迫自己关闭代码编辑器，因为我总是想立即开始编码。

然后我开始思考网站的目的。我想让访客了解一些信息吗？我想让他们订阅一些新闻通讯吗？还是想做些完全不同的事情？

考虑到这一点，我会思考人们最有可能访问这个网站的原因。这可以是营业时间、价格、后续链接，或者任何其他类型的信息。

之后，我会把我想说/想展示的内容写在我的网站上。这不一定是最终稿。通常我会在最后花时间润色文案。

这里最重要的是将内容结构合理。使用列表、表格、段落、引号等等。

现在您的内容已经结构化，您可以开始使其看起来更美观。

设计

我通常心里已经有了关于具体元素的想法。不过，看看其他网站寻找灵感肯定有帮助。

我不会浏览整个网站来寻找灵感。相反，我会查看我在撰写内容时构思的具体结构。这样，我就不会强行将内容塞进一些不合适的模板中。例如，它可能看起来像这样：

然后我拿出一张纸，粗略地勾勒出我想到的元素或在研究中发现的元素，从而绘制出我的网站的结构。

之后，我会根据项目规模，使用 Figma、Sketch 或 Adob​​e XD 等设计工具将绘图转化为合适的设计。由于我主要处理小型项目，因此通常会跳过此步骤。

编码

然后（对我来说）有趣的部分就可以开始了：编写网站代码。

首先，我决定是否要使用设计库或从头开始创建所有内容，这取决于上一步中创建的设计/草稿。

我很少一次性完成整个网站。这就是为什么我在编码过程中总是会把TODO和重构注释留在代码或 README 文件中。这有助于我在没有动力的时候重新投入到项目中。我通常会选择进行一些小的重构，但最终编写的代码量往往超出了我的预期。

完成它

当我对结果满意时，我总是验证：

• 使用Lighthouse或Pagespeed Insights时，网站速度很快
• 该网站可通过WAVE访问
• 该网站已通过Seoptimer进行了适当的 SEO

你的流程是怎样的？有什么不同？
请在评论区留言告诉我 :)

欢呼吧，文森特