进入佛罗里达乡村瓷砖网站，一家真实的客户网站。它是一家佛罗里达当地的小的瓷砖和石料安装公司，经过公司同意，我使用这家我参与建设的网站项目作为讲解案例。开始，这家公司没有网站，它唯一的特征就是如图所示你看到的名片和标志。
我曾经改变了名片上公司的联系信息，但是这就是全部，除了此处外，这张名片与其他名片没有什么区别。正像你知道的，这种情形与我在本章开头介绍的一样：公司没有建立强大的视觉识别系统。
通常，客户关于网站应该长成什么样有自己的想法。这些客户的预先想法可能有助于你的设计过程，也可能阻挠你的设计过程，但往往是阻挠。然而幸运的是，在这个项目中，我被给予了很大的自由来决定如何设计，我计划用本书将要提到的理论来设计这个网站，希望，“Ed the Client”会对结果满意，读者也会看到一个设计方法的清晰画面，而在这之前，我的描述非常含糊不清。
开始
开始前，我安排了一个会议，与客户讨论的需求和对网站的期望。不幸的是，我在南加州，而Ed在佛罗里达，因此，我们不得不通过电话来讨论，虽然，我已经非常了解客户了，也能回答自己所问的关于他们公司的问题，但是我还是与他通了电话，与以前大多数项目采用的方法不同，我与ED交流网站的每一部分，这里有3个关于布局的关键问题：
1、想在网站中放什么内容？
2、想在网站上放什么内容？
3、将一直使用的名片上的标志作为公司的标志吗？
我想知道需要设计多少页面，这样我才能估计我的主导航菜单有多大。与ED沟通前，我简单写了一个必须需要的元素列表：首页、关于公司、联系信息。在进一步思考了瓷砖行业的特点并且看了一些同行业的站点后，我决定增加展示厅、服务、估价询价等页面。
当我和ED沟通时，他对这个页面列表非常满意，但是他想知道以后是否可以增加一两个页面。我告诉他我会在页面布局上增加一些灵活性，以确保他可以添加新的页面，并告诉他甚至可以在这些主板块下增加子页面。
同时，我也告诉ED我想了解公司LOGO的原因，现在的矩形瓷砖样式限制了设计，ED对此很理解，并且说公司的T恤衫上使用了一个简单的LOGO的样式，如图，T恤上只使用了“county title”这个词，他建议如果我觉得好，可以使用这种风格的logo。
交谈很有成效，我得到了我想要的重要信息，好像也找到了logo的合适样式，因为导航条上有6~8个页面，我可以使用边导航，而且，页面顶上也有足够的空间放置导航，实际上，这一切听上去很不错，我想现在时转移到栅格页面上的时候了。
与其使用常用的79孔的笔记本，不如从打印盒里拿出一张白纸，在上面画上4个3*3的格子，我还不知道如何使用logo，当这点问题不大，我只要想好如何划分空白区域就好了，毕竟，讨论右边栏的布局没什么用，我正在想在右边栏上放一个多用途的工具条。我们常在一些页面的右边栏放一些内容，比如图形或特征栏目，也可能在服务页面上作为子导航栏。可以使用前面谈到过的强调方法使部分内容突出，但是，必须牢记关于统一的讨论，使这个子栏和整个页面的设计相符。
有了这些事先准备，我很快画出了4个草图，如下图所示。
第一草图（左上角）中，工具条和主内容放在页面三分之一的高度处，看上去还好，但是有点普通。
我的第二个草图（右上角）右边栏改在左边了，然后，我把logo放在内容的上面，在工具条上放了一张公司的图形，我立刻觉得logo的放置不好，我觉得左边栏太突出了，此外上面看上去像一个神秘的物体——“LIKE ZOINKS”。
我的第三个草图（左下角）也没好到哪去，我把logo放在左上角格子的底部，虽然我喜欢内容的位置，短小logo的放置位置使页面布局看起来不统一。
到了第四个草图（右下脚），“一球两击”（棒球短语），对于内容和工具条，我决定使用和第三个草图同样的布局，但是，我把logo和目录尽量放在页面的顶部，然后，我意识到可以在内容顶部和导航栏之间放置图形栏。
我对最后的草图很满意，所以不选第一个了，接着就转到在ADOBE ILLUSTRATOR中设计布局了。我不期望在网站上放置很多内容，所以，最好还是使用固定宽度的页面，每次我采用固定宽度的布局时，脑子里总是不自觉的迸出一些问题：页面边界外面的空白处放什么呢？是和背景混在一起吗？还是用不同的颜色或者背景图形？我们将在以后的文章中详细讨论如何选择背景图像。
在图形软件上处理的方式与纸上画的是一样的，我建了一个3*3的栅格，并在上面创建了一个与纸上画的相似的布局。我使用不同的灰色，因此我不担心选择什么色彩，以后将讨论这些问题，此时，尽量在不同的板块间形成对比，这样我就可以区分不同的板块，以及哪些板块使用单独的色彩。下图是我手工操作的结果。
本节之前，我曾说一个好的网站设计中，用户“意识到每个页面属于同一个设计”。但是那不是非得每个页面的布局都完全一样。事实上，我常把首页设计得和其他页面有一些对比。现在，我正努力固定版面布局。确定布局后，就可以给页面上色彩和材质，修改一下布局，这样首页就会有一点图形的感觉。看一下图，图中展示了ROAN LAVERY's个人站点的首页，ZEN的故事页面（renegadezen.com）。
请注意ROAN如何扩展首页的标题内容，并以此来显示介绍页的内容，同时，也检查一下这两个页面的内容区域的变化，在首页中，我们第一眼看到的是照片和图形，有三栏，与此形成对比的是，ZEN的故事页面只有文字介绍，并且减少到了两栏。虽然页面的布局根据用途的变化略微变化了，但是网站整体设计看上去还是具有一致性的。这种对比就是前面我们所说的对比，现在我就有了一个固定的基础布局了。