HeadFirst Web设计之前期制作2

我们采取纸上策略，从主题入手，找出视觉隐喻(图标，色彩，图片，布局，导航，字型等等)并画出简图。可以通过头脑风暴来写下你能想到的与主题相关的一切，经过筛选之后，就要开始考虑表达内容的最佳方式，色彩(可以参考kuler色彩搭配网站)，网页布局(根据内容来设计布局，内容多则所分的栏数也越多，并且布局也会传达相应的视觉隐喻，如网页上只有一栏就很难使网站感觉像报纸或杂志，但加上几栏后就能让网页模仿一般的报纸风格。)，元素位置都是重要的因素。

了解网站主题后,第一步准备选择一些调色板，挑选与内容搭配良好的网站主题色彩，第二步根据内容设计布局，在这个过程中注意使用视觉元素强化主题。

一般而言：
主导航：
链接至网站的主要分区
次级导航：
链接到主要分区中的内容
留白：
用于分隔元素，并把视线拉向网页上的关键部分。
留白通常会被忽略。它可能有助于设计，也可能破坏设计。
侧边栏：
用于超链接和辅助内容。
页脚：
非常适合放置版权信息和链接区域。
内容：
这里是网页上血肉，也是来访者寻找的目标。

然后写简单的html+css代码，初步呈现一个简单的有色彩和布局分块清晰的网站，此时，仅仅是让客户由此得知网站制作的方向，并非立刻让客户见到他喜欢的东西。所以客户通常会否定你的作品，不要气馁，接下来你最好使用分镜表(storyboard，亦称为概念图，构图)。分镜表:用来把你的设计整体视觉化，使你能看到色彩间的互动，界面元素间如何反应，系统看起来的感受，视觉隐喻如何呈现等，不涉及代码。

别为自己设计，请记住，当你为客户设计时，是为了客户的需求而设计的，所以我们稍早想出的是我们自己喜欢的内容，让你的客户参与进来不仅能建立客户真正喜欢的设计，他们也会很高兴能参与进来。直到用户满意一种分镜表，之后，就可以进入数字化进程。