在下面的這個設計案例中，在照片上配上文字會使其變得難以閱讀，在白色的文字上添加紫色到藍色的漸變色，就成了一個很好的對比。
色相，色調（英：Hue）是指，在從很久以前就開始使用的12色色輪中，所選擇的特定的顏色名稱的繪畫用語。但是這種色彩的原理，不管是繪畫還是網頁設計，都可以去利用他。不知道從什么世紀開始，為了創建出對比的組合，畫家們就開始利用色輪上的對比色了。
1.互補色（英: Complementary）：他指的是選擇色輪上面對面的那一組顏色，例如紅和綠，藍和橙?；パa色的特點是高對比度，所以如何掌握顏色之間的平衡，也就成了難點。
在下面的設計案例中，使用了簡單的互補色，他看起來非常的有吸引力，他將圖像中的各種情報都整理的很好，是非常具有實際意義的設計案例。
2.分散互補色（英: Split-Complementary）：他只的是選中主色之后，分布在主色對面的互補色兩側相鄰的顏色。這種配色有較強的視覺對比，可以設計出有著強烈碰撞的設計效果。
3.三色系（英: Triadic）：他指的是選中主色后，以主色畫一個等邊三角形的配色方案。
當你在使用色輪進行設計時，我們要有“沒必要只是用純色”這樣的念頭。在越來越多的實踐中，不斷的去嘗試提高降低顏色的明度和各種各樣的顏色組合，來表現出最棒的對比效果吧。
所有的顏色都是有溫度的，他可以被分為暖色（英: Warm）、冷色（英: Cool）或者中性色（英: Neutral）。紅色、橙色或者黃色會給人溫暖的感覺，而藍色、綠色則會給人冷的感覺，黑和白就給人中性的感覺（還有些不常見的米色和茶色，也歸屬這一類。），顏色就按這樣來進行劃分。利用顏色的溫度的不同來進行配色，例如暖色和冷色進行組合，可以給人一種巨大的反差。
就好像下面這個設計案例，使用鮮艷的藍色和黃色這樣不同的色溫，在網頁布局上實現了對比。像這樣，Call?to?Action（行為召喚：http://cued.xunlei.com/log046）將按鈕與背景區分出來，產生引人注意的效果。更進一步來說，什么樣的顏色被稱為寒色（呈綠色的色調：英: ‘Greenish’ Tinge）等，已經有一個統一的對比的組合。
顏色的濃度（英: The Intensity of A Color），也被稱為色彩飽和度（英: Saturation）。純粹明亮的顏色，他的飽和度狀態就是100%；越是接近灰色，他的飽和度也就越低。明亮的色調和黑色一起使用的話，就能產生特別的引人注意的效果。在設計中可以作為一個特別的組成部分，為了強調出重要的部分，一定要謹慎的使用。
在下面的這個設計案例中，可以使用降低了飽和度的橙紅色，將其放置在山頂同樣降低了飽和度的綠色上。利用互補色組合（英：Complementary Color Scheme），通過調整色彩的飽和度來吸引眼球，為你的設計賦予更多的活力。
大多數圖形（英: Shape），是可以被分類為具有幾何意義的幾何圖形（英: Geometric）（例如長方形，三角形和圓形），或者不規則（英: Organic）（流線型（英: Fluid）或者受自然影響的形狀（英:Nature-Inspired））。在均勻對稱的幾何圖形的角落，使用一些柔和的非對稱（英: Asymmetrical Quality）的不規則圖形，可以進行很好的對比。
下面的這個設計案例，在復雜抽象的（英: Abstract）有機圖片中，我們可以看到，很好的插入了強調排版的直線和曲線，他們補充的位置非常好。
在使用圖形幫助設計的另一個方法，就是利用邊框。在任何設計要素中，比如按鈕，就可以使用銳角邊（英: Edges）或者是曲線邊（英: Corner）。按鈕的形狀越柔軟，圓滑，給人的視覺效果就越友好。角的形狀越是整齊，給人的感覺就越是嚴肅。（參考：http://www.jianshu.com/p/f575891409c8）通過兩種不同的形狀，我們可以創建一個對比。在下面這個設計案例中，我們可以看到很好的利用了銳角和曲線進行排版，表現出了一種驚人的對比感。
圖片相同，設計的要素不同，例如使用紋理（英: Textures），對比的效果也就出來了。粗糙（英: Rough）與細致（英: Smooth），硬（英：Hard）與軟（英: Soft），立體（英: Raised）與平面（英: Flat）等。作為特殊的打印加工，紋理和別的技術不同，可以應用于任何內容。通過使用網絡上免費的素材，可能性是非常廣闊的。
在下面這個案例中，在清爽的LOGO上，添加上砂質紋理（英: Gritty），表現出一種復古的質感。粗糙質感的紋理和復古的顏色，是為了表現出復古氛圍的最佳選擇。
對比不僅可以增加視覺趣味，也可以幫助我們展現相關聯的設計要素的優先級。如果設計要素的尺寸相同，就無法表現出他們的層級（英: Hierachy）關系。不管是怎樣的讀者，我們都需要將重要的東西優先傳達給他們。有效的利用比例（英: Scale），在實踐中不僅非常重要，在添加動態布局設計中，也是非常簡單的一種技術。
在下面這個設計案例中，使用了被擴展的非常大的照片作為雜志封面，也不會對其他的設計要素進行干擾。實際上，通過調整大小，形狀和配色、版式，可以強調出照片的焦點部分。
在比例和尺寸相同的情況下，利用視覺重量（英: Visual Weight）【http://uec.nq.com/works/176】就可以將設計中重要的部分給凸顯出來了。在視覺重量中，將那個元素與剩余的元素進行顯著的區分，這種方法我們稱之為高對比度（英: High-Contrast）。被視覺重量所采用的設計要素，沒有必要是最大的。此外，通過使用紋理。配色和圖形等，給他一種【重（英: Weighty）】的印象，也能做出有魅力的設計。
在下面的設計案例中，是介紹在美國辛辛那提，有著當地文化氣息的建筑的明信片。當然，建筑在明信片中是最大的設計要素，但關鍵詞“Enjoy more”卻更能吸引眼球。這當然是因為，他的顏色是最暗（英: Darkest）的。
在有限的空間中，為了最大化的填入信息，我們常利用填補式的設計，但留白或者空白（英: Blank），負（英: Negative）空間等方法，將設計要素進行區分/整理，做成一個平衡的布局，也是非常重要的。當然，如果你在設計時使用了很多復雜的布局，在設計重要的要素時就要記得留白。通過這種方法，你可以將用戶的時間集中到重要的要素上，從而和其他的要素產生有效的對比。
在下面的這個設計案例中，留白和細邊框線相結合，我們就完成了將網頁信息精辟概括的設計模型。在左右上下進行了適當的留白，在產品信息中也利用了留白，引起了用戶的興趣。
