这些原则不仅涵盖设计方面，还涵盖了一般工作流程，可以很好地完成工作。跟随他们，你很快就会开始创建专业的网站布局。
01.客户的目的是什么
告诉你的客户，找出目标是什么
02.把你的想法写在纸上
关于世界各地城市的插图系列的很早的草图
这似乎非常明显，但是我经常发现，设计师在考虑他们正在尝试解决的问题之前，先直接进入他们的工作。设计是解决问题，这些问题不能通过渐变或阴影解决，而是通过良好的布局和清晰的层次结构来解决。
03.开始绘制顶级框架
绘制基本的线框可以帮助您构建布局(单击右上角的图标以放大图像)
当我被要求创造一个项目的外观和感觉，我做的第一件事是提出一个顶级的框架，以解决所有的设计问题。框架是围绕内容的UI，并帮助用户执行操作并浏览它。它包括导航和组件，如侧边栏和底部栏。
如果您从这个角度来看待您的设计，您将清楚地了解在首页设计部分之后，布局需要什么。
04.添加网格
具有10px基线的978网格的示例
听起来很简单。在开始设计任何你需要一个正确的网格之前。没有网格启动没有有效的借口-如果没有，我可以向你保证，设计看起来不是很好。网格将帮助您构建不同部分的布局;它将引导您完成特定的屏幕尺寸要求，并帮助您创建响应模板，因此在间距方面以及许多其他设计问题方面是一致的。
要了解如何做到这一点，请查看本指南来创建适应所有屏幕尺寸的网格。
选择你的排版
一般的经验法则是在网站布局中使用不超过两种不同的字体
探索不同的字体和颜色是项目发现阶段的一部分。我建议不要在网站上使用两种以上的不同字体，但这实际上取决于它的性质。总的来说，选择一个容易阅读的大块文字的字体，并且更加适合标题和号召性用语。不要害怕使用大字体，并且在使用排版时具有创造性和一致性。
06.选择你的颜色主题
ColorHunt等工具旨在帮助您挑选调色板
在选择一组字体的过程中，您应该开始探索在UI，背景和文本中使用的颜色。我建议为一般用户界面使用一组有限的颜色和色调。
根据元素的功能，在UI上应用这些是非常重要的。想想Facebook，Twitter，Quora和Vimeo等网站的布局。除了UI，图形或图形细节不应该有任何颜色限制，只要它们不会干扰组件的功能。
如果您遇到困难，请查看我们的免费应用列表，以选择配色方案。
分配布局
简单的布局往往更容易导航
网站的结构越简单，用户就越容易浏览。您网站的每个部分需要讲述一个故事;它需要用户的理由和最终结果。布局应该帮助内容突出显示该故事中最重要的部分。
实际上，在一个网页上不应该有太多的号召力-所有的事情都应该推动到那个决定“我能在这里做什么”想想最简单的布局，您可以想象一个简单的目的，并开始添加必要的组件。最后，你会惊讶，很难保持简单。
08.重新思考已建立的
搜索按钮已变得过时
我们真的需要一个搜索按钮吗在大多数情况下答案是否定的。作为设计师，我们塑造了用户浏览互联网的方式，由我们来决定简单操作将采取多少步骤，以及我们的网站将如何有效。
想想动议
运动在设计交互式体验时至关重要
运动在设计交互式体验时至关重要。没有任何设计可以自己判断，或作为静态组合;每个组件都是通过与系统的关系定义的，这种关系需要运动才能正确传达。运动可以说明您的布局中对内容或交互状态的动态效果。为了第二个目的，我建议您的设计进一步进行原型设计。
原型，原型，原型
原型是测试互动的最佳方法
原型是测试交互和技术的最佳方法。现在有很多原型设计工具使其变得轻而易举，您不需要成为创建有效原型的编码大师。这是另一种方式，您可以让您的客户感到兴奋，并与理论和想法，否则需要很多解释。
挑战自己
我鼓励每个设计师在每个项目上挑战自己。创新并不总是对项目的要求，所以我们需要提出新鲜事物。不同挑战的例子可能包括使用新的网格系统，创建新的组件，或者甚至是避免混合模式或使用特定颜色的小挑战。
注意细节
工作进展中：细节视图
它可能是一个小的互动，一个意想不到的动画或美学的触摸，如一个按钮的一个渐变或在背景中一个盒子周围微妙的冲击。但总的来说，这种触摸是至关重要的-如果你真的很喜欢你所做的，这将是自然而然的。
13.优化每个组件
将每个组件视为设计比赛
每个组件都需要设计，因为它可以独立于最好的组件。有时，设计师会将某个网站的某些部分留下，直到他们的待办事项列表中，直到最后才显示出来。
锐化你的工作
在笔画和背景之间设置正确的对比度
为了避免模糊像素，请尝试在笔画和背景颜色或背景颜色之间设置正确的对比度。除了任何审美的考虑之外，还有一些常见的事情必须避免，以创造一个干净，正确的工作。
当您尝试锐化工作时，您应该注意的部分是包括渐变条纹，边缘模糊，字体渲染选项(某些字体，具体取决于其特定渲染模式下的最佳尺寸)，以及与的背景。
这些只是需要寻找的几个问题的`基本例子，但实际上这个列表是无止境的。总是看你的设计作为一个整体，看看一切是否运作良好，然后仔细分析每个组件。
15.整理你的设计文件
无论您使用什么设计工具，这一点(以及使用网格)都是最重要的建议之一。不管项目的大小和设计人员的数量如何，您需要保持文件清洁。这样可以轻松导出不同的部分，加快设计过程并与其他设计人员合作。
16.设计最佳案例;为最坏的准备
请记住，您的布局如何在不同的设备和屏幕尺寸上工作
我们需要建立一个不仅可以在理想场景下工作的站点，也可以在最坏的情况下构建一个站点。例如，一个用户可能正在使用一个非常小的屏幕，并检查该网站，当它几乎没有任何内容，所以它看起来破碎。
但是，为了展示我们的工作，我总是强烈建议为此建立最佳案例场景。因此，我们将显示理想的文本数量，我们将在理想的浏览器大小内显示该网站，这应该是大多数使用它的用户最常见的场景。
痴迷于设计，直到你讨厌它
如果您对设计充满热情，我相信这是您已经在做的事情。每当我完成一个comp我感到自豪，我倾向于使这个成为我一生的一部分。我拍摄它的截图，检查它不同的设备，制作它的壁纸，甚至打印它，挂在墙上。
作为这个过程的结果，我得到了一个点，我终于讨厌我的设计。我开始看到一切都错了，最终我改变了。不喜欢你以前的工作是成熟的迹象，这意味着你终于从自己的错误中学习了。
一旦初始概念被批准，你可以放松一点，开始生产。但是，在提出了第一个概念之后，如果客户不爱上它，那么你应该收集足够的反馈来给表格带来第二个更合适的概念。
作为开发人员最好的朋友
开发者是有创意的人，他们喜欢自己的工作，就像你一样。但是，从一开始就并不总是包含在一个项目中，而且当概念被决定并且他们的创造性角色已经被超越时，往往只会涉及到。
20.尽可能清楚地呈现
产生伟大的工作同样重要，因为它是呈现它。如果您没有正确呈现，您的最佳设计可以被忽略或抛弃。谈到演讲，你想解释你的工作，就像你展示给四岁。请记住，对于您第一次看到您的设计而言，您完全清楚的可能并不清楚。
不要太贴近你的想法
知道什么时候提倡你的想法，并学习认识你的团队或客户什么时候不认为他们是“一个”，这一点很细。作为一名设计师，您需要坚信自己所做的一切，但您也应该乐意快速转换您的任何想法并提出其他想法。不要忘记有多个解决方案。
按照您的设计进行开发
如果您在代理机构内部工作，您可能会知道，在开发新的项目时，发现自己在设计新项目时遇到困难。与一般信念相反，您的项目工作不会在PSD和样式表交付时结束。
如果您真的关心您的设计和交互方式的执行情况，请不时检查开发人员的老朋友，并尽可能地帮助他们确保每个小像素都是完美的。
显示您正在进行的工作
与社区共享您的样式表和进行中的组件
作为设计师社区的一部分，我们都非常喜欢看到最终结果，而且还在于正在进行的工作。有时，由于几个原因，项目的最佳部分被遗漏，并在“存档”文件夹中丢失。
一旦项目完成，您得到客户/生产者的批准，就可以推广该项目，如果可能的话，可能会对正在进行的工作和设计进行案例研究，而不是最终版本。