El cómo y el por qué detrás de la guía de marca visual de Trello
Hay un montón de cosas Trello por ahí: aplicaciones web y móviles, páginas de marketing, documentación, temas de blogs, correos electrónicos, camisetas, pegatinas, sitios de ayuda, swag, presentaciones, tarjetas de visita, gorras, y tal vez una hebilla de cinturón de una sola vez.
Cuando ponemos las cosas Trello delante de la gente, queremos que se sientan Trello-y. En el pasado, teníamos ideas ligeramente diferentes de lo que eso significaba, así que pasamos un poco de tiempo codificando algunas cosas que ya sabíamos, y resolviendo el resto de los detalles. Finalmente nos encontramos con una guía de marca, un lugar central para los logos, colores de marca, activos y pautas para la gente que hace cosas Trello.
Ha sido un gran éxito para nuestro equipo. Evita los debates, las interrupciones, las búsquedas y la confusión. Mantiene a todos en la compañía más enfocados, no sólo al equipo de diseño. Según mis cálculos, hemos ahorrado cientos de millones de dólares empleando esta guía.
Quería explicarle nuestro proceso para que pueda hacer su propia guía.
Principios
Antes de hablar de lo que hay en la guía de la marca, deberíamos hablar de algunos principios. No teníamos un gran esquema para ello, sólo necesitábamos un lugar canónico para los colores y logotipos, pero estas cosas ayudan a mantenerlo simple y utilizable. La guía de la marca es…
- Accesible . Es una página web pública, no un PDF escondido en un archivo compartido. Puedes mantenerla abierta en una pestaña todo el día, lo cual hago. Hay una tabla de contenidos que facilita la navegación. Es corto y digerible.
- Equilibrado . Queremos que las cosas se vean Trello-y, pero no queremos sofocar la creatividad del equipo y la expresión individual. Este es un punto de partida y una dirección para el equipo – algunas ideas básicas con las que todos estamos de acuerdo – no una larga lista de reglas duras.
- Plataforma Agnóstica . La guía puede ser usada para una presentación, una camiseta, una aplicación o un holograma. No podemos predecir todas las formas en que se utilizará, así que no hay necesidad de distraer a la gente con cosas como el diseño, la navegación y los estilos de los botones, que varían mucho entre las plataformas o que podrían no utilizarse en absoluto. Esos detalles se manejan a nivel de proyecto.
- Vivo . No está grabado en piedra. Las secciones serán actualizadas, ampliadas, fusionadas y eliminadas. Cualquiera en el equipo puede actualizarlo y poner cualquier cosa en duda. No tenemos un sistema de versiones o registro de cambios como algunas guías, aunque eso parece bastante impresionante. El equipo se mantiene al día de los cambios.
- Centrado en lo visual . Esto es sólo para el diseño visual de la marca: colores, fuentes, imágenes y similares. La mensajería y la escritura son igualmente importantes, pero para mantener las cosas enfocadas, no se manejan aquí.
Entonces, ¿qué es en la guía?
Logos y activos
Esta sección proporciona todos los logotipos, mascotas o imágenes relacionados con Trello que necesites en PNG, EPS, SVG y Sketch de alta definición. Todo en una sola descarga.
Esto es bueno por dos razones principales. Primero, tenemos todos los formatos que necesitarías. Proporcionar sólo PNG no es suficiente. La relación de aspecto y la resolución en las imágenes rasterizadas probablemente no funcionará para todas las formas en que se podría aplicar. Tener un archivo EPS o SVG significa que es fácil de importar en cualquier programa de gráficos vectoriales y exportarlo de la manera que quieras. Si gestionas una guía de marca, puh-leez proporciona una versión vectorial de tu logotipo, preferiblemente en un formato no propietario. Le ahorrarás a la gente un viaje a algunos sitios web cuestionables.
Segundo, todo es un archivo ZIP. No tienes que ir por ahí buscando otros activos para aplicaciones específicas. Esto significa que el tamaño de la descarga es mayor (¡lo siento!) pero dado el contexto y la audiencia, la gente en el trabajo con buenas conexiones a Internet, creo que es una compensación aceptable. También mantiene la sección más corta porque no tenemos que listar cada posible logo o mascota en la página. También sabes que todos los activos en la descarga están actualizados en lugar de tener que adivinar cuáles son las versiones más antiguas.
Paleta de colores
Teníamos cuatro colores en nuestra guía de marca inicial: el azul oficial de Trello, uno verde («ve»), uno rojo («peligro») y uno amarillo («espera»). No eran suficientes para todas las cosas que intentábamos hacer, especialmente las ilustraciones. Así que a cada color se le dieron 10 «pesos» o tonos. Empezarás con el peso primario de 500, luego bajarás al peso más ligero de 50 y subirás al peso más oscuro de 900 según sea necesario. Esto fue influenciado por la sección de colores en las guías de materiales de los androides. No usamos los mismos colores, por supuesto, pero el sistema es similar.
Teníamos algunas cosas en mente cuando elegimos los colores. Queríamos evitar los colores aburridos y aburridos que muchas aplicaciones de gestión de proyectos tienden a usar. Esos colores nos hacen sombríos. Los colores de Trello son brillantes y alegres. También queríamos una amplia gama de colores, pero no tantos que no se pudieran distinguir entre ellos. Ahora, si eliges de la paleta, va a funcionar con las etiquetas y los fondos de las tablas y otros elementos y una bandada de pájaros cantores se posarán en tu patio y cantarán en hermosa armonía.
Un par de notas más. Usamos gris claro para los elementos de la interfaz como divisores, bordes y fondos. No es un gris puro; tiene un poco de azul, lo que le da un bonito aspecto de acero. También está el «Business Blue», que sólo se usa para materiales de la clase de negocios. Queríamos que la clase ejecutiva tuviera su propia identidad, así que Business Blue no se usa en ninguna otra parte de la aplicación.
¡Pero hay más! Nadie quiere copiar los códigos hexadecimales uno por uno de una página web, así que para hacer nuestras vidas más fáciles, hicimos Trellicolors y dejamos que la computadora haga todo el trabajo. Toma la paleta y la exporta a variables en varios formatos como LESS, SCSS, JSON, y XML. Ahora podemos importar fácilmente los colores en nuestros proyectos y actualizarlos fácilmente cuando cambian. Y como está bajo control de versiones, sabemos cuándo ocurrieron esos cambios. También mantenemos el archivo original de Sketch bajo el control de la fuente, así que podemos ajustar los colores más fácilmente (y puedes ver cómo los hemos producido).
La paleta facilita la comunicación de los colores entre los equipos, especialmente de ingeniería y diseño, y mantiene la consistencia de los colores entre las plataformas para una experiencia unificada. ¡Definitivamente usa uno!
Anatomía de la tarjeta
Las cartas son un concepto central en Trello y queremos asegurarnos de que se vean y se sientan igual en cada aplicación. Hemos establecido algunas reglas básicas. Ahora todo el mundo sabe cómo funcionan las cubiertas de las tarjetas, dónde deben aparecer las etiquetas y los miembros, en qué orden deben estar las insignias y qué colores de paleta usar para los diferentes estados.
Muchas de estas reglas son para una situación ideal en la que tenemos control sobre todos los aspectos. En muchas plataformas, necesitamos doblarnos un poco para encajar. Por ejemplo, el fondo de tarjeta blanca no funciona bien en Apple Watch, donde muchos elementos son oscuros. Los elementos como las etiquetas y los miembros están generalmente en los mismos lugares, pero los fondos son más oscuros y las secciones están un poco condensadas. En Android, hay algunas reglas de diseño específicas de las pautas de material a aplicar.
Su guía probablemente tendrá sus propias secciones específicas como esta.
Poniendo todo junto
Mira la guía de la marca en su totalidad. Las otras secciones son bastante auto-explicativas. La sección Tipografía dice qué fuentes usar y con qué propósito y establece algunas pautas básicas de legibilidad. Hay una sección para Business Class y trello gold que proporciona colores, logotipos y pautas para nuestras ofertas de pago. Mascotas te dice cómo y cuándo usar Taco y la tripulación. También hay algunas Pautas para terceros para desarrolladores de aplicaciones de terceros. Te da lo que se debe y no se debe hacer cuando se trata de logotipos y nombres. Todas las secciones juntas son suficientes para hacer cualquier cosa Trello-y. Con suerte.
Descargo de responsabilidad: la guía de la marca llegó más tarde en la vida de Trello, por lo que todavía hay partes de Trello que no se adhieren. Tendemos a actualizar esas partes a medida que las encontramos.
Si estás diseñando un servicio, pero no tienes una guía de la marca, ¡es el momento de empezar uno! No tiene que ser (¡y no debería serlo!) un documento largo y complicado. Sólo empieza con lo que sabes. Si tienes una guía de marca, pero no tiene logotipos vectoriales, ¡entonces por favor añádelos!
Postscript
En caso de que leas «hebilla de cinturón» e hicieras una toma doble, aquí tienes un montón de botín, incluyendo la ultra rara hebilla de cinturón deslumbrante. Totalmente de marca. (No, no vamos a hacer más de esos.)
