我们常常探索规则,规则让设计充满可预期性。我们也常常想打破规则,这可能是出于设计者叛逆的天性,也符合让特定风格或者元素脱颖而出的设计需求。刚刚过去的9月当中,设计师们打破规则的特质,通过网页设计作品体现得淋漓尽致。这些以破坏规则为特质的设计作品,实际上也遵循着某种潜在的规律:尽量只打破一个规则,来创造出意外和戏剧化的效果。 1、无视边界的文本元素 在很长的一段时间当中,设计师会让每一个元素都井井有条地置于各自的区间当中。但是现在,设计师开始让元素走出边界。 横跨多区块的元素看起来似乎有点过于自由,但是在实际的设计作…

2017年10月11日 0条评论 45点热度 0人点赞 阅读全文

《loveless》

2017年06月01日 0条评论 43点热度 2人点赞 阅读全文

网格卡片式网页布局,从Pintrest,Facebook和Twitter开始流行,在网页设计中迅速成长,几乎变成了所有网站设计的首选。整洁的组织信息,简练的小盒子,给网站一个干净、简约的外观。 然而,网格卡片式网页布局不仅仅是美观,而且非常实用,因为这种类型的界面可以适应各种设备工作。 Atlason Baubauhaus Pierrick Calvez Protest Yvan Rodic Rodgers Townsend Thomas Robin Fakultät Gestaltung Heydays Post…

2016年02月23日 0条评论 137点热度 0人点赞 阅读全文

Dashel Icon Set (45 Icons, SVG, PSD, PNG) Blockie Icon Set (48 Icons, PSD) Material Design Icons with Bounds (250 Icons, Sketch) Boldo Icon Set (70 Icons, PSD & AI) icono Pure CSS Icon Set (130 icons, CSS) Evil Icons (60 Icons, SVG) Subway Icon Set for iOS…

2015年10月25日 1条评论 100点热度 0人点赞 阅读全文

我们将向大家展示下网页动画的现状地图,并收集了一些具有多变表现力的类库、框架和插件。   图1:网络动画地图 下图分为三个区域,第一部分是一些容易理解的动画类库,撇开已经达到期望的通用动画方法外,还从简单的方法和函数到时间控制都提供了大家所希望的工具。我 们从JavaScript类库中分离了用CSS3过渡的动画元素,也挑选出了能够和SVG,WebGL或者HTML5 Canvas相连接的动画类库。     图2:工具列表 第二部分是专为文档模型中像滚动动画,视差,CSS sprite,3…

2015年05月26日 0条评论 63点热度 1人点赞 阅读全文

在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局类型   布局实现 采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。 固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸; 可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局; 弹性布局:以百分比作为页面的基本单位,可以…

2015年03月02日 0条评论 64点热度 0人点赞 阅读全文

通常大多数人认为,只要产品的界面视觉设计够精致,便能够获得完美的产品用户体验。 这样对吗?老实说,这种观点并不正确。 事实上: 首先我会告诉你,用户体验(User Experience, UX)与所谓的“出漂亮的图”没有任何关系。  用户体验是一个流程:理想情况下从战略层面开始并会影响项目的整个生命周期。用户体验设计首先需要了解商业模式,然后落地用户研究,以及理解服务是如何融入用户期望的。 用户体验是商业战略制定中极为重要的一部分,另外界面设计(User Interface design)也不代表用户体验的末环。我…

2015年02月27日 0条评论 64点热度 0人点赞 阅读全文

当下网页设计最重大的一项趋势,就是大图片的使用。不只是大,这些巨幅图片看上去就像在屏幕上活过来一样。用在页面顶部时,就是我们常说的首屏大图。 如何利用这一趋势?需要从哪些工具入手?本文中,我们来看看这些首屏大图、用好它们的诀窍、熟练掌握这一趋势优秀网页案例,甚至还有可供下载研究的赠品。 什么是首屏大图? 首屏大图,就是在首页或其他页面顶部,运用焦点图、文字和导航元素。首屏大图体现为多种形式——作为一张图片或带文字的图、图片轮播、固定图片、视频或是动态图片。设计风格也囊括写实与手绘。 焦点图片是你在网站中首先看到的东…

2015年02月26日 0条评论 64点热度 0人点赞 阅读全文

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的。 首先来一发大师金句,迪士尼动画大师格里穆·乃特维克曾经说过: 动画制作和动效设计是本质相通的,我们需要为用户建立一种“视觉的真实”,即动作是可信的,我们需要获得的不是照搬线下场景的写实主义,而是“可信度”,要让用户感知到这个动作是成立的。这里,就要搬出高大上的物理学了! 物理学四大基本力——万有引力、电磁相互作用力、弱相互作用力、强相互作用力,…

2015年02月26日 0条评论 61点热度 0人点赞 阅读全文

在网页设计中,极简主义是人们最喜欢的风格之一。一个好的极简风格设计网站虽然看起来非常简单,但要是真想设计起来其实并不简单。 这这次的分享中,搜集了25个极简风格的精心设计网站。如果你也有一些好的网站可以分享,快在下面留言和我一起进行讨论吧! Guillaume Juvent Co: Collective Eric Paul Snowden Linda Dong Dirk Leys UPPERDOG Sennep Because Studio Temple BVD Rob Treutel Isotope 221 Sy…

2015年02月15日 0条评论 73点热度 0人点赞 阅读全文