接下來我會給大家列一些要點，并附上相應的例子，與大家分享一下我在他人的網頁設計中尋覓“高質量”的進程。
01. 留白
在好的網頁設計中我最留意的是那些對設計元素之間留白的聰明運用。留心不同內容區塊之間的間距和陳列方式，能讓你的設計的全體感官大不一樣，從而提升設計的質量。
我覺得處置好留白的關鍵是從全體上感知設計元素。把設計稿減少觀看會是個好方法。
出色的留白處置的實例
Good.is
頁面整潔而有開放感，全都得益于設計師對文字和圖像之間留白量的精確掌握。
Digital Mash
在大空白上展現的元素往往更具吸引力。Digital Mash的網站發明了極佳的親和力。
Creatica Daily 的大量空白
優秀的留白運用又一次讓網頁內容成為焦點。每篇文章中都有大量內容，不過該站點的設計師們并不憚于給這么多內容之間填上大量留白。并不是說你的文字不夠多，就不能用很多留白。
Postbox 上也有很多空白
細心察看Postbox的網站，你能看到邊緣處的留白應該如何處置。它的方框邊緣有60像素的邊內留白。聽起來似乎挺大的，實踐看起來效果卻好極了。
留白時的錯誤
大家在設計留白時的最罕見問題就是各個區塊的內容到邊緣間隔太小。不管你的設計多么有作風，假如你硬要把東西塞得緊緊的，這些作風連同設計的質量，就都流失了。
留白不夠的例子
我們已經看到PostBox的網站那些大留白發明了多么動人的效果，所以下面我們修正一下它的頁面，看看減少留白會是什么效果：
質量感分明下降了。留白的影響就有這么大。
高效控制留白的技巧
各種不同狀況下，留白要求都不盡相同。你需求不時訓練本人，做到對留白所能帶來的改動時辰心中有數，從而有效地利用留白滿足設計需求。這要靠團體覺得的，不過都能從理論中錘煉出來。
●運用網格輔佐設計
利用網格當然能協助你了解元素之間的空白。
●不時嘗試
不時嘗試―失敗―嘗試，直到找到最佳方案。
●留白并不是浪費空間
空白并不總是等著你去填充的。
●沒錯，少就是多
與其用盡心思填滿某個區域，不如就把它留空，只保存至關重要的信息就好。
02. 像素級的完滿
有一個辦法可以看出某人在完成一項網頁設計時能否真的用心了。有時分發明奇觀的就是一些小細節，一些他人簡直無法發覺的細節。我所說的“像素級的完 美”就是指在線條、邊緣和邊框描邊上細心琢磨。與其就用一條單一的線，不如多加一些細節。細節可以是纖細的突變，也完全可以只是一條1像素寬的細線（用作表現陰影或高光）。有了這些細節， 你的設計會大不一樣。有些設計師在這方面特擅長： Collis Ta’eed, David Leggett 以及 Wolfgang Bartelme.
像素級完滿細節的實例
Envato的細節鑒賞
下圖的Example 1 (例子1)中，綠色內容框的邊緣有一條更亮的綠色線。而Example 2處，區塊內邊緣有柔和的突變陰影，而邊緣之上還有一像素的白色描邊。這做法十分聰明，用陰影來強調高光。后面的綠色區域有十分柔和纖細的光影效果，有助于將留意力吸引到下面的白色區塊中那清爽脆爽的細節上去。 雖然這種做法并不是總能讓設計看起來愈加精致，不過它們確實能協助你賦予設計以三維的真實感。于是設計元素就成了鑲嵌在頁面上的寶石，而不是平鋪在上面的一張毫無動感的紙。
Tutorial9.net上的細節
David Leggett 關于如何制造 單像素頂邊條 有很深的了解。他最近重新設計的 tutorial9 集合了很多十分棒的像素化技巧。 Example 1 處你能看到，他是如何僅僅經過添加一條1像素的高光，而將導航標簽變得更有質感。Example 2 處運用的技巧則更多了。相機圖標的投影，下方白色區域的陰影與高光，以及導航條上的1像素高光。
RedBrick Health上 按鈕和分割線上的完滿像素級細節
這個美麗的導航菜單，由Ryan Scherf 發明，是運用完滿像素級細節提升設計質量的絕佳實例。紅色按鈕有1像素的高亮，鏈接之間的分割線也有同等的質量與細節。正如你所看到的，他沒有滿足于只用一條灰色線分割，Ryan還在下面添加了一條1像素寬的高光線，防止了設計看起來過于平整。
完滿像素級細節也適用于Grunge作風: AvalonStar
譯注：Grunge作風有“做舊”、“迷幻搖滾”、“做臟”等幾層意思在里面，算是平面藝術中的一個流派。
下面的例子是美麗的AvalonStar：Distortion（歪曲）主題博客，有著極贊的grunge作風。不過，即使是齷齪做舊的grunge風，利用1像素高光也能發明大不同。下圖的Example 1 處，上面的棕色區域有一個突變陰影，下面的綠色區塊的頂部則有著一條1像素高亮線。陰影與1像素線的結合，讓這些區塊顯得更為精致。
完滿細節小貼士
要在這一技巧上到達完滿，不時的理論尤為重要。如您所見，一條1像素線這么簡單的東西就能給設計添加十分酷的深度感。你甚至不一定要用到那些倒角或突變，費盡心力做一些實真實在的置于某對象之上的效果。
●一定得是細節
小細節完善內容感官是關鍵。
●考慮像素級問題
描邊、突變、線條、陰影等等，不必太寬大也能有效加強設計
●前后比照
使用效果后留意與沒有這種效果之前進行比照。如此你就能曉得這些細節究竟帶來了哪些改觀。
03. 文字陳列與字體選用的竅門
雖然設計師大都不會親身撰寫網站的實踐內容，不過他們關于內容的全體質量依然至關重要。設計師的作用就是要保證內容的展示方式足夠易讀。有很多辦法能保證你的字體易讀易用，不過我不會給大家列一些該做什么或許不能做什么的規矩和條款，我帶給大家的是一些聰明運用字體的實例和剖析。
細心思索了字體的實例
The Netsetter上大而美麗的字體
網頁設計中，標題很重要，關于博客設計來說尤為如此。最近盛行在標題上運用大而粗的字體。這樣做有很多益處，不只能進步特定內容區塊的可用性，而且有助于組織設計中的空間和構造。 Netsetter 在這方面做得十分好，如您所見，標題字體很大，四周有大量留白，非常易讀。
行間空白和字符間距
Viget 的網站是字體終究對網頁設計有多重要的完滿實例。下面的截圖來自他們的作品集展現頁，再一次展現了大字體是如何協助創立開放空間的。即便是這種清新的細線體，他們也運用了開闊的空白。另一個值得稱道的地方是他們關于行高 (line height) [行間空白]的的絕妙選擇。行間距被設定得比默許值大很多，大大加強了文字可讀性。也許下次你可以在本人的設計中也試一試這個技巧。
Web Design Ledger, 配合心情的字體
要找到完滿的字體需求不時的嘗試和失敗，或許你還可以依據字體所代表的“心情”來選擇字體。下面的例子，Web Design Ledger， 在給人以復古和做舊感的同時，也飽含開放的心情與現代感。他成功的關鍵就在于選擇了能喚起人們相應心情的字體。Henry Jones (該站的設計師) 為標題選擇了一種盛行的傳統襯線字體：Georgia，為懷舊復古風的完成提供了很大裨益。現代感則來自與標題完全不同的字體――主內容運用的Helvetica字體，一種無襯線的、滑溜的、開放的字體。
網頁設計中字體選用的疾速決斷
看了上面這么多好例子，未來你選用起字體來應該會愈加隨心所欲。不過，為什么他們給人的覺得這么好？下一次在你本人的設計中，你又該如何運用？
●能否可讀？
不要怕嘗試粗大的字體
●你可否思索過間距？
間距關于可讀性有很大決議作用
●你的字體帶給人什么心情？
確保字體選擇合適你的設計作風
這方面還有大量值得關注的地方，不過我不是這方面的專家，我也只是剛剛學會了如何鑒賞那些用得極好的字體而已。假如你想在這方面理解更多，激烈建議你看一下來自Smashing Magazine的這篇文章。
04. 元素的組織
設計師這一職業對很多人都有吸引力，由于那些制造創意的進程，真實是非常風趣。我曉得組織內容的進程就沒有那么風趣了，不過一旦你養成了組織內容的好習氣，你就會發現其實它也沒有想象中那么單調。組織內容的方式總是需求看狀況而定，比方說，這站點是什么類型？某項特定內容在頁面上的重要性如何？
如何放置內容，以及放到哪里，可能的陳列組合真實太多了。不過還是有一些技巧可循的。最基礎的就是，先決議你的設計需求到達的效果。例如，你是在做賣東西的網站嗎？是要做內容展現嗎？或許是在做一個用戶注冊頁？推廣頁面？等等……
靠設計做買賣: 37Signals
看看這個廣受歡送的 37 signals 的網站。他們的東西能賣這么好，可不是靠的運氣。他們的網站讓你盡可能容易地理解了他們的產品， 幫你做出最終決議。你所看見的東西都被精妙地設計而出現。
如圖中所示，他們提供了四大理由讓你購置他們的產品。吸引留意力(Attention)是第一步，他們做了一個黑色區塊，放上關于產品的簡單引見，并且運用了粗大的標題。 接著，他們經過一些美麗的插畫把你的興趣(Interest)吸引到對產品優點的引見上。再然后，他們想要讓你產生購置需求(Desire)，這能經過放置客戶評論引言和產品獲獎證書來完成。在這一實例中，他們是經過幾個“What our Customers have to say”（我們的客戶如是說）的視頻來完成的。最后要完成的即促進購置舉動(Action)； 37Signals 的網站上有大量舉動點(action points，即引導用戶進行下一步操作的鏈接)貫串于整個頁面，由于頁面很長，頁面底部還放置了更多的舉動點。
為內容(Blog)而設計: Well Medicated
設計博客頁面時的狀況則大不一樣了。你不必花力氣勸說你的用戶信任你的產品，你的“產品”已經展現在他們面前―― 也就是你的博客內容。你要做的就是確保用戶能輕松閱讀你的文章，探究內容，與你和你的博客產生聯絡。
內容(Content) 應該是博客中呈現在讀者眼前的首要局部（之一）。在下面的例子中，一個粉紅色粗體字的標題，很好地吸引了你的留意力，引導你間接關注文章內容。左側放了張大小適宜的預覽圖，右邊則是兩三段文章摘要，和一個“持續閱讀”的鏈接。當然，也有規范的日期和作者信息。這幾乎就是我心目“內容設計”的完滿實例。留意力(Attention) 可以被引導就任何風趣的事物上。在這個例子中，美麗的RSS訂閱按鈕成為了焦點。且不說這個焦點讓讀者產生了與內容的聯絡感，它還能協助網站取得更多的訂閱量。鼓舞你的讀者探究你的內容相當簡單，只需在邊欄上加一些最新文章或最受歡送文章的鏈接列表，或許制造一個下拉菜單，或許組織一個其他你想要推送的內容的高效列表。做起來很簡單，效果卻足夠有效，尤其是對博客來說。博客是一個私人領地，經過不同的途徑通知讀者你的聯絡方式(Connect) ，能協助他們理解你，也說不定會帶來不測的益處。
組織內容小貼士
你當然可能會遇到需求打破慣例，選用非同尋常方式的時分，不過你還是可以遵照這些簡單技巧，以保證內容構造和閱讀順序的良好。
●你為何而設計?
如前所述，確定設計的目的。
●利用網格
網格協助你發揚頁面的最大潛能。
●測試元素位置
以拜訪者的角度調查內容的易用性。
●移除一切不用要元素
不用要的東西都應該被消滅，或許至少不要放到顯眼的地方
●留意力的平衡
有些東西需求被簡單化，好讓另外的事物閃耀光芒
05. 自我抑制與精妙細節
設計師總是在尋覓制造沖擊力的方式，總是想做一個無獨有偶的設計，發明些史無前例的效果。不過有時分經過自我抑制也能構成沖擊力。量變產生質變，過多的“好”也會帶出不好的后果。好的設計師知道均衡點在哪里，并且能防止讓過多的特殊效果毀了一項設計。
“Things”網站上的柔和突變
關于我拜訪過的站點，我總是很關注他們的纖細突變。聽起來可能有點惱火，不過我就是忍不住要去研討他人的那些小細節，以積聚我未來設計時的靈感。突變是最被濫用的設計辦法之一，不過運用成功的話，還是能讓設計增色不少，它所能提供的真實感和深度感是其他技巧所不能到達的。大局部人都不太留意突變，不過他人對突變的運用的確是我最好的靈感來源。
Icon Dock 上的投影
Icon Dock的網站幾乎就是各種精妙細節聚在一同開大會。像素級高光，突變，以及投影。不過在這里我們只關注它的投影。不是很大，通明度也被調高，小心翼翼地襯托著內容區塊，讓其成為真正的焦點。真實美麗~
精密的背景材質：Scouting for Girls
材質性背景要么成全你的設計，要么毀掉你的設計。很多復雜的背景除了分散讀者留意力，沒有帶來任何益處。最終使得設計質量大為降低。所以，最好還是不斷堅持你的背景材質纖細而柔和。 Scouting for Girls的網站在運用材質打造全體作風和設計質量方面做得極好。
做舊與撕碎的啟示： Viget Advance
我歷來不覺得越纖細越好，任何細節的“細度”都以可見為前提。可能人們并沒有清楚地認識到，不過這些細節肯定的確產生了影響。博客Viget Advance的例子中，在做舊與撕碎效果方面，能給我們一點啟示。 只是十分纖細的做舊，不過假如沒有這效果，這張人造紙就會顯得平鋪直敘，單調乏味了。正是這些小小的“不完滿”讓這畫面顯得更可信，更真實。
WebDesignerWall 上的水彩效果
運用水彩效果的時分，關鍵是要確保顏色混合得足夠柔和，濃淡變化適合，而且… 足夠“水”。水彩效果為你的設計提供很多益處：精密而調和的多種顏色，感染力極強的材質感…… 正因如此，越來越多的設計師選擇了在他們的設計中發明水彩效果。
精妙的植物：Dara’s Garden
下面是一個充溢智慧的關于精妙植物細節的設計。網上還有很多愈加栩栩如生的植物圖案，而且也十分美麗，不過這個例子中，我關注的是背景上那些更清淡更奇妙的細節。這個例子展示了細節的重要性，柔和的顏色，做舊的效果，喚起你對細節的感知，不過卻并不構成為主要焦點。
運用精妙細節的小貼士
我以為，精妙細節能讓一項好的設計升華為絢爛耀眼的設計。假如你還在尋覓讓設計異乎尋常的辦法，精妙細節是個不錯的嘗試方向。 以下是關于運用精妙細節的小貼士：
●創立細節圖層
不要在一個筆刷或材質上吊死，多加些圖層，多做點細節
●嘗試不同通明度和顏色
有時分只要 3% 的不通明度也能產生正面影響
●回絕縮頭縮腦
不要擔憂太多纖細，或許太不分明
06. 發揚顏色的全部潛能
設計師普通喜歡依照本人的品嘗來選擇顏色，這可真實太不專業了。要決議哪種顏色是最適用的，你的腦子里想的應該不斷是品牌需求，然后選好顏色的搭配組合，指定其專屬的主題和目的心情。
網頁設計中顏色運用的絕妙例子
無趣并不代表無色：Oypro
Oypro的網站讓我喜歡的地方是，他們通知了我們，一項“無聊”的行業相應的設計并不一定也得“無聊”。通常企業的網站都不允許設計師有太多視覺創意上的發揚。堅持簡單、單調、淡彩色成了不成文的規則。不過Oypro的例子證明，不必約束本人，你也能發明出一個有足夠“企業感”的網站。
讓顏色互相聯絡：Tennessee Summertime
Summertime in Tennessee(田納西州夏日觀光) 是一個充溢生機的、亮堂的，十分暖和的站點。一切一切看起來都是為了推送夏日活動而設計。該站點運用了十分多不同色相的高飽和度色，但每一種顏色都切中關鍵，沒有一種是不合適主題的。高質量設計的顏色搭配肯定與其要出現的效勞或產品親密關聯。好的設計并不總是需求費盡心力選一些出奇制勝的顏色，那些最分明最該用的顏色反而能發明更好的效果。比方說 Hell Design(地獄設計)，不必意味地獄的火紅色幾乎說不過來。
背景還可以大作文章：Saturized Studio
只涂一層單調的背風光可沒法讓你的設計變得風趣。有一點變化的背影才是最好的背景。此例中我們看到，美麗的橙/紅色被運用到各種各樣的光照和突變效果中。這種為背景添加變化的做法，有效防止了平淡和沉悶。另一個需求特別留意的地方是，暗深橙色背景與上層亮堂內容區的比照產生了十分戲劇化的美麗的視覺沖擊。
在網頁設計中運用顏色的小貼士
顏色永遠是值得探究和嘗試的區域。嘗試不同的組合變化能為設計帶來無限可能。不過選擇顏色和顏色搭配時，應該做到對下面的要點心中有數：
●嘗試打破
無趣的主題并不一定得運用無趣的顏色組合。
●多變
嘗試在你多彩的背景上運用突變、反復圖案、筆刷，光有顏色可不容易讓設計顯得美觀。
●堅持主題
確保你的用色與你需求出現的產品/效勞有關聯。
07. 做他人沒做過的事
最好的網站中有一些非同尋常的，奇異的，甚至可以算得上詭異的設計。不過那些應戰傳統的嘗試說不定會已經改動了傳統的定義。話說回來，要做到完全原創，發明出沒人做過的東西真實是設計進程中最難做的事。
打破慣例之后，成功與失敗只要一步之遙。你要么做出令人冷艷的聰明設計，要么做出一堆渣滓飽受批判。他人歷來不這么做是有緣由的，由于有些點子真實是糟透了。要從人們曉得并喜歡的區域走出來，你得十分英勇才行。下面是一些相關實例：
MB Dragan 上的獨特導航
不是你通常所見的站點導航，但看起來還是一個網站，同那些規范導航同樣的好。這樣做有點冒險，但后果十分契合該網站特質。非常離題的設計，很難讓人不欣賞這導航與整個設計之間的配合照應。
Visualbox(視覺盒子) 十分視覺化的導航
Visualbox的網站只要一個目的，向你展現他們充溢智慧的作品。所以他們沒有用多少文字，你第一眼看到的就是他們的名字和作品選集。 鼠標滑過預覽圖片時，會顯示進項目稱號，點擊時會帶你滑到頁面中該項目的相應位置。這是十分高效而適用的處理方案，而且比簡單地堆一個列表出來要吸引人得多。
廢話不多說的Nikola Mircic
假定你是位交互設計師，你需求他人看了你的作品，能打動得雇用你。Nikola Mircic 為我們展現了“直截了當”對建造一個令人難忘的站點有多大的作用。一翻開他的站點，各種作風的作品就向你問好，他的名字和職業放在頁頂的醒目位置，當然，聯絡鏈接沒少。沒有大量多余文字來勸說你雇傭他，作品自身就證明了他的實力。當然，點擊作品縮略圖會呈現一個詳細引見頁，里面就有足夠的文字了。真實喜歡他組織內容的方式。
理論新穎想法的小貼士
上面的例子并不是為了“激起”你的獨特創意，只是一些我發現的一些很獨特的站點，僅此而已。現實上，你也不應該四處搜索，尋覓新想法的靈感，由于這樣你的點子也是受他人的啟示，與完全創新是相悖的。所以假如你計劃做真的非同尋常的東西出來，就趕快忘掉這一局部！
●保證事物之間的聯絡
假如你計劃做一些特別特別特立獨行的事，先問問本人“真的有必要嗎?”，“這樣說得過來么？”，“和品牌訴求契合嗎？”…… 假如答案是一定的，再采取舉動！
●忘掉一切已知事物！
好吧其實也并不是一切，根本準繩還是要的。話說回來，也沒必要從全新的想法里面尋覓靈感，由于那樣很容易誤入歧途。
●保證質量和水準
根本上我覺得假如你的新想法足夠好，判別質量終究如何對你來說應該很容易。
關于高質量設計你有什么看法？
讓一項設計因高質量脫穎而出，真實觸及到太多方面。我只能說我列出了一些根本要點。所以我希望能聽聽您對這一問題有何高見？在判別一件網頁設計作品能否顯示出高質量時，你最關注的是什么呢？
