facebook-identidad-visual

Ben Barry, extrabajador de la red social con más adeptos, Facebook, comparte su trabajo en el desarrollo de la identidad de la organización de Mark Zuckerberg.

La identidad visual de Facebook ya estaba siendo trabajada en el 2008 cuando empecé a trabajar ahí. Había escogido un esquema de colores atrevido y sencillo, tenían una marca sencilla y bien diseñada, ya habían evitado la estética lustrosa de la web 2.0  que prevalecía en ese entonces. Aun así, creí que era una gran oportunidad para mejorar. Esa oportunidad, junto con su misión y cultura empresarial, era una gran razón del por qué quise trabajar ahí.

Desafortunadamente, refinar una identidad visual que parecía funcionar bien no se posicionó bine en la lista de prioridades. En nuestros esfuerzos de seguir el rápido ritmo del crecimiento de Facebook, los diseñadores, regularmente, descartaban diseños para nuevos producto o iniciativas. Este uso ineficiente de tiempo también llevó a un panorama visual muy fragmentado.

Uno del los primeros esfuerzos para abordar esto llegó en una Hackathon en el 2009, cuando los diseñadoers Everett Katigbak y Mark Bixby se unieron a mí en un ejercicio para reconsiderar la marca de Facebook. Continué con eso al escribir las guías generales de identidad de Facebook, así como las de ilustración y diseñé recursos wiki.

02-facebook-identidad-visual

Everett Katigbak, Mark Bixby y yo una Hackathon en 2009 repensando la marca de Facebook.

03-facebook-identidad-visual

Este fue mi primer intento de redibujar la marca en la Hackathon.

Con los años progresé varias piezas del sistema,  hablaba con cualquiera que me escuchara y también cometía muchas fallas. Siempre creí que se necesitaba de un esfuerzo más significativo. Facebook tiene una larga historia de proyectos que fueron iniciados por personas apasionadas dentro de la organización, y en el 2012 yo tenía determinado a desarrollar un sistema de identidad visual cohesivo e integral.

05-facebook-identidad-visual

2012. Cómo llegué a pensar el panorama visual de Facebook basado en audiencia y contexto.

Camera

Mi primera gran oportunidad de probar algunas de estas ideas llegó en el 2012 cuando noté algunos bosquejos de la próxima aplicación Camera que circulada en Pixel Cloud —la herramienta interna de Facebook para compartir bosquejos de diseño. Los diseñadores de productos proponían usar el tipofaz Klavika para la marca de Camera. Sí, Klakiva tiene buenas cualidades, pero siempre sentí que era muy rígida y mecánica para la marca de Facebook. Viendo una oportunidad, me contaré con los diseñadores, y pese a que faltaban días para el lanzamiento, siguieron mi idea. Rápidamente empecé a redibujar la fuente Klavika para la marca Camera y hacerla un poco más humana.

07-facebook-identidad-visual

Klavika sin modificar. Ícono de la app por Jorn van Dijk.

06-facebook-identidad-visual

El rediseño de Ben.

10-facebook-identidad-visual

09-facebook-identidad-visual

Marca final de la app Camera.

Tipofaz

Pese el limitado éxito de Camera, la fuente personalizada fue bien recibida internamente. Luego de modificar Klavika nuevamente para otros proyectos, decidimos encargar a Eric Olson —el diseñador original del Klavika— el nuevo enfoque y desarrollo de un tipofaz completo. En la actualidad, el tipofaz tiene dos pesos: regular y seminegrita, y soporta 75 idiomas.

08-facebook-identidad-visual

11-facebook-identidad-visual

72-facebook-identidad-visual

Fuente regular.

72-facebook-identidad-visual

Fuente en negrita.

Bosquejos aplicando el tipofaz.

Bosquejos aplicando el tipofaz.

14-facebook-identidad-visual

Favicono

Poco después de Camera, y el simultáneo desarrollo del tipofaz, empecé a aplicar la misma filosofía al resto de la identidad. Pese a que tenía una marca llena, el favicono se había convertido en la marca principal de identidad de Facebook, y existían intentos de reemplazar la marca en los productos por solo el favicono. Facebook no había hecho un buen trabajo al brindar estos recursos al público y, como resultado, muchas personas hicieron el suyo. Incluso si las personas hubiesen encontrado el oficial, el diseño de dos colores hubiese hecho que modificaran el ícono. Como puedes imaginar, todo esto resultó en mucha fragmentación.

15-facebook-identidad-visual

Búsqueda del ícono de Facebook en Google.

Esta división no hubiese sido tan mala si Facebook no hubiese sido tan consistente. Abajo están los dos diseños de faviconos principales que estaba usando —y habían otros.

16-facebook-identidad-visual

Los faviconos antiguos.

Tratando de resolver esto, creamos un nuevo favicono que era lo suficientemente fuerte y flexible para funcionar en cualquier contexto. Junto con la colaboración de Aaron Sittg, el diseñador del primer favicono, nuestro enfoque era redibujar la «f», ajustas las proporciones y quitar la luz inferior de la barra para que el nuevo favicono, en su esencia, sea tan simple como un glifo de color.

17-facebook-identidad-visual

El nuevo favicono.

18-facebook-identidad-visual

Uno de los problemas con los faviconos anteriores era su uso en ciertos fondos o ciertos contextos. Un beneficio claro del glifo de un color es que puede funcionar tanto en una forma positiva o negativa.

19-facebook-identidad-visual

Trabajé con los diseñadores Jorn van Dikj y Brandon Walkin en lograr el nuevo favicono para todas los diferentes tamaños que se necesitas las interfaces de productos.

20-facebook-identidad-visual

Otra consideración importante del nuevo favicono era diseñarlo considerando el radio de bordes modulares. Cuando se puede, usamos el radio por defecto, pero para acomodar ciertas interfaces o contextos —como iOS— donde es idea un radio diferente, se ajustaba el ícono.

21-facebook-identidad-visual

Finalmente, el nuevo favicono también está diseñado con un estilo visual diferente. Mientras que la forma y proporción no deben ser alteradas— aparte del radio del borde— el ícono puede ser estilizado para encajar con la estética visual de una interfaz o contexto en particular. Abajo se muestran los íconos para iOS y Android respectivamente —estilizados por Jorn van Dijk.

22-facebook-identidad-visual

23-facebook-identidad-visual

Con suerte, todo esto facilitará que terceras partes incorporen y estilicen el glifo para las interfaces sin modificar las formas o proporciones. Debajo podrás ver algunos bosquejos que incorporan en nuevo favicono.

24-facebook-identidad-visual

Antes – iPhoto.

25-facebook-identidad-visual

Después – iPhoto.

26-facebook-identidad-visual

Antes – Windows 8.

27-facebook-identidad-visual

Después – Windows 8.

28-facebook-identidad-visual

Antes – Instagram.

29-facebook-identidad-visual

Después – Instagram.

Submarcas

Con todo el desarrollo del tipofaz terminado y un nuevo favicono, desarrollé estándares y pantillas para la creación de submarcas. Una submarca es cualquier producto, servicio, equipo, página, etcétera subordinado. Con lo años, se han desarrollado submarcas con un enfoque único: cada diseñador resolve el mismo problema una y otra vez. Esto no solo lleva a un diseño visual desordenado, sino también a un uso increíblemente ineficiente del tiempo de los diseñadores.

30-facebook-identidad-visual

Un ejemplo de las identidades visuales que existen para las submarcas de Facebook.

Mi enfoque acerca de todo este sistema puede ser resumido con herramientas y no reglas. En vez de crear un montón de reglas diciendo a las personas «no», intenté, donde sea posible, crear un sistema de beneficios flexible y bien documentado que era más fácil de usar que la alternativa. Sin embargo, sentí la necesidad de imponer una regla: nunca más incorporar el favicono en una nueva marca o submarca. Es hipócrita pedirles a las terceras parte que no modifiquen nuestro favicono y que nosotros sí lo hagamos.

31-facebook-identidad-visual

32-facebook-identidad-visual

Con eso en mente, Jorn van Dijk y yo desarrollamos guías generales para crear nuevo íconos para las submarcas. Cada ícono, en un nivel básico, necesitaba funcionar como un glifo de un color, pero también podía ser renderizado en una versión ilustrativa a todo color.

33-facebook-identidad-visual

Luego de una encuesta exhaustiva de las marcas existentes de Faceboook, intenté crear un sistema extensivo de varios bosquejos que alguien podría querer usar para una submarca. Nuevamente, en lugar de ver muy restrictivo, quise intentar acomodar el pasado mientras me movía, constantemente, hacia el futuro.

34-facebook-identidad-visual

35-facebook-identidad-visual

36-facebook-identidad-visual

37-facebook-identidad-visual38-facebook-identidad-visual

39-facebook-identidad-visual

40-facebook-identidad-visual

41-facebook-identidad-visual

Uno de los principales donde estar submarcas se muestran públicamente es en las páginas operadas por Facebook, así que el diseñador Kris Brady y yo trabajamos con lo equipos que hicieron funcionar las páginas y actualizaron sus íconos dentro del nuevo sistema.  Estos sencillos glifos de un solo color de desempeñan mucho mejor en todos los tamaños necesarios para la interfaz de los diferentes productos.

42-facebook-identidad-visual

43-facebook-identidad-visual

Marca

Aunque ya no es muy usado, era importante aplicar el mismo enfoque que se desarrolló para Camera y el tipofaz al redibujar la misma marca de Facebook. Esto fue aprobado, pero desafortunadamente no se ha aplicado desde mi salida de Facebook.

44-facebook-identidad-visual

La antigua marca de Facebook – diseñada por Joe Kral / Cuban Council.

45-facebook-identidad-visual

Nueva marca de Facebook – aprobada pero no implementada.

46-facebook-identidad-visual

Previamente, una de las pocas reglas que Facebook tenía acerca de tu marca era que siempre debía ser ser blanco con un fondo oscuro. Esta regla que era quebrada con frecuencia, fue eliminada con ese sistema.

47-facebook-identidad-visual

49-facebook-identidad-visual

50-facebook-identidad-visual

 El ícono «Me gusta»

El ícono original de 16×16 píxeles del «Me gusta» que se usa en la interfaz fue dibujado por Soleio Cuervo. Yo fui el responsable de adaptar todos los íconos de píxeles en ilustraciones de vectores más grandes para el uso en materiales de marketing. Durante este rediseño de identidad visual, tuve la oportunidad de simplificar el ícono que dibujé previamente y trabajé con el equipo de internacionalización para crear gráficos del botón «me gusta» traducidos a diferentes idiomas.

51-facebook-identidad-visual

52-facebook-identidad-visual

Documentación

Uno de los aspectos más importantes y que consumió mucho tiempo sobre este proyecto era escribir la documentación y crear formas para distribuir, fácilmente, los recursos a las personas. Internamente, construí, escribí y realicé el mantenimiento de la página de centros de recursos de diseño en el wiki interno. También trabajé con el diseñador Kris Brady y el equipo de marketing para construir un Centro de Recursos de Marca externo.

53-facebook-identidad-visual

54-facebook-identidad-visual

55-facebook-identidad-visual

Sistema en uso

Desde que dejé Facebook en el 2014, ha sido emocionante ver este sistema siendo implementado por Facebook. Las implementaciones  de terceras partes del favicono también son una gran mejora. Abajo están los usos del sistema que yo no diseñé.

56-facebook-identidad-visual

57-facebook-identidad-visual

58-facebook-identidad-visual

59-facebook-identidad-visual

60-facebook-identidad-visual

61-facebook-identidad-visual

62-facebook-identidad-visual

63-facebook-identidad-visual

64-facebook-identidad-visual

65-facebook-identidad-visual

66-facebook-identidad-visual

67-facebook-identidad-visual

68-facebook-identidad-visual

69-facebook-identidad-visual

70-facebook-identidad-visual

Pensamientos finales

Facebook, como producto y organización, evoluciona muy rápido, y fue un desafío tratar de diseñar un sistema que fuese flexible en tantos medio y contextos. Separado del trabajo de diseño visual, existía una tarea increíble de crear consciencia, ganar apoyo y, por último, crear un equipo multifuncional que apruebe y aplique estos cambios. Aunque ningún sistema es perfecto, estoy orgulloso de que los logramos y miramos ansiosos cómo Facebook continúa evolucionando sus identidad visual.

71-facebook-identidad-visual

En Staff Creativa somos expertos en ofrecerle asesoría y trabajo calificado para que su empresa construya la imagen que siempre ha deseado. Por ello los invitamos a entrar en nuestra página en Facebook, o visitar nuestro website principal (www.staffcreativa.pe). Toda la información sobre nuestro trabajo puede encontrarlo allí. ¡Visítenos¡

Este artículo fue originalmente publicado en Office of Ben Barry, y ha sido traducido y adaptado al español por Staff Creativa, agencia de marketing digital en Lima, Perú. Si encuentras contenido online en inglés sobre diseño de páginas web, gestión de imagen corporativa, marketing digital o packaging, no dudes en contactarnos. Nos encargaremos de traducirlo y publicarlo, y te avisaremos!

The following two tabs change content below.

Deja una respuesta