当前位置:统一通信/协作企业动态 → 正文

Facebook视觉形象

责任编辑:editor007 作者:王玮 |来源:企业网D1Net  2015-05-20 16:29:59 本文摘自:CSDN

在2008年,我开始在那里工作的时候,Facebook的视觉形象已经值得我们去做了。他们选择了一个大胆的并且简单的配色方案,有一个简单的精心设计的文字商标,并谢天谢地避免了在当时很盛行的光滑的web 2.0的审美。不过,我认为有很大的需要改进的机会。这样的机会,再加上自身的使命和企业文化,就是为什么我想在那里工作的一大原因。

不幸的是,提炼一个似乎工作正常的视觉形象并没有在优先级列表中排在靠前位置。在我们努力跟上Facebook快速增长的过程中,设计师经常做一些新产品或举措的一次性设计。这种低效率的使用时间也导致了非常零散的视觉景观。

最初解决这个问题的努力中,有一个是在2009年的一个黑客马拉松,当同行设计师Everett Katigbak和Mark Bixby在一个练习中加入我们,一起重新思考Facebook的文字商标。我通过写Facebook的形象准则,说明指南和设计资源wiki来跟上这件事的步伐。

  Everett Katigbak,Mark Bixby和我在2009年黑客马拉松思考Facebook的文字商标

  来自黑客马拉松,这是我在重绘文字商标的首次尝试

  测绘Facebook品牌的早期尝试

多年来我在这个系统上的各个部分有一定的进展,倡导任何愿意的人来听,并且也有过数次失败。我始终认为,更有意义的努力是有必要的。Facebook拥有项目被组织内充满热情的个体自发完成的悠久历史,并在2012年我决定制定一个全面的并且有凝聚力的视觉形象系统。

  2012——我怎么根据观众和情境来考虑Facebook的视觉景观

相机应用

我第一个大的机会尝试其中一些想法是在2012年的时候,当时我注意到一些实体模型用于即将到来的传播在Pixel Cloud(Facebook分享模型的内部工具)上的相机应用。该产品设计师们建议使用字体Klavika用于相机的文字商标。虽然Klavika确实有良好的质量,但我一直觉得它用作Facebook的商标太僵硬、机械。寻找一个机会,我接触它们,尽管距离推出还有几天,它们笑看我。我很快就开始重绘用于相机文字商标的Klavika字体,使其多一点人文主义。

  未修改的Klavika——由Jorn van Dijk设计的应用程序图标

  Ben重绘的Klavika

  最终应用程序的文字商标

字体

尽管相机应用程序的成果有限,自定义类型收到很好的内部评价。再次修改自己其他项目的Klavika之后,我们决定委托Eric Olson(Klavika的初始设计者)采取办法制定完整的字样。目前字样有两种——常规和半黑体,并支持超过75种语言。

  Facebook常规字体

  实体模型实现字体

  图标

在相机与字体开发之后,我就开始把相同的理念应用于形象的其余部分。尽管有完整的文字商标,图标已经变成了Facebook的主要形象标志,并且有些正在进行的努力在用图标替换产品的文字商标。Facebook此前在提供这些资源给公众方面做得很差,结果导致很多人常常自己做自己的。即使他们没有找到官方的,双色的设计也导致很多人修改图标。所有这一切,你可以想象,导致了有些不成体系。

  谷歌图片搜索到的Facebook图标

这种分化不会一直如此糟糕,但即使Facebook本身也存在不一致。下面显示的是它主要使用的两个图标设计,当然还有其他的。

  旧的图标

尝试解决这个问题,我们创建了一个新的图标,它足够强大、灵活,能在任何情况下工作。和Aaron Sittig(最初的图标设计者)进行合作,我们的做法是重绘“F”、调整比例、取出底部高亮条等等,这样新图标的核心是一个简单的单一颜色字形。

  新图标

之前图标存在的一个问题是它们只在某些背景或在某些情况下使用。单一颜色字形的一个明显的优点是,它可以作为一个积极或消极形态的工作。

我与设计师Jorn van Dijk和Brandon Walkin一起工作,为产品界面所有需要的各种尺寸探索新的图标。

新图标的另一个重要的考虑因素是设计时考虑到模块化的边界半径。只要有可能,我们使用默认半径,但为了容纳某些界面或背景,像IOS的,其中不同的半径是理想的,该图标可以调整。

最后,新图标的设计也充分考虑不同的视觉风格。而形状和比例不应该被改变,除了边界半径,图标本身可以改变样式以匹配特定界面或背景的视觉美感。这里展示的是由Jorn van Dijk设计的iOS和Android的图标。

所有这一切都有望使第三方更容易整合和设计的字形的界面,而无需改变形状或比例。下面是一些实体模型结合了新的图标。

  之前的iPhoto

  之后的iPhoto

  之前的Windows 8

  之后的Windows 8

  之前的Instagram

  之后的Instagram

子品牌

基本完成字体和新图标的开发后,我为创建新的子品牌开发标准和模板。子品牌只是从属的任何产品,服务、团队、组、网页等。多年来,子品牌已经开发了一个一次性的做法——每个设计师都一遍又一遍地解决同样的问题。这不仅导致了非常混乱的视觉设计,而且它也是一个令人难以置信的设计时间的低效率使用。

  Facebook子品牌现有的视觉标识示例

对于整个系统,我的方法可以概括为使用工具而不是规则。与其创造一堆规则告诉人们“不”,我试图尽可能地创造一个灵活的、详细记录的资源系统,它比替代品更容易使用。有一个规则我确实觉得有必要实行,永远不要为一个子品牌而纳入图标到一个新的标志。叫第三方不能修改我们的图标然后我们转身自己做,这是虚伪的。

考虑到这一点,Jorn van Dijk和我开发了指南,用于为子品牌创建新图标。每个基本水平的图标需要用作单色字形,但它也可以以全色说明性型式呈现。

在对现有的Facebook子品牌做详尽调查后,我试图创建一个广泛的系统,它能锁死各种想要使用子品牌的人。与其试图变得非常严格,我想尝试在推动我们走向一致的同时适应过去。

这些子品牌公开展示的其中一个地方是在Facebook上运行的网页,所以设计师Kris Brady和我曾与在新系统中运行页面更新图标的队伍合作过。这些简单的单一颜色字形在执行产品界面所需的所有尺寸时要更好。

  文字商标

虽然它不被那么频繁的使用,为相机和字体申请相同的方法制定、重绘Facebook文字商标依然重要。这是合理的,但遗憾的是自从我从Facebook辞职后一直没有实施。

  旧的Facebook文字商标,由古巴议会Joe Kral设计

  新的Facebook文字商标,核准但尚未执行

在此之前,Facebook关于它的文字商标为数不多的规则之一是,它应该永远是白色逆转淘汰较暗的颜色。这种往往打破的规则终于在这一制度中废除了。

  Like图标

原来的16×16像素的在界面中使用的Like图标是Soleio Curvo绘制的。我负责调整所有的像素图标移入更大的矢量插图在营销材料中使用。在这个视觉形象的重新设计中,我趁机简化我以前绘制的图标,并且与国际化团队一起打造翻译Like按钮的图形图标。

  文档

这个项目中最重要并且费时的方面是写文档和创建途径来把资源轻松地分发到每个人。在内部,我建立、编写、维持内部wiki上的设计资源中心网页。我还与设计师Kris Brady以及营销团队建立一个外部面临的品牌资源中心。

  访问facebookbrand.com下载Facebook官方的资源

系统使用

2014年离开Facebook后,我非常兴奋能看到这个系统被Facebook正在使用。该图标的第三方实现也是一个巨大的进步。下面是我没有设计的系统的使用。

  最后的思考

Facebook作为一个产品和组织,发展速度非常快,并且设计一个可以在许多媒体和背景中灵活使用的系统极具挑战。从视觉设计工作中独立出来,难以置信的任务是创造意识、获得支持、并最终建立一个跨职能的团队来批准和实施这些变革。即使没有系统是完美的,我为我们的成就感到自豪,并期待看到Facebook继续发展他们的视觉形象。

关键字:谷歌Android高亮条

本文摘自:CSDN

x Facebook视觉形象 扫一扫
分享本文到朋友圈
当前位置:统一通信/协作企业动态 → 正文

Facebook视觉形象

责任编辑:editor007 作者:王玮 |来源:企业网D1Net  2015-05-20 16:29:59 本文摘自:CSDN

在2008年,我开始在那里工作的时候,Facebook的视觉形象已经值得我们去做了。他们选择了一个大胆的并且简单的配色方案,有一个简单的精心设计的文字商标,并谢天谢地避免了在当时很盛行的光滑的web 2.0的审美。不过,我认为有很大的需要改进的机会。这样的机会,再加上自身的使命和企业文化,就是为什么我想在那里工作的一大原因。

不幸的是,提炼一个似乎工作正常的视觉形象并没有在优先级列表中排在靠前位置。在我们努力跟上Facebook快速增长的过程中,设计师经常做一些新产品或举措的一次性设计。这种低效率的使用时间也导致了非常零散的视觉景观。

最初解决这个问题的努力中,有一个是在2009年的一个黑客马拉松,当同行设计师Everett Katigbak和Mark Bixby在一个练习中加入我们,一起重新思考Facebook的文字商标。我通过写Facebook的形象准则,说明指南和设计资源wiki来跟上这件事的步伐。

  Everett Katigbak,Mark Bixby和我在2009年黑客马拉松思考Facebook的文字商标

  来自黑客马拉松,这是我在重绘文字商标的首次尝试

  测绘Facebook品牌的早期尝试

多年来我在这个系统上的各个部分有一定的进展,倡导任何愿意的人来听,并且也有过数次失败。我始终认为,更有意义的努力是有必要的。Facebook拥有项目被组织内充满热情的个体自发完成的悠久历史,并在2012年我决定制定一个全面的并且有凝聚力的视觉形象系统。

  2012——我怎么根据观众和情境来考虑Facebook的视觉景观

相机应用

我第一个大的机会尝试其中一些想法是在2012年的时候,当时我注意到一些实体模型用于即将到来的传播在Pixel Cloud(Facebook分享模型的内部工具)上的相机应用。该产品设计师们建议使用字体Klavika用于相机的文字商标。虽然Klavika确实有良好的质量,但我一直觉得它用作Facebook的商标太僵硬、机械。寻找一个机会,我接触它们,尽管距离推出还有几天,它们笑看我。我很快就开始重绘用于相机文字商标的Klavika字体,使其多一点人文主义。

  未修改的Klavika——由Jorn van Dijk设计的应用程序图标

  Ben重绘的Klavika

  最终应用程序的文字商标

字体

尽管相机应用程序的成果有限,自定义类型收到很好的内部评价。再次修改自己其他项目的Klavika之后,我们决定委托Eric Olson(Klavika的初始设计者)采取办法制定完整的字样。目前字样有两种——常规和半黑体,并支持超过75种语言。

  Facebook常规字体

  实体模型实现字体

  图标

在相机与字体开发之后,我就开始把相同的理念应用于形象的其余部分。尽管有完整的文字商标,图标已经变成了Facebook的主要形象标志,并且有些正在进行的努力在用图标替换产品的文字商标。Facebook此前在提供这些资源给公众方面做得很差,结果导致很多人常常自己做自己的。即使他们没有找到官方的,双色的设计也导致很多人修改图标。所有这一切,你可以想象,导致了有些不成体系。

  谷歌图片搜索到的Facebook图标

这种分化不会一直如此糟糕,但即使Facebook本身也存在不一致。下面显示的是它主要使用的两个图标设计,当然还有其他的。

  旧的图标

尝试解决这个问题,我们创建了一个新的图标,它足够强大、灵活,能在任何情况下工作。和Aaron Sittig(最初的图标设计者)进行合作,我们的做法是重绘“F”、调整比例、取出底部高亮条等等,这样新图标的核心是一个简单的单一颜色字形。

  新图标

之前图标存在的一个问题是它们只在某些背景或在某些情况下使用。单一颜色字形的一个明显的优点是,它可以作为一个积极或消极形态的工作。

我与设计师Jorn van Dijk和Brandon Walkin一起工作,为产品界面所有需要的各种尺寸探索新的图标。

新图标的另一个重要的考虑因素是设计时考虑到模块化的边界半径。只要有可能,我们使用默认半径,但为了容纳某些界面或背景,像IOS的,其中不同的半径是理想的,该图标可以调整。

最后,新图标的设计也充分考虑不同的视觉风格。而形状和比例不应该被改变,除了边界半径,图标本身可以改变样式以匹配特定界面或背景的视觉美感。这里展示的是由Jorn van Dijk设计的iOS和Android的图标。

所有这一切都有望使第三方更容易整合和设计的字形的界面,而无需改变形状或比例。下面是一些实体模型结合了新的图标。

  之前的iPhoto

  之后的iPhoto

  之前的Windows 8

  之后的Windows 8

  之前的Instagram

  之后的Instagram

子品牌

基本完成字体和新图标的开发后,我为创建新的子品牌开发标准和模板。子品牌只是从属的任何产品,服务、团队、组、网页等。多年来,子品牌已经开发了一个一次性的做法——每个设计师都一遍又一遍地解决同样的问题。这不仅导致了非常混乱的视觉设计,而且它也是一个令人难以置信的设计时间的低效率使用。

  Facebook子品牌现有的视觉标识示例

对于整个系统,我的方法可以概括为使用工具而不是规则。与其创造一堆规则告诉人们“不”,我试图尽可能地创造一个灵活的、详细记录的资源系统,它比替代品更容易使用。有一个规则我确实觉得有必要实行,永远不要为一个子品牌而纳入图标到一个新的标志。叫第三方不能修改我们的图标然后我们转身自己做,这是虚伪的。

考虑到这一点,Jorn van Dijk和我开发了指南,用于为子品牌创建新图标。每个基本水平的图标需要用作单色字形,但它也可以以全色说明性型式呈现。

在对现有的Facebook子品牌做详尽调查后,我试图创建一个广泛的系统,它能锁死各种想要使用子品牌的人。与其试图变得非常严格,我想尝试在推动我们走向一致的同时适应过去。

这些子品牌公开展示的其中一个地方是在Facebook上运行的网页,所以设计师Kris Brady和我曾与在新系统中运行页面更新图标的队伍合作过。这些简单的单一颜色字形在执行产品界面所需的所有尺寸时要更好。

  文字商标

虽然它不被那么频繁的使用,为相机和字体申请相同的方法制定、重绘Facebook文字商标依然重要。这是合理的,但遗憾的是自从我从Facebook辞职后一直没有实施。

  旧的Facebook文字商标,由古巴议会Joe Kral设计

  新的Facebook文字商标,核准但尚未执行

在此之前,Facebook关于它的文字商标为数不多的规则之一是,它应该永远是白色逆转淘汰较暗的颜色。这种往往打破的规则终于在这一制度中废除了。

  Like图标

原来的16×16像素的在界面中使用的Like图标是Soleio Curvo绘制的。我负责调整所有的像素图标移入更大的矢量插图在营销材料中使用。在这个视觉形象的重新设计中,我趁机简化我以前绘制的图标,并且与国际化团队一起打造翻译Like按钮的图形图标。

  文档

这个项目中最重要并且费时的方面是写文档和创建途径来把资源轻松地分发到每个人。在内部,我建立、编写、维持内部wiki上的设计资源中心网页。我还与设计师Kris Brady以及营销团队建立一个外部面临的品牌资源中心。

  访问facebookbrand.com下载Facebook官方的资源

系统使用

2014年离开Facebook后,我非常兴奋能看到这个系统被Facebook正在使用。该图标的第三方实现也是一个巨大的进步。下面是我没有设计的系统的使用。

  最后的思考

Facebook作为一个产品和组织,发展速度非常快,并且设计一个可以在许多媒体和背景中灵活使用的系统极具挑战。从视觉设计工作中独立出来,难以置信的任务是创造意识、获得支持、并最终建立一个跨职能的团队来批准和实施这些变革。即使没有系统是完美的,我为我们的成就感到自豪,并期待看到Facebook继续发展他们的视觉形象。

关键字:谷歌Android高亮条

本文摘自:CSDN

电子周刊
回到顶部

关于我们联系我们版权声明隐私条款广告服务友情链接投稿中心招贤纳士

企业网版权所有 ©2010-2024 京ICP备09108050号-6 京公网安备 11010502049343号

^