Rediseño del icono del tipo de archivo de Adobe Idioma del sistema

En el equipo de Adobe Design Brand, creamos marcas para todos nuestros productos de escritorio, móviles y web. Un elemento de marca puede ser cualquier cosa, desde los logotipos de productos de dos letras que ve en su dock hasta la pantalla de bienvenida e íconos dentro de la experiencia del usuario del producto en sí.

Una característica a menudo pasada por alto pero muy visible es el icono de tipo de archivo. Un tipo de archivo es un nombre dado a un tipo específico de archivo que una aplicación puede crear, como .DOC para un archivo de Word. El icono de tipo de archivo es el icono asignado al tipo de archivo y lo que se muestra en la pantalla cuando guarda o abre el archivo real.

Con el lanzamiento más reciente de Creative Cloud este otoño, los usuarios verán que todos nuestros íconos de tipo de archivo tienen una apariencia nueva y fresca. En este artículo, profundizaré en el pensamiento y el proceso detrás de nuestro último rediseño del sistema de íconos de tipo de archivo de Adobe, y compartiré ideas sobre los desafíos que enfrentamos al desarrollar un sistema de marca en una gran familia de productos.

Identificando el problema

Es posible que muchos clientes no se den cuenta de que Adobe tiene más de 100 productos y servicios en tres nubes: Creative Cloud, Document Cloud y Experience Cloud.

Esto significa que un pequeño cambio en el sistema de diseño puede crear cientos de cambios en todos los ámbitos.

Cuando se trata de iconos de tipo de archivo, las personas a menudo solo consideran los tipos de archivos principales de una aplicación, como:

  • .PSD para Photoshop,
  • .AI para Illustrator, o
  • .INDD para InDesign

Sin embargo, la mayoría de nuestros productos también pueden importar y exportar una variedad de tipos de archivos secundarios (por ejemplo, Photoshop solo tiene más de 120 iconos de tipos de archivos diferentes asignados en su registro).

Para optimizar los diferentes requisitos del sistema operativo, nuestros íconos de tipo de archivo también deben ajustarse manualmente en píxeles en 10 tamaños diferentes y luego entregarse como un conjunto de .PNG rasterizados que se empaquetan en .ICNS (Mac) y .ICO (Windows) archivos

Cuando consideramos el número de tamaños y formatos para cada ícono de tipo de archivo, estamos viendo más de 7,000 activos para modificar y administrar con cada ciclo de lanzamiento.

Al ritmo al que la línea de productos de Creative Cloud ha estado creciendo en los últimos cuatro años, quedó claro que la cantidad de esfuerzo requerida para crear y mantener estos iconos de tipo de archivo en el flujo de trabajo existente ya no era escalable.

Paso 1: auditar e investigar

Antes de comenzar a rediseñar el sistema, tuvimos que investigar qué estamos usando actualmente en nuestros productos. Nos comunicamos con todos los equipos de productos para ayudarnos a realizar una auditoría de todos sus íconos de tipo de archivo.

Las inconsistencias estaban en todas partes, y probablemente fueron el resultado de dos factores:

  1. Diferentes equipos que poseen cada familia de productos y ya no se alinean con el diseño, y
  2. A medida que se ponen en línea nuevos productos y tipos de archivos, se crean iconos individuales como diseños únicos.

Con la información recopilada de nuestra auditoría, creamos una vista panorámica de la arquitectura de tipo de archivo existente.

Primero, organizamos los íconos de tipo de archivo por familia de productos y los hicimos referencias cruzadas para ver qué tipos de archivos secundarios se compartían entre múltiples aplicaciones para que pudiéramos eliminar íconos duplicados. Al hacer esto, pudimos reducir el número de iconos de tipo de archivo secundario al 65%.

Un fragmento de nuestra antigua arquitectura de tipo de archivo organizada por familia de productos.

A continuación, categorizamos los tipos de archivo por función, como "Imagen", "Audio", "Código" y "3D". Normalmente, un icono de tipo de archivo presentará una metáfora que habla de su funcionalidad principal (por ejemplo, a. El tipo de archivo HTML utilizará la metáfora de corchetes para transmitir que su funcionalidad está relacionada con el código o la codificación).

Un fragmento de nuestra antigua arquitectura de tipo de archivo organizada por funcionalidad.

Notamos que algunos tipos de archivos usaban varias versiones de la misma metáfora, mientras que otros tenían metáforas personalizadas que podían reemplazarse con un icono más genérico. Comenzamos a crear amplios grupos paraguas de tipos de archivos para asignar una metáfora única a toda la familia. Al hacerlo, pudimos reducir el número de metáforas de tipo de archivo en nuestra biblioteca en más de la mitad.

Una instantánea de algunas de las antiguas metáforas del tipo de archivo secundario.

Paso 2: boceto y diseño

Una vez que tuvimos una visión integral del antiguo sistema, comenzamos a establecer los principios básicos de organización para el nuevo:

  1. Solo los tipos de archivos principales obtendrían la asociación de color del logotipo del producto. Por ejemplo, .PSD sería azul y .AI sería naranja.
  2. Cree una paleta neutral para los tipos de archivos secundarios que son compatibles con múltiples aplicaciones. Por ejemplo, Photoshop e Illustrator usarían el mismo ícono de tipo de archivo .PNG, en lugar de que cada uno tenga su propia versión única del ícono a través de la asociación del color de la marca.
  3. Cree una biblioteca maestra de metáforas de tipo de archivo para mantener los iconos consistentes y evitar la personalización de activos para casos extremos.
Un desglose de los componentes del antiguo icono de tipo de archivo.

Comenzamos a dibujar con este nuevo marco en mente.

Una instantánea de los primeros bocetos del proceso.

Uno de los principales impulsores del rediseño fue simplificar y eliminar tantos elementos en el icono de tipo de archivo sin perder su importancia. Dejamos caer la etiqueta y movimos el tipo de archivo mime a la parte inferior del icono. También eliminamos la curvatura de la página para aplanar el diseño y crear un lenguaje visual más moderno.

La evolución del icono de tipo de archivo de Adobe.

Otro controlador importante se estaba alineando con Spectrum, el nuevo lenguaje de diseño de interfaz de usuario de Adobe, que actualmente se está implementando en todos nuestros productos. Hacia este esfuerzo, redondeamos las esquinas de nuestros íconos de tipo de archivo, y comenzamos a construir una biblioteca que usara metáforas existentes de la base de datos Spectrum o creaba nuevas que se alineaban con su estilo de ilustración.

Una instantánea de la base de datos de iconos Spectrum de Adobe.

Finalmente, incorporamos el contorno de color brillante en el icono de tipo de archivo para vincularlo con la marca existente de los logotipos de nuestros productos. Este cambio no solo hizo que el sistema visual fuera más coherente, sino que los nuevos íconos funcionaron mejor en interfaces oscuras, mientras que nuestros íconos antiguos desaparecerían en el fondo.

Un estudio en contraste de color en la IU oscura.

Paso 3: iterar y finalizar

Después de decidir una dirección de diseño, probamos los nuevos iconos de tipo de archivo en contexto. Durante la auditoría inicial, investigamos todas las áreas donde aparecen iconos de tipo de archivo en diferentes sistemas operativos y dentro de nuestros propios productos. También observamos cada contexto en el que los íconos aparecían en diferentes tamaños y resoluciones.

Tanto en las pantallas de escritorio de Mac como de Windows, tuvimos que tener en cuenta los íconos que se muestran en las vistas de Lista versus Cuadrícula en diferentes factores de escala (16px es el tamaño más pequeño hasta 512px como máximo). También estaba el problema de la interfaz de usuario clara frente a la oscura, como en los "Elementos recientes" o "Búsqueda de Spotlight" en el escritorio de Mac. Luego, analizamos dónde aparecen nuestros íconos de tipo de archivo dentro de nuestros propios productos, como en el Panel de activos, el cuadro de diálogo Explorador de medios y la Pantalla de bienvenida cuando inicia una aplicación por primera vez.

Como se puede imaginar, este proceso nos llevó rápidamente a una madriguera de todos los rincones oscuros y olvidados de nuestro sistema donde viven los iconos de tipo de archivo. Aún así, fue un ejercicio valioso. Llegamos a comprender mejor la tarea.

Un fragmento de los diversos contextos en los que aparecen nuestros iconos de tipo de archivo.

El último paso fue observar los iconos de tipo de archivo implementados en la interfaz de usuario de nuestros servicios web y móviles, como Adobe Acrobat y Creative Cloud Libraries. Dado que estos servicios también fueron administrados por diferentes equipos de diseño, tuvimos que coordinarnos con muchas personas sobre nuestro plan para revisar el sistema de diseño de tipo de archivo.

Estamos orgullosos del resultado final, porque el nuevo lenguaje de diseño es más claro, más consistente y representa la próxima evolución del sistema de marca visual de Adobe.
El nuevo sistema de diseño de iconos de tipo de archivo de Adobe.

Paso 4: Diseñe un nuevo flujo de trabajo

Creamos un nuevo flujo de trabajo para la producción que utilizaba la funcionalidad de secuencias de comandos en Illustrator para compilar y exportar los archivos .PNG con solo presionar un botón. Esta nueva plantilla nos ahorró docenas de horas de trabajo dolorosamente lento y manual.

También necesitábamos una mejor manera de compilar estos .PNG rasterizados en archivos .ICNS (Mac) y .ICO (Windows). En el pasado, utilizamos el complemento IconBuilder de IconFactory con nuestras plantillas de Fireworks. Sin embargo, con el nuevo flujo de trabajo, queríamos una solución más flexible que cubriera nuestras necesidades: principalmente la capacidad de arrastrar y soltar cualquier conjunto de archivos .PNG y hacer que la aplicación emita automáticamente archivos .ICO e .ICNS en los tamaños correctos.

Después de buscar un compilador de terceros, decidimos que era mejor trabajar con nuestros ingenieros para crear una aplicación interna, personalizada para nuestras necesidades. Crearon una herramienta increíble que llamamos con cariño Captain Icon, que es el compilador que utilizamos para empaquetar todos nuestros nuevos iconos de tipo de archivo. (Si bien Captain Icon aún está en versión beta interna, nuestros ingenieros esperan compartirlo en GitHub en un futuro próximo para que pueda estar disponible para que lo use nuestra comunidad de desarrolladores).

Compilador interno .ICO e .ICNS de Adobe.

Paso 5: Implementación

Todavía estamos en esta fase, y probablemente lo haremos por mucho tiempo. Cada vez que enviamos una versión de Creative Cloud, pasamos por un proceso que involucra a gerentes de producto e ingenieros en muchos equipos, asegurándonos de que el diseño se lleve a todas partes.

La implementación es a menudo un proceso tedioso de comunicarse de un lado a otro con los equipos en cientos de hilos de correo electrónico, instalar varias versiones de prueba de compilación para verificar los activos, registrar y solucionar errores inevitables y gestionar múltiples plazos de lanzamiento.

Nuestros productos también se basan en diferentes bases de código, lo que significa que los equipos pueden implementar los mismos activos de manera diferente y encontrar problemas únicos para cada plataforma. El aseguramiento de la calidad y el cumplimiento de las directrices de la marca es probablemente una de las tareas menos divertidas para nuestro equipo, pero es una parte importante para mantener un sistema de diseño en evolución.

Los nuevos iconos de tipo de archivo de Adobe viven en el sistema operativo.

Los pequeños cambios pueden hacer una gran diferencia

En nuestro equipo, a menudo usamos la metáfora del árbol de los bonsais para describir el trabajo que hacemos.

La evolución de un sistema de diseño de marca que contiene cientos de productos depende de un millón de pequeños cambios incrementales en el camino: cortamos una rama aquí y allá y guiamos el árbol para que crezca en la dirección deseada con el tiempo.

Si bien es fácil perderse en los detalles, todo lo que aprendemos en el proceso nos lleva a la siguiente iteración y a la siguiente.