快速总结 ： 本指南概述了由 Brainstorm Force 开发的经过验证的 7 步网页设计流程：1） 目标设定，2） 品牌推广，3） 网站副本，4） 网站结构，5） 模型，6） 设计和开发，以及 7） 上线。
建立一个网站，然后向公众开放可能是一个压力很大的过程。在此过程中，您必须回答多个问题，也必须解决多个挑战。拥有一个经过测试、经过验证的网页设计过程来经历这一切会有很大帮助。
自 2009 年以来，我们 已经为数千个客户网站和数十个我们自己的网站工作。在那段时间里，我们精心设计了一个设计流程，使我们能够以最小的压力完成一个项目，同时也能照顾到所有关键阶段。
如果您是在客户网站上工作的自由职业者或试图向公众推出自己的网站的企业主，您会喜欢这一点。以下是我们经过验证的 7 步网站设计流程，帮助我们构建了 数千个网站：
第 1 步：设定目标
这听起来像是陈词滥调的说法，但请耐心等待;我要说的确实有效：
设定目标
您必须为您的网站设定一个目标。
是的，目标确实有效。有几个原因：
（a） 目标使重点清晰。
当您构建网站时，出去追逐下一个闪亮的东西太容易了。你总是可以添加更多效果、更多图片、更多滑块或更多功能……但你应该这样做吗？
如果您对网站的主要目标不明确，那么您就无法就是否应该在网站上包含某些内容做出可靠的决定。
有了好的目标，你总是可以评估这个或那个功能是否适合网站。
（b） 目标可帮助您确定设计是否成功。
如果你不知道你想要实现什么，那么你怎么知道你是否以及何时实现了它？
一旦你设定了一个具体的、可理解的目标，你就能判断最终的地点是否让你更接近它。
（c） 当你有一个目标时，你可以计划实现它的步骤。
从空白屏幕开始是很困难的。你可以朝着各种不同的方向前进，但你无法知道哪个是正确的。或者你呢？
设定目标会给你一个非常清晰的路标，准确地指出你需要从头到尾去的地方。
那么，如何为您的网站设定一个主要目标呢？
请注意我强调了 “one” 这个词——比如，你的网站应该只有一个主要目标。不是多个目标。
可以这样想：您希望您的网站主要做什么？
- 您希望它销售产品吗？
- 您希望它建立您的品牌吗？
- 您想提高对某项事业的认识吗？
- 你要竞选公职吗？
无论那是什么，选择一件事，把它放在一个句子中，并以一种以后可以评估和衡量目标的方式表达它。
例如：
“该网站的目标是将我的销售额从 X / 月增加到两倍。”
从那时起，您可以通过回答以下问题来评估有关您网站的所有决策：“这对我的销售额有 2 倍帮助吗？
查看您喜欢的网站
您的竞争对手永远是您可以获得的最佳灵感来源。首先查看您喜欢的利基市场内外的网站。
记下您特别喜欢这些网站的哪些方面。
- 使用 Lightshot 等屏幕截图工具捕获网站的特定区域并注释这些屏幕截图。
- 让这些笔记与您的目标相关。只记下可能有助于您实现目标的事情。
列出您的必备页面
有些页面应该在大多数类型的网站上找到自己的位置。这些是使您的目标成为可能的页面。
以书面形式列出这些页面。
为什么写？当这些页面被写下来时，跟踪它们会容易得多，你也可以在开发过程中将该列表视为清单。
此外，更深入地列出每个页面的各个子目标，以及页面将如何实现它。例如：
“关于页面。旨在建立我的品牌，让用户熟悉它，建立权威，然后将人们引导至产品页面。该页面需要社会证明元素，例如推荐和品牌徽标来帮助实现这一目标。此外，底部还有一份清晰的顶级产品列表。
列出所有必要的功能
每个网站都需要自己的一套必备功能和元素，这将有助于实现主要目标。
让我们从基本上所有网站都需要的东西开始：
- 博客模块 – 即使您不打算写博客，如今博客模块也是强制性的;如果不用于其他用途，您将能够将其用于公司公告
- 联系表格 – 当您希望用户通过网站与您联系时，联系表格起着重要作用。
- 社交媒体集成 – 以您的产品和内容下的社交媒体按钮的形式，也可以以自动内容共享到您自己的社交媒体资料的形式
- SEO 功能 – 至少，您希望能够为您的内容和产品设置 SEO 标题和描述
- 网站分析 – 使用 Google Analytics 是标准
- 垃圾评论保护 – 网站上的评论部分更容易收到垃圾信息。在您的网站上保护此部分非常重要。
- 时事通讯模块 – 采用简单的电子邮件收集模块（将电子邮件放入第三方工具）或网站本身的完整时事通讯模块
- 备份 – 您始终希望在紧急情况下能够访问您网站的新备份
- Cookie 通知 – 如果您要向欧盟的访问者展示您的网站，则需要这些
- 安全机制 – 保护您的网站免受攻击者和恶意脚本侵害的工具
您可能需要的其他功能：
- 电子商务模块 – 将您的网站变成电子商务商店的完整功能集
- 实时聊天功能
- 日历和预约
- 会员模块或在线课程模块
- 横幅和广告模块
这个列表绝不是详尽无遗的，但它足以让你思考并可能添加一两个（或十）你自己的东西。
将这些功能转换为插件
我将假设您使用 WordPress 作为您网站的主要引擎。众所周知，使 WordPress 出色的主要因素是无数的插件，它们可以将您的 WordPress 网站变成您需要的任何东西。
现在要做的是浏览您的必备功能列表并为每个功能分配一两个插件。
有些功能需要的不仅仅是一个插件。例如，当涉及到电子邮件列表和时事通讯时，您可能希望使用 Convert Pro 来获取电子邮件，但随后您需要将这些电子邮件传输到某个地方——到 MailChimp 或其他地方。
在这个阶段，您应该有一个相当完整的 plugins 列表，您将要使用的插件。这里的重点是不要以一个大而糟糕的差距结束。
您不想发现您没有一种简单的方法来处理某个功能。如果发生这种情况，以后，您可能不得不回头从头开始重新考虑整个方法。
第 2 步：品牌推广
处理您的品牌元素可能是整个网站设计过程中最有趣的部分！
我们都喜欢选择一个名字，比较不同的颜色选项、字体，最重要的是，设计一个标志！没有什么比早上看一些标志更让人感觉好了，尽管我可能太忘乎所以了……
好，让我们把事情系统化一点：
首先选择名称和域
您的域名几乎决定了其他一切。
- 您不希望最终得到的域名与您的产品或公司名称明显不同。
- 您不想被迫选择奇怪的 TLD（域名扩展名）只是为了能够使用您的公司名称。
- 您不想获得一个容易混淆的域名。例如，rosas.cafe 与 rosascafe.com.两者都是现有的网站，是的，两者都指向不同的咖啡馆。
首先列出您想到的所有名字，并将其作为您域名搜索的种子。
您可以通过 Lean Domain Search 检查哪些名称可用，它还将通过在您的助记词中添加各种单词来建议一些其他域选项，或者通过 GoDaddy，它在标准.com之上有大量 TLD 可供选择。
在这个话题上，不要忘记您现在可以利用现代 TLD，例如 .blog、.city、.art、.design、.store，只要它们符合您网站的用途。
看到您喜欢的域后，请立即注册它。此外，如今，持有域的所有可能 TLD 版本并不那么重要，因此您不再需要获得 SITE.net、SITE.org 等。
定义您的品牌标识
这是关于您的品牌颜色、字体和所有相关事物。
如果你对这些事情有信心，并且拥有一些人所说的 “视觉肌肉”，那么你可以着手自己进行品牌识别。如果没有，请帮助自己使用 Freelancer 或 Fiverr 的专业人士的服务。
这里的最终产品（至少）是您将在网站上使用的配色方案。现在拥有配色方案和您的品牌标识将使网站上的所有进一步工作更加简单。
获取 logo
如今，设计专业标志甚至通过在线工具生成专业标志真的很容易。
- 如果您想在您的徽标上进行专业工作，请访问 99designs、LogoContest 或 Freelancer。
如果您想自己使用一些在线工具，请尝试 Looka 或 Hatchful。
第 3 步：网站复制
大多数人将他们的网站副本留到最后。这不是一个好主意。
如果你不在早期阶段创建页面的书面内容，那么你就会使进一步的网页设计步骤变得更加困难。
如果没有明确定义的内容，构建设计并确保内容适合将变得更加困难。你基本上在做太多的 “稀薄设计” —— 设计时没有任何事实可以实际放在页面上。这就是您最终得到一个看起来很棒但完全不实用的设计的方式。
为您的必备页面创建内容
看看竞争对手在做什么，并尝试在一定程度上模仿它。使用人工智能来帮助启动您的写作过程。
试着想想你将如何构建页面以及你将具体放置内容的位置。
不确定如何开始？查看我们的网站模板目录并从中汲取灵感。浏览您喜欢的设计和页面，并考虑您可以将自己的内容放在那里。
在执行此操作时，请记住每个页面的主要网站目标和子目标。
考虑您的主页
您的主页是您网站上最重要的页面。它很容易成为最受欢迎的页面，也是在将访问者引导至网站其他区域方面为您提供最大杠杆的页面。
列出您希望在主页上展示的元素，并考虑要显示它们的位置。
同样，您可以通过网站模板以及您的竞争对手和您喜欢的其他网站来激发自己。这就是您之前记录的所有这些笔记发挥作用的地方！
使用占位符内容
您不需要现在就 100% 准备好最终形式的每条内容。有些事情可以稍后填写，在这个阶段不必拖累您。
您可以将占位符内容用于以下各项：
- 单个产品描述（如果它们对网站结构不重要）
- 您的结帐页面和其他电子商务相关页面的内容
- 博客文章
- 联系信息
- 菜单
- 社交媒体链接
第 4 步：网站结构
您的网站结构不仅仅是在单个网页上可以找到的内容。这是关于所有这些页面如何相互连接，以及它们如何将访问者从一个地方带到另一个地方，帮助他们做他们想做的事情。
简而言之，想想 UX（用户体验）。更具体地说，您希望访问者能够在您的网站上做什么？您想为他们提供什么样的体验？
用户体验谈话基本上都归结为你的目标和访问者的目标，这可能并不总是一回事。
从您之前为网站设置的目标开始。您将构建网站的结构，并始终回到该目标。想一想，“那个网站结构是否适合我想要实现的目标？
使用 Web 标准
Web 标准是您的朋友！
Web 标准的出现是有原因的。像右上角的购物车图标或顶部栏中的标志之类的东西，不应该为了原创而放弃。没有人会因为你的原创性和违背 Web 标准而钦佩你。更有可能的是，他们会因为在习惯看到的地方找不到他们想要的东西而感到沮丧。
将明显的东西放在明显的地方。
研究页面的链接方式
您的网页链接在一起的方式不应该是偶然的。良好的网站结构首先要决定哪些页面将引导至哪些其他页面，以及访问所有这些页面的难易程度。
从你的目标开始（惊喜！），并努力减少从主页到实现该目标所需的点击次数。
换句话说，访客需要多少次点击才能购买您的产品？
一种常见的做法是以保证在三次或更短的时间内从一个页面到达任何其他页面的方式构建您的网站（不包括非公开结帐页面）。
点击超过三次，您的访问者就有可能无法掌握发生了什么。更糟糕的是，谷歌也可能面临类似的问题; 对 SEO 不利。
此外，不言而喻，您的主页应始终与您的徽标链接（结帐页面除外;您不希望人们离开这些页面）。
构建您的菜单和导航
上一步将引导您巧妙地处理菜单，以及如何以一种更容易浏览网站的方式构建它们。
拿出你的网站结构图，寻找需要从哪里访问哪些页面的相似之处。基于此，将公共链接放在一起并将它们分组到菜单中。与往常一样，您可以了解竞争对手在网站导航方面的作用。
另一个挑战是决定将菜单放在页面本身的哪个位置。一些选项：
- 最重要的菜单位于标题中 – 这是一个 Web 标准。
- 页脚菜单通常是您的第二菜单。每个重要的链接都应该在页脚的某个地方找到。
- 与页面相关的菜单可以放在主 head 菜单的下方或侧边栏中。
关于最后一件事，什么是“页面相关”菜单？想想链接到你的博客类别或标签之类的事情。这些链接不需要出现在每个页面上。它们将成为博客列表页面上最有用的。
完成所有这些后，您现在可以开始处理所有页面的实际外观。
第 5 步：模型
模型是设计的模型。它基本上是空白屏幕和最终设计之间的中间步骤。
使用模型与跳过模型阶段并从一开始就在您选择的页面构建器中进行设计的好处是，您可以花一些高质量的时间专注于更大的图景。
这使您可以确保您的页面结构遵循正确的原则，并且您的目标得到足够的关注。使用模型，您将创建基架，您将在该基架的基础上在流程的后期构建您的设计。
这样，您就不会直接投入到设计的精细细节中。如果你要这样做，你可能会落入一个陷阱，花太多时间对单个设计元素进行像素完善，而不从更大的角度看待所有这些元素如何让你更接近你的目标。
我们建议在 Moqups 或 Mockplus 等工具中制作您的模型。
Moqups 是一个 Web 应用程序，可让您创建线框和模型并在线协作。该应用程序包括图标集、图形、图像和模板，均可随时使用。
您可以免费开始，但高级计划就是它所在的地方。
Mockplus 也类似。这是一款专为线框图构建的 Web 应用程序，可让您在云中快速勾勒设计大纲、完善想法和协作。该应用程序包含范围广泛的资产，并且非常易于使用。
Mockplus 也有一个免费选项，但您需要一个高级计划来释放其全部潜力。
当涉及到模型本身时，您应该确保：
- 专注于您的目标和访问者通过网站获得的体验
- 请记住，在模型框架中，您只需规划页面的结构 – 要放置什么，以及它们应该如何相互连接
- 采取鸟瞰图，不要深入设计的细节
- 保持简单
为每种页面类型构建模型
并非您网站上的每个页面都是 100% 原创的。有些页面看起来非常相似 – 只是内容不同。因此，您要做的不是为所有页面创建模型，而是为所有页面类型创建模型。
在大多数情况下，您需要为以下对象创建模型：
- 主页
- 关于页面
- 产品页面
- 其他需要原创设计的关键页面 – 例如登录页面
- 博客文章列表
- 单篇博文
- 标准页面 – 不需要任何重要设计元素的通用页面
当谈到如何制作模型时，您不必太强调。只需关注以下原则：
- 将主要导航元素放在适当的位置（Moqups 等工具提供了一组常见的网站元素，您只需将其拖放到位即可）。
- 以目标为先。将关键内容放在首屏。确保每个页面上最明显的元素使您的目标成为可能，并且它们易于掌握并且不会以任何方式让访问者感到困惑。
- （再次）浏览竞争对手的网站。执行此操作时，请将浏览器缩放比例缩小到 50% 或更小（在 Chrome 中，按 CMD 和 –在 Mac 上，或在 PC 上按 Ctrl 和 –）。这将使您能够更广泛地了解页面的结构，而不是它们的各个设计元素。
- 以黑白方式构建您的模型。这将大大加快速度。
步骤6：设计与开发
最后，是时候动手构建一些网站了！
在这个阶段，道路几乎是由之前的所有步骤设定的。你有你的目标。你知道你的观众是谁。你知道谁是竞争对手。您已准备好模型和导航结构。您有自己的品牌标识、配色方案和徽标。现在是让所有这些事情发挥作用的时候了！
有几种方法可以完成此任务：
- 从头开始手工制作
- 使用页面构建器和 WordPress 的框架主题
选择 Avada 的主要好处是您无需进入源代码即可构建您的设计，此外您还可以从一系列预构建的网站中进行选择。这些入门模板不是在Avada 的任何任意界面中构建的，而是在流行的页面构建器中构建的，因此您仍然可以使用自己喜欢的此类构建器。
撇开设计不谈，这也是您将安装之前列出的所有插件并确保它们正常工作的阶段。
幸运的是，由于 WordPress 非常流行并且是一个相当先进的在线工具，我们几乎没有看到它的核心功能或 WooCommerce 等插件的核心功能有任何严重问题。换句话说，您的订单可能会正常工作，因为在您之前已经有成千上万的人测试过它们。
不过，请确保花足够的时间测试对您的目标至关重要的要素。
此外，请检查您的网站是否适用于台式机、平板电脑和移动设备。不仅要通过来回调整浏览器窗口的大小来测试事物，还要使用一些实际的平板电脑和不同的手机来查看您的网站外观。如果您想更进一步，请使用像 LambdaTest 这样的工具——一个很棒的跨浏览器测试工具。它有一个免费计划。
第 7 步：上线
是时候让您的网站对公众可见了！
首先 – 无聊的部分 – 在最终生产服务器上安装你的网站。此外，如果您还没有挂接域名，请挂接域名。
如果您一直在本地开发您的网站，那么您可以使用像 Duplicator 这样的插件将其移动到生产环境中。一些主机还提供自己的迁移服务或建议使用特定的迁移插件。最好坚持这些建议。请查看您的主机文档。
完成后，是时候进行一系列最终检查，并确保您的网站为成功做好准备，并且不会遗漏任何重要事项。这让我们想到：
调整和改进
您永远不会 100% 完成您的网站开发或设计。总有改进的余地，但不幸的是，在你让你的网站运行一段时间之前，你无法做到这一点。
在网站在线生命周期的初始阶段，获取有关用户如何与之交互的数据，甚至在可能的情况下从这些用户那里获得一些直接反馈。您可以通过在网站上设置民意调查/调查来做到这一点。有不少插件可以做到这一点。
将此版本的网站视为第一阶段 – 这是“我能用我拥有的数据做到最好”的阶段。
接下来是第二阶段 – “根据我从用户那里得到的意见，我能做到最好”的阶段。第二阶段是回到你的主要目标，看看实现这些目标是如何进行的，以及你可以做些什么来改进事情。
幸运的是，有了页面构建器等工具，进行任何设计更改甚至整个页面大修都不会非常耗时。相反，您可以在几分钟内重做几乎任何页面结构或导入一个全新的页面结构。
做！
恭喜，您刚刚学习了我们从空白到深思熟虑的网站的 7 个步骤，为成功做好准备。我们希望本指南能帮助您快速启动您的网站项目！
回顾一下，以下是所有步骤，以易于扫描的形式再次出现（单击任何给定的步骤可滚动到它）：
- 目标设定
- 品牌
- 网站副本
- 网站结构
- 样机
- 设计和开发
- 上线
发表回复