6个卓越Web设计细节

优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别。前不久,我写过一篇卓越网站应该遵循的4个">设计原则。现在这篇文章有点像是上一篇文章的延续。在上一篇文章里面我们重点讨论了对比、重复、对齐、分割在网页中的应用。以下内容我以几个优秀的网页作品作为实例,来说明卓越设计一直遵循的原则! 一、合理使用渐变 渐变不要滥用,更不要把渐变弄的跟彩虹似的,否则你的网页作品看起来比较外行。总而言之,合理的使用渐变对于优秀网站设计是有帮助的。 渐变、散景结合使用 Newism网站色彩丰富,但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果,可以去Abduzeedo’s tutorial网站上面学习一下。

渐变、投影、纹理结合使用。 OnWired网站应用了这些设计技巧,显而易见,他的设计作品效果是很棒的!自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处 的。我也特别喜欢设计师设计的这些。

二、留白 留白一词往往容易被误解从字面解释 的空白。网页设计较 为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它 的。 “留白”对于网页设计是很重要的,留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题,他们在做设计的时候将整个页面放的满满 的,没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题,如果内容放不下的话,他们可以借助浏览器的滚条来扩大页面的空间。

优秀的留白与巧妙的分割线 Snook网站布局方面设 计的是比较合理、舒服的。同时注意一下,网站里面的虚线将各个板块区分开了,这样我们在浏览网站的时候就一目了然了。

抽象图形 沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像,给浏览者的空间 是流畅、舒服的。

三、网格布局 网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象,从好的设计到生活中的交通网。 960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局,它简单、重点 突出。你可以用任意对齐方式来安排你网站的元素,对齐在设计一个复杂的页面时,能使你的网站看起来比较精致、井然有序,并且你在网页布局里 面添加任何模块内容时候都不用考虑其他的模块内容。

综合使用网格布局 Poccuo网站综合使用了网格布局,它 采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。

博客采用列布局

我比较喜欢Web Design Ledger首页最上面的展现方式,他把最新的公告内容放大同时放到页面最顶部,其他的以3列的方式排列。

大量使用相等的列布局

Ecoki漂亮的网页布局显而易见采用的是4列、2行布局,同时幻灯片、缩略图、最新的审 查也是采用相同的方式。

四、改善字体应用 字体应用困扰着大多数的设计师。如果要想提高你的设计水平,字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色,同时还可以增加设计作品的 氛围。 用对比字体引起关注 SimpleBits网站在应用各种对比 字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。

不要认为字体就像标志 这个网站看齐来就非常的漂亮、舒服,但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的,我就被他的logo 字体应用迷住了。

五、明确而有效的导航 良好的导航对于网页设计来说很重要,如果浏览者不能快速、便捷的找到它,他们就很有可能去别的网站了。这是我们所不愿意看到的,同时我知道 MyInkBlog进行了一些改进,并将在以后重新设计中进行彻底的改进。

博客导航下面显示分类导航 在大多数情况下,博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做 了一件了不起的事情,他把浏览者关心的photoshop资源以生动的方式展现出来了,并且在鼠标经过二级导航的时候有一个高亮效果。

切换不同的图标效果 图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用,并且成为一种趋势。并不是所有的都是不好的,web2.0里用的不好的原因是过 度使用、业余使用造成的。在大多数情况下,适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果, 并且于他的网站整体感觉想吻合。

六、使用漂亮实用的页脚 一开始我们就将页脚作为次要的内容,在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来 越重要了,千万别错过好的页脚完成你设计。

展示大量的信息和证书 这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。

添加搜索功能

Elliot Jay Stock’s网 站在底部添加了一个特大的搜索框…

中文原文:网 页设计从优秀到卓越的6个细节 英文原文:6 Ways To Take Your Webdesign From Good To Great

时间: 2024-10-13 12:26:22

6个卓越Web设计细节的相关文章

6个优秀Web设计细节

优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别.前不久,我写过一篇4个优秀的网站http://www.aliyun.com/zixun/aggregation/8912.html">设计原则.现在这篇文章有点像是上一篇文章的延续.在上一篇文章里面我们重点讨论了对比.重复.对齐.分割在网页中的应用.以下内容我以几个优秀的网页作品作为实例,来说明卓越设计一

Web app设计细节:web app互动设计技巧

文章描述:Web app设计浅谈 . HTML5技术的强势发展,为互联网带来的最大改变就是: web从"已死"的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中.Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的"云"服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的设计,与大家讨论几点设计技巧. 什么是web

专注设计细节:好的web设计更能体现产品的品质感

工作中遇到一个很棘手的问题,交互设计师和视觉设计师在做出高保真原型后提交给前端开发工程师,最后得到的web产物从细节上和布局上都和高保真原型有所差距,比如应该有鼠标手型的地方没有鼠标手型,导致用户不知道这个可点,又或者一行文字上下高低参差不齐,看起来就很廉价没有品质感.导致交互和视觉不得不放下手中的工作去一一核对这些问题,并指出给前端开发工程师让其改正,最后发现其实这些问题都可以迅速的做好,那为什么前端开发却不愿意在一开始的时候就做好这些工作? 从几方面来看待这个问题: 1.过细的专业消磨掉"默

优秀Web设计10项原则:创新实用富有美感

他能够为我们使用家用电器的方式掀起一场革命,现在我们仍然把它作为现代世界的设计灵感,最好例子就是Apple.Apple的许多畅销产品的核心功能都采用了Dieter Rams的设计原则. Dieter Rams最著名的设计思想是优秀设计的10项原则,这些原则通常用来做出好的设计或对其进行归类.这些原则包含了在创建项目的时候设计师需要考虑到的问题,但是这些原则最适用于工业设计,因为Dieter Rams正是在这个领域做出了非同寻常的作品,并得出了这些灵感. 这些原则并不是古板的戒律,并不是不能变通的

精确到像素的Web设计

这句话不知道是不是我的原创(文字,不是理念),我以前经常讲,同时立即得到很多人的反对,认为这个观点不仅拖长设计周期,而且严重浪费成本,由于反对声太多太激烈,在加上有"导师"说:"很多人都反对你的观点就表示你错了"!而且我掌握的都是小规模团队和公司,他们注重的是效率尤其是股东放不开项目进度,我开始有点置疑这个观点,而且困扰了我好长一段时间,后来专门分析了一下,让我重新或更加坚决的坚持这个观点. 先看看是什么人在反对(非Web设计不纳入此列): 1.没有UED团队(不包

优秀的Web设计:优秀设计思想的10项原则

文章描述:优秀Web设计10项原则:创新实用富有美感. 他能够为我们使用家用电器的方式掀起一场革命,现在我们仍然把它作为现代世界的设计灵感,最好例子就是Apple.Apple的许多畅销产品的核心功能都采用了Dieter Rams的设计原则. Dieter Rams最著名的设计思想是优秀设计的10项原则,这些原则通常用来做出好的设计或对其进行归类.这些原则包含了在创建项目的时候设计师需要考虑到的问题,但是这些原则最适用于工业设计,因为Dieter Rams正是在这个领域做出了非同寻常的作品,并得出

微博UED:WEB设计中的排版

首先谈一下"Metro"--由微软公司开发内部名称为" typography-based design language"(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌.生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计.现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥.庞杂无序,简洁之风深入人心--减少元素,以显现本质.良好的排版有助于Web设计更加简洁有效. 概念: 排版就是将有限的视觉元素

WEB设计中的排版 如何便于用户高效、准确获取相关信息

首先谈一下"Metro"--由微软公司开发内部名称为" typography-based design language"(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌.生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计.现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥.庞杂无序,简洁之风深入人心--减少元素,以显现本质.良好的排版有助于Web设计更加简洁有效. 概念: 排版就是将有限的视觉元素

响应式Web设计:通过响应式的设计开发方式

文章描述:案例学习 响应式网站的产品需求和设计流程详解. 今次的译文中,我们继续响应式Web设计方面的话题.前面的几篇相关文章以概念诠释.方法说明为主,本篇则围绕一个实际网站案例展开,从需求.流程.步骤细节等方面描述了响应式设计在项目中的实践方式. 本篇的部分内容要点会与之前几篇产生交集:我们会在这些地方提供相应文章的入口,便于深入参考阅读.接下来进入正文. 根据DailyTech的统计,到2015年,移动互联网的用户数量将会超过桌面用户.除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户