设计教程：成功网站设计的5个步骤

本文将向您介绍如何设计网站的5个基本步骤，网站设计过程将帮助您成为更高效，更成功的网站设计师。

当今设计行业最重要的因素之一，尤其是自由设计，是一个成功的业务工作流程，用更少的时间做更多事情。为了节省时间，您必须花时间计划您的项目，将其分解为基本步骤，以获得成功的结果。这样，您就可以提高工作效率。

“生产力从来都不是偶然的。它始终是对卓越，智能规划和专注努力的承诺的结果。“~Paul J. Meyer

每个设计师都有自己喜欢的设计流程。在本文中，我将解释我建议的时间效率设计工作流程，每次都适合我。本文针对的是网页设计行业的新手，而不是经验丰富的设计师。本文的重点是为成功的网站设计提供一般的5步指南。

第1步：客户的需求

在开始您的计划之前，您需要尽可能多的客户信息。您知道的越多，您将节省更多来回的电子邮件。

听听他们的想法

通常，客户不会告诉你他们想要什么，由你来问他们。他们希望保证他们的简报将以他们的形象化方式实现，但他们很难解释他们如何看待未来的网站。克服这个问题的最好方法是沟通。通过提出能够告诉您业务的问题来了解您的网站设计客户是至关重要的。你想要找出他们想要的心情，他们喜欢什么，不喜欢什么。

客户问卷调查

我最喜欢找到我的客户的方法是填写表格。列出有助于开始项目的最重要问题。这个网站的目的是什么？谁是目标受众？谁是你的竞争对手？您希望访问者采取什么行动？等等。表格不应超过10个问题，因为让我们切合实际，并非所有客户都有时间和耐心来填写20或30个字段。确保在开始草拟提案之前向客户发送表单，而不是之后。如果您想查看示例，可以查看此表单。出于辅助功能和易用性，我建议您在Google Drive F orms上设置表单。既然客户填写了表单，您就可以发送您的提案，并最终确定有关预算，项目范围，时间表和所有权的正式协议。签署协议后，是时候开始工作了。

第2步：研究，想法和草图

这一步始终是最难的。当我第一次进入这个行业时，我曾经跳过Photoshop并开始设计。我不能强调这是多么错误。最好的办法是从一张纸上开始。

开始草绘

如果您是设计师并且没有个人笔记本，那么您最好开车到最近的图书馆。在任何涉及头脑风暴的活动中，使用笔和纸写下笔记是最有效的方法。花一些时间，开始草拟任何想法，让你的脑袋浮出水面。你不必知道如何画画。你可以从一个圆圈开始，然后你的想法会自然流动。您可以在上班途中乘坐出租车，并可以创意。写下来。

编译你的灵感

使用项目名称创建书签文件夹。开始研究，然后保存您认为相关的任何网页。请确保不要复制确切的元素或想法，因为这将被视为剽窃。根据客户的需求查找最佳网站和布局，并搜索同一业务中的其他网站。写下你喜欢的内容以及你不喜欢的内容。布局，颜色，形状，动画......任何可以为您的下一步提供想法和灵感的东西。

了解你的竞争者

仔细看看竞争对手的网站。检查所有本地和国际竞争对手，并从他们的内容中学习。它们有什么共同之处？这是您应该在您的网站中包含的内容。他们缺少什么？这就是你可以在你的网站上改进的东西。

第3步：线框

线框是您网站的蓝图。这是为您的网站提供视觉结构的原因。一些设计师倾向于在其线框中包含设计元素。这应该完全避免，因为这会分散线框的目的，即说明事情的发展方向，而不是事物的样子。线框应为灰度，以便仅关注布局。线框的第一种方法是笔和纸。列出要包含在网页中的所有元素。接下来，将它们排列在页面上。您也可以在纸上或使用任何线框工具（如proto.io，wireframe.cc甚至Photoshop）执行此操作。这是一个开始工作的简单布局。这是一个线框的一个很好的例子：

您可以在此处查看整个项目。基本上，线框应该定义这些主要元素：

元素放置

如果不了解情况，就无法启动您的网站。这是你决定的地方。您甚至可以与您的客户见面，讨论您的内容的最佳位置。

信息层次

带有链接列表的站点地图对于客户甚至设计者来说都是压倒性的。通过布置站点地图，您将能够看到页面如何落实到位，这样您就可以在进行太多操作之前进行调整。

互动

在创建线框时，您必须提出以下问题：这些元素如何相互作用？访客会采取我希望他采取的行动吗？访客如何在网站上移动？这是用户体验发挥作用的地方。所以你创建了你的布局。接下来，您将创建您的界面。

第4步：样式瓷砖

样式图块（也称为样式指南）是一种设计可交付成果，由字体，颜色和界面元素组成，用于传达网络视觉品牌的本质。样式图块基于与客户的视觉偏好讨论。通常的元素包括徽标，排版，颜色和语音。以下是样式图块的两个快速示例。

更多这里。这就是你应该使用样式图块的原因：

从概念到视觉

根据您从客户需求中学到的知识，构建您的样式图块将转换您网站的情绪，感觉和基调。它将帮助您以客户理解的方式选择如何使用设计元素。

保持一致性

使用样式图块，您可以通过创建设计遵循的一组规则来维护外观。该过程变得灵活，易于维护和一致。

节省时间

设计样式图块会向客户显示网站的外观。现在，您可以快速有效地使用客户端的请求更新样式图块，而不是以特定样式编写完整设计的网站。现在你已经设计好了你的皮肤。接下来，您将应用它。

第5步：原型

设计一个网站非常像建房子; 平面图是线框，视觉室内设计是您的风格瓷砖。这个设计过程的精彩之处在于这个步骤变得多么简单。通过编写线框和样式图块，您现在需要做的就是将它们组合在一起。在这里，您可以看到网站的外观。原型设计意味着在构建实际网站之前构建网站模型。一些设计师喜欢在Photoshop上设计他们的原型，而其他设计师喜欢跳过Photoshop并转移到诸如inVision和UXpin之类的Web框架上。

原型设计基于3个步骤：

原型

将样式图块实现到布局中，同时调整用户体验并确保设计易用性。

测试

此步骤至关重要，因为它评估网站是否满足客户的需求和期望。您甚至可以与用户共享原型，以测试您的交互性和用户体验。

微调

在这里，您可以优化任何需要改进的更改和元素。此过程可能需要一些时间，具体取决于您和用户/客户为获得最终抛光设计所需的周期数。

整理起来

所以现在您应该能够了解成功进行网站设计的最佳流程。通过遵循此工作流程，您现在可以提前规划您的网站，防止可能阻碍您的工作流程的意外，最重要的是避免耗时的项目。下一步将是开发部分。如果您具备开发网站的技能，那么您应熟悉该过程。如果没有，那么应聘请网络开发人员。在我的下一篇文章中，我将解释本教程中提到的每个部分的分步教程。敬请关注！