Ólafur Arnalds 专题页设计

2010年3月30日 柴林 6 条评论

年轻的冰岛音乐家Ólafur Arnalds,探寻古典与流行的并融,将室内弦乐,钢琴与散漫的电音共冶一炉。我试听了他的曲子之后,决定采用与他们官方海报完全不同的设计风格。

大家可以去豆瓣音乐人试听他的音乐。我还是挺喜欢的。

zhuanti_olafur_v1

分类: Web Design 标签:

胡戈转型拍广告,阿里巴巴进军网络批发业务

2010年2月19日 柴林 1 条评论

20083242239685

我每次发现植入广告的时候都异常兴奋。今年春晚的植入广告真是太多了,光赵本山的小品里就插了三个,傻子都能看出来。在利益面前,低下头是很正常的。这很容易理解。比如最近我就主动下载了一个阿里巴巴的广告片去看。这个广告片叫《宅居动物》。

涂鸦,在上个世纪六七十年代刚开始出现的时候可能没有现在这么好看,但是涂鸦最本质的意义不是为了好看,而是底层社会表达自己意见的一种方式。因为涂鸦的时候有可能会被抓,所以他有一个反叛的精神内核,如果这个内核没有了,空有一个形式根本不叫涂鸦。就像涂鸦在中国竟然被用来作为宣传奥运、国庆这种主流观念,涂鸦变成了黑板报,可见涂鸦离死不远了。

很明显,胡戈同学的第一个《馒头》作品之所以会大受追捧是因为他是有一个讽刺、恶搞的标签的。正因为他背上有这个标签才会有那么多人去看《宅居动物》,但是这个短片在讽刺GFW之时,还在为阿里巴巴做着广告。这就很容易使人质疑胡戈身上的标签了。

不过从阿里巴巴的角度看,这却是一次成功的推广。广告片的观看者中,1688.com的受众比例应该是相当高的。片中诸如“在1688.com上进货,在淘宝上卖”这样的广告词确实很吸引人,因为有开网店想法的人真的太多了。而无可厚非的是,阿里巴巴的确让网上开店变的很容易。据说马云收购这个域名花了25万美元,现在主页上的宣传动画颇得老美真传。作为阿里巴巴的粉丝,我也很期待1688.com的上线。

分类: 互联 标签:

2010年设计趋势(二):肌理、极简与CSS3的新特性

2010年1月28日 柴林 1 条评论

当我们步入一个新的十年,我可以预见网页设计在2010年将会变得更加有趣和充满实验性。通过新的CSS3 和 HTML5,设计师和开发者将会也会尝试利用CSS3 和 HTML5的新特性来创造更加牛X的设计。草图和大背景图片的风格将会过时,而衬线字体(Serif fonts)和肌理材质风格的背景将会流行起来。多谢CSS3, 我们将会看到更多的圆角、RGBA透明和投影。随着智能手机的兴起,mobile web design 也会被摆到桌面上来。

链接:>>2010年设计趋势(一):衬线字体、自定义字体

四、肌理背景

满屏背景图片的设计风格将趋向过时,将被精致的肌理背景(特别是那种比较轻的噪点背景)取代。

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

五、极简主义

极简主义设计在今天已经不是一个新事物了,在过去的两年里,极简主义已经流行起来了。我想在2010年极简主义仍会大行其道。

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

六、CSS3 新特性

尽管现在不是所有的浏览器都支持CSS3,但是很多设计师也在进行一些新特性的实验,比如:圆角、多背景图、多栏布局、边框图片(border-image)以及动画。下面的网站都很好的应用了CSS3的新特性,并且我们将会看到更多这样的网站。

——— CSS动画 ——–
下面这个同心圆上的点是在旋转的,如果你的浏览器不支持,那看到的就是静止的。

screen capture

——— 圆角(Border-radius)与盒阴影(box-shadow) ———

screen capture

screen capture

screen capture

screen capture

——– 文字阴影 (text-shadow)——–

screen capture

screen capture

screen capture

screen capture

七、RGBA和透明度

RGBA让设置背景透明度变得容易了,我想会有更多的设计师会利用这一新特性去创造一些好看的半透明效果。

screen capture

screen capture

screen capture

本文由柴林翻译,原文来自web design wall

链接:>>2010年设计趋势(一):衬线字体、自定义字体

分类: Web Design 标签: , , ,

2010年设计趋势(一):衬线字体、自定义字体

2010年1月27日 柴林 没有评论

当我们步入一个新的十年,我可以预见网页设计在2010年将会变得更加有趣和充满实验性。通过新的CSS3 和 HTML5,设计师和开发者将会也会尝试利用CSS3 和 HTML5的新特性来创造更加牛X的设计。草图和大背景图片的风格将会过时,而衬线字体(Serif fonts)和肌理材质风格的背景将会流行起来。多谢CSS3, 我们将会看到更多的圆角、RGBA透明和投影。随着智能手机的兴起,mobile web design 也会被摆到桌面上来。

一、衬线字体 Serif Fonts

在过去的十年里,大多数网站采用的字体是Verdana or Arial(非衬线字体),但是在接下来的十年里,衬线字体将会在设计中得到更多的重视。(相对于英文确实是这样,但对于网页上的中文来讲一直都是作为衬线字体的宋体作为主导,倘若“微软雅黑”可以得到更广泛的应用,那对于中文网页设计来讲,确实也值得欢欣。——译者柴林)

screen capture

screen capture

screen capture

screen capture

screen capture

二、Big Headings

头部醒目的大标题也会在2010年盛行起来。

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

三、自定义字体的嵌入

随着像Typekit 这样的公司不断的扩展他们的字体列表和越来越多免费高质量的可用字体的出现 (e.g. FontSquirrel, OpenType, and The League of MoveableType),我觉得会有更多的人在2010年使用自定义嵌入字体这一方法来丰富自己的设计。

screen capture

screen capture

screen capture

screen capture

screen capture

本文由柴林翻译,原文来自web design wall

NEXT:2010年设计趋势(二):肌理、极简与CSS3的新特性

分类: Web Design 标签: , ,

6爷醉酒:IE6 3像素bug的缘起与解决方案

2010年1月11日 柴林 2 条评论

一、 6爷我喝高了,最后一行有重影。什么是IE6 的3像素bug?

IE7修正了IE6中的一个bug,bug名字就叫做“3像素bug”,即文字溢出bug. 表现形式是ie6浏览器下文字或者图片溢出,莫名其妙的自动复制几个字符。如下图,就自动溢出了一个“下一页”。

ie6 bug

二、3像素bug是怎么产生的?

一个容器A包含2两个具有“float”样式的子容器B和C。
第二个容器C的宽度大于父容器A的宽度,或者父容器A宽度减去第二个容器C宽度的值小于3。
在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)。

ie6 bug2下面是这段代码再现了bug的产生过程,如果用ie6浏览,则在下面会多出一个“醉”字。

<div style=”width:200px;”>
<div style=”float:left;”></div>
<div style=”float:left;width:200px;”>我是6爷,我没醉</div>
</div>

ie6 bug3

三、怎样让6爷快速醒酒?ie 6 3像素bug的最佳解决办法:margin-right:-3px;

关于解决办法网上有很多转载,但是我一一试过之后很多都不奏效或者不理想。下面是一段摘录:

1.改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
——此解决方案的评论:疯了!因噎废食的做法。
2.减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。
——此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。
3.去掉所有的注释。
——此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。
4.修正注释的写法。将 <!– 这里是注释内容 –>写成<!–[if !IE]>这里是注释内容<![endif]–>
——此解决方案的评论:还不错的解决方案,但是并不是每个人都对<!–[if !IE]>这里是注释内容[endif]–>这种注释写法很欣赏。
5.在第二个容器后面加一个或者多个<div style=”clear”></div>来解决。
——此解决方案的评论:另人感觉很不爽的解决方案。但是的确能解决。影响网页效率

这五种方法我都不推荐,根据我的实验最直接的解决问题的方法是在父容器A添加 margin-right:-3px; 一般情况下都可以解决这个问题。

<div style=”width:200px;margin-right:-3px;”>
<div style=”float:left;”></div>
<div style=”float:left;width:200px;”>我是6爷,我没醉</div>
</div>

四、珍爱生命,远离ie6

因为溢出bug产生的根本原因没人可以解释,所以也就没有对应的一劳永逸的办法。要从根本上解决这个问题只有一个办法,就是kill ie6.

此文的编写参考:http://www.css88.com/archives/253

分类: Web Design 标签: ,

又一个被否的logo设计稿

2010年1月10日 柴林 1 条评论

logo00

客户:百仕成
工作时间:9小时

关键词:理性 | 创新 | 精准 | 卓越

倾斜向上的箭头:BEST+BETTER=BESTER
三角尺:给人理性、精准的感觉,寓意百仕成卓越的策划能力
V字形:契合“成”字,成功的解决方案使客户在各自的领域获“赢”。

在这次设计过程中我尝试了以下两点:
1.概念的整合与归纳
2.图形的层次关系处理

分类: Print 标签:

圆角还是直角,这是个问题

2009年12月13日 柴林 没有评论

「圆角矩形」(Roundrects)

就像绝大多数网站做的那样,有时候我们真的需要在页面上划出一个一个的豆腐块,用来区分不同的内容。那么这个时候,你会选择圆角矩形还是直角?圆角半径用5px还是8px?

在两年前我不会认为这是一个值得考虑的问题,很多时候我也许太依赖自己的感觉了。这个地方我感觉用圆角好看,但是这个地方我感觉用直角更方便。但是为什么?

做设计并不是把直角变成圆角,把平色变成渐变色。

一、没错,圆角比直角更友好

这一点毋庸置疑,
苹果的很多产品和用户界面都是采用圆角矩形的设计,比如MacBook、iPhone、操作系统界面。不过为什么会有这么多产品采用这样的 设计呢?就连路边禁止停车的标志也是如此,据说当初Steve Jobs和Bill Atkinson当初就是从此处得到灵感,设计了Macintosh界面。

1.人们厌倦了直角,有一天也会厌倦圆角?

2.apple的圆角拉近产品与用户的距离。apple 的圆角矩形为什么如此受欢迎?


关于苹果公司圆角的产生有这么一段摘录:

“Keith Lang对此产生了浓厚了兴趣,他觉得除了一般说的更加让人感觉更加友好、亲切以外,肯定还有其他原因。所以他去请教了视觉专家Keith Lang。这位专家表示,和传统的直角比起来这种圆角设计能降低人们眼睛观看的出错率。不过也有人认为这没有什么根据,只是人们厌倦了直角设计,圆角矩形 的设计出现后流行起来而已。”

为什么圆角矩形更加耐看?

复杂一点说,如果在一个矩形的基础上制作一个圆角,我们首先需要一个合适的圆形,如下图,我们所说的圆角半径,就是这个圆的半径。

Snap1

从圆角的产生过程来看,我有这么一个观点: 圆角是“角”(直角)的细节。
当圆角半径等于0的时候,圆角变成直角。把一个直角修饰成圆角相当于把一个平色修饰成渐变色。所以说,圆角是直角的细节。

二、圆角还是直角,这确实是个问题。

既然圆角矩形这么受欢迎,那么为什么不索性把所有的直角矩形都变成圆角?

别着急,先不要忙着把直角都变成圆角。如果整个页面的区块全都变成圆角,未免显得太过温吞。

并且也并不是你的页面上摆满了圆角矩形就能说明你的页面是一个友好的界面。要知道,在用户体验设计中圆角还是直角可能是最细枝末节的部分了。

三、直角很枯燥吗? 直角的优点?

yahoo的直角契合其Logo的造型,

分类: Web Design 标签: