首页

细节里的力量!11个极度专注细节的优秀网页设计

博博

11-websites-focusing-on-details-1

著名的室内设计大师Charles Eames曾说过,“细节并不只关乎它们本身,它们还构成了设计。”的确,每一个网页都是由无数的细节构成,而其中的内容也是同样由这些细节连接组织到一起。不论是提供信息服务的网站,还是APP的官方宣传页,任何一个优秀的网站都能够经受得起挑剔眼光的洗礼,从图片到布局,从字体到架构。

网页设计的细节至关重要,因为正是它们给用户留下好印象,这些细节支撑起网站的良好体验,提高易用性。正如同Eames所说,它们成就了设计,不注意细节会让设计感流失。

优秀的网站有着不一样的亮点,但一样地专注细节:《这样才过瘾!2014年最佳网站评选结果出炉

接下来,我们一同看看这11款设计惊艳的网站。它们的好设计源于细节,有的界面雅致,有的交互出彩。深入揣摩这些案例,也许你的下一个网页设计作品会非常强大。

THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

Basecamp 是一个基于网页的项目管理工具。正如同它的介绍,速度和效率是至关重要的。

这是网站的验证界面,设计师巧妙的事先隐藏了确认的按钮,只有当你输入了正确的验证码之后,OK按钮才会出现。这种措施不仅提高了网站的性能,还通过让按钮从无到有,将“验证码正确”的概念具现化,触动用户,增加成就感。

COLOPHON PRACTICED BY NEOTERIC DESIGN

在欧洲,在书中使用Colophons(题跋)可以追溯到15世纪的时候(中国就早很多了),不过这个网站是为了将其运用到网站上去。这次,Neoteric Design分享了他们网站的制作笔记——各个部分的功能,从字体软件到编程语言和内容管理系统。如果访客想知道一个网站是如何构建起来的,那么这个带题跋的笔记可以帮助用户方便快捷得了解这个网站的构建过程,满足好奇心。

 

紧跟趋势!20个使用隐藏式菜单导航的优秀网页设计

博博

website-hidden-menus-navigation-1

Navicon,也就是汉堡图标,已经成为越来越多网页设计导航模块时的首选了。相比于传统的导航栏,隐藏式菜单导航在设计和用户体验上有着它独到的地方。作为一个随着移动端设计发展而崛起的网页设计元素,Navicon并没有减弱它引导用户的功能性,也没有丧失它作为基础网页组件的重要性,还为设计师和开发者提供了更大的创作空间。

如何正确使用Navicon取决于项目的实际状况,相对保守的站点可能不会考虑这个选择,而不少追求时尚简约、多平台体验统一的新兴网站可能会更加青睐Navicon,因为作为导航接口的它小巧而讨喜,轻松配合大图和时尚的网页设计,并且隐藏起复杂的、零碎的导航内容菜单。

Navicon很单调么?并非如此。借助额外的打开过程动效和抓人眼球的细节效果,Navicon拥有非常大的提升空间和设计可能性以及良好的用户体验。更重要的是,它适用于各类导航:不仅可以清楚的传达信息,而且有助于解决响应速度方面的问题,并且能够促进网页在多平台设计上的统一。

如何设计一个靠谱的Navicon:《数据告诉你真相!汉堡图标并非最佳菜单方案》
深入了解不同的导航模式:《交互基础知识科普!带你认识最热门的12种导航模式》

接下来,我们通过一系列的网页设计,来深入了解Navicon和隐藏式菜单导航的魅力。

eWebDesign

大图背景和视差强化了网站视觉,Navicon菜单按钮在右上角,点击打开你会看到一个设计非常细致的导航菜单。

Sampedro

时尚的照片放置与网页的页头,配合着时髦的Slogan吸引着用户全部的吸引力。隐藏的导航栏是个理想的解决方案,它让用户将注意力从复杂的导航转移到内容上。

工具产品情感化

博博

《情感化设计心理学中》作者唐纳德·诺曼将情感化设计与马斯洛的人类需求层次理论联系了起来 产品特质也可以被划分为功能性、可依赖性、可用性和愉悦性这四个从低到高的层面,而情感化设计则处于其中最上层的“愉悦性”层面当中。因为市场上不同品牌的同类产品在功能、质量、价格等基本品质方面已经差别越来越小,尤其是消费类产品,比如手机家电之类的,产品的同质化趋势非常明显,竞争日趋激烈。 消费者在购买产品时,情感因素的影响也日益加大,这意味着如果产品具有相同功能、质量和价格,消费者会选择更能触动其情感的产品。

 

情迷西班牙!20个来自西班牙最优秀的网页设计

博博

这次又是别人家的网页设计!之前混在一起看可能不觉得,单独来看西班牙的网页设计其实还是能察觉到他们的民族性格,时尚奔放,现代的设计下难掩躁动与激情,令人着迷!

充满活力,朝气蓬勃,美丽四射,时尚风情,这是西班牙给人的印象,也是来自西班牙的优秀网页设计给人的别样体验。这些网页独特的浏览体验并非偶然,西班牙独特的历史和的历史和多元化的文化赋予了这些设计不同凡响的风格:意大利文艺复兴、罗马式的风格、穆斯林文化、西班牙文化的黄金时代、巴洛克和洛可可,新古典主义以及,乃至于超现实主义,文化与思潮在西班牙汇聚,时代的印痕和众多的艺术运动在此交叠。

于是乎,丰盈厚重的艺术气息和文化积淀直接影响着每一个成长中的西班牙艺术家和设计师,他们的艺术作品中所蕴含的创意和情感能如此不同,毫不奇怪。

 

只有设计师看得懂!菜鸟跟老鸟使用PHOTOSHOP的差别

博博

photoshop-user-habit-difference-1

以为计算机里有Photoshop,你就是设计师?使用Photoshop的方式百百种,你是设计了一年还是设计了十年,从细节就可以看得出来(附上老鸟设计师常用的几个快捷技巧) >>>

除了大量使用快捷键是基本以外,老鸟设计师跟菜鸟设计师在使用Photoshop时有着各种不同。McCann Prague在他们的征人启事上加入可爱的idea,让你看见他们想征的老鸟跟菜鸟设计师之间的差别。

第一次碰Photoshop时的版本

ps20150403 (1)

老鸟:Photoshop 6.0

新手:Photoshop CS 5

图层的整理

ps20150403 (2)

老鸟:群组、上色分类。

新手:无。

引导线的使用

ps20150403 (3)

老鸟:简单明了、了解响应式网页设计。

新手:过度使用。

是说从Photoshop版本来看,他们想征的老鸟应该是创意总监等级了吧!

附网易同学分享的Photoshop技巧秘籍:

psjq201504031

技巧1:快速标注尺寸

你是否曾在制作规范中,让标注尺寸搞的头晕眼花!你是否曾在视觉走查中,让标注尺寸弄的怒气报表!此时已经陷入了无限的脑补中,不能自拔……..

极速上手!120个PHOTOSHOP技巧帮你加速设计(上)

博博

120-PS-TIPS-1

Photoshop越来越强大了!试图掌控它的全部特性是不现实的(更何况有那么多隐藏的功能!),那么我们不妨收藏一下大神们总结的这120个PS技巧,偶尔翻看一下,让自己的设计更强大更!

这120款技巧覆盖了PS绝大多数的主要功能,这些功能你很熟悉,但是明白它们的细节,掌控发招的捷径,修图作画的时候说不定能收获奇效呢!

在此之前,我们不妨先快速温故一下PS的基本功能:《PS速成秘籍!如何在两小时内搞懂PHOTOSHOP基础工具?》
see-more-ps-feature-2h

01、旋转样式

Cmd/Ctrl+Shift+Alt+T 是一个神奇的快捷键,可以帮你制作出惊人的万花筒图案,当你使用它的时候,可以复制当前图层,并且同时重复之前的旋转、放大等操作。正如下图所演示,使用这一快捷键可以轻松地将一束炫光化作一个漂亮的万花筒。在操作的时候,你先用Cmd/Ctrl+T和适当的旋转,回车确定,然后使用这组快捷键,直到完成整个样式。

带你去冒险!20个炫酷好玩儿的网页导航设计

博博

简单有效的导航栏设计能够极大的提高用户体验,不仅能让用户更快找到他们想要的内容,还能适当分担搜索引擎的压力。常见的导航设计我想大家都已经非常熟悉了,今天我们要分享的一些有趣的、原创的、甚至具有一定开创性的导航栏设计方案,这些优秀的设计非常引人注目,令人难忘。这些网站的导航栏设计,比起传统的导航会相对更复杂一些,但是绝对会令你眼界大开。

当然,我们推荐这些网站并不只是因为导航栏设计,这些优秀的网站通常在技术使用和信息呈现上也做得非常突出。和很多酷站一样,只要你深入探究,一定会获益匪浅。

Jova

Jova的网站设计非常清爽,导航栏的设计均衡并且结构妥帖。

设计师使用细线构成的线框栅格来构建网站导航,经典的黑白配色,加上清晰锐利的英文字体,构建出优雅迷人的外观,在柔和的背影映衬之下,给人深刻的印象。

高手之路!网页设计中的对称与不对称

博博

小时候,很喜欢蝴蝶,感觉这是大自然最神奇的赋予,当它们双翼张开,总是禁不住欣赏它们那种美丽的优雅以及多姿的色彩。

更重要的是,这种天生的对称感,美得令人窒息。

对称风格

完形主义——一种人类行为理论,描述了人类排列视觉数据的思维结构——认为人类会很自然的把看到的东西按顺序排列。

换句话说,我们的眼睛倾向于捕捉那些组织有序、风格圆满的视觉元素。这也就是我们所谓的对称感。对称风格的物体有一种天生的平衡感、优雅感,对称在设计中能体现出一致、有序、稳定的特质。很多知名品牌都采用了对称式设计,虽然不是很独出心裁,但是至少让人感觉大气、稳重。

跟上色彩潮流!带你展望2015年的网页设计配色趋势

博博

2015-website-color-trend-1

前几天分享的2015年春夏流行色人气很高,今天直接放干货,@AnyForWeb_UDC 的同学根据2015年的色彩大致趋势走向,结合相关的设计经验,作出了以下网页配色预测分析,来看看有哪些亮点吧。

提前搞定2015年的设计好文:

 

一、Metro和柔和鲜嫩的色彩

Odam Luiran的网站是Metro风格,这种风格尤其适合一些比较鲜嫩柔和的颜色,扁平化网页设计在2014年中的流行让柔和色彩的用途变得越来越广泛。这样的色彩基调将在2015年得到进一步的延续,马卡龙色系也许会常常出现在网页设计中。

二、偏灰的冷色系粉彩

偏灰的冷色系色彩是一种看起来比较百搭的颜色,但是实际上,要将这类颜色使用的恰如其分却并不是一件容易的事情。这类色彩表现的比较中性,所以搭配任何颜色都不会显得突兀,但也不算出挑,而要让色彩之间真正融合,应该选择清淡的粉彩系透明色,让网页看起来清新脱俗。

还有哪些搭配方法?阿里前辈在前,就不多说咯:《色彩搭配速成!3个实用方法帮你全面搞定配色》

再不学就落伍了!15个设计感极强的LOW-POLY网站欣赏

博博

Community Machine 18个超酷的多边形背景网页设计

低多边形现在火得一塌糊涂,前段时间优设推荐了这篇《这效果超火!教你创建高大上的多边形字体》,短短一月,超过20万人阅读学习,今天我们继续收集一组设计带感的多边形网站,同学们可以收藏学习一下。

特别提醒:对 www.soleilnoir.net 这类文案与动效齐飞,惊艳共传奇一色的神站,童鞋们请务必用谷歌或者火狐打开。

Sanissimo

Sanissimo

Vauxco

Vaux Collective

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档