官网：http://www.guichamps.com/

半个月内一定要回家休息，今天2号，计时 …

A redesign can be worth its weight in gold if you get it right. There is a thin line between freshening up your design, and taking a step backwards with a redesign.  Sometimes a redesign can be subtle and simple, and other times it can be a huge re-vamp of a company and it’s goals. Here’s a look at some of my favourite re-designs in no particular order.

http://www.logodesignlove.com/
http://www.underconsideration.com/
http://wefunction.com/

01. AT&T Inc.

This is an ideal example of how a subtle upgrade can make a huge difference.

02. BP Garage

A completely different direction and modern feel. A huge improvement!

03. Sprint

Looking at the old sprint logo it’s obvious a re-design was needed.

04.  Mindshare

A great find via Brand New. Great use of colours & typography.

05. Mustang 2010

The current 2009 Logo, compared to 2010. Subtle improvements, but wow so much more aggression! Source: AutoBlog.

06. Adobe Photoshop CS4

Adobe has come a long way in a short time, I like the way things are going.

07. Discovery Channel

Probably one of my favourites. Really love the placement of elements.

08. Fanta

The old can really does look dated compared to the new look.

09. Johnsons Baby

Not one of the obvious choices, but I love the softer approach.

10. Fiat Bravo

Yeah that’s right, a car made it into the list. A great example of a successful redesign, and Fiat’s recent sales figures prove it. Plus I drive this car, so a very biased choice!

11. Steinlager

I hate lager, but if you presented me with this… It’d be rude to say no.

12. Applebee’s

Great example of a redesign where the concept stays similar but the execution is on a completely different level.

13. Firefox / Firebird

A name change, and a great leap forward. Time really is a healer.

14. QVC

A huge Brand, and a major revamp. And a much needed one.

15. Vauxhall

A UK car maker with a new, more prominent identity. I like the old one, its clean and not much is wrong with it. But the new logo reflects more on a new company direction and style of their cars.

16. MSNBC

A fresher look, more open and less in your face. Works well I’d say!

17. Ford

Yep, more cars related stuff. But a much deserved mention here.

18. Ford Fiesta

Sticking with Ford, their new style Fiesta really is a beauty.

19. The BBC

One of the most recognizable UK brands, good job it looks great then.

20. Direct TV

The same concept, shape and fonts. Just better.

21. Barack Obama

What a difference a year makes. The 2007 site compared to the ‘08. Probably one of the best website re-designs around right now.

22. Grooveshark

David Pache, this guy knows how to redesign a brand identity.

23. BusinessWeek

Simpler, Bolder, Cleaner. A successful redesign in my book.

24. Viget Labs

It is amazing how far we’ve all come in terms of web design in just a few years, Viget is a great example of this.

25. Toys”R”Us

A much more playful typeface and colour scheme. I found this via a great article on Logo Design Love: 10 Sucessful Logo redesigns.

26. Seat Leon

The old model wasn’t hideous, it’s only after you see the new model you start to believe it is. A truly amazing revamp, hats off to Seat design team!

27. N Design Studio

How to flip your website into an iconic design, courtesy of Nick La.

28. The BBC website

Words cannot describe how much I hated the old design. The new site really is something for the BBC to be proud of.

29. Wordpress.org

A much more engaging and approachable design from Wordpress.

30. Microsoft

Making something out of nothing, and doing it well. Microsoft.

31. MailChimp

I dare you to find a better looking mascot. A huge improvement, but a much needed one I must say, the new chimp really does have that “cute-factor”

32. CNET

A subtle update, and you know I love subtle. Beautiful end result.

33. Wembley Stadium

When updating something so Iconic, you need to make something just as iconic. I’d say a job well done on this one.

34. Apple iPod

Advanced technologies and production methods sure do look good.

35. The Simpsons

Right? Now you’re including cartoons… This list is crazy! Maybe so, but this has to go down as the redesign I’m most glad of.

36. XBOX

A new direction with the XBOX design, colours shapes etc are a huge leap in the right direction.

37. Design Shard

With a growing blog it’s important to design for the needs of your visitors. Max does a great job here on Design Shard.

38. KFC

Colonel Sanders is looking better in his old age. A cleaner look.

39. Walmart

A more modern feel to a logo which was showing its age.

40. Envato

A sleeker looking logo really can help kick off your re-branding.

41. Best Buy

A logo which is more fitting to the company & its products.

42. Macmillan

A great bold move by MacMillan Cancer care charity, but one that works really well and a very recognizable brand now.

43. Holiday Inn

Quite possibly my favourite, something about this is just so welcoming. Which is good for a Hotel company right!

44. British Telecom

I have no idea what that guy is blowing into, and I don’t want to know. Needless to say the new logo represents a more dynamic company, with more to offer than just horn blowing.

45. Vicks

The old logo very possibly was made in MS Word. You’d struggle to make the new one in Word, so I like it!

46. Fuel Your Creativity

Adelle really has put a lot of thought into her new logo, and it really has paid off. The new logo has a much more lasting impact.

47. Amazon

For an online store like Amazon the old logo didn’t really fit. The updated version looks better in both web and print.

48. Virgin Media

Not really a redesign, more of a buy-out and brand build. Never-the less it was a refreshing moment for customers like myself!

49. Macbook Pro

Top to bottom glass front, one solid aluminium base and you’ve got yourself a pretty Macbook Pro.

50. HP

I’ve not actually seen this used anywhere but adverts. But I really like it!

Sources of Information

Below is some of the sites and blogs I used for research on this post, along the way I found some great resources and inspirations.

Brand New

Without doubt a lot of these have already been covered by Brand New, a wonderful project by UnderConsideration which I urge you all to add to your RSS feed and start to follow. The content really is amazing, and if you love the logo’s I’ve featured above you’ll love it for sure.

Logo Design Love

As I’ve already mentioned there is a fantastic post on Logo Design Love which you might also find interesting “10 Sucessful Logo redesigns“. The logo design Love website is well worth checking out for various posts on Logos and Brands on a regular basis.

Identity Works

Another great resource which documents the process of various redesigns and their goals from 1998 onwards was Identity Works. A really great site to explore and find out about the history of the brand identities.

Further Reading

After all of these great examples of a successful redesign you may be feeling in the mood to give your website, blog or logo etc a redesign. But it is important you think carefully before rushing into a redesign, this wonderful article by Steven Snell looks over 21 Factors to Consider Before a Redesign and really does give some sensible advice and tips for anyone looking to freshen up their design.

png透明 AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=bEnabled,sizingMethod=sSize,src=sURL)
enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true：默认值。滤镜激活。false：滤镜被禁止。
sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop：剪切图片以适应对象尺寸。image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale：缩放图片以适应对象的尺寸边界。
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

firefox不能对innerText支持
firefox支持innerHTML但却不支持innerText，它支持textContent来实现innerText，不过默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替。

禁止选取网页内容
在IE中一般用js：obj.onselectstart=function(){return false;}
而firefox用CSS:-moz-user-select:none

滤镜的支持(例：透明滤镜)
IE:filter：alpha(opacity=10);
firefox：-moz-opacity:.10;

捕获事件
IE：obj.setCapture() 、obj.releaseCapture()
Firefox：document.addEventListener(”mousemove”,mousemovefunction,true);
document.removeEventListener(”mousemove”,mousemovefunction,true);

获取鼠标位置
IE:event.clientX、event.clientY
firefox：需要事件函数传递事件对象
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

DIV等元素的边界问题
比如：设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
而firefox：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；

判断浏览器类型
var isIE=document.all ? true : false;
我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false

在不同浏览器下的CSS处理
一般可以用!important来优先使用css语句（仅firefox支持）
比如：{border-width:0px!important;border-width:1px;}
在firefox下这个元素是没有边框的，在IE下边框宽度是1px

document.formName.item(”itemName”) 问题
问题说明：IE下，可以 使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"]；Firefox下，只能使用document.formName.elements["elementName"]。
解决方法：统一使用document.formName.elements["elementName"]。

集合类对象问题
问题说明：IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。

自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
解决方法：统一通过 getAttribute() 获取自定义属性。

eval(”idName”)问题
问题说明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
解决方法：统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

变量名与某HTML对象ID相同的问题
问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。
解决方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。

const问题
问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量。

input.type属性问题
问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。
解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

window.event问题
问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。
解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：<input type=”button” onclick=”doSomething(event)”/>
<script language=”javascript”>
function doSomething(evt) {
var myEvent = evt ? evt: (window.event ? window.event : null)
…
}

event.x与event.y问题
问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。
解决方法：var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY;
如果考虑第8条问题，就改用myEvent代替event即可。

event.srcElement问题
问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ? event.srcElement : event.target;
如果考虑第8条问题，就改用myEvent代替event即可。

window.location.href问题
问题说明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。
解决方法：使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。

模态和非模态窗口问题
问题说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。
解决方法：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
如 果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话，使用var subWindow = window.open(pageURL,name,parameters);来获得新开的窗口对象。

frame和iframe问题
以下面的frame为例：
<frame src=”xxx.html” id=”frameId” name=”frameName” />
(1)访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象；
Firefox：使用window.frameName来访问这个frame对象；
解决方法：统一使用 window.document.getElementById(”frameId”) 来访问这个frame对象；

(2)切换frame内容
在IE和Firefox中都可以使用window.document.getElementById(”frameId”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容；
如果需要将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗口。

body载入问题
问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证，待验证后再来修改。
[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。

事件委托方法
问题说明：IE下，使用 document.body.onload = inject;其中function inject()在这之前已被实现；在Firefox下，使用 document.body.onload = inject();
解决方法：统一使用 document.body.onload=new Function(”inject()”);或者 document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别

访问的父元素的区别
问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。
解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。

cursor:hand VS cursor:pointer
问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。
解决方法：统一使用pointer。

innerText的问题
问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。
示例：
if(navigator.appName.indexOf(”Explorer”) >-1){
document.getElementById(”element”).innerText = “my text”;
}else{
document.getElementById(”element”).textContent = “my text”;
}
[注] innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。

对象宽高赋值问题
问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法：统一使用 obj.style.height = imgObj.height + “px”;

Table操作问题
问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement(”td”);
cell.innerHTML = “”;
cell.className = “XXXX”;
row.appendChild(cell);
[注] 由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操作table，如JQuery。

ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。← 此句表述有误，详细见↓
[注] 这个问题尚未实际验证，待验证后再来修改。
[注] 经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list-style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

CSS透明问题
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。

CSS圆角问题
IE：ie7以下版本不支持圆角。
FF：-moz-border- radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。

转：http://www.xij.cn/blog/?p=100