继续Sexy Web Design的整理，这一篇主要是网页设计步骤概览。我采用了中英文对照，并截取了书中有趣的图片。

• Step One: Research

步骤一: 市场调查、用户行为研究等分析。和广告公司中Planning的工作有类似。

调查研究对于任何设计、开发等强调以“用户为中心”、“市场为导向”的工作来说，都是至关重要、起决定性作用的步骤。

• Step Two: Structure

步骤二：内容结构的确立

Scribble of the site structure? (Free time: what the site can become)

推荐要做的事：拿出纸笔在纸面上胡乱涂鸦。这是我们最喜欢干的事，圈圈画画各种结构层级图，很酷！

• Info architecture

(key message,primary call to action…)

To organize information in a useful and logical manner

在做“结构”时，{dy}点是梳理整个网站的信息，使之有明确的架构：有主梁、有承重墙、有进出的门……用一种逻辑性的、易用性的方式去组织庞大的信息，使之结构化。

信息的架构其实是应该有专人来做，但是现阶段大部分的设计师都或多或少承担了其中的工作。

• Wireframing(blueprint)

第二点就是进入线框图的绘制阶段，还是先进行纸上的草图勾画，用具体的页面来呈现内容架构。草图之后再动用一些画线框图的软件来进行更为清晰的定稿。

• Tone, Atmosphere（goal of the visual style: to evoke a feeling in the end user to tie in with ?the site）

第三点就是往黑白的框架上添点颜色和血肉了。采用某种调性的设计去建立网站与用户的情绪性、情感性连结，营造一种气氛，就像咖啡馆和快餐店的气氛一样迥然不同。

• Step Three：Interaction

(scrolling through the text, pushing buttons, submitting search queries, opening menus, navigating through multiple pages …)

步骤三：交互。

滚动文字、按某个键、提交搜索请求、打开某些菜单、多页面的导航显示…….网页上用户的交互行为不胜枚举。

• Navigation（the most important interactive element）

首先值得强调的一项交互就是“信息导航”，可以说导航是一个网站中最重要的交互元素。之后会有文章详细介绍各类导航的方式。

• Form 表单

• Audio & Video 多媒体

• Step Four：Aesthetics （the fun part: crack open the tins of paint and start throwing colors at the canvas）

步骤四：美。有了那么多步骤的铺陈，设计师终于可以挥毫泼墨了。对于具体的设计发挥越不拘一格越有惊喜，我也不做过多点评翻译了。

• Layout & composition 布局

• Artistic Layer （Attention to detail for a visually rewarding XP: the distinction between good and great design)

艺术性：请给设计以灵魂、个性 (To give designs soul, personality, and character)

• Typography 排版

• Images: Photograph, illustrative diagram, box shadow, a rounded corner(visual styling of the page), iconography

图像，包括照片、图表，以及在文本框外增加阴影、头像照片采用圆角而不是直角等格式都是很好的图像化设计得方式，另一种重要的方式是用小图标进行图像语言上的意义提示

• Convention vs. Innovation 传统规范VS.创新创意

• Step Five：Deliverables: split your lovely Photoshop output into individual image files, ready for a developer to build

步骤五：提交一份设计成品，这个成品应该是可以让其他设计人员、开发人员很容易上手使用的、规范的、详细的文档。包括了一份完整的设计稿和设计手册（包括了各种应用规范）

• Design Comps(comprehensive artwork)

• Style Guides (brand, identity, logo design, page templates…)