I'm looking for an organic, fluid interface with curves. I'm hoping
for a single "screen" interface with overlays for the more advanced
options. The same interface will be used on IOS and Android, on
and tablets, so it should scale to various resolutions and work in
both 4:3 and 16:10 aspect ratios.
I like transparent overlays and dynamic moving objects/text.
Colors so far are around orange (R:255,G:102,B:00) and grey
(R:32,G:32,B:32). I prefer 2-d flat colours. Gradients could be
implemented but should only be used if it significantly improves the
Features to be made available in the main screen:
- Play/Pause button
- Area to display the music partition (should be at least 35% of the
screen), may be part of the design or contain pattern/background
- Ability to display a smaller version of the music partition to show
off at least 2 instruments at once on the screen, preferably 3.
- Toggle for enabling/disabling Metronome
- Ability to change the tempo (can be via an overlay)
- Ability to change the selected instruments (usually via swipe
up/down gesture on the partition)
- Ability to change the volume of the selected instrument (can be via
- Ability to select which instruments are part of the rhythm being
played (can be via an overlay)
- Ability to select the rhythm (can be via an overlay)
- Ability to select the audio profile to use (hear all instruments
equally, hear the current instrument louder, hear all instruments
except current one, hear current instrument left all others right,
etc) (can be via an overlay)
- Toggle for picking notation style (current notation style, or WAP
In regards to the notations, the current simplified-staff notation
(see iTunes/Goolge play screenshots) is a custom notation I created:
- the white rectangles with the orange bars underneath represents a
hit on the drum
- When above the middle line, they represent Slap, on the middle line
they represent Tone and below they represent Bass
- 'x' marks above the middle line represent Bell hits, while 'x' below
the middle line represent Rim hits, usually only on the Dununba,
Sangban and Kenkeni notations.
The other notation that will be introduced is the one currently in use
in WAP-style pages (http://www.paulnas.eu/wap/djole.html).
I requested an extra screen because some of the options involve extra
controls/data to be displayed on the screen, for example the tempo,
the audio profile selector (6 audio profiles on IOS).
The new design will be used on IOS, Android, Tizen, Kindle Fire HD and
Blackberry. The app is 100% OpenGL and no native controls should be
The application will from now on be used exclusively in Landscape
mode. The pixel resolution of the supported devices will range from
480x320 to 1920x1080, with 16:10 and 4:3 aspect ratio. The physical
screens will range from the iPhone 4S (3.5-inch) to iPad/Kindle
sizes ~10-inch, and the design will be adapted later to work on Roku
with HDTV >46-inch.
Side note in regards to the instrument selection; when dealing with
long traditions like playing the djembe, there are many variations in
the way to play the rhythm or a specific instrument part. These
variations obviously do not play all at once and as such, the user is
able to pick and choose which variations he wants to have available
while using the app. The variations that are not-selected are skipped
when moving from one instrument to the other using swipe gestures.
They are also silent during audio playback.
OpenGL is a 2D/3D rendering technology which works primarily with
triangles. Usually used for game development, most recent devices are
able to display a large number of such triangles but are usually
limited in the amount of "texture" that can be used.
Animated objects are easy to implement using scaling, translation and
rotation, but animation in textures are really expensive. The design
should rely as little as possible on pre-rendered "images" and
focus on shapes that can be easily implemented in 2D (preferred) or
3D. (see Layout1.png, which uses a single texture)
Circles, rounded rectangles and other complex shapes are made of
dozens/hundred of triangles. A "simple" rounded rectangle takes 26
triangles (78 vertices). Although this may sounds like a lot,
card (even in mobile phones) are able to handle millions of those
triangles per second.
I will be the one responsible for translating the design to 3D
coordinates to produce the final visual output, but your design
take those aspect into consideration.
WARNING: Please go light in your usage of text, focus on shapes which
do not require translation as the app is currently available in 8
LOGO: I have written approval to use the kokopelli image from
tattoo-tribes.com; so feel free to incorporate it in your designs.
FONT: I started using the Nanum font on my Facebook page, but it is by
no mean a requirement. It has been provided here for reference only.