彬Go » 网页设计

暴风彬彬 — Fri, 28 Aug 2009 13:27:06 +0000

今天彬Go要向大家推荐一些非常棒的网页设计类教程网站，这些网站都会经常更新一些优秀且高质量的Web界面设计教程。如果你热爱网页设计并且经常搜集各种界面设计教程，那么你一定要把下面这些网站收藏起来。

您还可以参考以下网页设计相关教程及资源:
《Web UI 设计(网页设计)命名规范》
《30个运用纸类元素网页设计的创意实例欣赏》
《2008年最佳Web设计/前端开发技巧、脚本及资源总结》
《精选31个网站界面设计实践教程》

留意更新

订阅彬Go以查看网页设计最新教程及资源。

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/22-photoshop-web-design-interface-tutorial-sites.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

近期作品:麻将电视赛官网UI设计+前端开发

暴风彬彬 — Sat, 13 Jun 2009 08:47:14 +0000

今天展示一下五月底用4天时间完成的一个小项目，天津麻将电视大奖赛的专题官网UI设计+前端开发。这个项目要的很急，呵呵，所以非常非常赶…界面方面可能还有很多不如意的地方，但是网页的前端代码我是在既追求效率又追求质量的基础上完成的。这个项目的交互原型和详细需求不是我出的，所以内容结构和内容量、布局等不是我能大规模修改的。我只能在原型的基础上进行创意设计和修饰配色等。

先来两张首页效果图:

两个版本之间的区别只在于赛事进程版块内，由于需求的内容量过大，所以导致页面很单调，版本一是我优化的，版本二是按需求的内容量设计的。这个需求我看到第一眼就觉得很无奈，这么庞大的信息量，有必要吗？！用户100%不会耐着性子把内容看完的，反倒是需要一些突出的图片或是颜色来引导用户浏览网页中最重要的内容，比如这个页面中的”报名”按钮、”赛事进程”板块和参赛步骤。再有就是既然是麻将游戏的电视比赛，那就一定要通过设计元素突出主题，能让用户在没有看到文字的时候也能大致了解页面的主题内容是什么，提高页面的可识别性。Banner的Q版电视人物和一些麻将就是起到这个效果。

关于页面的风格，我借鉴了很多腾讯的设计风格，走清新路线，希望能在炎炎夏日给人以清爽的感受….导航是Copy的，哇咔咔….时间紧迫啊….尽管拍我吧，哈

顺便说个题外话，哈，那个”易游开心”很山寨… 囧rz

天津麻将电视大赛首页效果图-版本1

点击小图查看清晰大图

天津麻将电视大赛首页效果图-版本2

点击小图查看清晰大图

天津麻将电视大赛专题网站Demo(点击查看)

下面来总结一下我使用的一些前端技术和经验，希望能对大家有所帮助，大家如果有更好的意见欢迎留言，互相学习。

1.CSS书写顺序

注重CSS书写顺序使很多前端开发新人所忽视的，其实这种习惯的好处不用说大家也能猜出一二，最最主要的还是方便日后的查询和维护。

2.结构化CSS代码

将CSS代码结构化之后，让它符合树形结构，便于查找各级元素的CSS样式属性。

3.杜绝使用CSS Hack

很多前端新人都把学习重点放在CSS Hack上，为了让大部分主流浏览器兼容自己的网页，想方设法在CSS代码中插入适用于各种不同浏览器的Hack。其实完全没有必要，通常情况下的网页，基本上都可以在不使用CSS Hack的情况下达到浏览器兼容效果，当然，这需要扎实的CSS基础和丰富的经验。

4.针对IE6兼容问题采用”单挑”原则

如果是IE6单独存在的问题，那我会单独命名一个CSS文件，把适合IE6的标准CSS样式写在这个文件中，并在网页里使用IE条件注释达到仅让IE6读取该CSS文件的目的。呵呵，出于我对IE6的愤慨之情，所以把文件名命名为这个比较不”和谐”的名字。

注释如下:

5.为CSS写目录索引

这个没什么好说的，作用类似图书的目录，大家有兴趣可以阅读彬Go关于CSS索引注释的文章《CSS最佳实践:为今后的项目制作空白CSS模板文件》，这里面详细讲解了关于如何写CSS索引注释和它的好处。

6.遵循命名规范

命名规范对于一个团队来说是相当重要的，对于个人来说也是有一定的好处的。之前彬Go发表过一篇《Web UI 设计(网页设计)命名规范》，是我个人总结的一些相关命名规范内容，感兴趣的话可以看看。

7.纯CSS实现导航标签”面包屑”效果

我个人认为这个没什么可说的，但是考虑到很多前端新人可能不太了解如何实现，所以简单说一下实现的原理。它的效果就是让导航(已选择)标签停留在相应的页面上。比如首页的话，导航标签的”首页”高亮；在”奖品详情”页面，相应的”奖品详情”标签高亮。

基本实现原理就是在不同的页面为标签添加一个id。比如首页是,赛事报道页面则是,以此类推。然后就可以使用CSS专门针对不同的body id值设置CSS样式了。我的样式是这样的(已缩减):

#home .nav_home a:link,#report .nav_report a:link {background-position:0 -78px;color:#005ea5;}

8.CSS Sprites(CSS图像拼合) 技术

CSS Sprites近期收到了国内前端们的热烈追捧，但我只在网站中的导航上使用了这个技术。为什么呢？原因有以下两点:

1.CSS Sprites增加了切图时间，但这个项目时间很紧。
2.这个网站的流量不大，使用CSS Sprites技术没什么意义，不会有什么明显的减小流量和请求的效果。

也就是说CSS Sprites的优势基本无法在这个网站上得到体现。所以我这次放弃使用CSS Sprites技术，从而换来了开发(切图)效率上的提高。

如果大家想了解更多关于CSS Sprites的知识，可以看看《CSS Sprites(CSS图像拼合技术)教程、工具集合》。

9.通过W3C xHTML 和 CSS 官方验证

这个是必须的，这玩意儿地球人都知道，我就不多说了。但遗憾的是，这个认证只停留在我的Demo中，运营中的实际网站已经有很多错误了，是为网站填充内容的运营客服人员搞乱的，无奈一下….我也懒得改了，有Demo就行了。

天津麻将电视大赛专题网站Demo(点击查看)

好了，关于使用到的技术我目前只想到这些，以后可能还会补充新的。最后想说一下，前端开发并不是非要追求所有高级技术，并不是在一个项目中使用最高级的技术就能证明米的能力有多强。真正的高手是懂得分析一个前端开发项目，用最适合的前端技术实现当前项目的人，这样才能记得到质量有追求了最高的效率。比如我刚才说的CSS Sprites，它明显不适用于这个项目。再比如滑动门，我也没有使用在导航上，因为这个专题网站是有有效期的，基本上不会涉及到导航文字的改变，所以浪费时间在使用这些技术上的话毫无意义。我相信有更多的高手能使用比我更恰当的技术来完成自己的项目，所以在下才把这篇文章发上来，希望能互相学习。大家尽管拍砖啦….嘎嘎嘎~~

留意更新

订阅彬Go以查看前端开发/CSS相关最新教程及资源。

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/tianjin-ma-jiang-mahjong-contest-website-ui-design-css.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

展示:大学时期做的第一个xHTML+CSS项目

暴风彬彬 — Sun, 31 May 2009 09:32:53 +0000

今天我要向大家展示一下我早在大学三年级时为学校的心理咨询健康中心做的一个网站，呵呵，也许大家会纳闷为什么现在拿出来展示？因为我从毕业工作到现在已经一年了，想把当初自己为之骄傲的作品拿出来让大家拍拍砖，也是给自己一年的努力做一个对比，过两天我会再发一个近期的UI设计+前端项目作品，就是想总结一下从我开始学UI设计和CSS到现在到底都有哪些进步，也希望大家多多拍砖，但恳求手下留情，嘎嘎嘎~~

先简单介绍一下当初做的这个网站吧:这个网站是为我大学心理咨询健康中心做的，全站从页面UI、前端页面到后台程序和数据库都是我自己独立完成的，当初觉得可有成就感了，现在回头看看觉得还是蛮稚嫩的，哈哈。后台的asp程序和SQL数据库我就不提了，简单说一下UI设计和前端页面的制作吧，当初凭着自己的一点点Photoshop功底，设计了这个网站，记得上面的大图花了整整一个晚上，哈，本觉得心理咨询这种机构有种潜意识、梦幻的东西在里面，所以合成了这种场景，结果被人说是学校被水淹了，哈哈~~至于CSS，当初也不懂什么结构啊、语义化啊等等专业术语和书写习惯，只知道尽量让网页符合大多浏览器，所以代码很乱的。

这个网站的开发周期大致是:
UI设计:2周
前端开发:2周
后台程序:1个月
整合:1周

由于网站是给学校用的，所以放在校园内网了，外网浏览不了。所以在这提供个网站效果图及网站最早的Demo。

点击上图查看清晰大图

查看网站Demo

大家不要笑话我哦，再次声明，这是我大三时做的，不是现在做的。欢迎大家拍砖批评，但不要以09年的技术和审美眼光来衡量这个作品，在下先谢了。过几天我会发个近期的UI+前端作品的。敬请期待:)

CSS Sprites(CSS图像拼合技术)教程、工具集合

暴风彬彬 — Wed, 20 May 2009 05:56:33 +0000

今天彬Go将向大家推荐目前为止最全的CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合，该集合是有一位国外设计师收集整合，并由 oncoding翻译成中文的，感谢他们的辛苦贡献。CSS Sprites技术在国外并不是什么新技术，只不过近两年(尤其08年开始)中国开始流行这个词，大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术。CSS Sprites这个词如果直译的话是”CSS精灵”的意思，它显然无法表达其技术的内涵。通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做”CSS贴图定位”。无论怎么叫，它的技术核心是不变的，下面让我们来了解一下这篇CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合吧。

您还可以参考以下JavaScript/CSS相关教程及资源:
《43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程》
《30个基于CSS的导航和按钮优秀设计教程》
《2008年最佳Web设计/前端开发技巧、脚本及资源总结》
《使用CSS为图片添加更多趣味的5种方法》
《精选30个优秀的CSS技术和实例》

什么是CSS Sprites？

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。

上图是口袋妖怪的组合图片，可以点这里欣赏更多。不是加载每个但以图片

时间进行到2000年，Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。

2004年，Dave Shea 提出了一种使用CSS控制组合图片的方案，将许过小的图片组合在一起，使用css定义背景属性，来控制图片的显示位置和方式。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites用在哪里？

CSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目的方式。

下面是一些CSS Sprites的使用范例：

Xing

这个网站将一些按钮、图标以及LOGO做成了CSS Sprites：

Amazon

亚马逊使用的大幅、整齐巧妙的CSS Sprites：

Apple

苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果：

YouTube

YouTube使用了一个2008像素高的CSS Sprites：

CNN
CNN使用了非常简单谨慎的方案：

Digg
Digg的方案比较复杂：

Yahoo
Yahoo将他们漂亮的图标等距离排布起来：

Google
Google使用了极其简化的方案：

Dragon Interactive

一个丰富多彩的CSS Sprites方案：

TV1.rtp.pt

一个很大很酷的CSS Sprites方案

CSS Sprites常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。

关于CSS Sprites的文章

CSS Sprites: Image Slicing’s Kiss of Death

中文版:样式表贴图定位（CSS Sprites）：图像切片的死亡之吻

最权威的CSS Sprites介绍文章之一

CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一篇图文并茂的介绍文章

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites

介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例。

What Are CSS Sprites?
又一篇介绍文章

Sprite Optimization

Dave Shea的思考：是不是真的有必要简历复杂的大型CSS Sprites？答案是不！不要搞得太复杂，找到一个折中的方案才是正道。

Creating Easy and Useful CSS Sprites

一篇教程，其源文件可下载学习

Fast Rollovers Without Preload

一个快速翻转效果的例子

CSS Sprites + Rounded corners

另一个例子：使用CSS Sprites实现背景圆角

CSS Image Sprites

一篇教程

Optimize Your Website Using CSS Image Sprites

非常详细的教程，介绍了CSS Sprites的原理和应用方法。

Animated GIF For CSS Sprites

一个比较特别的应用

Image Sprite Navigation With CSS

怎样制作简单的悬停菜单效果

Advanced CSS Menu

还是悬停效果

Creating and Using CSS Sprites

一个非常基本的教程

CSS Sprites视频教程

How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念，并演示了如何在网页中使用它，长度：10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程，展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez 展示了 CSS sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例，他将8幅图片组合在了一起，并且使用jQuery制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站，减少图片请求数量可以减轻服务器负担，这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image
介绍背景图片定位的方法

利用CSS Sprites制作图像映射(image maps)

使用CSS Sprites，你可以对一个对象的一小部分加载翻转效果，使用负值的背景图片位置( background-position )，你可以创建基于CSS的图像映射，下面的文章讲述了这一技术：

CSS Image Maps Using Sprites

一个基于CSS的图像映射的简单例子。你可以同传统的方式对比一下优劣。

City Guide Map Using Sprites
另一个横向定位的例子

Advanced Map Using Sprites
一个更高级的技术。

CSS Sprites技术

CSS Sprites 2

Dave Shea 使用jQuery扩展了经典的CSS Sprites，他的技术可以让不同的链接之间使用组合图片，即使用户禁用了Javascript。

CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In
Joel Sutherland 制作的jQuery插件，整理了Dave Shea的功能，并简化了初始化设置。

Background Repeat and CSS Sprites

什么情况下使用CSS Sprites

CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
这是一个可以导入Photoshop的动作设置，可以让你快速制作翻转按钮的背景图片。

Extending CSS Spriting
Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。

Sliding Doors Meets CSS Sprites
滑动门技术 “Sliding Doors of CSS.”

How to Preload Images When You Can’t Use CSS Sprites
如何处理CSS Sprites对网页内容的影响

JavaScript Sprite Animation Using jQuery
Alex Walker 结合CSS Sprites和jQuery，实现了“打开页面”的效果

IE6, CSS Sprites and Alpha Transparency
Julien Lecomte 讲述IE6下的透明hack问题

CSS Sprite 制作工具

Data URI Sprites

DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具，它可以最大限度的帮助你减少背景图片的数量，减少请求数。

Spritr
一个生成CSS Sprites的简单工具

Sprite Creator 1.0
同上

CSS Sprite Generator
制作CSS sprites 的Drupal插件

CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码

Projekt Fondue CSS Sprite Generator
它具有忽略重复图像，调整图像精度，确定横向和纵向偏移，指定背景色和透明度，指定CSS前缀等众多功能。

SmartSprites
基于java的桌面程序

你可以继续以你自己的方式编写CSS和使用图像，有一个工具可以自动为你设置CSS Sprites，这里是PHP 版本，它是开源的，具体可以看： Chris Brainard’s Sprite Creator 1.0.
附：CSS属性background-position(图像背景位置)该如何设置

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范，background-position属性包含了两个(可选的)变量：水平位置(horizontal)和垂直位置(vertical)，例如：

1. .introduction {
2.     background-image: url(bg.gif);
3.     background-position: [horizontal position] [vertical position];
4.     }

.introduction { background-image: url(bg.gif); background-position: [horizontal position] [vertical position]; }

使用这个属性，你可以定义块级元素的背景图像位置，可以使用%百分比或px像素为单位来定义图像开始的位置，也可以使用关键字：top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

在“ background-position: x% y%; ”这样一个语句中，x%指水平偏移，y%指垂直偏移，左上角是：0%,0%，右下角是：100%,100%，默认的是50%。

例如，你可以这样定义：

1. ul li {
2.     background-image: url(bg.gif);
3.     background-position: 19px 85px;
4.     },

这样背景图片就被定位到了距离左侧19像素，距离上边85像素。

关于这个属性，可以在这里找到更详细的资料：background-position (CSS property) 。

留意更新

订阅彬Go以查看前端开发/CSS相关最新教程及资源。

英文原文:The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
翻译原文:解密CSS Sprites：技巧、工具和教程

Web UI 设计(网页设计)命名规范

暴风彬彬 — Tue, 12 May 2009 03:34:36 +0000

最近工作实在是繁忙，所以好久没有更新自己的博客了，实在是对不起各位读者。今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套Web UI 设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。

这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了，有点罗嗦，吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。

这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。

Web UI 设计命名规范

一.网站设计及基本框架结构:

1.   Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
2.   Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
3.   Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
4.   Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
5.   Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6.   Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7.   Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.

二.需要注意的几点:

1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。

2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news

3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

三.Photoshop图层结构规范:

Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。

第一级图层结构如下图:

第二级结构图例(医院网站):

第三级结构图例及效果图对比(医院新闻栏目)：

效果图

图层命名结构

四．常用命名汇总:

页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap

以上命名规范仅供参考。如果大家对于Web UI设计规范有自己的见解，欢迎大家在此留言一同讨论，互相学习，共同进步:)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/web-ui-design-name-convention.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

30个运用纸类元素网页设计的创意实例欣赏

暴风彬彬 — Sun, 19 Apr 2009 07:03:35 +0000

将纸的材质融为设计元素现已成为当今网页设计最热门最流行的设计趋势之一。网页设计师可以使用纸屑、硬纸板纹理材质、笔记本和记事薄构成有趣而复杂的设计。今天，彬Go将带您一起学习国外30个优秀的纸类元素网页设计实例。通过这30个网页设计实例，您将了解到如何将纸类元素使用在网页中的各种组成元素中，如背景图、导航菜单、内容区域以及其他网页元素。希望大家能在这30个实例中找到更有创意的灵感。

您还可以参考以下JavaScript/CSS相关教程及资源:
《网页设计趋势之:星空和极光效果》
《70+漂亮且极具亲和力的导航菜单设计推荐》
《2008年国外最漂亮的50个网站欣赏》
《网页设计新趋势:云隙阳光和光线效果》
《精选31个网站界面设计实践教程》

1.Peace River Excursion

2.Team Green

3.Diego Latorre

4.DK Publishing

5.The Chernobyl Nuclear Disaster

6.Church on the Rock

7.Dawghouse Design Studio

8.BlackWave Creative Branding and Design Services

9.L’Antidote

10.Gardening With Children

11.Revolution Driving Tuition

12.Pain is Good

13.kayintveen.com

14.Sprocket House

15.vSplash

16.Eric’s Empire

17.Callum Rimmer

18.NotYourAverageJoe

19.Summer Day Camps MD

20.A Round Dorset Walk

21.HRNYC

22.Emarts

23.adf.lt

24.Narfstuff

25.Repair Jeans

26.PLEJ

27.Luc Espace

28.iPhone Development

29.Hillwood Residential

30.Simply Fired

英文原文:30 Creative Examples of Using Paper in Web Designs
翻译原文:30个运用纸类元素网页设计的创意实例欣赏

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/30-examples-paper-web-ui-designs.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

网页设计趋势之:星空和极光效果

暴风彬彬 — Sat, 07 Mar 2009 15:27:01 +0000

今天彬Go将和大家一同分享Web设计新趋势中的又一新颖元素，那就是星空和极光效果，首先引领这个网页设计趋势的时苹果Leopard OSX，它的极光/星空效果让人眼前一亮且深入人心，深深的吸引了大量从事Web设计工作的设计师们的眼球。如果将这种简单的星空或极光设计效果添加到你的网站、博客的背景图或页头中，马上会令富有新的生命力！

下面我们来一起欣赏一下彬Go为大家收集的20个使用了星空/极光效果的网站吧，最后还会为大家加提供一些该效果相关的网页设计教程。

您还可以参考以下Web设计相关教程:
《网页设计新趋势:云隙阳光和光线效果》
《网页设计趋势之:”勾引”用户的按钮》
《2008年国外最漂亮的50个网站欣赏》