Daily Ui semana 2 (retos 009-013)
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.