网页设计过程的 8 条诫命（适用于新手和无代码）

已发表: 2021-11-01
网页设计过程

了解如何通过遵循结构化网站设计流程来打造成功的网站。

我们的假设是您已经找到了一个域名和一个托管服务提供商。

如果您还没有选择您的主机，我们强烈推荐我们的合作伙伴Cloudways 。

在下面的示例中，为您自己创建网站的情况提供了步骤。 如果该网站是针对客户的，则可能会在项目规划、截止日期设置、合同等方面出现新的步骤。 但从根本上说，您仍然必须坚持以下步骤。

现在，这里是步骤：

  1. 范围识别：网站必须满足什么需求？ 该网站与谁交谈？ 它的目标和动力是什么？ 哪些企业的范围和目标受众与您相同？
  2. 定义网站的站点地图：帮助企业和受众实现目标的网页和功能是什么？
  3. 内容创作：为网站页面准备副本；
  4. 创建视觉品牌：准备用于网站设计的调色板、字体和图形，最终塑造你的视觉形象；
  5. 线框图：绘制您的网页布局；
  6. 网站设计：创建实际网站，注意您使用的工具的局限性；
  7. 测试：确保一切正常，从链接到表单和按钮。 在各种浏览器和设备上测试网站以确保其正常运行；
  8. 发布：使用精心策划的沟通策略，在上线之前发出一些声音。

让我们一一介绍。

网站设计过程的步骤

一、范围识别

在这个阶段，您和您的团队需要找出以下一些问题的答案：

  • 网站是为谁准备的？

一个引人注目的网站可能有其好处，但是，如果您希望您的网站的访问者投入他们的金钱或时间，这意味着您需要进行更多的挖掘，以使他们相信这种承诺是值得的。 为了令人信服，您需要了解您的目标受众，了解其需求、内部和外部激励因素。

这种挖掘还意味着您需要创建一个有用的产品并解决某人的需求。

例如，假设我有一个制作纸花的爱好，并想进一步发展并将其转变为一项业务。 有人用纸做花吗？ 我在哪里可以找到这些人？

好吧，我可能认为婚礼策划师和未来的新娘可能想要这样的选择。

但我必须走得更远。 每个新娘都想要我的纸花还是只是一种新娘？

这意味着您需要进行一些研究并检查您的竞争对手。 还有其他纸花商吗？ 您还与优秀的老花店竞争。 那么哪个是您的附加值，或您的独特价值主张？

  • 您的网站访问者希望在您的网站上找到什么？

回到我们的示例，您的访问者可能希望看到各种产品、颜色、运输信息（他们可能需要一些额外的照顾，因为纸花很脆弱）等等。一些提到纸张是可回收的呢？ ? 也许您的客户非常清楚他们对环境的影响，并且他们关心这些细节

有人也可以租花吗？

现在，如果您包含一些推荐信怎么办？ 也许你为朋友的婚礼设计了一些纸花。

看到我要说的了吗？ 在进入网站设计之前，您需要进行研究。

  • 转化情况如何？

我们是在谈论课程注册、购买产品、订阅时事通讯吗？

在星期一的情况下，您可以轻松地从主页上找出他们的转化率。 来自 Monday.com 的主页示例

从“开始”号召性用语中可以明显看出主要的转换，它位于首屏正上方，在中心。

另一个微转换是会议注册，您可以从左上角的消息中注意到。

另一种微转化是“联系销售”。

你的网站呢，有主要转化吗？ 有一些次要的吗？

  • 客户旅程如何？

客户旅程地图是访问者从入口到您的网站到达预期目标并离开的路径的可视化表示。

客户旅程地图应包括以下信息：被访问的页面以及访问顺序、网站访问者实现其目标所需的步骤、贵公司与网站访问者之间的交互点（表格、聊天等），潜在的摩擦点。

客户旅程不是固定的。 你从一个假设开始，然后一路调整。 您可以使用Google Analytics 等工具来分析网站行为并根据真实见解进行优化。

2. 定义网站的站点地图网站站点地图

来源

现在客户旅程已经清晰，是时候创建站点地图了。 网站的站点地图用于建立网站的信息架构并解释各个页面之间的关系。

您可以使用从 Excel 到 Figma 的工具创建站点地图。

3. 内容创作网站内容创作

现在网站的结构已经建立，是时候为各个页面创建内容了。

以下是一些关于文案的最佳案例实践：

  • 使用理想用户熟悉的词语和概念；
  • 不要吹毛求疵和行话；
  • 尝试像在正常的面对面交流中那样进行交流。 这样你会产生一种熟悉的感觉；
  • 用现在时写作，避免被动语态；
  • 始终检查您的可读性。 为此，您可以使用Readable等工具。
  • 与朋友、陌生人、同事一起测试你的头条新闻。 正如大卫奥格威所说：

“平均而言，阅读标题的人数是阅读正文的人数的 5 倍。 当你写好标题时，你已经花掉了 80 美分。”

这意味着标题在网站上至关重要。

尝试针对您的受众 (SEO) 围绕某些相关关键字优化您的内容。 您可以使用Google 趋势（免费）、 Ubersuggest （免费）或Ahrefs （付费）等工具。

  • 利用 AIDA 文案框架。

A – 注意力：创建吸引注意力、激发好奇心的内容，并让您的观众相信他们需要更多地了解您的品牌。

I - 兴趣：给你的访客一个保持参与的理由。 这里的关键是让问题变得个人化，这样你就只和潜在客户说话，而不是其他人。

D - 欲望：这是您向主页访问者展示您的产品如何为他们的问题/痛苦提供解决方案的地方。 在这里，您可以开始解释产品的功能，重点是这些功能如何改善他们的生活。

A – 行动：现在是说服潜在客户采取行动的时候了：购买、订阅、下载免费赠品、开始试用等。

4. 打造视觉品牌

这一步不一定是你的第四步。 您甚至可以在此过程中更早地开始。

视觉识别是指您塑造品牌感知的方式。

这本身就是一个完整的过程。

在这里，您需要：

  • 定义图形的外观。 你会使用形状、3D 图形、插图吗？ Mailchimp 的插图

来源

  • 定义您网站的排版； 排版

来源

  • 选择一个调色板。 从调色板，您可以演变为样式指南，您可以在其中建立链接、标题、按钮、背景等的颜色。为此，您可以使用Adob​​e 色轮等工具。 调色板

来源

  • 策划能够讲述您的品牌故事的图片； 精选图片

来源： https ://convertsquad.com/blog/

  • 设计你的标志标志设计

来源

  • 准备实物资产（产品包装等）。 产品包装

来源

上面的大部分元素都可以用来创建情绪板。 当您在情绪板上收集字体、图形、颜色时，您将能够更好地了解整个网站的情绪愿景。 你的整体语气和声音是什么：浅色还是深色？ 正式还是好玩？ 用于网页设计过程的情绪板

来源

5.线框图网页设计过程的线框

来源

线框是网页或应用程序的草图。 您可以手动绘制它们，在 Google Docs、Sketch 或Figma中创建它们，具体取决于您网站的复杂性。 线框用于在页面上布局内容和功能。 它应该告诉设计师他应该在哪里放置视频、图像、标题、内容块、按钮等。在开始设计之前使用线框是很好的，因为它们可以让你更加灵活。 修改线框的结构比修改现成的网站更容易。

6. 网站设计网站设计

来源

现在我们在谈生意！

我们已经有了我们的内容、线框、视觉元素，现在是时候开始工作了。

如标题所述，您无需成为网页设计师或代码极客即可创建网站。 有很多工具可以帮助您设计一个没有代码的网站。 它们被称为页面构建器。

它们中的大多数允许您自定义设计的每一寸，并使其具有响应性。

例如，在 WordPress 中，您可以使用我们自己的 Colibri 构建器或 Elementor。 在 WordPress 之外，Wix 和 Squarespace 非常受欢迎。 这些工具可以为您提供模板，您可以通过添加自己的部分、视觉效果和内容来丰富这些模板。

现在，如果您的设计需要某些动画、效果，您可能需要添加一些代码。

7. 测试

好的，假设您的内容和视觉效果都已启动。 你的工作还没有准备好。 是时候确保一切正常：您没有任何导致无处可去的链接（也就是损坏的链接或 404），您的所有按钮和表单都可以正常工作，该网站在大多数浏览器和设备上看起来都很好。

现在，在发布之前，您可以测试一下外部人员如何看待您的网站。 这样你就可以避免陷入自己的偏见。 为此，您可以做一个简单的用户研究： 5 秒测试。 这是一种帮助您衡量用户在查看主页的前五秒内获得的第一印象的方法，例如

8. 发射

现在，当您启动时，您只需点击发布即可。 不，你需要引起轰动，发起一些公关活动，在社交媒体上大喊大叫，让人们知道你出局了！

这是一个包装的人。 现在，您有了正确的网页设计流程步骤。

快乐的网站建设！

如果您喜欢这篇文章，并且想了解有关如何设计 WordPress 网站的更多信息，请务必订阅 Colibri 的Youtube 频道并在Twitter和Facebook上关注我们！