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

在我们开始之前，让我首先分享两个应该在整个设计过程中发生的并行过程。你应该持续做的第一件事就是寻求反馈。

通过定期获得反馈，您将节省大量浪费的时间和精力。您应该持续做的第二件事是测试。在旅途中测试所有内容，以避免将来出现超级头痛。

话虽如此，让我们开始吧！

1. 学习

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

编码？再猜一猜。学习 - 首先发现和理解您需要构建的内容 - 是整个网站设计过程中最重要的部分，这不应该让您感到惊讶。

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

可以这样想：如果你是一名弓箭手，你不需要知道将箭瞄准哪里吗？这就是目标的目的。中间的小红点是靶心。

由于它更小，所以更难击中，但即使你瞄准它并错过了，你也肯定会比你把箭瞄准空中并希望随机直接击中更近。

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

作为一名网页设计师，击中靶心就是给你的客户他们想要的东西——这就是他们付给你的钱。客户想要什么因具体情况而异。由于你不是读心者（不，你不是），你需要主动找出他们想要什么。

在某些情况下，他们甚至可能不知道自己想要什么，而在其他情况下，他们可能很难用语言表达他们的设想，因为他们不知道CSS，Ajax或关系数据库等行业术语和概念。

创意简介

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

您可以在面对面的会议或电话中提出这些问题，或者您可以简单地在您的网站上提供一个网络表单来处理客户的答案。你应该以你和你的客户最舒服的方式获取这些信息——但无论你做什么，都不要跳过创意简报，因为它将成为你项目的生命线。您应该在创意简报中提出什么样的问题？

至少，找出：

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

我也喜欢问客户他们喜欢和不喜欢的网站，让我直观地知道我应该去哪里以及我应该避免什么。您可能还想知道他们是否需要在线商店，他们是否已经有徽标（如果没有，您可以为他们制作一个），谁将负责维护网站上线后的网站，等等。您可能有想要包含的独特问题;使用它们，不要害怕在每个项目的基础上定制您的问题。

2. 计划

一旦你了解了你需要构建的东西，就该开始计划如何实现它了。在开始设计网站之前，您需要首先确切地知道设计它的内容和方式 - 这一切都始于创建设计策略。您制作的每个网站的设计策略都应该是手工制作的，以适应客户的愿景（如果您为自己设计网站，那么您就有资格成为客户）。

那么，哪些因素将影响您的设计策略呢？创意简报将通过为您提供一些基本信息（例如您的时间范围以及网站的目标受众是谁）作为您计划的基础。了解您的受众尤其重要，因为它会影响网站的查看位置和方式。

例如，您是否还需要创建适用于触摸的移动版本或特定于iPad的版本？

研究和笔记

无论整体战略图景中留下什么空白，都需要通过自己的研究来填补。现在是时候访问竞争网站，看看目标市场中已经有哪些类型的设计，这样你就会知道如何区分自己的设计。看看谁在谷歌搜索中首先出现，并尝试找出原因。

在 10 分钟内，您应该能够开始拼凑设计计划的开始。在研究时，您还将开始集思广益，讨论使用什么颜色，在哪里放置号召性用语，应该使用哪种字体以及其他类似的细节。此时，您还应该做笔记，截取屏幕截图并启动情绪板。

草图和模型

接下来，是时候创建一个模型并开始让你的想法呈现出更多的有形状态了。

我喜欢从在一张普通的旧纸上勾勒出我的想法开始，就像许多其他网页设计师一样。其他人更喜欢使用像OmniGraffle这样的线框图工具。在此阶段，您不仅要开始认真考虑网站的布局，还要考虑网站的结构以及导航将如何形成。

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

选择您的工具

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

考虑到网站的目标，考虑什么内容管理系统最有效，是否包含Flash是一个好主意，等等。

3. 设计

现在我知道有很多网页设计师喜欢直接跳到设计阶段，而不考虑学习或规划，但设计不仅仅是创造的行为。你想真正创造一些好和有用的东西，如果不在开始设计之前先做一些初步工作，你就无法做到这一点。如果你已经完成了学习和规划的跑腿工作，它会使实际的设计变得更加容易。

当你不必担心小细节时，它确实打开了一个全新的效率和生产力水平，因为你可以专注于更重要的事情。准备好开始设计后，请记住，您需要设计的不仅仅是主页。您还需要为网站的子页面进行设计。

有时很容易设计一个主页概念，将其切成薄片并开始编码，只是为了到达子页面并且没有方向。您可能还需要设计网站的移动或iPad版本。设计阶段本身很简单。

只需打开 Photoshop（或您选择的图形创建工具）并开始让您的模型栩栩如生。细节出汗。让它像素完美。

即使你觉得你正在做的项目比连续24小时盯着墙更无聊，也要全力以赴。你的客户会注意到，你会为你所做的工作感到自豪。此时，您必须决定是要在设计中使用真实内容还是使用一些虚拟文本（例如

洛雷姆·伊普苏姆）。这两个阵营都有很多粉丝，但我个人更喜欢使用真实的副本和照片，如果有的话，以使其尽可能接近现实。在设计阶段，经常寻求反馈以确保满足所有指定要求非常重要。

如果客户想要进行更改，现在是时候在对设计进行切片和编码之前进行更改，如果您在设计阶段进行简单的更改，则进行简单更改的难度要增加十倍。

4. 代码

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

从基本模板开始

如果你像我一样，你已经准备好了一组入门HTML和CSS文件，这些文件已经相互链接，并且已经包含一些基本的入门代码（例如CSS重置）。如果您不像我一样并且没有准备好这些通用文件，请继续创建一些可以在将来的这个阶段重用的文件。

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

布置主要部分和内容

通过插入页眉、页脚和内容区域的主要部分（您的主部分）来开始划分您的 HTML/CSS。接下来，开始添加文本和图像内容。目标是使标记尽可能具有语义，以便每个元素都有意义。