El proceso de creación
La identidad de la plataforma también la hemos planteado de manera incremental. Al trabajar por releases, y tener un tiempo limitado para abarcar todos los aspectos del proyecto (investigación con usuarios, modelo de negocio, arquitectura, soluciones tecnológicas...) nos dimos cuenta que no podíamos invertir desde el principio todo el tiempo que requiere crear una identidad sólida ya que lo primero era crear la plataforma, hacer un prototipo funcional y probarlo para saber qué caminos escoger. Por lo que en un primer momento decidimos hacer lo básico, una identidad mínima, que iría evolucionando a medida que avanzábamos con el proyecto.
En medio de entrevistas con usuarios, design thinking, y análisis de diferentes plataformas empezamos a sentar las bases de los elementos de la identidad: tipografía, color, fotografía, naming, logotipo y comunicación.
Teniendo en cuenta el target
A medida que íbamos avanzando con el proyecto fuimos conociendo mejor al tipo de usuario que usaría la plataforma. Vimos que la mayor parte de nuestros usuarios son gente joven (20-45), personas abiertas, con ganas de conocer gente nueva y compartir sus aficiones y creaciones en eventos desenfadados. Por tanto la identidad planteada tenía que ser informal, divertida, juvenil y cercana.
Elementos de la identidad
ROOOF es un amigo que te recomienda nuevas formas de disfrutar de tu tiempo libre. Así es como fuimos definiendo el proyecto y la identidad debía reflejarlo.
Con la combinación de tipografía, fotografía y color fuimos dando forma a la web.
Tipografía
Rooof usa la combinación de tres familias tipográficas, con la intención de crear un ritmo visual mediante el contraste.
Aparte de los requerimientos de identidad que la propia plataforma nos iba exigiendo, hemos tenido en cuenta aspectos técnicos y económicos para la elección tipográfica:
- Web fonts: Usamos fuentes de google fonts, por ser de fácil integración en el desarrollo de la plataforma.
- Gratuítas: El dinero es un factor importante. Por lo que optamos por el momento en no gastar dinero en tipografía. Google fonts nos ofrecía un catálogo numeroso de tipografías completamente gratuítas.
- Diferentes pesos tipográficos: Escogimos tipografías con varios pesos, para que nos diese juego a la hora de crear la identidad.
Familias tipográficas
La tipografía es el elemento principal de la plataforma. Para crear una identidad hemos combinado tres familias tipográficas: Dosis, PT Serif y PT Sans.
Familia Dosis: Aunque es la tipografía con más carácter y la que más personalidad aporta no es de fácil lectura por lo que fuimos delimitando su uso para titulares principales y secundarios, equilibrando identidad y legibilidad. Nos aporta los valores de desenfado, diversión y juventud que fuimos detectando en el target.
Familia PT serif: más humanística, nos aporta los valores culturales. Además como es de fácil lectura la usamos para cuerpos de texto y todo párrafo relaccionado con el contenido que los usuarios irán generando.
Familia PT Sans: Es una tipografía sin serifa, mucho más técnica y de fácil lectura. La usamos de apoyo con la tipografía principal Dosis, con la intención de crear contraste y ritmo. También la usamos para la comunicación de la plataforma con los usuarios: Formularios, alertas, mensajes de ayuda, o datos puramente informativos como fechas, aforo, precios...
Hubo un momento que teníamos demasiados pesos tipográficos, que fuimos depurando hasta usar solo tres para la Dosis, y uno para cada una de las PT, mas su versión bold. Con esto conseguimos unidad en los estilos y eliminar peso inecesario en la web de ROOOF.
Color
Como color corporativo usamos el rosa, en combinación con otros colores secundarios: blanco, gris y negro.
En un principio planteamos la identidad con 3 colores principales: amarillo, verde y rosa. Esto nos ofrecía el aire desenfadado e informal que queríamos dar pero nos planteaba otros problemas. No fuimos capaces a establecer un código de color eficaz y siempre nos surgía la duda de que color usar para cada contenido. De esta manera el color no tenía un fin claro y se volvía únicamente decorativo. También con el uso de varios colores nos acercábamos a un aire más infantil que juvenil.
Descartamos el uso del amarillo por el claro problema de legibilidad, y escogimos el rosa por ser un color más enérgico y con más fuerza que el verde. Con la combinación del rosa y los grises conseguimos separar contenidos e ir guiando al usuario a través de las distintas secciones, estableciendo también que información es más prioritaria. De esta manera, el color no solo tiene un componente de identidad, si no que también tiene peso en la arquitectura de la información.
Fotografía
Desde el principio tuvimos claro que la fotografía iba a tener mucho peso en la plataforma. Debía ser el recurso principal para que los usuarios se sintieran atraídos por los eventos. Aquí se nos planteaba el problema de que algunas de las fotos serían subidas por los usuarios, y eso trae el peligro de no tener un control en el estilo fotográfico. Pero si que podíamos dar una guía visual, algo que los usuarios vieran y pudieran imitar de alguna forma.
De esta manera planteamos un estilo fotográfico fresco y desenfadado, una fotografía amateur pero atrayente, un estilo de foto que recordara a Instagram.
Usamos este estilo fotográfico para las fotos dinámicas y también para las secciones estáticas de la web. De esta manera fuimos habilitando secciones de la web donde la fotografía iría cobrando mas peso, volviéndose protagonista y ayudando a llamar la atención sobre aquellas acciones de la web que consideramos más importantes: cabeceras con imágenes grandes que te llevan directamente a la búsqueda de eventos o call to actions con imágenes full page que te animan a que crees tu propio evento.
Logotipo y naming
No teníamos nombre y eso era un problema. Habíamos hecho un montón de investigación y entrevistas intentando conocer a los usuarios, pero no le habíamos dedicado tiempo al nombre.
Hicimos un sesión de brainstorming justo después de terminar el mapa de insights: los Panda, PandaLong, PlanB, Cobra-Láser... Salieron un motón de nombres pero no nos acabó de encajar ninguno, finalmente nos decantamos por ROOF, por estar ligado semánticamente a lo que ofrece la plataforma.
Para el logotipo hicimos varias pruebas y al final nos decidimos por un logotipo simple: con la conexión semántica y la tipografía corporativa tendríamos una versión mínima de logo, ya que sobre todo nos centrábamos en el diseño de la plataforma en sí, y no solamente en la imagen corporativa de una marca, por lo que siempre tuvimos pendiente hacer una revisión y mejora del logotipo que nunca llegó.
Distintas opciones planteadas para el logotipo de ROOOF.
Versión actual del logotipo en la plataforma
Style guide
Con todos los elementos corporativos comenzamos a hacer una guía de estilo. La primera sería un simple PDF. Más adelante, según fueron avanzando las clases nos dimos cuenta que debíamos crear una guía de estilo viva, usando el mismo css de la web.
Guía de estilo de la plataforma, siguiendo los principios de Atomic design.
Intentamos seguir el enfoque de Brad Frost y el atomic design, con un planteamiento de diseño orientado a objetos que nos permitiría tener un control de los elementos de la web y hacerlos reusables, empezando siempre por elementos más simples y globales como estilos tipográficos o colores, hasta llegar a elementos más complejos como formularios, botones o módulos reusables.
La guía de estilo nos ha ayudado a documentar los elementos básicos de la web, y a reutilizar nuestro propio código, eliminando duplicidades. Así como a eliminar dudas respecto a estilos, que siempre van surgiendo a lo largo del proceso de diseño.
También nos ha ayudado a darnos cuenta de que en realidad estamos diseñando un sistema, y no una serie de páginas estáticas. Cada página de la web comparte elementos con otra y la guía nos ha ayudado a establecer un código visual, y a agilizar el desarrollo.
Puedes ver la guía aquí.
Layout Responsive!
Para la construcción de las distintas páginas planteamos el uso de un grid a 12 columnas, por ser un grid muy versátil en cuanto al ancho de los módulos. De esta manera podemos variar y jugar con diferentes espacios.
El responsive fue todo un reto. Cometimos el error de dejar muy de lado la versión móvil hasta bien avanzado el proyecto. En lugar de empezar por móvil empezamos por la versión desktop, y no comenzamos con la parte responsive hasta la tercera release. Por eso hubo secciones de la web que se han rediseñado de nuevo pensando en multidispositivo, como el formulario de crear eventos o los perfiles de usuario. También tuvimos que hacer un refactoring del código para convertirlo en multidispositivo, lo que nos vino muy bien para incorporar nuevas herramientas que fuimos aprendiendo como sass o frameworks como Foundation.
Y todavía seguimos...
Al final hemos conseguido que la web tenga un estilo visual sólido y hemos establecido una manera de implementarlo que vamos mejorando. Nos hubiera gustado desarrollar más a fondo la guía de estilo, hacerla más útil y completarla con más elementos, así como mejorar algunos aspectos como el uso del color o un diseño más impactante en las páginas interiores.