<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>design &#187; web design</title>
	<atom:link href="http://design.dreamerblog.org/category/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://design.dreamerblog.org</link>
	<description>设计改变生活</description>
	<lastBuildDate>Wed, 28 Jul 2010 03:30:07 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>滚动文字、图片效果代码</title>
		<link>http://design.dreamerblog.org/2010/03/15/gundong/</link>
		<comments>http://design.dreamerblog.org/2010/03/15/gundong/#comments</comments>
		<pubDate>Mon, 15 Mar 2010 15:36:59 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[滚动文字]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=303</guid>
		<description><![CDATA[滚动代码网上一搜会有很多，但是有的不兼容，有的甚至根本不能用，下面的这套方法是经我多次在项目中运用的过的，也是对网上代码的一个精简，兼容性 良好。]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2010/03/15/gundong/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>产品设计体会：产品新首页诞生记</title>
		<link>http://design.dreamerblog.org/2009/12/22/300/</link>
		<comments>http://design.dreamerblog.org/2009/12/22/300/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 16:21:13 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[首页]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=300</guid>
		<description><![CDATA[这个项目的缘起是为了统一公司几个产品的portal风格，但我们希望能在老板给出的这个目标下找到“变脸”的更多价值。于是项目开始后我查看了portal页面的访问情况，分析了用户场景，画了下图。]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/12/22/300/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>79个设计专业的网站</title>
		<link>http://design.dreamerblog.org/2009/12/19/79-zhuanye/</link>
		<comments>http://design.dreamerblog.org/2009/12/19/79-zhuanye/#comments</comments>
		<pubDate>Fri, 18 Dec 2009 16:59:50 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=298</guid>
		<description><![CDATA[在历史中，伟大的设计师经常将他们的创意通过新的方法表达和创造新的潮流和技术来让他们的作品脱颖而出。现在设计是一种交流的方法，设计的目的也更加理性化。特别是网页设计已经有很完美的模式通过你的技术来将你的想法转化为作品。]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/12/19/79-zhuanye/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>轻设计，让网站灵敏轻便的6个技巧</title>
		<link>http://design.dreamerblog.org/2009/12/04/wangzhanlingmin-sheji/</link>
		<comments>http://design.dreamerblog.org/2009/12/04/wangzhanlingmin-sheji/#comments</comments>
		<pubDate>Fri, 04 Dec 2009 06:21:47 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=295</guid>
		<description><![CDATA[在网站或软件的策划和设计过程中，我们经常听到这样的讨论：“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的话题，也是方兴未艾的Web2.0大浪下设计师们的最爱（看看那些在全世界遍地开花的SNS网站，无论是视觉元素还是交互流程均能轻则轻）。本文主要从实践和总结的角度出发，提出了让设计变得更轻的6个技巧。]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/12/04/wangzhanlingmin-sheji/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>设计技巧杂谈（之一）</title>
		<link>http://design.dreamerblog.org/2009/11/07/%e8%ae%be%e8%ae%a1%e6%8a%80%e5%b7%a7%e6%9d%82%e8%b0%88%ef%bc%88%e4%b9%8b%e4%b8%80%ef%bc%89/</link>
		<comments>http://design.dreamerblog.org/2009/11/07/%e8%ae%be%e8%ae%a1%e6%8a%80%e5%b7%a7%e6%9d%82%e8%b0%88%ef%bc%88%e4%b9%8b%e4%b8%80%ef%bc%89/#comments</comments>
		<pubDate>Sat, 07 Nov 2009 15:36:42 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[设计技巧]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=288</guid>
		<description><![CDATA[为什么一张图片比三张图片更有力量？如何设计产品使用指南？如何在设计中通过各种对比产生层次感？如何使设计内外统一协调？如何设计一个独一无二的签名式 LOGO ？本文继续发扬实用主义，对这些问题给出了解决办法。五个设计技巧，开拓你的设计视野。]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/11/07/%e8%ae%be%e8%ae%a1%e6%8a%80%e5%b7%a7%e6%9d%82%e8%b0%88%ef%bc%88%e4%b9%8b%e4%b8%80%ef%bc%89/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>35个水主题网页设计</title>
		<link>http://design.dreamerblog.org/2009/09/22/35-shuizhuti-wangye/</link>
		<comments>http://design.dreamerblog.org/2009/09/22/35-shuizhuti-wangye/#comments</comments>
		<pubDate>Mon, 21 Sep 2009 16:19:50 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=286</guid>
		<description><![CDATA[人类生活中最重要的资源是水。这生命之源，必然是世界各地的艺术家和设计师必修的课程，在此合集，我们收集了超过30个水和海洋为中心主题的网页设计！另外做个广告——珍惜每一滴水,爱护每一滴水！]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/09/22/35-shuizhuti-wangye/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>网页设计者值得一去的地方</title>
		<link>http://design.dreamerblog.org/2009/08/18/website/</link>
		<comments>http://design.dreamerblog.org/2009/08/18/website/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 07:55:14 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=280</guid>
		<description><![CDATA[网页设计者值得一去的地方！好就顶！现在网页设计方面的站点越来越多，究竟哪个才是经典；根据网页设计中牵涉到的：网页制作，平面设计，动画制作，素材安排等，我特地找了些好的站点，发表在这里，如果大家有好的站点，也希望能跟在后面。]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/08/18/website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>非常不错的国外UI网址集锦</title>
		<link>http://design.dreamerblog.org/2009/08/18/ui-site/</link>
		<comments>http://design.dreamerblog.org/2009/08/18/ui-site/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 07:50:12 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=275</guid>
		<description><![CDATA[向大家推荐几个好站，首推国内的小站---站酷，超级多的icon和png，其他的大多是国外的~~~~
http://www.zcool.com.cn/png/
丹麦Icon设计师的主页
http://jonas.seph.ws/
生活在澳洲的19岁中国UI设计师
http://www.istartedsomething.com/]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/08/18/ui-site/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2009年海外Web设计风潮（下）</title>
		<link>http://design.dreamerblog.org/2009/08/16/2009%e5%b9%b4%e6%b5%b7%e5%a4%96web%e8%ae%be%e8%ae%a1%e9%a3%8e%e6%bd%ae%ef%bc%88%e4%b8%8b%ef%bc%89/</link>
		<comments>http://design.dreamerblog.org/2009/08/16/2009%e5%b9%b4%e6%b5%b7%e5%a4%96web%e8%ae%be%e8%ae%a1%e9%a3%8e%e6%bd%ae%ef%bc%88%e4%b8%8b%ef%bc%89/#comments</comments>
		<pubDate>Sun, 16 Aug 2009 09:07:39 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[Web设计]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=204</guid>
		<description><![CDATA[这是 COMSHARP CMS 团队翻译的2009年海外Web设计风潮的 第二部分，着重讲解了反 Box 式布局，单页布局，多栏布局，巨型插图设计，更多留白，社会网络元素，讲解式导航菜单，以及动态 Tabs 等设计风格，和 Smashing Magazine 推出的所有类似文章一样，里面包含了大量的，非常漂亮的实例。]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/08/16/2009%e5%b9%b4%e6%b5%b7%e5%a4%96web%e8%ae%be%e8%ae%a1%e9%a3%8e%e6%bd%ae%ef%bc%88%e4%b8%8b%ef%bc%89/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2009年国外Web设计风潮(上)</title>
		<link>http://design.dreamerblog.org/2009/08/16/2009%e5%b9%b4%e5%9b%bd%e5%a4%96web%e8%ae%be%e8%ae%a1%e9%a3%8e%e6%bd%ae%e4%b8%8a/</link>
		<comments>http://design.dreamerblog.org/2009/08/16/2009%e5%b9%b4%e5%9b%bd%e5%a4%96web%e8%ae%be%e8%ae%a1%e9%a3%8e%e6%bd%ae%e4%b8%8a/#comments</comments>
		<pubDate>Sun, 16 Aug 2009 08:41:26 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[Web设计]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=121</guid>
		<description><![CDATA[

这是 Smashing Magazine 花费几个月的时间研究编写的 2009 年 Web 设计风格与潮流，Smashing Magazine   的编辑们对当前流行的大量Web 设计风格进行分析，总结出那些可能在 2009 年风行的潮流，包括新的设计元素，新的图形方式，并给出大量的漂亮的示例。
2009 Web 设计风潮

凸版印刷风格

富UI
透明 PNG
大字体
代用字体
灯箱框
媒体块
杂志式样
幻灯滚动
重点展示区域

1. 凸版印刷风格
这种风格有些出人意料，可能因为之前很少有人使用。该风格在在各种主题的网站中都有，但主要用于产品设计或在线服务类网站。









2. 富UI
现代 Web 中的 UI 变得越来越漂亮，越来越好用。过去的一年，Web 中的 UI 有了显著提高，有了一种接近桌面的感觉。Ajax 和 Flash 被广泛使用。
特别是我们比去年看到了更多留白区域，还看到很多现代的 UI 技术会显示用户同系统之间交流的视觉状态，比如，按钮在正常和被按下时显示不同的样子，用户同系统交互时能及时得到反馈，另外，越来越多的服务可以被用户定制。


这些设计显示 Web 设计师将更多精力放到了用户体验上。







3. 透明 PNG
使用 PNG 实现透明虽然不被 IE6 支持，却在过去的一年大行其道。设计师们似乎正在尝试将背景图片和内容融合并实现一些印刷媒体的风格。比如，将 PNG 半透明图片放到整体背景的某个区域上，用来加亮显示这个区域，如标题或声明。一些 PNG 同名技术还用来实现灯箱框效果。
Smashing Magazine 去年曾有篇使用透明效果实现创意设计的文章，很多设计师在他们的作品中开始尝试这些技巧。有趣的是，透明效果常被用于页首和页尾部分，不过也有些例外。







4. 巨大字体
以前的文章中我们曾介绍过巨型字体设计，2009年，巨型字体设计还会风行，尤其是那些设计社，以及展示型，产品介绍型，或在线服务型网站，他们会使用巨型字体显示重要信息。
巨型字体设计中使用的字号往往超过36px，设计师们对字体编排注入了更多关注，以实现更漂亮，更连贯，更值得信赖的站点。






5. 代用字体
设计师们还把更多注意力放到字体上，虽然经典的 Web 字体，Helvetica, Arial, Georgia 以及 Verdana 等仍占主流，一些代用字体正浮出水面（如 sIFR）。
有趣的是，这些字体会和设计无缝地衔接，设计师们似乎并非为字体而字体，而是要将字体同他们的设计结合在一起实现更漂亮的效果。





6. 灯箱效果
灯箱框是第二代弹窗，它们比第一代基于 JavaScript 的弹窗更友好，可以让用户将注意力集中到最重要的部分。这些窗口一般由用户的某个行为激发，并显示在其它内容的上层，他们有时候是半透明的，并包含一个关闭按钮。



7. 媒体块
随着宽带接入的普及，用户现在可以承担更丰富的内容，设计师们也借机提出更有吸引力的内容。越来越多产品网站使用媒体块显示视频，让用户更容易理解 这些内容。用户只需靠在椅子上看视频，不需要一步一步往下点，这些食品通常比较短，直奔主题，虽然很正规，但也包含一些娱乐性。
不过请注意，视频应当是你内容展示方式的次要选项，并不是所有人都有宽带接入，也不是所有人都喜欢有视频播放（他们可能正在后台听网络收音机或播放音乐），另外，也不是所有人都启用了 Flash 和 Javascript。


8. 杂志外观
传统印刷媒体设计中使用的编排技术也出现在 Blog 设计中，文章的编排，文字排版，图片甚至对其方式。基于网格的设计也很流行，但主要用于展示与产品页以及大型博客，极少用于公司网站或网店。






9. 滚动幻灯导航
幻灯片水平和垂直滚动，可以向不同方向滚动，当前项加大加亮。这种导航技术可以让用户快速直观地浏览站点中的内容。一般常用语娱乐性网站，另外，设计者还可以使用该技术展示他们的作品。




10. 在重点位置做形象展示
网站的左上方一般是一个站点最重要的区域，因为那是用户注意力最集中的地方。因此，在那个部位放上网站中最重要的信息是明智之举。
事实上很多设计师正是这样做的，不管是 Web 程序，公司网站，在线服务还是作品展示，设计师们将口号或简介性内容放在那里，并使用醒目的排版给用户以良好的第一印象。这些内容长短不一，不管哪种方 式，但它们都占据可观的空间，一般横跨整个幅面，高度在250到400之间。不过这些形象展示性区域一般并不用于博客或在线商店。









原文链接: http://zmingcx.cn/2009-nian-hai-wai-web-she-ji-feng-chao-shang.html
转载文章请注明: 知更鸟

]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/08/16/2009%e5%b9%b4%e5%9b%bd%e5%a4%96web%e8%ae%be%e8%ae%a1%e9%a3%8e%e6%bd%ae%e4%b8%8a/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web 设计与开发者必须知道的 15 个站点</title>
		<link>http://design.dreamerblog.org/2009/08/16/web-design-15-site/</link>
		<comments>http://design.dreamerblog.org/2009/08/16/web-design-15-site/#comments</comments>
		<pubDate>Sun, 16 Aug 2009 08:32:51 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[Web 设计]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=17</guid>
		<description><![CDATA[今天读到一篇文章，介绍了15个对 Web 设计与开发师极端有用的站点，里面有不少也是我们一直在使用的，也许对很多人都有用，翻译出来以饷同仁。 
ColorCombos

配色是 Web 设计的首要大事，Color Combos 帮你预备了数千种配色方案，可以根据色调浏览选取。
LIpsum

Lorem Ipsum Text 是一中自造的，字典中不存在的单词，是在演示页面结构的时候，需要加文字的地方使用 Lorem Ipsum Text 填充可以避免用户因关注文字的意思而分神。Lipsum.com 可以帮你生成制定数目的 Lorem Ipsum 单词。
What the font?

有时候你对某个 Logo 感兴趣，想知道是拿什么字体做的，可以将 Logo 图片上传到这个网站，结果之准确会让你难以置信。
ConvertIcon

Favicon 越来越受欢迎，尤其随着 Firefox 的流行，Firefox 会将你站点的 Favicon 标志显示在标签上，也会显示于书签，Favicon 支持多种图形格式，比如 png，但 IE 并不支持 png，该站点可以帮助你将 png 等图片格式的 Favicon 转换成 IE 支持的 ico 格式。
BgPatterns

现代 Web 设计的趋势之一包括使用背景图案，BgPatterns.com 可以帮你设计背景图案，他们有大量可选的图案，可以按不同方式接合，还可以设置透明度。
HTML Encoder

如果你要在网站中显示 Web 代码，那将是非常烦人的事，你必须将诸如 &#60; 一类的符号用编码表示，这个网站可以帮你做这些事情，只需将你的代码复制进去，他们会帮你生成可以直接使用的代码。还有 HTML Decoder 帮你做相反的事。
Xenocode Browsers

该网站非常有用，可以直接在站点中预览你的网站在 IE6， IE7， IE8， Firefox 2， Firefox 3， Google Chrome 以及 Opera  中的样子。唯一的不足是，不支持 Mac 和 Linux 环境下的浏览器。
Test Everything

这个网站包含了超过 100 中工具帮你测试几乎所有东西，如跨浏览器兼容，查 [...]]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/08/16/web-design-15-site/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE6的PNG透明</title>
		<link>http://design.dreamerblog.org/2009/08/04/ie6-png/</link>
		<comments>http://design.dreamerblog.org/2009/08/04/ie6-png/#comments</comments>
		<pubDate>Tue, 04 Aug 2009 12:09:14 +0000</pubDate>
		<dc:creator>dreamer</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[PNG]]></category>

		<guid isPermaLink="false">http://design.dreamerblog.org/?p=7</guid>
		<description><![CDATA[这是我到现在为止发现最好的一个实现PNG在IE6透明的方法。这些都是它成为最佳方式的原因:
1.非常简洁的javascript,只有1kb；

2. 能工作于img标签和background-images属性；
3. 自动运行。你不需要再为png图片定义任何类名；
4. 允许自动宽高属性；
5.  超级简单的应用方法。
现在，你要做的就是下载压缩包，
1.将下列代码拷贝到header中，请确保路径是正确的。
&#60;!&#8211;[if lt IE 7]&#62;
        &#60;script type=&#8221;text/javascript&#8221; src=&#8221;unitpngfix.js&#8221;&#62;&#60;/script&#62;
&#60;![endif]&#8211;&#62;
2. 添加&#8221;clear.gif&#8221;到你选择的相应路径中，在js的第一行中，{var clear="unitpngfix/clear.gif" //path to clear.gif} 确保你选择的路径是正确的。  
3.结束，欣赏Png在IE 6显示的完美效果。
提示：
1. 在IE6下，background-repeat 效果不能实现，只会把png图片拉伸。
2. 在IE6下，background-position 属性也无效。
相关链接：http://unitinteractive.com/labs/unitpngfix.php
]]></description>
		<wfw:commentRss>http://design.dreamerblog.org/2009/08/04/ie6-png/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
