Fran Rosa

30 Mayo 2017

Caso de estudio

Superfiles: Creando valor de marca con diseño de interfaz

English: Superfiles: Creating Brand Value With Interface Design

Problema

Tenía que diseñar un nuevo sitio de descubrimiento y descarga de software para una empresa que ya posee varios sitios similares. Y por supuesto el nuevo sitio debía ser diferente al resto

Además muchos de los sitios existentes están desfasados y tienen que renovarse, así que el nuevo sitio establecerá el nuevo estándar y será usado como ejemplo de los sitios de la empresa mientras tanto.

Objetivo

Una nueva interfaz responsive, fácil de entender, y con una identidad visual potente, para usar el sitio como ejemplo y crear valor de marca para la empresa.

Proceso

Los otros sitios de software de la empresa están técnica — y visualmente — desfasados, y abarrotados de una mezcla de contenidos de calidad y contenidos pobres. Así que empezamos por definir una estrategia de contenidos y creando contenido original para una serie limitada de programas seleccionados para, a partir de ese contenido, definir la estructura y navegación del sitio.

Siendo Superfiles el nombre y dominio del proyecto, los cómic de superhéroes eran el concepto perfecto, con una rica historia de estilos gráficos para crear una UI visualmente atractiva e interesante.

Sabiendo la importancia de crear una identidad visual potente, empezamos con el logo. Y fue un error. Trabajando en el diseño de interfaces para una marca existente, conseguir un equilibrio entre una interfaz clara y sencilla, y la estética y elementos gráficos de la marca es siempre un desafío. En este proyecto, donde la interfaz en sí misma es la marca, crear un logo aislado era sólo una limitación sin ningún beneficio.

Así que, tras un comienzo en falso, empezamos de nuevo, esta vez de abajo a arriba.

Aunque trabajábamos con una lista de software bastante corta, debíamos tener en cuenta la complejidad. Cada aplicación tiene una ficha con una valoración, y muchos otros detalles. Así que la jerarquía en las fichas de cada aplicación fue el primer paso. Después de eso, elegir la información que aparecería en la ficha de cada aplicación en los listados — como en la portada, por ejemplo — fue lo siguiente.

Prioricé la simplicidad, y una buena jerarquía visual usando contrastes de tipografía y tamaños. También puse el contenido visual — como los logos de las aplicaciones y las capturas de pantalla de los programas — en un segundo plano, para dejar que la marca del sitio brillara.

Al sitio aún le havía falta algún elemento visual impactante. La idea de tener una cabecera con el nombre del sitio como las portadas de los cómics de superhéroes era tentadora, pero mover la atención y la acción al área del contenido en lugar de la cabecera era imprescindible. Opté por usar algunas ilustraciones como cabecera de las categorías y como fondo de las fichas en la portada.

Usar colores para identificar los distintos sistemas operativos — que son el primer nivel de la navegación — me permite usar elementos gráficos potentes en cada color, usando paleta de color monocromáticas.

Descarté la idea de tener un superhéroe original, tanto por el riesgo de que acabase siendo similar a algún personaje de cómic existente, como porque quería usar las ilustraciones como fondo y debe ser algo que puedas apreciar aún viendo sólo una parte. También pude usar paisajes de fondo, aunque carecerían del dinamismo propio de las ilustraciones de cómic.

Usar acciones concretas sin usar la figura completa, sino únicamente las manos como detalle expresivo resultó perfecto. Hice tres ilustraciones — una por cada uno de los sistemas operativos.

Conclusión

Al final, apenas existe un logo. La tipo Slant de House Industries tiene mucho carácter, pero el nombre del sitio y la cabecera del sitio es mínima, y el foco visual está siempre en el área del contenido.

Detalles como los pequeños elementos gráficos que muestran la puntuación de cada aplicación, y equilibrar el uso del color fue crucial para llegar al resultado final que conserva un contraste fuerte y una jerarquía clara.

Estoy muy contento del resultado final de este proyecto, pero la lección más importante es que crear la identidad visual para una nueva marca — o trabajando en una marca existente — es que tiene que ser flexible, y que no hay una solución universal. Las marcas — especialmente las que viven exclusivamente online — necesitan dirección de arte más de lo que necesitan aplicaciones del logo en todas partes.