Daily Ui semana 2 (retos 009-013)

Maite Antolin
5 min readJan 2, 2018

--

Primer post del año!! Feliz 2018!! Segunda semana de los DailyUI. Con las Navidades voy un poco retrasada, pero las comilonas es lo que tienen… u_u

Como resumen: son post semanales con los retos que hecho durante esa semana e intento hacerlos todos en la misma línea, pensando en un proyecto que tengo en mente que es un catalogador de juegos de mesa, llamado provisionalmente Boardland. Habrá algunos Daily que encajen y otros que no, eso lo iré viendo sobre la marcha.

Incluyen una mini explicación de lo que he hecho.

Medium, a veces, resta calidad a las imágenes al ajustarlas al ancho, así que dejo abajo un link a drive con los archivos con buena calidad por si quieres echarles un ojo.

Para ver los daily anteriores: Semana 1

¡Empezamos!

Reto 009

Diseño de una reproductor de música.
App móvil

Cuando vi el reto, lo primero que pensé fue que no cuadraba con Boardland, pero después un usuario me dio la idea de integrarlo en la app, siendo un reproductor de música ambiente para las partidas. Así que MusicBoardland es una función más de Boardland, donde puedes elegir el juego al que vas a jugar y reproducirá una única pista con música ambiente. Su duración es en base a lo que dura una partida media del juego seleccionado. Por ello, se elimina la opción shuffle, pero si es importante la opción loop, por si la partida dura más de lo previsto (cosa que suele ocurrir). Puedes guardarlo si es un juego que suela salir a mesa, así será más rápido acceder a esa pista de reproducción, aunque siempre podrás encontrarla a través del buscador.

De nuevo usamos las losetas como elemento para elegir la pista a reproducir.

Empecé con una idea más molona dando importancia al hexágono, haciendo que fuera el indicador del track de la pista, pero al probarlo con usuarios vi que podía ser confuso y difícil si se quiere mover el tracking a un punto de la canción, así que lo descarté e hice una versión más clásica y clara.

Reto 010

Diseño de la opción de compartir en redes sociales.
App móvil

Cuando pulsamos en el botón de compartir, se despliegan varias losetas con las opciones de las redes sociales más usadas en el mundo de los juegos: facebook, twitter e instagram. También tenemos la opción +, que al darle se vuelven a desplegar losetas para compartirlo por mensajería instantánea: whatsapp, telegram e incluimos la opción de enviar por correo.

La idea visual es la de ir formando un tablero de losetas según se despliegan opciones, dejando las opciones nuevas más visibles para no confundir al usuario.

Reto 011

Diseño de un mensaje flash de error y acierto.
App móvil

Para el mensaje de error he usado temática Lovecraftiana: Cthulhu ha despertado y ha destruido el proceso es el mensaje de error que nos aparece. Cthulhu (al que yo llamo con cariño Chulu) es muy conocido dentro de este mundillo siendo un ser que siembra el caos. Doy la opción de volverlo a intentar o de cancelarlo y ya se intentará cuando se quiera, volviendo al punto donde nos encontrábamos.

Por otro lado para el mensaje de todo perfecto he usado el recurso de una buena tirada de dados, como símbolo de que todo ha salido bien.

Reto 012

Diseño de una página de producto de un ecommerce.
Web

La página es sencilla, dejando en la parte superior la información más relevante del producto:

Nombre del juego, una breve descripción, las características más importantes (puntuación según la BGG, número de jugadores, edad, duración aproximada de la partida y complejidad), el precio y las opciones de añadir a la cesta o a la wishlist.

Añadimos la opción I have it para poder añadir este artículo a tu colección

Tenemos más imágenes de buena calidad para ver el producto por dentro y información más detallada del juego en sí.

Terminamos la página con los productos relacionados donde podemos encontrar las expansiones y accesorios del juego.

Reto 013

Diseño de una mensajería instantánea.
App móvil

El chat de Boardland es, básicamente, un wallapop interno para la venta de juegos de mesa de segunda mano.

Seguimos con los hexágonos como protagonistas del diseño y el chat es bastante sencillo, teniendo las opciones básicas: escribir un mensaje, adjuntar archivos y poner emoticonos.

En la parte superior tenemos siempre el producto por el que estamos preguntando y su precio, para orientar al usuario, ya que a veces podemos estar preguntando por varios juegos distintos.

Aquí termina la segunda tanda de DailyUi. La próxima semana más.

Para ver los daily posteriores: Semana 3

Archivos para ver en detalle.

¡Muchas gracias!

Puedes localizarme en Twitter, LinkedIn o escribiendo a maitea83@gmail.com.

--

--

Maite Antolin

UX designer at Secuoyas. Before at Garaje de ideas and Erretres.