Login 1.0, por Sergi Márquez

Desarrollo UX/UI

Es imposible entrar en cualquier sitio si no tienes una puerta de acceso que te permita hacerlo. La respuesta para para nosotros es clara; sin un portal de acceso, todo el trabajo posterior es inexistente. Así que, sin más dilación, nos preguntamos: ¿Qué necesitamos para que los jugadores puedan disfrutar de Kaikoo? Logearse.

Nos hemos puesto manos a la obra y hemos empezado por lo básico. El primer paso ha sido empezar con el desarrollo de un sistema de registro que permita a los jugadores entrar a formar parte de la gran familia de Kaikoo. Todo proceso creativo de registro empieza en papel y acaba en píxeles; pasando desde un esbozo low-fidelity hasta un prototipo high-fidelity.

Low fidelity

Un esbozo es el comienzo de muchas cosas, normalmente grandes cambios. Así han sido los primeros diseños que se han creado para un posible desarrollo de login. Se han contemplado distintas estructuras y jerarquías de información dando importancia a diferentes elementos. Nuestro objetivo principal ha sido realizar una rápida comparación entre propuestas. Elementos clave de login seleccionados para esbozos iniciales:
· Logotipo
· Usuario
· Contraseña
· Redes sociales




Al finalizar los esbozos, se ha llevado a cabo una comparación de opciones de estructura buscando las más óptimas para el login. Se han seleccionado propuestas con distintas jerarquías que permitan otorgar equilibrio visual a todos los elementos.

Priorización de imágenes para potenciar gráficamente el diseño, evitando siempre, elementos que compitan entre sí. Las imágenes que no acompañan al diseño y forman parte del mismo, actúan como fondo.
– Creación de un sistema de login habitual con estructuras centradas y diferentes propuestas de colocación de redes sociales
para dar versatilidad al diseño.


Mid fidelity

Evolución de papel a aplicación gráfica de media fidelidad para una comprobación más real de tamaño de objetos y interacciones futuras entre elementos. La estructura seleccionada como final está formada por dos partes marcadas no relacionadas: imagen y claim en el lado izquierdo y contenido de registro y login en el lado derecho. La estructura se ha basado en el equilibrio de imagen y información del usuario, permitiendo así, el uso de texto en la primera sin que afecte a la legibilidad.

High fidelity

Una vez seleccionada la estructura final, se propone una evolución de elementos del login pasándolos a color para conseguir un diseño que se acerque al entregado al usuario. La estructura es conservada en la medida de lo posible, siendo fiel al esbozo inicial.

1 Evolución a color
Aplicación de color a los distintos elementos del login. Implementación de las redes sociales seleccionadas a través de las cuales los usuarios pueden acceder a la plataforma.
– Aplicación de color al logotipo.
– Aplicación de color al fondo para generar contraste con los elementos.
– Cambio de color en la sección de información.
– Eliminación de color para el botón de CTA.
– Selección y implementación de redes sociales.

2 Mejora de experiencia UX/UI
Creación de claim para guiar a los usuarios y acompañar el logotipo, además de una introducción al acceso con redes sociales. Incorporación de acciones secundarias relacionadas con el proceso de login para corregir posibles problemas de usuario como el recordatorio / olvido de contraseña.

– Introducción de claim para el login acompañando el logotipo.
– Incorporación de recordatorio de contraseña,
– Incorporación de olvido de contraseña,
– Incorporación de link hacia la página de registro.
– Introducción a las redes sociales.

3 Mejora de accesibilidad y cambio de contraste
Mejora de elementos informativos para otorgar más detalle y contraste como la creación de un welcoming message con nueva jerarquía visual. Aplicación de icono de visualización de contraseña para corregir posibles errores durante su escritura. También se ha propuesto una redisposición de algunos elementos para dar más harmonía gráfica.

– Introducción de claim para el login acompañando el logotipo.
– Incorporación de recordatorio de contraseña,
– Incorporación de olvido de contraseña,
– Incorporación de link hacia la página de registro.
– Introducción a las redes sociales.

4 Priorización de elementos y mejora de contraste visual avanzada
Rediseño de jerarquía y reestructuración de elementos con el objetivo de conseguir un flujo de navegación lógico para el usuario. Retoques avanzados de elementos visuales para ganar un diseño con más harmonía y más acabado para el usuario.

– Cambio de estructura para otorgar más importancia a las redes sociales.
– Redisposición de la separación gráfica de contenido para introducir el login.
– Redisposición de información de contraseña ubicándola en la misma línea.
– Incremento de contraste en tipografía con color para ganar más visibilidad.
– Mejoras gráficas sutiles como el redondeo de vértices para ganar harmonía.

Uso de imágenes

Después de realizar las modificaciones necesarias de estructuración de contenido, el diseño ha sido enfocado al uso de las imágenes. Se han investigado distintas vías de visualización para comprender qué clase de imágenes eran las más óptimas para representar a Kaikoo y complementar el diseño del login. Se han investigado varias opciones y recursos gráficos como:
· Fan art.
· Ilustraciones planas.
· Pattern gráficos.
· Imágenes proporcionadas por Riot.




Rediseño del aspecto visual de las imágenes para dotarlas de personalidad corporativa. El objetivo es conseguir que las imágenes de Kaikoo obtengan distinción visual diferenciándose de diseños más habituales y creamos pregnancia de marca. El tratamiento gráfico escogido se ha basado en la acentuación de contrastes donde as imágenes de la API seguirán un proceso de desaturación y, posteriormente, una aplicación del color corporativo en degradado.

Construcción visual

Una vez finalizado el tratamiento a color de la imagen, disponemos en conjunción todos los elementos. El resultado final de esta primera fase de login acaba con un una distinción cromática de imágenes con un diseño sencillo pero visual de los elementos de registro. A posterior, realizaremos más pruebas avanzadas para poder mejorar, todavía más, el resultado final para los usuarios de Kaikoo.

¿Quieres recibir las últimas novedades?

Suscríbete a nuestro newsletter

¿Quieres las últimas novedades?
Suscríbete ahora