The screen in question is a simplified DAW (Digital Audio Workstation). For those of you that are unfamiliar, a DAW is music recording and composing software. Think applications like Ableton Live or Bitwig.
The app is already through much of its development (see attachment "current_app"), but we'd like to try going in a different direction with a new aesthetic, as the current look feels dull. Please check out the attached screenshot of the app in its current state. When the user hits the play button at the bottom, the yellow triangle and long vertical line move across the screen and "play" the notes. The general placement of items (the main grid, buttons, etc) should stay roughly the same. The grid is the priority so, like it currently does, it should take up most of the screen, as there will be many notes at times, and this a webapp that can shrink/expand with the browser window.
1. Dark background with glowing/neon/bright foreground objects. Think the movie Tron Legacy.
2. The blue squares on the grid (which represent notes) should stay some kind of blue.
3. Don't use green or red. These colors are reserved for a feedback system not pictured.
4. The grid rows should alternate in color (see attachment).
5. Feel free to change the remaining colors. In particular the horizontal orange strip near the top could be a less noticeable color. It's not a main feature.
1. The "Me" and "Dr" toggle buttons disable/enable each track. Each track represents a different instrument. So the Me track is the Melody, Dr is Drums, etc.
2. The up/down arrow toggle button below "Me" expands that particular track to fill the whole vertical space. useful for when there are more tracks. (see attachment "current_app_expanded_zoomed")
3. Bottom left button clears all notes.
4. The eye toggle buttons show/hide the current notes (see attachment "current_app_hidden_notes").
5. The next three buttons on the bottom are Rewind (regular button), Play (toggle), and Loop (toggle). Loop automatically restarts the song when it gets to the end.
6. The group of buttons at the top right control the metronome. This is a clicking sound that plays underneath the music to represent the beat. The first toggle button the left turns the metronome on/off. The number in the middle along with the up/down buttons on the right, control how fast the metronome goes.
7. The horizontal slider near the top left controls the horizontal zoom of the grid. And in the attachment "current_app_expanded_zoomed", you'll see that a similar vertical zoom slider appears near the bottom left when a track is expanded. In both cases, when either zoom is used, scrollbars appear on the bottom and right side of the grid
8. Head icon near top right is our logo. Attached are a png version and svg version (if you want to change the color)
9. Down arrow button at the top right reveals a menu that pulls down
10. Remaining controls that have words in them should keep those words. Don't replace with icon.
There are other states of this page to be designed as well, and several other pages of this webapp, so if we love the winning design and decide to go in that direction, more work will follow.