网页设计的过程与思考

Question

我想知道如何从布局/设计的角度来处理网站的设计。什么样的流程设计师通常遵循?我是一名开发人员，正在采取第一步来开发一个好看的website.What是最佳实践-使用div，网格设计等。

Answer 1

第1步。

首先是确定你设计的是哪种类型的网站。如果你正在设计一个展示产品或大量图片的网站，那就考虑一个合适的设计。(也就是说，不要为这样的网站建立一个3栏的布局，因为它会看起来非常狭窄，图片必须很小，以适应其他栏目中的其他内容)。或者从另一方面来说，如果你知道你的网站会非常简单，你可能会决定把所有的东西都放在一个页面中，然后使用javascript让锚点链接滚动到页面的某些区域。这正变得越来越受欢迎。

第2步。

试着在你的脑海中想象这个网站，你希望它看起来是什么样子。考虑配色方案和列布局。想一想菜单的位置，如果可能的话，试着提前知道菜单，这样你就会知道你是否需要下拉菜单，它们应该是垂直的还是水平的，这取决于导航将有多少链接，等等。

第3步。

为了帮助完成第二步，可以访问像http://www.cssmania.com这样的网站来获得灵感和想法，了解一个像样的网站应该是什么样的。不要复制它们，但要了解图形使用、菜单位置、字体和排版等。

一些设计师使用photoshop来设计它，然后将其切片并创建网站。有些直接跳转到html/css。这完全取决于你。就我个人而言，我从html/css开始，然后通过添加背景图片、自定义按钮等来美化站点。

“最佳实践是什么--使用div、网格设计等。”

如果可以的话，尝试使用DIVs而不是table。在web设计界，在DIVs中进行设计是很重要的。然而，纯css布局通常需要更长的时间才能完成。因此，如果你在预算或时间线上，可以在表格中完成。

Answer 2

我个人设计网站的方法是首先考虑网站的需求。访问者需要做或需要知道的最重要的事情是什么？考虑到这个网站，当你打开主页时，你可能想做的三件事是: 1.查看一些要回答的问题，提出一个问题，或者登录。你很快就能快速完成这三件事，只需最少的点击，不需要搜索。

第二件要做的事情是考虑网站给人的印象。如果你访问一家大银行的网站，它们传达的是可信度；如果你访问博客，它传达的是一种人格感；当你访问新闻网站时，它会给你一种紧迫感或知识感。

第三，你应该考虑品牌认知度。百事可乐的网站是蓝色的，可口可乐的网站是红色的，这是有原因的。如果你在某个地方看到了stackoverflow标志，很有可能它会敲响警钟(serverfault可能不会太多)。这是一个重大的设计挑战，很多公司都在这上面花了很多钱。

最后，考虑一下贫穷的用户。我个人的注意力跨度相当于-oooh的一辆红色汽车！如果我不能立即弄清楚你的网站做了什么，我就会迷失方向，想去别的地方。如果我不能在几眼之间弄清楚如何做我想做的事情，我就会害怕回来。我讨厌在网站上翻找登录名或寻求帮助。

一个例子是在我正在工作的网站上注册。该网站只需要一个电子邮件地址。您输入您的电子邮件地址，确认将发送到您的收件箱。单击链接add a password，您就完成了。您的电子邮件就是您的登录名。(当你最喜欢的用户名被取走时，你不讨厌吗？)你不必填写你的家庭住址，因为我们不会给你寄信，我们也不需要你的名字，因为我们不会在街上认识你。

在此之后，只需查看与您正在做的类似的其他网站。看看像Smashing Magazine这样的设计博客吧。这些都会给你灵感，但不要认为，‘哦，这个网站有闪烁的文字，我应该有闪烁的文字！’或者，“这位博主说我应该在商业网站上使用这种字体，所以我必须使用它。”你很聪明，知道得更清楚

我认为最重要的是使用你自己的网站。如果您不使用它，您就不知道需要修复或更改什么。让其他人也使用它，就在你面前。什么都不要说，只要观察他们是如何使用它的，以及他们是否为任何事情而挣扎。

Answer 3

这就是我所做的(我是一个尝试设计的开发人员！)

• 在一张纸上绘制布局
• 在photoshop/paint等中制作模型
• 将页面内容划分为不同的块、div、表的
• 找出所有/大多数页面共有的页面元素，如页眉和页脚

<代码>H19将模型转换为html和css <代码>H210<代码>H111查看它是否在大多数浏览器上显示(最难的部分)<代码>H212<代码>H113从同事/朋友那里获得反馈并修改设计<代码>H214<代码>F215