怎么设计网页一步步设计网站指南

怎么设计网页完全没有废话,一步步设计网站指南。

这里是易雅达理想的网页设计过程中的细分。我们知道很多人是要读,并大喊“这是最好的方式去设计网站!”

怎么设计网页一步步设计网站指南

我可以说的是:这是对我最好的过程中,工程的本质。我希望提供它,也许它会为你工作。
 

  • 我已经创造了7年的网站,我得更加成功,在这段时间。易雅达接触到很多非常巧妙和复杂的软件开发过程,其中许多不产生很好的效果。

这是典型的过程中,我使用我的网站(所有尺寸)今天。它侧重于越来越清楚自己在做什么,然后再开始,和后劲明显,而你的工作对一个很好的解决方案迅速。

  • 概述
  • 知道你在做什么
  • 知道的网站需要做什么
  • 了解网站的访问者需要什么
  • 取得了良好的画面的个性和风格的网站
  • 勾勒出高度成功的情景
  • 整理成意见网站地图
  • 素描的本质特征看
  • 地图您的访问者的注意
  • 排列的视觉元素一起工作
  • 分步

1、知道你在做什么

你正在努力实现明确的,可以帮助你实现它。永远是你的目标明确 - 你想达到的状态 - 当你坐下来设计一个网站。

怎么设计网站html代码

  • 你想打动其他的网页设计师吗?
  • 你想取悦你的客户端吗?
  • 你想有一个良好的利润和支付您的时间租金吗?
有一种魔力,被称为“创意可视化”。当你可以看到在你的心灵的眼睛终点,你可以更容易地看到你需要采取的步骤到那里。此外,你甚至会发现,你的潜意识的行动,帮助带你前进。

2、知道的网站需要做什么

  • 谁告诉你他们想要的东西(如“我们的时间和销售更多的东西。”),你可能有一个客户端。
  • 尝试得到真正明确的网站目标是什么。什么是成功的样子呢?当你到了那里,你将如何知道 ?

这东西在你的头脑清楚,帮助您:

  • 现在和成品之间的成千上万的设计决策
  • 与你的客户沟通,并保持其在整个过程中的信心
  • 显示你做什么你做的

3、了解网站的访问者需要什么

理想的情况下,你想显示您的设计,所有您网站的目标用户,并找出他们。由于这是不可能的,你需要另一种方法。

  • 对于所有的,但最简单的网站,我发展个性和情景,基于一个简单的目标导向的技术开发可爱的艾伦库珀和他的朋友库珀交互设计。

4、取得了良好的画面的个性和风格的网站

用户个性给你用户的目标和行为有着深入的了解。但一个网站往往都有自己的目标,可能会在与用户的目标相冲突。该网站还经常有软目标,以支持或发展其品牌。

  • 你需要一个最佳的方式来平衡所有这些不同的力量。
  • 我已经开发了进一步的工具,它体现在以同样的方式为用户,用户个性网站的个性,驱动器和目标 。网站代表的品牌和网站,目标,你到混合工作,通过对话与用户个性 。
  • 您的网站的相互作用描绘成一系列用户个性和网站之间的对话。用户试图得到他们想要的东西,和网站是试图帮助他们,同时确保它自己的工作。
  • 双赢的解决方案»

5、勾勒出高度成功的情景

一旦你知道你的网站要实现的,您的访问者想要达到的,它的时间开始规划网站的结构。

  • 我不启动一个网站地图,因为这是过于严格。我喜欢勾勒出的经验,用铅笔和纸,只是显示的站点和用户之间的互动最重要的方面 。
  • (有时,这些都是在脚本形式的对话,我的用户人物和现场人物沟通,就像在交谈中,这将最终被翻译成视觉元素。)

草图的典型特征:

  • 网站(入口点)显示了用户如何到达
  • 圆显示行动,意见或地方(这可能最终成为页)
  • 箭头显示用户如何可以走动的网站
  • 语音气泡,代表用户的人物认为,在关键的地方是什么

下面是易雅达刚刚在纸上做一个真正的第一现场草图,这让我觉得并迅速开展工作。

不要担心设计细节。本草图不是项目交付与其他人共享。它为我所用,帮助我澄清什么是重要的。

这种特殊的草图显示了一些成功的情况下,这可能适用于不同的用户个性。重要的是我已经开始成功(用户在网上拍卖)可视化的路径,从不同的出发点。

  • 在这里,我已经意识到,关键的一点是确保游客都能找到他们感兴趣的,如果不发生,没有别的我可以设计将此事。
  • 因此,为了使本网站的成功,我很容易和吸引力,环顾四周,直到你找到自己喜欢的东西不够了解更多。

我可以做很多这些草图,但他们永远不会超过两分钟,每多。但我有我的头自由的问题上工作,像复杂的绘图包或建模的语法约束支配。

6、整理成意见网站地图

您将需要规划出哪些网页会在您的网站,他们可能如何进行分组,用户将如何轻松地找到自己的方式左右。

您的网站地图,将有效地合并成一个结构的明确和经济从您最初的免费草图的意见。您希望您的访问者可以自由移动,从一个地方到另一个地方,他们的目标后。

事情要考虑:

  • 想想全球顶级的链接真正需要的是在每一页上。测试你的假设。
  • 创造足够的部分,这将是很容易把重点放在你想要什么。
  • 要小心,不要过度段。如果你有太多的部分,您的网站会显得更大,似乎更难导航。避免部分,将不会有足够的内容。(“没有消息就是坏消息”)。
  • 您需要包括任何其他的东西,需要存在(如联系方式和登录),这可能不是任何草图功能,日期。
查找的方式使用智能链接和深层链接,将用户直接向他们最有可能希望未来。不要让他们挖。
尝试优化的网站,这样的主要目标的路径很简单,即尽可能少的步骤。将建立在你的页面设计。
记住简单的原则。如果能实现的东西更简单,如果你能删除的东西,仍然保持所需的效果,做到这一点 。

信息架构部分..

7、素描的本质特征看

现在我们将开始设计网页,在这一点上仍然在纸面上的工作。(我觉得纸笔比计算机更快的工具,无论我用什么软件包。)

  • 通常情况下,我将开始关闭我的眼睛凝视着窗外,而我可视化什么样的布局和外观会觉得,提供一个干净的界面,塑造人格权。

然后,我会素描,迅速在纸上,在粗糙的矩形,并巴掌的本质特征:

  • 整个页面的结构和比例
  • 1级导航(您的部分)
  • 其他全球导航(如登入/登出页脚导航,网站地图,帮助)
  • 主屏幕领域
  • 任何关键的图形元素
  • 范例

没有太多的看到在这个简单的草图。该网站的身体会在页面的中间坐下。我已经把在顶部导航栏上,网站的标志,我有一个想法,内容,并有将下降右侧的缩略图图像。

它看起来并不惊人,但所有它做的是帮助我结晶,在我的脑海页面看起来像眼睛的视力。

为什么我做更多的设计在我的头上,比我在电脑上做
快速素描只是帮助我快速记录我在我的头上的可视化的肖像。然后,我不会忘记,可以使它在Photoshop迅速 。我觉得这种方式比开始在Photoshop更有效率的工作很多。再次,它明确的第一,然后做(当时认为做)。

如何设计网页草图

8、地图访问者的注意力

在做页面布局草图的一个关键步骤是让您的访客将要寻找一个好主意。

当你工艺的计算机上的网页,你的工作是平衡相对引人注目的页面上的所有视觉元素,让游客会被吸引到最重要的事情 。

  • 增加引人注目的事情
  • 更大的事情!
  • 强烈的色彩(谨慎使用)
  • 高对比度(无论是形状,线条或有显着不同的色调的边缘)
  • 运动(无论是实际的动画或动感的线条,让运动的印象)
  • 他们有足够的空间,他们周围的事情(更容易识别,似乎更重要的)
  • 高价值的职务在页面上放置的东西(例如,对左上角和拦腰 - 取决于你的布局)
  • 黄金法则来这里发挥作用。

您的网站上的所有内容必须是:

  • 帮助您的访问者达到自己的目标,或
  • 支持不妨碍游客的目标网站的目标
  • 因此,我们将使用这些设备,向参观者展示在哪里看。
  • 这里是我的网页素描(以上)出来..

在上面的截图中,要注意什么的最显着的。看看你能如何得到一个什么样的网站的印象,和什么,你可能会发现有,只是看一眼(不能够读取文本)。

这是由仔细优先考虑最相关的视觉元素 - 可能的解释网站,你会发现这里,并在那里你可能去未来最有用的。

排列的视觉元素一起工作。
这只是现在,我深入到Photoshop。我完全准备,准备工作很快(因为我知道,在电脑上播放,可以很容易地使我失去的角度)。

  • 易雅达知道该网站已实现成功
  • 我知道我的访客正在寻找什么,他们试图实现
  • 我明白该网站的个性和想要的东西来实现,而游客有
  • 我知道在我的网站页面和节
  • 我有一个好主意的权利的页面布局,这将有助于旅客流量一轮的网站很容易,让他们感兴趣,直到他们完成他们想要的东西
  • 我知道什么视觉元素将在我的网页上,和其相对优先
  • 这之前的工作将帮助我快速执行设计装修为目的,没有变得过于深陷尝试很多不同的页面布局在Photoshop(耗时),。

还有其他一些原则及学科,帮你创造的东西,

  • 我的工作在时间。如果我觉得累了会休息片刻。
  • 我会尽力找到简单的页面布局,导航结构,色调/色彩计划。我不害怕,以适应工作的。