Santillana Mobile and web app
WE DEVELOPED AN APP THAT SUPPORTS THE SCHOOL BOOK “MÚSICA SEIS”

 

Client: Santillana
Year: 2017
Services: Web development, App Development | UX/UI | Illustration

Within the scope of the project “Música Seis – Educação Musical 6º ano“, the publisher Santillana Editores approached our team with the aim of developing a mobile and web app, that supports their school book.

The app, accessible to students and teachers, aims to increase the students’ involvement with the Music Education subject, promoting learning and musical interpretation. The mobile app is divided into three parts: The Musical Instruments Simulator, Musical karaoke and beat machine.

 

This is a big project and of course I didn’t did it all alone. The project development was carried out by Portugal Multimedia. My main job was design the app. I had to think the pages relations, design all the interfaces, create the graphic sets and draw the illustrations.

The mobile app is divided into three parts: The Musical Instruments Simulator, Musical karaoke and beat machine.

Santillana Mobile and web app
Musical Instruments Simulator

t allows students to play and train, with virtual instruments, what they have learned in class.

The simulator is composed by the Orff instruments. They are the piano, xylophone, glockenspiel, triangle, tambourine, maracas, reco-reco, sticks and timbale.

 

It’s possible to interact with the instruments in two ways. In smartphones and tablets, the touch screen is used to play some instruments. Some other ones can be played through the recognition of movements. For example, it’s possible to play when shaking the smartphone, just like a maraca.

 

On the desktop, you can interact with the instruments using the mouse or the keyboard.

  • Santillana Mobile and web app
  • Santillana Mobile and web app
  • Santillana Mobile and web app
  • Santillana Mobile and web app
  • Santillana Mobile and web app
  • Santillana Mobile and web app
Santillana Mobile and web app
Musical Karaoke

It allows students to study and to explore the musical sheets and all the instruments used in the songs.

The karaoke is divided by levels, according to the book “Música Seis“. Each song, there are different instruments with the corresponding musical sheet, in the same track.

The controls allows the user to use karaoke easily and intuitively. Primarily play, pause, stop, forward and rewind. But not only. The user can increase and decrease the volume and the speed of the song. That way, it enables students to learn at a slower pace. The interface also allows the user to turn on or off each track, allowing the students to focus on the instrument they want to learn. In addition, it’s possible to see in which segment of the song you are in, and choose which part you want to practice.

Beat Machine

It allows to create a beat in a simple and intuitive way, using the sounds of some Orff instruments.

This part of the app lets you compose melodies, which can be easily edited throughout the composition process, turning off an instrument or even changing the rhythm of each sound. It is also possible to change the beat’s overall speed.

The controls allow the user to use karaoke easily and intuitively. Primarily play, pause, stop, forward and rewind. But not only. The user can increase and decrease the volume and the speed of the song. That way, it enables students to learn at a slower pace. The interface also allows the user to turn on or off each track, allowing the students to focus on the instrument they want to learn. In addition, it’s possible to see in which segment of the song you are in, and choose which part you want to practice.

Santillana Mobile and web app
IDENTITY CHOICES, SANTILLANA APP

The color scheme respects the graphic identity of the project “Música Seis – Educação Musical 6.º Ano”. The colors used in the app’s interface design were some of the ones that make up the palette of the manual “Música Seis“.

Typography
Santillana Mobile and web app
Color Scheme
Santillana Mobile and web app
Inspiration
Santillana Mobile and web app
Santillana Mobile and web app
UX & UI

The User Interface Design has been designed to allow better navigation and interaction with the app on different devices. We have developed a user-friendly interface, thinking of the youngest, who are the end user for this app.

All graphics in the app were created and developed  for this purpose. I followed the graphic line and colors of the school manual “Música Seis“.

Santillana Mobile and web app
Santillana Mobile and web app
Illustration

The illustration was one of the stages for the development of this app. In the end, two proposals were developed. The first proposal followed a more minimalist line, with a more relaxed and colorful tone, in order to arouse the attention of the younger ones. The second proposal, approved by Santillana, was more faithfully to reality. Some of these instruments were even recreated in 3D in order to take on a more realistic behavior.

Santillana Mobile and web app

Final Illustrations

Initially proposed illustrations