Bandz N' Showz
Transmitiendo el espectáculo

Proceso de Promoción

Músicos y promotores tienen problemas para impulsar la asistencia de fanáticos a los espectáculos...

Al intentar registrar las fechas de las giras, los usuarios (músicos, gerentes, etc.) tienen problemas para realizar un seguimiento de todos los sitios en los que necesitan publicar las fechas de las giras y, a menudo, tienen que hacerlo de forma redundante.
volver a publicar información en muchos sitios. Nos gustaría explorar formas de agilizar el proceso ahorrando tiempo y frustración a los usuarios mediante el desarrollo de una nueva plataforma.

Nuestro proceso

Este estudio de caso es muy complicado, haga clic en los iconos a continuación
si quieres saltar a cualquieraespecífico secciones.

Esta sección //

Diseño

Lo que abordamos:

Moodboard
Guía de estilo
Principios de la Gestalt
Simulacros de alta fidelidad
Construyendo nuestro prototipo

1. Moodboard // Diseño

Estableciendo el tono

también usamosmilanotepara crear un espacio más completo para intercambiar ideas sobre nuestro moodboard:

https://app.milanote.com/1JpgSO1Ers0gaH/01-bns_moodboard

2. Guía de estilo // Diseño

Nuestra guía de estilo

Aquí hay algunas opciones de diseño de alto nivel que estamos utilizando para transmitir el ambiente de nuestra marca en toda nuestra comunidad. También estamos aprovechando mucha inspiración de laKit de diseño de materiales.¡Rocas de Google!

Puedes encontrar la guía de estilo completa aquí:

Guía de estilo completa de BNS InVision

Style Guide Screen Cap_edited_edited.png

3. Principios Gestalt // Diseño

Material

El diseño se encuentra

Bandz N' Showz

1. Material Design es, en general, un conjunto de principios bastante flexibles que se pueden aplicar a un alto nivel, PERO básicamente el objetivo es mantener las cosas nítidas, consistentes, limpias y receptivas de una plataforma a otra.

2. Aquí hay un recurso que puede usar para profundizar en Material Design:https://material.io/

3. También encontramos algunos componentes que podemos usar en el futuro:https://gallery.io/appsyhttps://materialdesignkit.com/android-gui/

Nuestra página de inicio se encuentra
Diseño de materiales de Google

1.Movido nuestro contenido importante
hasta estar por encima del pliegue.

2.Añadida animación de desplazamiento de
testimonios de usuarios que
girar de izquierda a derecha.

3.Contenido dividido de arriba a abajo
fondo en recipientes que
se implementará mejor en dispositivos móviles.

Otras Modificaciones / Fuera de Guión
En general, agregó una mayor explicación de lo que es el producto y destacó nuestras asociaciones. Entonces, las personas que visitan el sitio por primera vez entienden lo que ofrecemos de inmediato :)

Próximos pasos
Potencial para ajustar el diseño una vez que lancemos para dispositivos móviles en el futuro para un diseño receptivo perfecto

Nuestra página de inicio se encuentra
Diseño de materiales de Google

1.Movido nuestro contenido importante
hasta estar por encima del pliegue.

2.Añadida animación de desplazamiento de
testimonios de usuarios que
girar de izquierda a derecha.

3.Contenido dividido de arriba a abajo
fondo en recipientes que
se implementará mejor en dispositivos móviles.

Próximos pasos
Potencial para ajustar el diseño una vez que lancemos para dispositivos móviles en el futuro para un diseño receptivo perfecto

Nuestro Dashboard cumple
Diseño de materiales de Google

1.Movimos nuestra lista de programas hacia arriba para que sea lo primero que ve un usuario y está en la mitad superior de la página.

2.Mejor uso general de colores llamativos para separar secciones.

3.Se agregó en una navegación lateral específica para los usuarios que iniciaron sesión en el panel.

4.Espacio en blanco aumentado
y espacio para respirar en general.

Otras Modificaciones / Fuera de Guión
Las estadísticas son un poco más visuales y menos a la cuadrícula, queremos que sean un poco más artísticas.

Próximos pasos
Puede usar el componente de lista Material Design durante el desarrollo. ¿Qué otros activos podemos usar mientras estamos en desarrollo?

4. Simulacros de alta fidelidad // Diseño
Combinación de forma y función en el diseño
Mejoras con Estilo

Usando nuestra información de prueba de nuestras pruebas de gurilla, aquí hay algunas imágenes anteriores de cómo aplicamos los comentarios de nuestros probadores en nuestras maquetas de alta fidelidad en la siguiente ronda.

6. Construir nuestro prototipo // Diseño

Construyendo nuestro prototipo de trabajo

Una vez que creamos nuestros diseños de alta fidelidad, usamos InVision para crear un prototipo de trabajo de alta fidelidad para que nuestros usuarios lo probaran. Siéntase libre de desplazarse por la pantalla a continuación para tener una idea de nuestro diseño.