制作网站的6个步骤

WebFX总统。Bill在互联网营销行业拥有超过25年的经验,专长于搜索引擎优化、用户体验、信息架构、营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研究和开发项目提供了基础。

当谈到建立一个网站时,有一个遵循的过程是很有帮助的,特别是如果你是一个刚刚开始作为一个网页设计师。好的指导可以帮助你把健忘降到最低,从而更好地工作。随着时间的推移,每个设计师或公司都会在他们的网页设计过程中开发出独特的组件,但基本要素是不变的:学习、计划、设计、编码、启动和维护。

在这篇文章中,我将分享我的网站设计过程。制作网站的6个步骤

在我们开始之前,让我先分享两个应该在你的设计过程中发生的并行过程。你应该不断做的第一件事就是寻找反馈

通过定期得到反馈,你将为自己节省大量浪费的时间和精力。你应该持续做的第二件事是测试。当你去的时候,测试所有的东西,以避免未来的巨大头痛。

说了这么多,我们开始吧!

1.学习

你认为网页设计过程中最重要的步骤是什么?计划吗?设计吗?

编码吗?再猜一遍。学习——发现和理解你首先需要构建什么——是整个网站设计过程中最重要的部分,这一点你应该不会感到惊讶。

为什么?很简单,真的。你对你需要完成的事情知道的越多,你创建一个成功网站的机会就越大。

这样想:如果你是一名射手,难道你不需要知道把箭瞄准哪里吗?这就是目标的作用。中间的小红点是靶心。

因为它更小,所以更难射中,但即使你瞄准它而没有射中,你肯定会比把箭射向空中并希望随机命中更接近它。牛眼灯

那么,作为一名网页设计师,如何才能获得靶心呢?在您进一步进行之前,您需要定义在您的项目中击中靶心意味着什么。

作为一个网页设计师,正中靶心的是给你的客户他们想要的东西——这是他们付钱给你的东西。客户的需求因具体情况而异。因为你不是一个读心术的人(是的,你不是),你需要主动地找出他们想要什么。

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

的创意简报

幸运的是,有一种工具可以让网页设计师轻松地收集这些信息。这叫做创意简报。一份创意简报基本上是一系列问题你问你的客户这样你就能理解范围以及项目的目标。

你可以在面对面的会议或电话中询问这些问题——或者你可以简单地在你的网站上制作一个网页表单来处理客户的回答。你应该以你和你的客户最满意的方式获取这些信息——但无论你做什么,都不要跳过创意概要,因为它将成为你项目的命脉。在你的创意简报中你应该问什么样的问题?

至少,找出:

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

我还喜欢询问客户他们喜欢和不喜欢哪些网站,以便给我一个视觉上的想法,让我知道我应该去哪里,应该避免什么。你可能还想知道他们是否需要一个网上商店,如果他们已经有一个标志(如果没有,你可以为他们做一个)、谁将负责网站上线后的维护,等等。你可能有一些独特的问题想要包括在内;使用它们,不要害怕根据每个项目来调整你的问题。

2.计划

一旦你知道你需要构建什么,就该开始计划如何实现它了。在你开始设计一个网站之前,你首先需要确切地知道要设计什么,如何设计——这一切都从创建一个设计策略。你为每个网站制定的设计策略应该是手工制作的,以适应客户的愿景(如果你是为自己设计网站,那么情绪板

草图和模型

接下来,是时候创建一个模型,并开始让你的想法呈现出更切实的状态。我喜欢在一张普通的旧纸上画出我的想法,就像许多其他的网页设计师一样。其他人更喜欢使用线框图工具OmniGraffle

在这个阶段,你不仅要开始认真考虑网站的布局,而且还要考虑网站的结构和导航将如何形成。在使用Photoshop或Illustrator创建更具体的东西之前,这是你看到最有效的方法,也是一个尝试不同想法的好地方。

选择你的工具

这部分过程也是评估您需要使用哪些工具的绝佳机会。您绝对不应该陷入为您创建的每个站点使用一套预先确定的工具的模式。这对涉及到的每个人来说都是一种潜在的危险做法,包括网站的最终用户和客户(更不用说你的作品集看起来是多么单调)。

考虑到网站的目标,考虑到是否包含Flash是一个好主意等等,在内容管理系统中投入一些真正的思考。

3.设计

现在我知道有很多网页设计师喜欢直接跳到设计阶段,而不考虑学习或规划,但设计不仅仅是创造的行为。你想要真正创造出一些好的和有用的东西,而在开始设计之前,如果不先做一些前期工作,你就无法做到这一点。如果您已经进行了学习和规划,那么实际的设计就会容易得多。

当你不需要担心小细节时,你的效率和生产力真的会提升到一个全新的水平,因为你可以专注于更重要的事情。一旦你准备好开始设计,记住你需要设计的不仅仅是一个主页。您还需要设计站点的子页面。

有时,设计一个主页概念很容易,将其分割开来,然后开始编码,只得到子页面,没有方向。你可能还需要设计一个移动或iPad版本的网站。设计阶段本身很简单。

只需打开Photoshop(或您选择的图形创建工具),并开始将您的实物模型。追求细节的完美。让它像素完美。

即使你觉得你正在做的项目比连续24小时盯着墙更无聊,也要全身心投入。你的客户会注意到,你也会为你所做的工作感到骄傲。在这一点上,你必须决定是在设计中使用真实的内容还是一些虚拟的文本(例如:

Lorem Ipsum).这两个阵营都有很多粉丝,但我个人更喜欢使用真实的副本和照片,如果他们可以让它尽可能接近现实。在设计阶段,经常寻求反馈以确保满足所有指定的需求是非常重要的。

如果客户想要进行更改,那么现在就是在设计切片和编码之前进行更改的时候,这将使您在设计阶段进行简单更改的难度增加十倍。

4.代码

一旦你有了一个杀手级的设计,你需要把它变成一个真正的,实时的网站。无论您将使用什么内容管理系统,最保险的做法是从通用的HTML和CSS模板开始。

从基本模板开始

如果您像我一样,您已经准备好了一组初学者HTML和CSS文件,它们已经相互链接,并且已经包含了一些基本的初学者代码(例如CSS重置).如果您不像我这样,没有准备好这些通用文件,那么就创建一些您将来可以在这个阶段重用的文件。在继续之前,最好先添加标题、描述和元标签,或者如果以后要使用内容管理系统,至少要记下它们应该是什么。

列出主要章节和内容

通过插入主要部分(你的主要部分< div >S)用于页眉、页脚和内容区域。接下来,开始添加文本和图像内容。我们的目标是使标记尽可能具有语义性,这样每个元素都是有意义的。

避免分割-使用太多分割的行为。例如,您不需要一个div来包含logo。试着用一个<标题>或者一个< p >相反,它可以用完全相同的方式设计样式(例如,使用显示CSS属性)。

验证和测试

不要忘记确保您的代码通过使用验证工具(但也要理解这一点验证工具有缺点).您还需要进行一些浏览器测试,以确保站点的外观和功能符合预期,并提供统一的品牌体验,无论用户如何访问。你可以使用像这样的工具Browsershots如果你只能使用不同类型的电脑。

使用FirebugYSlow调试您的网站,并确保您的工作是以最佳速度跑步.最后一点:不要忘记执行谷歌分析或你最喜欢的分析替代这样你就不会错过追踪数据大发射

5.发射

当您最终完善了站点之后,是时候将其发布给公众了。发布对不同的人来说意味着不同的东西,主要是因为有不同的内容管理系统和开发环境。例如,如果你正在重新设计一个使用内容管理系统或发布平台的网站,你的启动可能就像应用一个新主题一样简单。

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

6.维护

在规划阶段,您应该确定谁将负责站点维护。如果客户无法维护站点,您可以建议他们定期或根据需要雇用您来管理和执行维护任务。在项目交接/结束的过程中,为你的客户提供一些指导和基本培训也会有帮助,以确保他们理解如何正确地维护网站。

相关内容

WebFX职业

加入我们的使命,为全球企业提供行业领先的数字营销服务——同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!