接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在他人的网页设计中寻觅“高质量”的进程。
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 为我们展现了“直截了当”对建造一个令人难忘的站点有多大的作用。一翻开他的站点，各种作风的作品就向你问好，他的名字和职业放在页顶的醒目位置，当然，联络链接没少。没有大量多余文字来劝说你雇佣他，作品自身就证明了他的实力。当然，点击作品缩略图会呈现一个详细引见页，里面就有足够的文字了。真实喜欢他组织内容的方式。
理论新颖想法的小贴士
上面的例子并不是为了“激起”你的独特创意，只是一些我发现的一些很独特的站点，仅此而已。现实上，你也不应该四处搜索，寻觅新想法的灵感，由于这样你的点子也是受他人的启示，与完全创新是相悖的。所以假如你计划做真的非同寻常的东西出来，就赶快忘掉这一局部！
●保证事物之间的联络
假如你计划做一些特别特别特立独行的事，先问问本人“真的有必要吗?”，“这样说得过来么？”，“和品牌诉求契合吗？”…… 假如答案是一定的，再采取举动！
●忘掉一切已知事物！
好吧其实也并不是一切，根本准绳还是要的。话说回来，也没必要从全新的想法里面寻觅灵感，由于那样很容易误入歧途。
●保证质量和水准
根本上我觉得假如你的新想法足够好，判别质量终究如何对你来说应该很容易。
关于高质量设计你有什么看法？
让一项设计因高质量脱颖而出，真实触及到太多方面。我只能说我列出了一些根本要点。所以我希望能听听您对这一问题有何高见？在判别一件网页设计作品能否显示出高质量时，你最关注的是什么呢？
