如何为新产品构建网站（以及我们如何制作网页）|

如果您还没有创意简报，请从此处开始。一份创意简报概述了你打算如何谈论你的产品或公司。它定义了你的品牌的声音，你的调色板，价值声明，等等。您的创意简介定义了您的网站将如何与客户进行沟通。

如果您已完成徽标开发流程，您可能已经撰写了一份创意简报。如果是这样，你可以重复使用你的网站。如果您还没有制作出创意简报，现在是编写一份创作摘要的时候了。

幸运的是，我已经撰写了一篇详细文章，教您如何做到这一点，其中包括Outpost创意简报的例子，所以你可以看到我们是如何建造我们的。因此，如果您需要处理您的创意简介，请查看我的文章，了解我们如何开发我们的徽标及其创意摘要，然后在准备就绪时再返回。

创建网站地图

手，你会开始在你的网站地图上工作。网站地图只是一个大纲，列出了您计划在网站上包含的所有网页（包括其目的和目标）。

以下是我们为Outpost开发的网站地图：

1. 1. 主页：产品概述和一个“号召行动”来申请免费试用。描述要素的其他页面的次要链接
   2. 要素概述：包含指向详细要素页的链接的所有要素的概述
      1. 要素A的要素详细信息：要素A的详细信息
      2. 要素详细信息功能B：功能B的详细信息
      3. 重复所有功能

• 定价：定价计划的详细信息和注册免费试用的链接
• 客户： 成功客户简介
• 关于我们： 关于我们是谁，我们的使命声明和我们的历史概述
• 联系我们： 联系信息，小时，地点
• 工作： 我们当前职位空缺的列表
• 隐私声明： The Outpost隐私政策
• 博客： 列出最近博客帖子的博客主页
• 博客文章： 将会有多篇博文。
• 帮助中心： 我们的帮助中心将由Zendesk提供支持。

当然，您的网站可能会与Outpost网站地图非常不同。例如，如果你是一家餐馆，你可能会有一两页菜单和一页预订。如果您正在建设网上商店，则可能会有许多不同的产品页面。

您的站点地图文档尽可能地符合您的网站所包含的内容。这一小小的规划将使网站规划和开发的其他部分更加容易，所以在这个早期阶段值得投资。

在设计前写下你的副本

你会认为我没有这里没有订单。你不应该在设计你的网站之前，先考虑你要在页面上输入什么词语吗？事实上，更好的方法是将事情“落后”，首先考虑你的网站复制，然后设计该副本。为什么？因为你想与你的客户沟通比你的网站的实际最终设计重要得多。当然，这个设计很重要，你希望有一个看起来不错的网站，但是如果你不能将你的关键信息传达给你的用户，一个好的设计不能弥补差异。

先写你的拷贝还可以帮助您和潜在的设计师了解每个页面试图进行通信的内容。这会产生更好的设计设计，加强您的消息传递。即使你要使用Squarespace这样的工具自己构建网站，在选择设计之前了解每个页面需要说的内容将会是一个很大的节省时间。

当设计出现时，您可以需要优化你的副本，以确保事情合适，但这比为你的消息传递设计编写副本要容易得多。

对于你的主页，你可能需要一个标题准确描述您的工作 - 您的客户的关键价值主张。

以下是我们正在构建的产品Outpost的标题和扩展说明：

简化您的共享电子邮件

轻松跟踪，协作，并回复发送到通用电子邮件地址的消息，如支持@或info @。

从那里，您将包含在您的主页上的副本确实取决于您所在的公司类型，您的客户是，而且你需要沟通

对于Outpost，我们需要传达我们产品的主要特点和优势，并鼓励潜在客户了解更多信息。我们也想谈谈我们的客户服务团队，他们有多棒。

但是，这可能不适合您的主页。如果你是一家餐厅，也许你想要链接到你的菜单或有关预订的信息。每个公司都是不同的，所以找出你需要说的然后写下来。

不过，不要担心从空白页开始。相反，想出您的行业中您最喜爱的网站列表，并考虑您喜欢和不喜欢的每个网站。他们使用什么样的导航？他们包括哪些页面？他们使用什么样的图像？您不需要重新发明轮子，并且使用喜欢的站点作为跳板点是开始的好方法。

最后提示：

通常更少。不要试图为您的网站编写无尽的副本段落（除非您的客户期望这样做！）。如果你注意你如何使用网站，你会发现你经常浏览文本，而不是阅读每一个字。因为这就是大多数人阅读在线阅读而不是阅读每一个字的原因 - 保持你的副本简短并且重点。 开发线框

线框是您网站的粗略布局。这完全不是一个真正的设计。它是一个大致显示页面内容的位置的文档，不需要考虑颜色或其他图形。

如果您正在与设计师一起构建网站，他们会为您制作一个线框，作为设计过程。如果你自己建立你的网站，使用Squarespace或Shopify等服务，你可以轻松地自行建立一个线框。

不要被这一步吓倒。您不需要任何特殊工具来构建线框。一张纸和一支笔就足以勾画出您网站的每一页。请记住，你不是“设计”，线框不一定非常漂亮。它只需要传达页面上哪些内容。

如果您需要灵感，请查看您喜欢的其他网站，并查看它们如何在每个网页上构建信息。从其他站点借用布局并为您自己的站点寻找灵感是完全正确的。

如果使用笔和纸不是您的事情，则可以使用PowerPoint或Keynote创建线框。还有像Balsamiq这样的专用线框图工具，可以简化这个过程。

我已经在下面包含了Outpost的主页线框，以便您能够了解线框的外观。您还可以查看我们在上一步中创建的副本以及想要设计师创建的图形元素的构思草图

我们的Outpost线框

设计和构建

现在终于到了实际设计和构建网站的时候了。如果你使用的是自由设计师或设计公司，他们将从这里接管过程。但是，假设你和大多数人一样，你可能自己在做这件事，并希望控制成本。如果这听起来像你，你需要选择一个平台来设计和托管你的网站。

首先，考虑你的需求。你只需要一个简单的单页网站？你想包括一个博客吗？你会在网上销售你的产品，需要像购物车那样的东西吗？有几百种可能的选择，但我会列出我最喜欢的几个，所以你不要太陷入困境，选择一个平台您的网站

WordPress：这是一款适用于任何简单网站的优秀，低成本平台。有很多设计选项，你可以免费开始。如果您计划在网上商店购买大量产品，我不会推荐WordPress，但对于基本的信息网站和博客来说，这是一个不错的选择。成千上万的网站使用WordPress，所以你不能选择太多的错误。而且，如果需要，还有一些选择可以将商务功能添加到您的网站。

Shopify：

如果您在网上销售商品，Shopify是一个很好的选择。您可以在此平台上运行整个在线商店，并获取管理产品，库存等所需的所有后端工具。

• Squarespace：
• Squarespace是所有交易的支柱。您可以使用它创建从博客到在线商店的所有内容。凭借精美的设计模板和无尽的灵活性，这也是一个很好的选择。 对于Outpost，我们的情况稍有不同。作为一家现有公司，我们有一位内部设计师和一些正在我们网站上工作的工程师。但是，如果不是这种情况，我可能会选择WordPress或Squarespace来构建我们的网站。
• 测试和迭代 一旦您的新网站启动并运行，工作就没有完成。事实上，这只是开始！你可能不想听到这个消息，但是现在你的网站已经存在了，你需要弄清楚你写的这个副本是否真的有效。您的副本是否让客户做你想让他们做的事情？找到正确的设计和复制将增加您拥有的客户数量，并确保您充分利用每一位前来您网站的潜在客户。

为了全面了解这一点，您需要运行一些测试。这被称为A / B测试。这就是当你将当前网站（A版）与另一个版本（B版）相提并论。然后，您会测量哪个版本性能更好。您可以通过增加销售额，增加对您业务的呼叫或仅让客户点击其他页面来衡量成功。

我不会在这里详细介绍A / B测试，因为这是另一天的深入主题，但我会告诉你，你需要一些额外的工具来完成测试。

I建议转换实验或视觉网站优化。两者都是可靠，实惠的选择，使测试变得简单。

您还需要确保您已安装Google Analytics（分析）这样的分析工具（免费！），以了解访问您网站的人员以及他们的内容如果您有任何关于让您的网站正常运行的其他问题或意见，请不要犹豫，在评论中询问我。