本周到目前为止，我们已经向你展示了 如何建立网站。现在，我们将研究如何为您的互联网小角落策划完美的设计。在本文结束时，您将了解如何执行以下操作：

从头开始创建网页

网页设计

如何测试网站框架

如何创建网站原型

如何将您的品牌应用到您的网站

开始之前 – 考虑你的时间和目标

在本节中，我们将详细介绍网站设计，从早期布局草图到最终成品。认识到创建大型、高质量的网站是一个耗时且反复的过程非常重要。

这个过程现在就开始了，但会永远持续下去。网络是一个不断变化的领域，预计它会继续发展。随着您随着时间的推移提高网站的性能，或者更改网站目标以应对市场的变化，您将始终致力于网站建设。

要想快速启动和运行某项功能，你需要非常有策略性地选择先做什么。你不需要立即启动所有内容。回顾你的目标，并概述实现这些目标的最小网站是什么样子—— 最小可行产品.

现在，集中精力实现这一目标。如果你太快、太大胆，你最终会陷入困境数周。要明智地选择要承担的工作。

也许您本周所能实现的只是建立一个带有原型徽标和“即将推出”文字的单页网站！这绝对比什么都没有要好，而且可以让您以后进行扩展。

建立网站似乎是一项艰巨的任务，但当您规划网站时，您会意识到哪些页面对于发布来说是绝对必要的，哪些页面可以稍后添加。最好创建一个较小的高质量网站，而不是创建一个包含大量包含糟糕或缺失内容的页面的大型网站。一开始就删掉这些额外的页面不会有任何损失。网站预计会随着时间的推移而发展和变化，您可以在发布后轻松扩展您的网站。

规划网站页面

当您开始构建您的网站时，您需要考虑的第一件事就是使用哪些页面来启动您的网站以及如何将它们链接在一起，以便用户可以轻松找到您创建的内容。

导航非常重要。如果访客无法快速找到他们想要的东西，他们就会像来时一样迅速离开！

解决这个问题的办法通常是在用户向下滚动时让导航栏锁定在页面顶部。95% 的网站的导航栏位于顶部，在移动网站上时会折叠为图标。因此，选择正确的顶级页面放在此导航栏中至关重要。您不一定希望每个页面都链接到顶部，因为这会导致导航栏很快变得混乱，妨碍导航。

如果您的网站确实需要很多页面，即使从启动开始，您也需要将它们分组到类别中，并将它们嵌套在导航栏的下拉菜单中。您会在时尚网站上多次看到这种情况，这些网站将大量产品分为多个类别。他们通常使用宽敞的下拉面板来容纳这种情况。最好的例子是设法清晰地显示大量选项，而不会变成菜单中一堆杂乱无章的菜单。如果您正在计划一家时尚企业或任何拥有多种产品的企业，那么值得在这里花大量时间进行正确的导航。如果人们找不到您的产品，他们也无法购买它们。

参考您的市场调查来了解您的访问者通过访问您的网站可能想要实现什么，并尽可能快速地让他们到达那里，并且减少他们的困惑。

您的市场调查还应有助于指导您网站的总体设计。

网页设计

从头开始设计网页时您必须考虑的事情之一就是设计。

上周我们讲解了如何创建情绪板，以帮助建立品牌的外观和感觉并收集灵感。您应该再次借鉴这一点来设计您的网站。您甚至可以创建一个专门用于网站灵感的情绪板。同样，有很多资源展示了令人难以置信的网站设计。

以下是一些可帮助您完成此过程的资源：

Abduzeedo 网站文章

Dribbble 网站示例

Behance 网站示例

Pinterest 网站示例

网站线框图

无论您是创建单页登录网站还是大型电子商务商店，线框图都是设计中常见且极其有用的步骤。

它允许您快速尝试布局，而无需进行高质量的设计。线框图可以用笔和纸完成，该过程涉及使用线条和框模拟每个网页以指示可以放置内容的位置。这允许您快速生成布局并想象页面的流程，而无需花费大量时间。使用它来考虑您的号召性用语 (CTA)、图像、文本块和导航的位置。

网站原型

这是您在构建网站时可以采取的额外步骤。这比听起来容易得多，因为它不需要任何编码，因为有很多应用程序可以让这个过程变得快速而简单。

这个想法是将您的线框数字化（您仍然可以使用文本和图像的占位符）并使用原型软件将它们链接在一起，以便您可以更清楚地感受到网站的流程和导航。

您可以在 Photoshop 等图像软件中创建线框布局的灰度静态图像，然后将其上传到这些原型网站。然后，这些网站将允许您将多个原型链接在一起，以创建您可以预览和测试的网站模型。

许多这样的应用程序可以让你直接在软件内部进行设计：

视觉应用

Proto.io

Axure

成帧器

奇迹应用

您可以开始使用原型来确定将信息放在何处才能最有效。当您用真实内容替换占位符内容时，请确保它正在努力实现您的策略。当有人到达您的目标网页时，他们会在几秒钟内确切地知道您的业务是什么吗？网站是否会迅速引导他们执行您希望用户完成的操作？

当然，这与消息本身以及它们在页面上的位置和显示位置同样重要。

品牌网站设计

一旦你确定了理想的布局，设计自然会由你的品牌来实现。你需要将上周完成的工作应用到你的网站上，因为一致性是建立品牌的关键。你的网站需要看起来符合要求，并适合你的其他营销活动和沟通。

您选择的品牌图像对于创建具有吸引力和吸引力的网站至关重要。高质量的图像对于确保您的网站在多种不同尺寸下看起来清晰至关重要。模糊的图像会给人留下不好的第一印象。

您在品牌周设计的徽标应该是您的第一选择。确保它在您网站的每个页面顶部都可见。许多网站会将其嵌入到顶部导航菜单中，该菜单可能在每个页面上都有。您还可以使用徽标进行导航，单击即可返回网站主页。

品牌颜色位置

将品牌配色方案应用到您的网站可确保您的品牌清晰地呈现，仅此一点就足以让您的网站一眼就能被识别。您的主要品牌颜色应在整个网站上保持一致。

以下是使用主要品牌颜色的常见地方：

导航标题

顶部横幅背景颜色（如果有主色调，请小心）

页面标题和副标题

文本超链接

按钮颜色 - （尽管您可能希望选择对比色以使您的 CTA 脱颖而出）

颜色图标

叠加在库存照片之上

您可以以类似的方式使用次要颜色来创造趣味、变化和对比。只需保持一致的应用方法即可。请记住，您可以使用原型设计软件进行尽可能多的实验。测试变化并迭代设计是快速获得满意的最终设计的关键。

选择正确的图像

为您的网站挑选精美的图形应该利用我们在第 8 周描述的如何创建的品牌资产。以下是将它们应用于您的网站的一些进一步提示：

确保你选择的图像与你写的文字相得益彰。它们应该支持你想要传达的明确信息。

在图片上放置文字时要小心。这会影响可读性。在顶部应用强调色可以减少背景噪音。

大图像会影响加载时间。如果是这种情况，您可以随时将其保存为 jpeg 以压缩文件大小。

避免使用看起来太普通或假冒的商品。这非常明显，会损害您网站的信任度和真实性（稍后会详细介绍）。

不要过度使用图像。图像非常强大，如果过度使用可能会分散注意力。记住您的网站目标，确保每张图片都有其作用，并且不会妨碍它们。

关注网站

网页设计的另一个关键要素是如何编写和呈现内容，以便人们真正花时间阅读。在主页上写关于产品的文章是行不通的，也不够吸引人。

通过使用清晰的 Web 字体以及良好的对比度、大小和间距，可以解决部分问题。如果您使用内置于网站平台的主题，那么有很多主题自然具有出色的可读性。然而，这只是成功的一半。阅读疲劳，尤其是在屏幕上阅读，是非常真实存在的，您需要巧妙地确保以真正能被阅读的方式编写和定位文本。

请遵循以下准则：

确保您的副本清晰并且避免产生歧义。

保持句子结构简单。避免使用复杂的单词和组合。

快点进入正题吧。

将大量文本分成具有自己标题的单独、较小的块。

不要试图一次传达太多信息。确定每个文本块要传达的要点并坚持下去。

使用图像和文本来鼓励人们阅读。

使用空白！在内容周围留出足够的空间（填充），以免内容拥挤。

如何确保构建适合移动设备的网站

您的网站在手机和平​​板电脑上顺畅运行非常重要，因为现在很多人都通过这些设备消费内容。如果您不满足这一点，Google 实际上会在搜索中惩罚网站！

幸运的是，现在这很容易做到。网站平台附带的大多数标准主题都应使用“响应式”设计。这意味着随着屏幕宽度减小，内容将自动调整以适应新尺寸，完美！

不过，还是值得检查一下您使用的图像和视频在缩小后是否仍然可见，文本是否仍然可读。如果您没有几种不同类型的平板电脑和手机，您可能想知道如何检查这一点。嗯，最快的方法是抓住浏览器的左边缘或右边缘（确保它不是全屏），然后将其向左或向右拖动以放大或缩小窗口。您会看到您的网站内容在执行此操作时进行调整，因此您可以分析不同尺寸的布局。还有一种更精确的方法，即使用 Chrome 浏览器内置的工具：

右键单击您的网页

点击“检查”（这将打开一个面板）

这个新面板的左下角有一个屏幕和电话的图标（切换设备工具栏）

单击此图标

现在，顶部有几条灰色条，可让您模拟浏览器在特定分辨率下的外观。甚至还有一个下拉菜单，用于选择流行的手机/平板电脑及其使用的分辨率。太棒了！

无论您选择自己建立公司网站还是聘请代理机构为您建立网站，设计网站都会产生大量费用。您不仅需要支付域名、托管费用以及您选择的任何网络平台的费用，还需要支付持续的网站维护费用。

如果您聘请设计机构为您设计网站，那么这对您的初创公司来说将是一笔不小的成本。您应该考虑您的资金是否足以支付这笔费用，或者自己设计是否更便宜。正如我们在过去几篇文章中所展示的那样，建立一个网站比您想象的要容易得多。虽然这两种设计网站的方法都有成本，但您需要确定哪种方法更适合您。

开始你的免费试用

总结

设计网站时，请考虑如何展示您的品牌。您的网站很可能是客户对您的品牌的第一印象之一。这意味着，正确传达信息至关重要。您还需要确保您的网站易于使用，并且可以在各种设备上使用。在移动设备上看起来不太好的网站可能会导致用户离开。

回顾您的策略并思考如何使用您的设计来鼓励您的用户按照您希望的方式浏览网站以实现您的期望目标。

设计并启动您的网站后，您就会想检查它是否真正达到了其目的。