网页设计是由许多不同的元素所组成，各有不同程度的重要性和一些特别的要求。有些元素是共享的关係，有些却是不相关的。困难之处在于能够传达视觉美感及成效。这是网页设计的对比的原则。

对比差异是来自两个或多个元素，设计人员可以直接创造视觉趣味让用户关注。但试想一下，如果在网页上所有的元素都是相同比重的风格和外观。就没有架构，没有层次结构与主从之分。网站内容在阅览上几乎是非常难以消化的。这是对比原则归属为一个网页设计的重要成分。

在这篇文章中，我们将看到如何透过对比实现三个方面之差异造成的设计： 色彩，大小和对齐方式。

色彩对比

色彩原则上并不局限于对比颜色，它却可以大大地帮助用户从网页元素中区分彼此。

几乎所有的网页设计有一个header，一个内容区域和一个footer。这是三个完全不同的区域，应该有一个明确的视觉分离，在背景使用对比色是一 个很好的方式达成这一目标。
在这里你会看到， 教会媒体集团的网站是一个很好的例子。header和footer的背景颜色是深色的，而内容方面是白色的。这明确展现不同的内容，甚至比其他更为重要的区域。如果我们再看看内容区域在另一个层次的衬托下，“Featured Project” 区域有一个淡蓝色的背景。即使这个区域的对比与下面的内容有点不同，但这依然感觉得出来两者是相关的

下方另一个网站，有独特的布局和特殊的配色方。他用一金黄色的对比色，创造垂直选单，其余的主要是棕色的设计。

颜色也可以用来在文章上的对比。 下方案例创造出以不同的颜色来区分层次的标题、副标题和段落内文。对于部落格的风格编排，建立对比后标题和正文是非常重要的。它可以帮助浏览者在向下捲动的页面中很容易地看到文章开始和结束。

对比尺寸

另一种方法是使用大小不同元素来製作的网页设计。
网页设计在不依靠颜色时，建立大小尺寸的对比就变得非常重要。 下方网站具有最小的配色方案和有很多的排版。因此，为了建立一个层次结构中的三列，设计者用一个更大的宽度，中间列 – 超过超过左右的两倍。这用户中间明白地表示此列是本页中最重要的。

正如颜色对比可应用于印刷标题的建立，所以可大可小，大标题是可以以一个极大的方式来建立层次结构。下方的网站，使用的大标题来抓住浏览者的注意力，吸引他们继续阅读更多较小的下文。

对比对齐

製作一个优质网页设计好的对齐是重要的部份，排列整齐就会是好看。这就是为何使用不同的编排，可以创造出对比的视觉感的小技巧，但使用起来也需要谨慎。如果使用得宜，可以创造出优异的区块差异感。

下方网站左下方使用一个大的有标题的内容区块的框。随着大尺寸的标题，这创造了良好的对比。如果你要使用这种对齐差异，一定要使它成为一个很大的区块。否则，看上去像一个设计不良的错误。

置中的段落有一大篇纯文字的文章，这使得文字很难阅读。但是，不要害怕混合左对齐段落中心的标题。它的另一个好方法，可使用不同的对齐创建出的对比。结合一个不错的衬线字体，也可以给你的版式经典外观。
下方网站使用中心的标题搭配左对齐每个段落的内容框。由于字体大小的标题是不是远大于的段落，这有助于设置标题分开。

下方网站是另一个很好的例子使用中心的标题与段落齐左。

现在与过去的不同

在设计中学习及营造合适的数量对比是掌握任何其他原则的设计，有才华的设计师需要练习及花时间来研究的，看看他们是如何使用他们的设计中的对比。请记住，对比度是分歧相关的。如果两个元素是不同性质， 需确认自己做出的视觉差异是十分明显。