2011年Web设计趋势:CSS3+HTML5居首位

转载 2011年01月10日 09:27:00

 在设计和编程之间只有薄薄的一线,当我们进入新的十年时,这条线变得越来越模糊。在Photoshop 上绘制漂亮的模型就够了吗?5年以前也许如此。在今天,普通的网络用户要求的更多。所有的东西都很漂亮,但没有实质内容,过段时间人们就会厌烦。如果你唯 一的目标是用你漂亮的设计影响圈内其他设计师,你会发现你很快就落伍了。2011年不关心漂亮,而是关心功能。新的一年甚至十年的趋势是交互设计、粘度和 虚拟现实。

  2011年你会如何设计呢?设计师的最终目标是留住用户,而不是让人炫目。所有得到惊讶声和赞叹声的设计师都很容易被忘记。高超的设计师可以创 造出一种环境,吸引并迷住用户到不想点击"返回"按钮的地步。几个元素汇聚在一起,组成一个奇妙的幻境:和谐的色彩主题、直观的设计、易用的信息和快速的 反应。另外,永远不要低估简洁的力量。当然,情况一直如此,但在2011年,你将不再仅针对电脑桌面和笔记本,还要为智能手机、上网本、Tablet等等 设计。你准备好了吗?

  看看2011年前11个趋势。

  1、更多的CSS3+HTML5

  多么令人满意啊!在过去几年里,CSS3和HTML5只出现在网页设计那遥远的地平线上。但现在,在2011年,我们看到了它的爆发。设计师们 终于开始让Flash走开。你可能感觉到,Flash和一些对你当前和潜在用户有用的最新最热技术,配合的不是很好。在2011年,你会慢慢远离 Flash,拥抱被称为HTML5的魔术。看看这组惊人相似的比较:

  现在已经显示,Flash和HTML5是不相等的对手。在2011年两者都有大量的应用空间。问题是设计师们在2010年(和之前)滥用了 Flash。举一个例子,很少整个网站由Flash组成,特别是这些日子。HTML5减轻了Flash的一些负担。不过,HTML5还不能完全取代我们由 Flash实现的那些非凡的设计元素。

  也许更让人兴奋的是,CSS3在今年可以投入使用了。移开Photoshop(哇,Adobe还是不能休息),CSS3可以更快实现文本阴影、圆角边框和背景透明。如果你还没有开始,现在就开始钻研了解CSS3和HTML5吧。

  2、简洁的配色方案

  简洁。没有什么比在安静的背景上显示清晰的消息更安静了。安静可以被解读为几种不同的方式。忘掉黑白和灰度阴影,想想绿色、黄色或甚至红色作为你的主色调。不过,限制你的调色板只有两或三种颜色,试试各种颜色不同的灰度。用少量颜色表现信息是非常了不起的。观察一下:

  绿色阴影创造了这个Twitter可视的工具。边注:这个网站是用XHTML/CSS和Javascript创建的。

  如果做的不好,红色很容易产生冲突。这个网站用高对比的易读文字克服了红色本来的特性。

  3、适用于手机

  智能手机、iPad、上网本,哦天哪!一个令人眼花缭乱的手机产量在2011年提供给消费者。这意味着你的网页设计必须适应多种窗口。

  创建一个适用于手机的网站不是简单的从你的设计中去掉那些花哨的东西。这只会产生一个空虚无个性的设计。虽然不太可能,但从你的原始设计中去掉那些魔法,变成简单陈述你的品牌,这非常困难。幸运的是,技术正在快速解决这些麻烦。

  借助CSS3的帮助,主要是media queries,手机网页设计有一个大的飞跃(以后详说)。最重要的一个进步是,你可以设计一个整站并允许你的编码遵从用户的可视区域。

  设计一个专门的手机网站可能很有诱惑力,但这可能不再能满足你的观众了。越来越多的手机网站包含了访问原始网站的选项。如果你没有提供这一选项 或你的原始网站没有为手机标准优化好,你就没有为2011年做好准备。预测显示,智能手机今年的销量将超过个人电脑。准备好你的设计,满足这一需求。

《响应式Web设计——HTML5和CSS3实战》读书笔记

作者介绍:英国前端工程师,Ben Frain,the author of two web development books: ‘Responsive web design with HTML5 ...

《响应式Web设计-HTML5和CSS3实战》阅读笔记第二章

概要 总结 一、使用媒体查询 1、浏览器支持 目前媒体查询广泛使用且各浏览器支持,IE9+、Chrome4+、Firefox3.6+、老版本IE678可通过JS兼容修复。 2、为...

《响应式Web设计-HTML5和CSS3实战》阅读笔记第五章

概要总结CSS3给前端开发带来了什么 提供各种效果:圆角、背景渐变、文字阴影、盒阴影、自定义字体以及多重背景图片。IE6-8不支持CSS3,有需要可以使用腻子脚本。 CSS规则解析 规则由选择...

响应式web设计 HTML5+css3实战 学习笔记

响应式web设计 html5+css3实战 下面是我自己看此书整理出的一些精华部分和自己不知道的,大家有兴趣的话可以去看此书,此书强烈推荐,对于制作响应式页面流程非常清晰!   1.      ...

《响应式Web设计——html5和css3实战》读书笔记

这本书的定位不是API手册,而是实战技巧,给我的感觉很像《无懈可击的web设计》的定位,同时也很像《DOM javascript编程艺术》的风格,用一个实际案例贯穿全书。虽然书名的主标题是“响应式We...
  • liuzif
  • liuzif
  • 2013年01月07日 11:00
  • 1056

一起来学习《响应式Web设计-HTML5和CSS3实战》吧

《响应式Web设计-HTML5和CSS3实战》是一本不错的前台设计书。书里主要以一个页面入手,涵盖了HTML5和CSS3的所有知识。 下午我根据http://www.andthewinnerisnt...

《响应式Web设计——html5和css3实战》读书笔记

《响应式Web设计——html5和css3实战》读书笔记       这本书的定位不是API手册,而是实战技巧,给我的感觉很像《无懈可击的web设计》的定位,同时也很像《...

响应式Web设计:HTML5和CSS3实战(读书笔记)

视口:浏览器窗口内的内容区域,不包含工具栏,标签栏。网页实际显示. 屏幕尺寸:设备物理显示区域 各种宽度和高度 a、可视区的真实宽度和高度 document.doc...

<HTML5秘籍>——第7章(CSS3与响应式Web设计)

CSS3提供了一个完美的工具:媒体查询(media query)。通过媒体查询,可以让网站根据窗口大小或设备的不同,无缝地在不同的样式集之间切换。 流式布局:实际开发中,大家都习惯开始的时候先使用固...

《响应式Web设计-HTML5和CSS3实战》阅读笔记第三章

概要总结固定布局禁不起考验基于已知的视口宽度布局无法兼容未来发展,我们需要适应未知设备的方法为什么响应式设计需要百分比布局只使用媒体查询来适应不同视口的固定宽度设计的话没有任何平滑渐变,将固定宽度转化...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:2011年Web设计趋势:CSS3+HTML5居首位
举报原因:
原因补充:

(最多只允许输入30个字)