[转]Responsive设计的十个基本技巧

Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也分享了很多这方面的教程和资源。由 于组织了YY活动在线上和大家分享Responsive的设计,为了能让大家更好的理解,我自己也有必要好好的做一下功课,今天这个就是功课,想和大家一 起分享一下Responsive设计的一些基本技巧,和相对应的学习资源,希望对大家有所帮助。

什么是Responsive设计?有的同学认为Responsive设计是自适应布局,也有的同学认为Responsive是网格布局。其实这些想法都不正确。WikipediaResponsive做 了详细的描述,我在这里就简单的说一下。Responsive设计简单的称为RWD,是精心提供各种设备都能阅读网页的一种设计方法,RWD能让你的网页 在不同的设备中展现成不同的设计风格。从这一点描述来说,Responsve既不是流体布局,也不是什么网格布局,他是一种独特的网页设计方法。
继续阅读[转]Responsive设计的十个基本技巧

[转]网页配色的天然范儿

本文没有咬文嚼字的地方,只是一个技巧的分享,十分简单,简单到流泪。

网页视觉层面主要是由形式(或叫布局)、色彩、图片和文字信息组成,设计师通常对形式感关注的比较多,因为视觉冲击力、设计差异性或创新大多都仰赖形式呈现,而色彩主要影响整体观感、设计品质以及受众情绪,很多时候我们设计了一个不错的形式却未能做出这个稿子应有的品质,会不会太可惜?

形式需要思考创造,图片素材需要学习处理,文字需要梳理编排,但网页色彩是不是一定需要有天生的色感、丰富的理论和多年经验沉淀才能运用自如?

当然不!

关于网页配色

网页配色的文章在网络上很多,甚至有些泛滥,稍微关注过的同学应该都知道“色轮”、“色卡”等辅助性配色工具,但那更多都是从印刷介质上的色彩系统 延伸出来的,不完全适用于网页,甚至造成很大的局限,比如你会较真的通过色轮来选用网页色彩吗?再比如通过下面提供的配色组合,你能自由的应对一个又一个 的类型相若的网页设计需求吗?

由于CMYK与RGB色彩模式不同,网页的色彩呈现数量要庞大的多,选用也应该更自由,但在配色上却常碰到设计作品偏脏、发灰、花哨等大问题,这事儿得解决。

继续阅读[转]网页配色的天然范儿

HTML5速查表

HTML5速查表
毫无疑问,HTML5是当今互联网领域的一大热点,受到了整个行业的强烈关注。HTML5开发浪潮汹汹来袭,它也正逐渐发展成为前、后端开发的编码标准。但在面对新特性的不断增加,也许你很难记住这些全部功能。那么最好的方法便是采用HTML5速查表。

你可以到InMotionHosting直接下载速查表,或至html5doctor进一步了解各元素的特性和使用方法。
继续阅读HTML5速查表

less.js使CSS更简单、更整洁、更高效

1831-write-simple-css-with-less-thumb
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。– http://www.lesscss.net/
继续阅读less.js使CSS更简单、更整洁、更高效

布局设计的7大误区

1809-seven-mistakes
即使web设计已经成为一个真正的产业,开发一个网站仍旧是技术和艺术的结合。一个网站的设计即可以带来大量流量,同时也可以吓走大量用户。当然这些都和设计师相关。经验,天份和能力三方面的努力是一个设计师最强大的工具,一个设计精良的布局是所有这些的基础。而且,这也是一个非常耗时的工作。

设计一个非常好的布局是一件非常不容易的事情,而且判断的方式也非常的主观。任何一个设计可能会取悦你,也可能让其它人厌恶。尽管这样,这里仍旧有些大家都承认的设计误区。

为了帮助大家来避免这些错误和误区,我们列出了一些设计的小技巧。我们同时也希望大家能够帮助我们完善这些小技巧。不管怎么说,希望大家能帮助我在下面留言,以便带给大家更多的想法和建议。谢谢!
继续阅读布局设计的7大误区