卓越网页设计作品的几个细节差别

2016-02-17 04:09 7 1 收藏

下面是个超简单的卓越网页设计作品的几个细节差别教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - 平面设计 】

优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别。

 

内容摘要

1、合理使用渐变

2、留白

3、网格布局

4、提高字体应用

5、明确而有效的导航

6、设计漂亮、有用的页脚

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

介绍

优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别。

前不久,我写过一篇卓越网站应该遵循的4个设计原则。现在这篇文章有点像是上一篇文章的延续。在上一篇文章里面我们重点讨论了对比、重复、对齐、分割在网页中的应用。以下内容我以几个优秀的网页作品作为实例,来说明卓越设计一直遵循的原则!

一、合理使用渐变

渐变不要滥用,更不要把渐变弄的跟彩虹似的,否则你的网页作品看起来比较外行。总而言之,合理的使用渐变对于优秀网站设计是有帮助的。

渐变、散景结合使用

Newism网站色彩丰富,但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果,可以去Abduzeedo’s tutorial网站上面学习一下。

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

渐变、投影、纹理结合使用。

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

二、留白

留白一词往往容易被误解从字面解释的空白。网页设计较为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它的。

留白对于网页设计是很重要的,留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题,他们在做设计的时候将整个页面放的满满的,没有给页面足够的呼吸空间。这对于他们来说可能不是什么问题,如果内容放不下的话,他们可以借助浏览器的滚条来扩大页面的空间。

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

三、网格布局

网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象,从好的设计到生活中的交通网。

960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局,它简单、重点突出。你可以用任意对齐方式来安排你网站的元素,对齐在设计一个复杂的页面时,能使你的网站看起来比较精致、井然有序,并且你在网页布局里面添加任何模块内容时候都不用考虑其他的模块内容。

综合使用网格布局

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

博客采用列布局

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

大量使用相等的列布局

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

 

四、改善字体应用

字体应用困扰着大多数的设计师。如果要想提高你的设计水平,字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色,同时还可以增加设计作品的氛围。

用对比字体引起关注

SimpleBits网站在应用各种对比字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

不要认为字体就像标志

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

五、明确而有效的导航

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

博客导航下面显示分类导航

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

切换不同的图标效果

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

六、使用漂亮实用的页脚

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

展示大量的信息和证书

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

添加搜索功能

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

卓越网页设计作品的几个细节差别,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160217/1578363.html

延伸阅读
顾名思义,浮动条是在页面沿一定轨迹浮动的表现形式。 不再固定在某一指定位置,而是随鼠标拖动而动,巧妙的设计会使得在不妨碍网友浏览的同时,满足其增加曝光率的需求。其特殊的表现形式与传统的形式相比更能聚集网络访客的眼球,使得其影响力更深三尺。但是过度的曝光不加思考的一味所有页面都用浮动条或者叠加大量功能入口,有可能造成用...
卧室装修 涉及到的装修项目在整个家居装修空间中应该算不上最多的,装修难度也不算最大的,但是卧室装修设计中的有一些细节是在装修过程中容易忽视的。装修前期做一个细致的了解是很有必要的。 装修设计时容易忽视的几个细节 1、储藏空间 ............................................................................. 包括...
网页设计中我们会用到很多种样式的分隔线,下面我们就来看看在Fireworks中设计网页虚线有哪些妙招。 方法一、用Fireworks中自带的虚线样式 Fireworks中自带的虚线样式有:三条破折线、加粗破折线、双破折线、基本破折线、实边破折线、点状线。 在网页设计中,我通常的用的是实边破折线。因为它和网页CSS中border的dotted、...
世界上的任何事物都是在变化的,不断的发展,不断的创新,不断适应新的方式,不管你是哪一类的设计师永远都需要去探索,去开创新的趋势。 随着素材的设计素材的丰富,设计师越来越多选择,五花八门的页面扑面而来,并且不少有着绚丽的外观,如今只有绚丽的外观是不够的,而是如何将各种各样的功能需求结合,如何把内容体现得更有价值,而且抛...
个人主页经常需要根据不同节日、不同情况,在首页放置相应的图片,以示声明。平面设计的一些小技巧对这些欢迎界面的设计来说相当重要。细小的地方也会使画面看起来如此的不同。 如上图是Relen的个人主页Relen.com,2004版的首页发布信息,尤其是过年前后,利用雪花来点缀页面是非常合适的。注意这里面的雪花的摆设位置是有些技巧的,你可以...

经验教程

155

收藏

9
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部