ClaudioGuglieri在纽约的广告公司B-Reel担任总监。他写了本网站的设计训练指南，目的是帮助理解设计网站布局的全过程。
在我开始谈论设计网站布局的主题之前，我想分享我在设计工作中看到的一些常见的错误，特别是网络设计培训中描述的实习生和新手的常见问题。
断文列出了建立完美网站布局的步骤，旨在涵盖新项目前和项目设计过程中的各个应该知识，适合数字广告公司内就业的所有网站设计师新人阅读。
以下准则不仅包含各种设计细节，还提供了一般工作流程，可帮助您更有效地完成工作。根据这些原则，您可以立即设计专业网站布局。
01.先在纸上整理思绪
这篇文章显然很重要，但我经常发现一些设计师跳过这个步骤，使用PhotoshopCS6而不考虑他们需要解决的问题。设计的目的是解决这一问题，不能通过渐变或阴影效应来解决，而是需要完善的布局和清晰的结构。仔细考虑内容、布局和功能，开始阴影效果。
02.从顶层框架草图入手
如果我想做一个项目的外观和感觉，第一件事是建立一个顶级的框架来解决所有的设计问题。框架是围绕内容的UI，帮助执行操作和浏览。这包括导航和各种组件，例如边栏和底座。
从这一点开始设计的话，在设计主页以外的部分时，会知道布局内容。
03.为PSD添加网格
这步操作非常简单。在开始设计photoshop中的任何东西之前，您需要创建一个合适的网格。这一步的道理是众所周知的。我可以断言如果你不那样做的话，最后的设计总是不完美。
借助网格，你可以安排不同部分的版面结构；还可以指导你根据特定的画面尺寸要求进行设计，帮助你打造相应的模板，满足间距和其他设计问题。
04.选择排版样式
理解不同的字体和配色是项目开发阶段的工作。建议一个站点使用的字体不要超过两种，实际上取决于你可以使用的颜色系统。也就是说，选择的字体容易读懂大量的文字，对标题和操作感兴趣。大胆使用大型字体，使用字体时保持整体一致性和生动性。
05.选择主题颜色
选择了要使用的一组字体后，请考虑UI、背景和文本的颜色。对于颜色，在一般使用者介面中处理颜色和色调时，建议简洁。
基于元素功能的UI设计必须保持一致。想想Facebook、Twitter、Quora和Vimeo之类的网站布局。除了UI之外，只要插图或图形细节不干扰组件的功能，颜色的使用就没有限制。
06.划分布局
网站的每个部分都需要发挥作用。对于用户，每个部分都有自己的存在理由，并得到相应的最终结果。布局需要帮助突出其内容并突出本节最重要的信息。事实上，一个页面不需要很多调用按钮，所以每个内容都应该被推到最后，我可以在这里做什么。
思考一下，你可以为一个简单的目标构想到的最简单的布局，并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。
07.重新思考已建内容
作为设计者，我们构建用户浏览互联网的方式，需要多少步骤来执行一个简单的操作，以及网站的复杂性。我们一直遵循一些设计模式和实践，因为它们是有效的，但有时仅仅因为没有人有足够的时间来衡量或重新思考。重新思考构建在组件上的交互模式，看看是否可以进行改进很重要。
08.自我挑战
我鼓励每个设计师不要遵守规则，而是对每个项目提出挑战。并非每个项目都要求创新，因此，需要我们自己决定是否要增加一些交互设计相关的内容。例如，各种自我挑战可能包括使用新的网格系统，创建新的组件，甚至是小挑战，例如避免混合模式或使用特定颜色。
