制作网站的 6个基本流程，您都了解吗？

      随着时间的推移，每个设计师或公司都会为其网页设计过程开发独特的组件，但基础知识保持不变：学习、计划、设计、编码、发布和维护。

在本文中，我将分享我设计网站的过程。

1. 学习

您认为网页设计过程中最重要的一步是什么？规划？设计？编码？

再猜。

学习——首先发现和理解你需要构建的内容——是整个网站设计过程中最重要的部分，这一点不足为奇。

为什么？很简单，真的。您对需要完成的工作了解得越多，创建成功网站的机会就越大。

可以这样想：如果您是弓箭手，您不需要知道将箭瞄准哪里吗？这就是目标的用途。中间的小红点是靶心。因为它更小，所以更难击中，但即使你瞄准它并没有命中，你肯定会比你把箭对准空中并希望随机直接命中更接近。

靶心

那么，作为网页设计师，您如何才能获得靶心呢？在继续之前，您需要定义在您的项目中击中靶心意味着什么。

作为一名网页设计师，瞄准靶心就是给你的客户他们想要的东西——这是他们付钱给你的。

客户的需求因具体情况而异。由于您不是读心者（不，您不是），因此您需要主动找出他们想要什么。

在某些情况下，他们甚至可能不知道自己想要什么，而在其他情况下，他们可能很难说出他们的设想，因为他们不了解行业术语和概念，例如 CSS、Ajax 或关系数据库。

创意简报

幸运的是，网页设计人员可以使用一种工具轻松收集这些信息。它被称为创意简报。创意简报基本上是您向客户提出的一系列问题，以便您了解项目的范围和目标。

您可以在面对面的会议或电话中提出这些问题，或者您可以简单地在您的网站上提供一个网络表单来处理您客户的答案。

您应该以您和您的客户最熟悉的方式获取这些信息——但无论您做什么，都不要跳过创意简报，因为它将成为您项目的命脉。

你应该在你的创意简报中提出什么样的问题？至少，找出：

• 客户的目标受众
• 他们对网站的主要和次要目标
• 当前的品牌特征
• 预算
• 他们需要满足的最后期限

我也喜欢问客户他们喜欢什么网站，不喜欢让我直观地了解我应该去哪里以及我应该避免什么。

您可能还想知道他们是否需要在线商店，他们是否已经有Logo（如果没有，您可以为他们制作一个），网站上线后谁将负责维护网站，等等。

您可能有想要包含的独特问题；使用它们，不要害怕根据每个项目定制您的问题。

2. 规划

一旦您了解了需要构建的内容，就可以开始计划如何实现它。在开始设计网站之前，您首先需要确切地知道设计什么以及如何设计——这一切都始于制定设计策略。

您制作的每个网站的设计策略都应该手工制作以符合客户的愿景（如果您是为自己设计网站，那么您就有资格成为客户）。

那么哪些因素会影响您的设计策略呢？创意简报将作为您计划的基础，为您提供一些基本信息，例如您的时间表是什么以及网站的目标受众是谁。

了解您的受众尤其重要，因为这会影响网站的查看位置和方式。例如，您是否还需要创建支持触控的移动版本或 iPad 特定版本？

研究和记笔记

无论整体战略图景中存在什么差距，都需要通过自己的一些研究来填补。现在是访问竞争网站并查看目标市场中已有哪些类型的设计的时候了，这样您就会知道如何区分自己的设计。

看看谁先出现在 Google 搜索中，并尝试找出原因。在 10 分钟内，您应该能够开始拼凑设计计划的开头部分。

在进行研究时，您还将开始集思广益，思考要使用的颜色、在哪里放置号召性用语、应该使用哪种字体以及其他类似的细节。

在这一点上，您还应该做笔记、截屏和创建情绪板。

草图和模型

接下来，是时候创建一个模型并开始让您的想法呈现出更多有形的状态。我喜欢首先在一张普通的旧纸上勾勒出我的想法，就像许多其他网页设计师一样。

其他人更喜欢使用像OmniGraffle这样的线框图工具。在此阶段，您不仅要开始认真考虑站点的布局，还要开始认真考虑站点的结构以及导航的形成方式。

这是您在实际使用 Photoshop 或 Illustrator 创建更具体的东西之前，看看什么最有效的机会，也是尝试不同想法的好地方。

选择你的工具

这部分过程也是评估您需要使用哪些工具的绝佳机会。您绝对不应该陷入为您创建的每个站点使用一组预定工具的模式。对于参与其中的每个人来说，这都是一种潜在的危险做法，包括网站的最终用户和客户（更不用说您的投资组合看起来有多单调了）。

考虑网站的目标，认真考虑哪种内容管理系统最有效，包括 Flash 是否是一个好主意，等等。

3. 设计

现在我知道有很多网页设计师喜欢直接跳到设计阶段而不考虑学习或规划，但设计不仅仅是创造的行为。你想真正创造一些好的和有用的东西，你不能在开始设计之前先做一些准备工作。

如果您已经完成了学习和规划的跑腿工作，那么实际设计就会变得更加容易。当您不必担心小细节时，它确实开启了一个全新的效率和生产力水平，因为您可以专注于更重要的事情。

一旦您准备好开始设计，请记住您需要设计的不仅仅是主页。您还需要为站点的子页面设计。有时可以很容易地设计一个主页概念，将其分割并开始编码，只是为了到达子页面而没有方向。您可能还需要为您的网站设计移动版或 iPad 版。

设计阶段本身很简单。只需打开 Photoshop（或您选择的图形创建工具）并开始将您的模型变为现实。细节出汗。使其像素完美。即使你觉得你正在做的项目比连续 24 小时盯着墙更无聊，也要全力以赴。您的客户会注意到，您会为自己所做的工作感到自豪。

此时您必须决定是要在设计中使用真实内容还是一些虚拟文本（例如Lorem Ipsum）。任何一个阵营都有很多粉丝，但我个人更喜欢使用真实的副本和照片，如果它们尽可能接近现实的话。

在设计阶段，经常寻求反馈以确保满足所有指定的要求非常重要。如果客户想要进行更改，那么现在是在对设计进行切片和编码之前进行更改的时候了，如果您在设计阶段进行更改，那么进行简单更改的难度将增加十倍。

4. 开发与制作

一旦你有了一个杀手级的设计，你就需要把它变成一个真实的、实时的网站。无论您要使用哪种内容管理系统，一个安全的选择是从通用 HTML 和 CSS 模板开始。

从基础模板开始

如果您像我一样，已经准备好了一组入门 HTML 和 CSS 文件，它们已经相互链接并且已经包含一些基本的入门代码（例如CSS reset）。

如果您不像我那样准备好这些通用文件，请继续创建一些您可以在将来的这个阶段重用的文件。

在继续之前，最好先添加标题、描述和元标记，或者如果以后要使用内容管理系统，至少记下它们应该是什么。

布置主要部分和内容

通过<div>为页眉、页脚和内容区域插入主要部分（您的主要部分）开始分割您的 HTML/CSS 。

接下来，开始添加文本和图像内容。目标是使您的标记尽可能具有语义，以便每个元素都有意义。

避免 divitis — 使用过多 div 的行为。例如，您不需要 div 来包含Logo。尝试使用 an<h1>或 a<p>代替——它可以以完全相同的方式设置样式（例如，使用displayCSS 属性将它们变成块元素）。

验证和测试

不要忘记确保您的代码使用W3C 提供的验证工具进行验证（但也要了解验证工具有缺点）。

您还需要进行一些浏览器测试，以确保网站的外观和行为符合预期，并提供统一的品牌体验，无论用户如何访问它。如果您对不同类型的计算机的访问受限，则可以使用Browsershots 之类的工具。

使用Firebug和YSlow调试您的站点并确保您的工作以最佳速度运行。

最后一件事：不要忘记实施Google Analytics或您最喜欢的分析替代方案，这样您就不会错过在大型发布期间跟踪统计数据的机会。

5. 网站上线

当您最终完善了该站点时，就该向公众发布它了。发布对不同的人来说可能意味着不同的事情，主要是因为那里有各种内容管理系统和开发环境。

例如，如果您要重新设计一个使用内容管理系统或发布平台的网站，您的发布可能就像应用一个新主题一样简单。

如果您正在沙箱或本地开发环境中设计一个全新的站点，那么“上线”意味着将您的文件通过 FTP 传输到生产服务器。

6. 后期维护

在您的规划阶段，您应该确定谁将负责站点维护。如果客户无法维护站点，您可能希望建议他们定期或根据需要雇用您来管理和执行维护任务。

在项目移交/收尾期间，向您的客户提供一些指导方针和基本培训可能也有帮助，以确保他们了解如何正确维护站点。