首页

来试试响应式设计!25例优秀的响应式网页设计赏析

蓝蓝

通过我们长期对设计类网站的发掘,总结出了一个现象,那就是很多关于响应式设计的文章只给出了桌面版的网页设计,却没有提供移动版网页设计的对比,这在我们看来,多少显得有点不够专业。

于是,我们在这里收集整理了25例优秀的响应式网页设计,均有桌面版和移动版的对比。在方便您阅读这篇文章的同时,您不妨也思考一下灵活性这个主题。
对了,如果您还不够了解响应式设计,请至我们这篇文章《经验分享:响应式排版中的基础知识》回顾学习。

 

Whisperism

Responsive Websites

 

World Wildlife

Responsive Websites

 

Naspa

Responsive Websites

10款设计师必备的响应式网页设计工具

蓝蓝

随着便携设备用户的指数级增长,网页设计师采用响应式设计作为多平台布局解决方案,不但节省了设计师的时间,而且从长远角度来讲,响应式设计能够为用户提供更舒适的操作环境。
如果你毫无经验,不知从何开始,那么这份工具列表将大大的帮助你,能够让你的布局更有“弹性”。

Simple Grid

 Simple Grid-Responsive Web Design Tool

Simple Grid是难以置信的CSS框架,无所限制的栅格布局,支持不同大小的屏幕。

Susy

Susy-Responsive Web Design Tool

Susy “语义变焦”的栅格系统,无需额外标记和特殊的类,很方便使用Sass的人。

Tiny Fluid Grid

Tiny Grid-Responsive Web Design Tool

Tiny Fluid Grid 很棒的网页应用,能帮你选择栅格系统。一旦完成后,提供CSS文件下载。

Variable Grid System

Variable Grid System-Responsive Web Design Tool

Variable Grid System依据960栅格系统,能够自动产生布局,在调整后,提供CSS文件下载。

Responsive Web Design Sketch Sheets

 Responsive Web Design Sketch Sheets

Responsive Web Design Sketch Sheet 标记很方便,可以方便的选择不同方案中元素的放置位置。

Style Tiles

Style Tiles-Responsive Web Design Tool

可以通过该网站制定完美的响应式设计流程。

 

 

网页设计新趋势!25例出众的响应式导航设计

蓝蓝

响应式设计是当前网页设计的趋势,针对不同的设备,提供布局解决方案。
而且很多技术狂人正在不断的进行各种实验,争取让响应式设计越来越好。

响应式设计的难点是导航菜单。可不能像缩放页面那样缩放导航菜单。在设计之前,要谋划好导航菜单在手机、平板、桌面上的布局。

更多超炫的网站:
《想让网站动感十足?试试网页设计中的韵律线条》
《想设计自己的网站?先来看这15个优秀设计师的酷站》

本文收集了25例出众的响应式设计,大家可以使用响应式在线测试工具Responsinator来看看,他们的导航菜单,是怎样设计的。

Ableton 

Music production with Live 9 and Push | Ableton

 

在网页中设计导航菜单的三个原则(附案例)

蓝蓝

导航菜单可能是网页设计中最重要的部分了。每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息。好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息。

而且导航栏也是整体布局的重要组成。

总结一下,导航栏的重要性。

1. 浏览完Logo后,导航栏是用户第一个看到的组件。
2. 导航栏的作用是引导用户。
3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息。

想让导航栏更加优雅、美丽、响应式么?看看导航栏设计的三大要点吧!

 

1) 别再让导航胖下去了,给导航减个肥

导航菜单重要性不言而喻。一些设计师往往使用一些繁杂的装饰来做突出。其实大可不必,通过字体、悬停效果、留白可以设计出简约、优雅的极简主义风格导航栏,看看下面的案例。

Design Instruct

minimal navigation bar
 

Sugar Rush

Clean Navigation Bar Design
评论(0) 浏览(3308)

经验分享:2013年10大Web设计趋势(翻译理论)

在2012年我们看到的几个Web设计趋势中,最显著的要数响应式设计了,而现在2013年的鸣钟敲响了,让我们大胆预测一下2013的Web设计趋势。

1. 更多的响应式设计

虽然响应式设计在2012年被提的比较多,但是响应式设计仍然在不断变化,不断创新。比如,新的设备不断出来(iPad Mini),这让以前的设计想法土崩瓦解。而现在各种Web的响应式设计也获得了越来越多的注意,“让人们忘记设备尺寸”的理念将更快地驱动响应式设计,所以Web设计也将迎来更多的响应式设计元素。

1

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档