La escuela de música MusicTutor, ha solicitado el desarrollo de una aplicación web interactiva para dar clases de instrumentos musicales de manera online. La intención es que el usuario pueda interactuar con los instrumentos y tener una experiencia de exploración musical y aprendizaje de alta calidad.

El funcionamiento esperado es que cuando el usuario haga click/pulse una tecla/toque(mobile) en cada uno de los “pads” del instrumento, para que emita el sonido/nota correspondiente. Tiene que poder funcionar en cualquier dispositivo y adaptarse.

El cliente quiere el diseño de una landing page con una batería funcional, como demo para captar clientes, ya que es un instrumento con mucho público. No es un prototipo cerrado, esto quiere decir que le gustaría introducir otro instrumento. El equipo de desarrollo deberá proponer al cliente el nuevo instrumento y la interfaz de cómo se verá.

++Mínimos++:

Foco en UX.
Diseñar la vista para la plataforma de instrumentos
Diseñar user flow (centrado en UX)

++Mínimos: ++

• Interfaz de usuario:

  Entregar una web page funcional (misma estructura aunque se cambie el instrumento) Debe ser responsive con 2 puntos de quiebre

• Eventos click:

  Cada “pad” de la batería DEBE estar asociado a un evento de click Al hacer click en un “pad” se DEBE reproducir el sonido correspondiente al “pad” seleccionado

• Eventos del teclado:

  Cada “pad” de la batería DEBE estar asociado a un evento de teclado Cada “pad” DEBE tener una tecla asignada para que reproduzca el sonido correspondiente al presionarla.

• Animaciones

  Los “pads” de la batería DEBEN tener animaciones visuales a cuando se les haga click o se presione la tecla asociada. Puede ser un cambio de color, un efecto de sombra, una animación de escala, etc. Las animaciones deben proporcionar retroalimentación visual al usuario para indicar que se ha realizado una acción.

++Extras:++

* Personalización de la batería

• Front-end: Tecnologías HTML, CSS, JS (vanilla)
• Git, responsive design,
• Responsive and adaptative behavior: mobile first.
• Código Limpio.
• Marcado HTML semántico
• Clases CSS reutilizables.
• Código modular tanto CSS como JS.

#####################################################################################

• LANDING PAGE:

• DRUM PAGE:

• KEYBOARD PAGE:

#######################################################################################

• Tanto la batería como el teclado, funcionan tanto mediante click del ratón, como mediante teclas asignadas en el teclado. Las teclas correspondientes se muestran en pantalla sobre cada una de las teclas o las diversas partes de la batería.