Imaginemos que estamos por comenzar de cero el diseño de un website o app, sabemos que desde una perspectiva visual y conceptual contar con un branding completo es una pieza fundamental para dar los primeros pasos. Los manuales de marca, el entregable principal de un proceso de branding, suele contar con exploraciones rápidas sobre cómo la marca va a ser usada en diferentes escenarios. En nuestro caso, al momento de diseñar un website o producto digital necesitamos una exploración profunda justamente en un escenario digital.

Hoy les quiero contar sobre una etapa que se agrega al proceso de branding y que con muy bajo esfuerzo genera un gran impacto llevando nuestros entregables de branding al próximo nivel.

Bajo esfuerzo, alto impacto

En Indicius lo llamamos Style Tile, pero el nombre no es importante, cada uno puede llamar a esta etapa como quiera. Este proceso ayuda a traducir un branding tradicional hacia un plano digital al inicio de un proyecto que aun no tiene definido nada relacionado a la interfaz de usuario. Es importante destacar que esto es una exploración con foco en lo visual y debe ser pensada como tal. Por tal motivo, pertenece al proceso de branding y no al de UX/UI, con esto quiero decir que el foco del Style Tile no está en crear un UI KIT sino en expandir el branding ya definido explorando de qué manera este se va a comportar en un contexto digital.

¿Cómo se lleva adelante esta etapa? Bueno, primero pensamos en cuáles son los elementos comunes de cualquier interfaz digital. Podemos comenzar esta exploración enfocándonos en algunos átomos básicos como botones, iconos, campos de texto, etc. En esta etapa ya heredamos del branding los colores, donde podemos profundizar en cómo va a ser su uso y también la tipografía donde podemos dar nacimiento a un futuro TYPE KIT.

Luego pasamos a la creación de moléculas y organismos, por ejemplo formularios, tablas, sliders, dropdowns, cards, tabs, etc. Con esta cantidad de elementos generados es posible comenzar a componer diferentes templates y páginas que respondan a la necesidad del cliente. Si estamos creando un Style Tile para un producto digital que se basa principalmente en manejo de datos, sabemos que para este producto la interfaz se va a componer de formularios, cards de información, tablas, paginadores, composiciones tipográficas con mucha información condensada, diferentes niveles en CTA, dropdowns complejos, entre otros elementos. Por ende, sin saber realmente cómo va a ser el producto final podemos orientar nuestra exploración a la industria en donde esta interfaz se va a posicionar. Pensemos otro ejemplo, si sabemos que el Style Tile que estamos creando va a dar vida a un marketing website podríamos optar por explorar composiciones como heroes, formularios de contacto, composiciones tipográficas, sliders, publicaciones de blog, citas, grilla de clientes, grillas de equipo, etc.

Esto es Branding

Al momento de crear nuestro Style Tile, comenzaremos con los elementos y estilos típicos de una interfaz digital, buscando ajustarlos para conceptualizar en ellos el branding con el que estamos trabajando. Para eso analizamos y definimos el preciso uso de rounded corners, de sombras, de espaciados, de gradientes y de strokes teniendo en cuenta lo que visualmente estos elementos transmiten y lo que nosotros queremos transmitir en nuestro diseño. También podemos optar por explorar dos propuestas y presentárselas al cliente para obtener feedback y asegurarnos que estamos en el camino correcto.

Otra posible situación que nos podemos encontrar es que el branding que recibimos fue trabajado por otra persona y notamos ciertas falencias. Este en un buen momento para plantear ciertas mejoras, al menos de las básicas, asegurarnos que los colores tienen el suficiente contraste para pasar los parámetros de accesibilidad, que el par tipográfico funciona, que la paleta tiene los suficientes colores, definir algunas pautas que ayuden al correcto uso del branding, entre otras.

Al momento de llevar adelante esta exploración es muy importante sacarle el máximo potencial a los recursos con los que contamos. Si ya existen wireframes podremos visualizar la futura estructura del website o producto que se va a desarrollar, por lo que comprenderemos los elementos y componentes que se van a necesitar en la interfaz. Diseñando estos posibles elementos y componentes lograremos que nuestra exploración de Style Tile sea más precisa. También si contamos con contenido de la marca, por ejemplo, la descripción del servicio, posibles títulos, un eslogan, la misión de la empresa, etc, podemos utilizar esos assets textuales en las composiciones que diseñemos, logrando que seas más reales y no tan solo una exploración que utiliza Loren Ipsum. En Indicius, al momento del kickoff de cada proceso de branding, hacemos un Brand Narrative Workshop el cual nos entrega un reporte con diferentes assets textuales que los diseñadores pueden utilizar en exploraciones como la que estamos describiendo.

También es posible que nos enfrentemos a este proceso sin contar con wireframes, contenido u otras definiciones, pero a pesar de eso, podemos avanzar. Lo mejor es no reinventar la rueda y tomar referencia de otros trabajos. Podemos explorar inspiración y patrones en Dribbble, Behance y Figma Community. Por ejemplo, si estamos trabajando en una marca para la industria crypto, con tan solo buscar esas palabras en estos sitios de diseño e inspiración, vamos a encontrar fácilmente patrones y estructuras de UI que podemos traer a nuestro Style Tile y así lograr composiciones más sólidas y acertadas para la industria.

La presentación lo es todo

En Indicius hemos realizados multiples Style Tiles, yo mismo diseñe varios y también tuve la chance de guiar el trabajo de otros designers, el tiempo aproximado que se debe dedicar a esta etapa es de una semana con una inversión de no más de 20 horas.

Puede sonar poco, y desde ya que es una decisión personal si queremos invertir más horas para ir al detalle, pero es importante recordar que esto es una exploración, una especie de prototipo, mockup y no un diseño final de website ni UI KIT. Luego, mas adelante en el roadmap, tendremos tiempo para eso.

Todo esto es importante mencionárselo al cliente, definir cuál es el scope y el objetivo de esta exploración, explicar qué vamos a estar creando para estar alineados, tener claridad y no generar falsas expectativas. Al momento de la presentación ademas de aclarar estos puntos, nos enfocamos en buscar feedback de branding y aspectos visuales, dejando de lado conversaciones de UX y arquitectura de la información. Recomiendo armar un one pager de tamaño desktop donde se pueda percibir un hero con un gran impacto visual y luego un buen story telling que vaya, mientras scrolleamos, contando el concepto que buscamos comunicar.

Personalmente ya pase por varias entregas de Style Tile y pude ver el impacto positivo de este proceso. Al cliente le reduce la ansiedad, ya que tempranamente puede comprender de qué manera se va a visualizar su proyecto digital. Al diseñador le ayuda a comenzar la etapa de diseño UI con una base solida y validada.

Espero que este articulo te brinde las herramientas necesarias para que pruebes sumar esta etapa a tus procesos de branding, especialmente a aquellos proyectos que convergen en un website o producto digital. Vas a lograr, con una baja inversion de horas, crear un deliverable que articula equipos y procesos.

¿Sos diseñador y vas a probar este proceso en tu proximo proyecto? ¿Tenes un proyecto digital y sentís que un Style Tile es justo lo que estas buscando? No dudes en contactarme en salvador@indicius.com