我和 Sara Mote 共同创立了 MOTE 机构，成立于 2014 年。我们专注于电子商务领域，为不断变化的市场提供精致的设计、尖端的技术工程以及最高水准的服务。在我作为网页开发人员的职业生涯中，我培养了创新的渴望，并专注于为希望与受众建立持久关系的品牌打造网站。以下是我从 26 年经验中汲取的一些见解。
设计一个网站有多容易取决于你自己：你不必是专业的网页设计师或开发者，就能为你的品牌创建一个出色的网站。借助拖放式网站构建器、基本的网站主题以及对目标受众需求的理解，你可以自己动手打造一个美观且直观的站点。
继续阅读，了解如何自行设计网站，并在过程中获取一些网站示例以激发您的灵感。
如何设计网站
- 头脑风暴
- 选择平台和模板
- 做出品牌决策
- 开始自定义您的模板
- 创建基线网格
- 添加内容
- 建立跨渠道的一致性
- 测试与衡量
- 知道何时引入专业人士
你构建网站的具体步骤将取决于你所创建的网站类型以及所使用的网站建设平台。以下是一些几乎适用于所有拖放式网站建设器的基本准则：
1. 头脑风暴
网页设计过程的第一步是退后一步，思考您希望网站传达的信息以及您希望访客采取的行动。了解网站的核心目标将帮助您确定最佳呈现这些信息的方式。
考虑以下问题以引导您的头脑风暴：
- 受众：这个网站面向谁？您将如何与目标受众建立联系？
- 灵感：寻找你喜欢的一些现有网站的例子。你喜欢它们的哪些方面？
- 内容：你需要哪些内容来讲述你的故事？文字？图片？视频？
- 优先级：用户将在你网站的哪个部分花费大部分时间？是你的产品系列？博客？还是主页？
在回答这些问题时，请思考如何在每个网页上为用户提供所需的信息，同时避免让他们感到信息过载。这听起来可能有些老套，但一个有效的方法是将自己从屏幕前移开，采用纸笔这种传统方式。绘制一些粗略的草图，展示您希望网站的外观和感觉，重点关注您预计用户将花费大部分时间的区域。
2. 选择平台和模板
有了您的纸笔草图，您应该对网站所需的功能有了清晰的了解。这一步将帮助您更轻松地选择一个网站构建器以及拖放式设计模板。
例如，如果您想创建一个在线商店，Shopify 免费的 Dawn 主题是一个适合初学者的起点。Shopify 是一个一体化平台，这意味着 Shopify 订阅服务提供域名、网络托管、网站构建器、支付处理等您需要的所有在线销售功能。
需要为电子商务以外的内容创建网站吗？内容管理系统 WordPress 在博主中很受欢迎，而 Wix 是快速创建作品集的可靠选择。比较不同网站构建器的功能、成本和可用主题，以找到适合您和独特需求的无代码网站设计工具。
3. 做出品牌决策
如果您已经有品牌指南，那么您已经领先一步。如果没有，那么在开始自定义网站模板之前，您需要做出一些品牌决策。无论您是创建电子商务网站还是个人作品集，保持字体和颜色的一致性都会为您的网站增添个性和可信度。
字体
首先选择品牌的字体。选择一个易读的正文字体。对于标题字体，可以有更多的实验空间，但单词仍然应该可识别。
你的字体选择可以传达情绪和个性，同时为你的网站建立框架。正文字体会帮助确定网站的网格——行间距、列宽以及水平和垂直内边距，从而在网站中营造出节奏感。
尽量减少字体选择，以避免网站体验过于杂乱。初学者应最多使用两种相互搭配的字体：一种用于标题，另一种用于正文。
配色方案
在确定字体后，你可以继续设计配色方案。为了获得最佳的可读性，黑白配色方案通常是最优选择。但即使在这个色调范围内，仍有品牌塑造的空间：米白色可以呈现温暖或冷峻的质感，而炭灰色可以替代纯黑色，带来不那么严厉的感觉。
无论你为品牌调色板选择哪些颜色，明智的做法是使用高对比度的颜色以提升网页无障碍性。复习一下色彩理论会有所帮助，这样能更清楚地了解哪些颜色搭配效果最佳，以及如何通过色彩心理学唤起不同的情绪。
4. 开始自定义你的模板
同一个模板可以以无数种方式设置。根据你选择的字体、颜色和其他选项，它的外观可以完全不同。许多网站构建器（包括 Shopify）都能够将颜色、字体和标志等品牌决策自动应用到整个网站。如果你的构建器提供此功能，那么从无代码网站定制开始是一个很好的起点。
5. 创建基线网格
构成网页布局基础的垂直和水平参考线被称为基线网格。使用网格布局有助于创建统一的视觉层次结构，并为放置网站不同元素提供大纲。您的基线网格应与正文字体的高度相对应，因此在此步骤之前选择字体非常重要。
您的网站模板可能具有默认网格，如有需要可以进行修改。如果您使用的是拖放式网站构建器，您应该能够预览对模板所做的更改。在调整网格时，请检查其在桌面设备和移动设备上的显示效果。如果您的网站具备响应式设计（这内置于 Shopify 主题中），列数会根据用户的屏幕宽度自动减少。如果您的大多数网站访问者来自移动端，您可能希望将默认预览设置为移动端，以简化设计过程中的这一步骤。
6. 添加内容
根据您的纸笔草图，开始向您的品牌网站模板中添加内容。
网站内容通常应包括以下元素：
- 用户友好的导航菜单
- 英雄图像（如照片或视频）
- 品牌化的网页文案（包括关于页面）
- 产品页面（如果是电子商务业务）
- 联系信息
当您在网页中添加内容时，您可以确定顶部和底部的内边距——即元素之间保留的空间大小。在整个网站中使用相同的内边距数值（或这些数值的倍数），可以在访客浏览您的网站时营造出一种垂直节奏感。
7. 建立跨渠道的一致性
如果您的网站链接到其他平台，重要的是要考虑跨渠道的协调统一。
例如，假设您的社交媒体品牌风格与您的网站品牌风格完全不同。如果有人通过社交媒体账号找到您的网站，他们可能会因为这种不一致而感到用户体验混乱。在这种情况下，即使您的网站美观且功能完善，但平台间杂乱无章的品牌形象可能会削弱受众对您品牌的信任。
但是，如果您在各平台上建立了连贯的品牌形象，您将创造更一致的用户体验 (UX)，无论受众在何处接触到您的品牌。
8. 测试与衡量
每当您对网站进行更改时，例如添加视频或第三方插件，请检查这些更改如何影响您的核心网页指标。核心网页指标是衡量网站运行状况的指标，例如加载所需的时间。核心网页指标不仅对用户体验（UX）很重要，它们还是搜索引擎优化（SEO）的关键组成部分，因为搜索引擎会降低核心网页指标较差的网站的优先级。
如果您在每次更改前后都检查核心网页指标，就能确切知道哪些网站元素可能导致性能问题。这些数据将赋予您信心，使您能够做出适当的更改。
9. 知道何时寻求专业人士的帮助
如果您最终决定聘请一位网页设计师来进一步定制您的网站，您在网页设计过程中最初的DIY经验将在这一合作中派上用场。您使用网站模板的实践经验将帮助您阐明其中缺失的部分，并提供与专业设计师更好沟通所需的语言，这将有助于双方更高效地实现愿景。
电子商务网站设计示例：Klur
护肤品牌 Klur 是极简主义方法如何带来强大网站体验的一个绝佳例子。Klur 的网页设计选择营造出一种宁静的氛围，让网站访客进入奢华自我护理仪式般的放松心态。
Klur 在各个环节协调其品牌标识。例如，它在产品包装和网站上均使用单一字体的变体。如果您的品牌不涉及产品包装，请考虑其他创造跨渠道和谐统一的方法，比如在您的名片、电子邮件签名和网站中使用相同的字体。
编辑类网站设计示例：Unconditional Magazine
Unconditional Magazine 的数字版与其印刷杂志相呼应，在情感层面吸引观众的同时营造出视觉上的轻松感。清晰的导航菜单使您能够轻松找到所需内容，但如果您有探索的心情，只需向下滚动即可浏览精选的图片集，链接至往期杂志。
在主页上使用大型主图是将访问者立即沉浸到您的品牌世界中的绝佳方式，无论您的行业或业务目标如何。定期更换主图也是刷新网站的一种简单方法，而无需更改任何核心品牌标识或功能。
如何设计网站常见问题解答（FAQ）
我如何自己设计网站？
您可以使用像 Shopify 这样的拖放式网站构建器，无需任何编程知识即可设计自己的网站。Shopify 提供数百种主题，您可以根据需要进行自定义。
建立一个网站需要多少钱？
建立网站的成本差异很大。您可以免费自行搭建一个基本网站，或者选择功能更丰富的付费建站工具，也可以聘请专业的网页设计师来创建完全定制的网站。
如何免费开发一个网站？
您可以使用 Weebly 等建站工具免费开发一个网站，但请注意，您需要为域名、存储空间等付费。（Weebly 的免费版包含广告。）您也可以尝试 Shopify 等一站式平台的免费试用版，在正式决定之前体验一下操作流程。