天天看点

提升网页和博客设计品质的一些实例…

组织内容小贴士

你当然可能会遇到需要打破常规,选用非同寻常方式的时候,不过你还是可以遵循这些简单技巧,以保证内容结构和阅读顺序的良好。

  • 你为何而设计?

    如前所述,确定设计的目标。

  • 利用网格

    网格帮助你发挥页面的最大潜能。

  • 测试元素位置

    以访问者的角度考察内容的易用性。

  • 移除所有不必要元素

    不必要的东西都应该被消灭,或者至少不要放到显眼的地方

  • 注意力的均衡

    有些东西需要被简单化,好让另外的事物闪耀光辉

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 为我们展示了“直截了当”对建造一个令人难忘的站点有多大的作用。一打开他的站点,各种风格的作品就向你问好,他的名字和职业放在页顶的醒目位置,当然,联系链接没少。没有大量多余文字来劝说你雇佣他,作品本身就证明了他的实力。当然,点击作品缩略图会出现一个详细介绍页,里面就有足够的文字了。实在喜欢他组织内容的方式。

​​

提升网页和博客设计品质的一些实例…

​​

实践新鲜想法的小贴士

  • 保证事物之间的联系

    如果你打算做一些特别特别特立独行的事,先问问自己“真的有必要吗?”,“这样说得过去么?”,“和品牌诉求符合吗?”…… 如果答案是肯定的,再采取行动!

  • 忘掉所有已知事物!

    好吧其实也并不是所有,基本原则还是要的。话说回来,也没必要从全新的想法里面寻找灵感,因为那样很容易误入歧途。

  • 保证品质和水准

    基本上我觉得如果你的新想法足够好,判断品质究竟如何对你来说应该很容易。

对于高品质设计你有什么看法?