Un nuevo lenguaje visual

El detrás de escena del rebranding de Perfit

Cynthia Sanchez
Perfit Blog
5 min readMar 3, 2017

--

Nadie sabía muy bien hacia dónde íbamos cuando decidimos encarar un rediseño de identidad para Perfit. Es más… todavía no lo sabemos. Porque un sistema de diseño es un ser vivo: sigue evolucionando, mutando y creciendo todos los días, aunque no lo planifiquemos.

No sabíamos hacia dónde, pero algo era claro: había muchos proyectos en mente, una necesidad profunda de renovarse y de dar un mejor servicio y comunicación a nuestros clientes.

¡Qué gran responsabilidad! Perfit nunca había tenido una identidad visual fuerte, por lo cual optamos por dejar todo atrás y arrancar desde cero. Bueno, casi. Decidimos mantener la única parte en la que encontramos potencial para seguir desarrollando: el isologo. Este era el único elemento que identificaba a la marca desde que nació, por lo cual decidimos ser fieles a eso. Con algunos ajustes en el trazado de las formas y una nueva elección tipográfica, le dimos vida al nuevo isologo de Perfit que utilizamos hoy en día: mucho más joven y personal, pero manteniendo su esencia y, lo primordial para los fundadores, sus colores. Ese fue el primer “gran paso” que dimos, y tuvo éxito :) Nos dio la confianza y la libertad para seguir proponiendo cambios, siempre teniendo en cuenta al público, pero sobre todo, la energía de Perfit y de su equipo.

Nuestro isologotipo: antes (izquierda) y después (derecha).

Para esa época estaba en plena creación la nueva aplicación, con muchísimas nuevas funcionalidades, pero sólo en manos de desarrolladores. Los estilos eran genéricos: azul, blanco, negro, Arial, íconos de bibliotecas públicas, CSS básico. Pero funcionaba, eso sí, y había que lograr algo que potenciara ese funcionamiento y lo hiciera más accesible y atractivo.

Decidimos, entonces, reorganizar algunos criterios sobre cómo mostrar la información antes de pensar en el “maquillaje”. Planteamos jerarquías y categorías, definimos niveles de importancia, clasificamos los botones en primarios, secundarios, positivos, negativos… Armando una especie de rompecabezas con los elementos que ya existían, organizando toda la información. En esta etapa, logramos empezar a dar una identidad desde lo cromático, lo tipográfico y, sobre todo, la forma en que se ordena el contenido. Ya sabíamos cómo debían verse los títulos, los listados, y hasta empezamos a definir un estilo de iconografía. Todo venía muy tranquilo: el verdadero desafío de la aplicación no pasaba por armar un gran despliegue de recursos gráficos y explosiones de color, sino por lograr que realmente fuera simple para que el usuario lograra sus objetivos.

De repente, casi sin darnos cuenta, contamos con una familia de más de 80 íconos hechos a medida para la app. Fuimos modificando el formato y la forma de implementarlos, hasta encontrar la mejor solución. Porque no sólo el sistema gráfico evoluciona, nosotros también. Dedicamos muchas horas de lectura en foros y blogs sobre las mejores soluciones a nuestras inquietudes. Pruebas, errores, aprendizaje día a día.

Algunos de nuestros íconos personalizados para la app de Perfit.

Poco a poco, nuestro sistema fue pidiendo abrirse. La primera situación en la que empezó a aparecer la identidad actual de Perfit fue gracias a los empty states de la aplicación: un lugar en donde nos permitimos jugar y divertirnos un poco entre tantas reglas rígidas. Así aparecieron algunos de nuestros “seres” preferidos y una paleta más amplia de colores… ¡Para qué! Todos nos entusiasmamos a partir de esas nuevas apariciones, y quisimos empezar a mejorar lo que ya teníamos armado.

Empty states: los mostramos cuando el usuario todavía no cargó intereses, campañas, imágenes, diseños, contactos, formularios o listas.

Sin tener todavía la aplicación lista, encaramos de lleno el armado del sitio web institucional. ¿Qué queríamos contar? No teníamos ni idea cómo ordenar tanta información… Anotaciones, wireframes, listas, categorías, lorem ipsum por todos lados. La expectativa en este caso estaba puesta bastante alta. Necesitábamos colores, ilustraciones, lindos efectos, animaciones, diversión. Basta del fondo blanco de la aplicación, y ese gris #696969 que no queríamos ver más. Teniendo como base aquellos precursores empty states, empezó un proceso de creación de una cantidad enorme de ilustraciones que fueron dando vida y alma a nuestro actual sitio web. Puedes conocerlo haciendo click a continuación:

Cada pequeño elemento que llegaba fue afectando también a todo lo que ya teníamos. Papelería, tarjetas personales, firmas de email, carpetas corporativas, newsletters, mails transaccionales, tarjetas navideñas, presentaciones de seminarios para clientes, sitios anexos como Perfit developers, Perfit blog, Perfit docs… Tanta era la cantidad, que necesitamos ordenar todo. Y así creamos nuestro manual de marca con guías de estilos, un pequeño legado de instrucciones a seguir. Qué curioso… esa fue una de las primeras tareas que me asignaron como diseñadora a cargo del proyecto: hacer un manual de marca con la nueva identidad de Perfit. Creo que hubiera sido imposible hacerlo en ese entonces. Lo dejamos a un costado por un tiempo hasta que sentimos que nuestro lenguaje visual estaba lo suficientemente maduro y teníamos mucho más material para incluir. La paleta, el valor de línea, el peso de los elementos, las formas geométricas y cómo relacionar textos e imágenes en cada pieza son sólo algunas de las “reglas” que nos guían a la hora de seguir enriqueciendo este sistema. Fue un aprendizaje entender que no se puede apresurar a definir una identidad cuando todavía no existen las piezas y no ha crecido lo suficiente.

Con casi dos años de esfuerzo, finalmente llegó el momento de mostrar lo que logramos hasta el momento :) Yo, por mi parte, feliz con el resultado. Pero, sobre todo, con el proceso ❤

Si te dieron ganas de ver el resultado, ¡no dudes entrar a nuestro sitio web y a nuestra app!

--

--