Claudio Guglieri 在纽约广告公司 B-Reel 任职总监，他撰写了本网站设计培训指南，通过分享自己多年从事设计工作中看到的一些常见错误，尤其是“网站设计培训”中所述的实习生和新手们的通病。来帮助您了解设计网站布局的全过程。
01. 先在纸上整理思绪
世界各处城市插图系列简笔
此条显然很重要，但是我经常发现一些设计师会跳过这步直接使用 Photoshop CS6 而不去思考他们需要解决的问题。设计的目的在于解决问题，而这些有待解决的问题无法通过渐变或阴影效果得到解决，而是需要完美的布局和清晰的结构。想一想内容、布局和功能，然后再开始上阴影效果。
02. 从顶层框架草图入手 UX sketch
草绘基本的框架将帮助你解决 UX 问题，并组织布局结构
如果我要做一个项目的外观和感觉，第一件事就是先建一个顶层框架，可解决所有设计问题。框架是指内容周围的 UI，有助于执行操作并进行浏览。其中包括导航和各类组件，例如边栏和底栏。如果你从这点着手设计，则设计主页以外的部分时，布局内容将了然于心。
03. 为 PSD 添加网格
以 10 像素基线绘制的 978 网格示例
这步操作非常简单。在 Photoshop 中着手设计任何内容前，你需要创建一个合适的网格。这一步的道理众所周知，如果你没有这么做，我可以断言，最后的设计总是无法尽善尽美。借助于网格，你能安排不同部分的布局结构;还能指导你按照特定屏幕尺寸要求进行设计，并能帮助你创建相应的模板，以便符合间距和其他设计问题。
04. 选择排版样式
根据常规经验，一个网站布局中所用字型最好不要超过两种。了解不同的字型和配色是项目开发阶段的工作。我建议一个网站中所用字型不要超过两种，不过实际上，还需取决于你可用的色系。总之，所选字体需便于阅读大量文字，且与标题和操作相映成趣。大胆使用大字体，并在使用字型时保持整体一致性和生动感。
05. 选择主题颜色
使用有限的色阶和色调以免产生视觉疲劳。
选完要使用的一系列字型后，你应开始研究 UI、背景和文本该用什么颜色。关于颜色，我建议在处理常规用户界面是用色及色调需简洁。根据元素功能在设计 UI 时保持一致性非常重要。想想 Facebook、Twitter、Quora 和 Vimeo 之类的网站布局。除 UI 外，插图或图形细节部分只要没有干扰组件功能的话，在用色方面也没什么限制。
06. 划分布局
网站结构越简单，用户浏览时就越方便。网站各个部分都需要发挥各自的作用。对于用户而言，每个部分都有各自存在的理由，并能得到相应的最终结果。布局需要帮助强调其内容着重显示该部分最重要的信息。实际上，一个页面并不需要太多调用按钮，因此每个内容都应推动到最终“我可以在此实现什么目的”。思考一下，你可以为一个简单的目标构想到的最简单的布局，并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。