Icon for the iPhone Salsa Beat Machine

[Uri Shaked]

Hi guys,

While I'm hard into developing the new UI (first screenshots - tomorrow), I think it's about time to discuss how to application Icon is going to look like... i.e. how would you combine the Salsa + Rhythm concept in a small simple icon?

For the beta application, I have created some abstract icon:


 but I'm not very happy with the result. Any reflections on this?

[t0m]

Doesn't say salsa, or rhythm to me. Maybe false colour satellite view
of an oil slick being mopped up by giant notes? ;) It doesn't relate
to anything on the splash screen, and nothing on the main app (which
is a monochromatic colour scheme).

Personally, you might be better with SBM or interlinking SBM? Or just
clave? (the instrument, and i'd imagine really hardwired and
associated with fundamental salsa rhythms).

There are complex, intricate icons out there , but sometimes simple
can work, and be easy to identify/see on a homescreen

No letters - Camera, iPod, Things, Shazam, Tweetie, iTunes, Remote,
Fring, iDisk, Air Sharing, National Rail
1 letter - Guardian, App Store, Facebook, Instapaper, Skype, Tumblr,
last fm, Stanza

Is it fair to say that SBM the site and the app doesn't have an
overall colour scheme? Maybe if you're keeping the black/white look in
the app, a monochromatic style look could work for the icon? (e.g.
Habit factor does B&W with gold border.

[SmartAlx]

I thought your beta logo looked like an abstract of two dancers. The
pink is definately a woman and the purple could be a man.

Some ideas:
Imagine a circle of musical notes or salsa instruments laid flat on
its side, kind of tilted. Perspective very important. Kind of like
an invisible frisbee with notes painted on the sides being thrown. If
you don't go with the circular layout it wouldn't be appropriate though.

A simple icon like clave sticks or dancers. I guess an instrument
would be more appropriate.

A logo.

I'd say it would be a good time to adopt a color scheme. What are
your favorite colors?

I'm reminded of the Midomi App that changed names to Soundhound.
Shazam entered the app market as the dominant song identifying app.
Midomi followed suit and looked like a poor copycat. But Shazam seems
like the hare while Midomi the tortouis. Shazam still has the same
tired flat looking 'S' icon. Midomi added a lot of cool features,
changed their name to Soundhoud and created an extremely cool Logo
then went further to create an awesome icon. It just jumps out at
you. And the orange color scheme makes it easy to find when you have
seconds to start it up before the song ends.

SBM doesn't have the urgency like Soundhound or Shazam do but it's
still good to stand out. So it looks like we need 3 things:

1) The name of the app.
(SBM icon wouldn't be appropriate if it's called irhythms or
something.)
2) A logo
3) A color scheme


Sent from my iPhone

[Uri Shaked]

Very good observations guys.

Tom, I looked in the icons of the apps you have mentioned. Indeed, I think Habit factor's icon stands out, even though I'm not sure a golden border is suitable for our purpuse.

Alex, I can't really imagine how that invisible frisbee would look like - it sounds interesting though.

Regarding the color scheme, the new iPhone UI goes with a monochromatic color scheme (well, except for the sliders which are the standard blue, an the instruments which are the same images as the online version). I have never had to face choosing a color scheme for an application before. I usually do color schemes for websites or for banners, like this one I made a month ago:
http://profile.ak.fbcdn.net/object2/1679/111/n111085288909609_4453.jpg

The colors which usually connect to salsa, in my head, are red and purple, and sometimes hard yellow, these are the "hotter" colors and I find them connected to the passion expressed in the dance. But I don't want to change the color scheme of the iPhone UI all over again, nor I have any idea how to apply these colors there. So for now, we will stick with the monochromatic color scheme.

Since the claves is the simplest suggestion, I have sketched something simple, two versions, let me know what you think and we'll go forward:

     

[SmartAlx]

Yeah I'm not surprised I wasn't clear with that invisible frisbee description. 

Imagine the circular arrangement in your new UI if you tilted it.  Lay it flat, but keep the instruments upright.  That's what I mean.  Imagine a salsa band has their instruments arranged in a circle and you are looking at them on stage.  What would that look like?  That's my idea.

Sent from my iPhone

On May 2, 2010, at 2:09 AM, Uri Shaked <u...@salsa4fun.co.il> wrote:

Very good observations guys.

Tom, I looked in the icons of the apps you have mentioned. Indeed, I think Habit factor's icon stands out, even though I'm not sure a golden border is suitable for our purpuse.

Alex, I can't really imagine how that invisible frisbee would look like - it sounds interesting though.

Regarding the color scheme, the new iPhone UI goes with a monochromatic color scheme (well, except for the sliders which are the standard blue, an the instruments which are the same images as the online version). I have never had to face choosing a color scheme for an application before. I usually do color schemes for websites or for banners, like this one I made a month ago:
http://profile.ak.fbcdn.net/object2/1679/111/n111085288909609_4453.jpg

The colors which usually connect to salsa, in my head, are red and purple, and sometimes hard yellow, these are the "hotter" colors and I find them connected to the passion expressed in the dance. But I don't want to change the color scheme of the iPhone UI all over again, nor I have any idea how to apply these colors there. So for now, we will stick with the monochromatic color scheme.

Since the claves is the simplest suggestion, I have sketched something simple, two versions, let me know what you think and we'll go forward:

<Icon-claves1.png>       <Icon-claves2.png>

[SmartAlx]

Look at soundhound's icon too.  It's pretty cool.  It has depth.

Sent from my iPhone

On May 2, 2010, at 2:09 AM, Uri Shaked <u...@salsa4fun.co.il> wrote:

Very good observations guys.

Tom, I looked in the icons of the apps you have mentioned. Indeed, I think Habit factor's icon stands out, even though I'm not sure a golden border is suitable for our purpuse.

Alex, I can't really imagine how that invisible frisbee would look like - it sounds interesting though.

Regarding the color scheme, the new iPhone UI goes with a monochromatic color scheme (well, except for the sliders which are the standard blue, an the instruments which are the same images as the online version). I have never had to face choosing a color scheme for an application before. I usually do color schemes for websites or for banners, like this one I made a month ago:
http://profile.ak.fbcdn.net/object2/1679/111/n111085288909609_4453.jpg

The colors which usually connect to salsa, in my head, are red and purple, and sometimes hard yellow, these are the "hotter" colors and I find them connected to the passion expressed in the dance. But I don't want to change the color scheme of the iPhone UI all over again, nor I have any idea how to apply these colors there. So for now, we will stick with the monochromatic color scheme.

Since the claves is the simplest suggestion, I have sketched something simple, two versions, let me know what you think and we'll go forward:

<Icon-claves1.png>       <Icon-claves2.png>

[Uri Shaked]

Something like this? Quick sketch I did



Uri

[SmartAlx]

Yeah, I think you get the idea.  Of course the icons would need to get smaller in the back and none should overlap.

I think a logo would be my favorite idea for the icon.  Clave sticks seems a bit obvious and it wouldn't really tell you what the app does.  Award winning icons always give you a clue about what the app does.  Or they at least have a clear logo.  Maybe the icon could look similar to the YouTube or Tuner icon but put clave sticks on it, like you're watching clave sticks?  I don't know.  Just brainstorming.   

Sent from my iPhone

On May 2, 2010, at 6:18 PM, Uri Shaked <u...@salsa4fun.co.il> wrote:

Something like this? Quick sketch I did

[Uri Shaked]

Brainstorming is the key for creating a successful icon. I have looked for "Salsa Rhythm" in google images to get a clue what visual elements might connect to this term, and I must say I was surprised to find no images of claves in the result... So it might not be a very good choice.

Two other ideas I had:

"1 2 3" in a big font,
below the word "Salsa" with a smaller font. The "1 2 3" has two meanings: first, the count of the rhythm. Second, "1 2 3 Salsa" sounds (for me) like "Salsa made easy", something that conveys the idea of Salsa in only 3 steps, etc.

Another one - An icon with two footsteps (right & left leg) and a note. Symbolizes the connection between the dance (the footsteps) and the music (the rhythm).

What are your thoughts? I will try sketching these later today

[t0m]

Agree about needing a clear logo -
Just checking
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html

- it'll be worth checking to see what the icons will look like at 57 x
57 pixel and 29 x 29 pixels. If you're having a circular layout for
the instruments, maybe a circular rather than oval layout would work
better for the main 57x57 icon? Those instruments look about 3mm tall
having downres'd the perspectivecircle image.

Clave is a bit obvious, but then - obvious has it's plus sides.
There's a corporate logo, identifying who the app's by/the product vs
an icon that shows what the app does
e.g. Clock, Calendar, Notes, Camera, Contacts, Voice Memos, Maps kind
of hint what the app does.
Shazam, Guardian, RunKeeper, Facebook, National Rail, TWiT - tell you
more about what it's linked to.
Once you've worked out what the icon is for an application, you've
associated it with that app/company. An f for facebook. Linking clave
to SBM seems pretty appropriate. If you wanted to hammer home an
association, the app could do as TalkingCarl does - have an intro/exit
soundfile of a 3-2 clave.

You could enlarge the size of the clave if you wanted for the icon -
(due to the length vs width of a clave stick).

Just one line of thought!

[t0m]

What's the word/sound association of salsa rhythms?
For me, i'd say if you said "ba bah bahhh bahh ba" you'd get many
agreeing that that's one main one.

There are non-visual associations for salsa rhythms much stronger than
visual - because the rhythm is primarily not image, but sound - the
sound of rhythm of the instruments.
So looking for images for salsa rhythm may not be likely to find many.

123 Salsa might look a little like an ABC Salsa. Seems a step removed
from the app name, or the concept -
123 salsa might be thought of as learning the ABC's of salsa dancing -
which is slightly different from the basics of salsa Rhythm. Footsteps
might also do the same - i'd say a picture of feet symbolises feet,
and feet movement. Yes, feet movement can be to music - but nothing
would be shown visually to directly link salsa rhythms. if you use
feet, how can you differentiate between say a Merengue Beat Machine
later on?
123Merengue, 123 Salsa might work - but then that's linked to the
decision of what you're going to call the app. Having the app icon say
123 Salsa, but the app text say it's called the Salsa Beat Machine
could be a little confusing (though currently, due to the text
limitation of icon descriptions on home pages - the App's called
Salsa...chine at the moment).

What would you associate with the rhythm, directly, visually?
e.g. the instruments, maybe the sheet note notation of a clave
pattern. Many visuals are a layer removed as they're a visual
representation of an auditory thing.

[SmartAlx]

123 Salsa could also be an alternative name for the app, although I think we all are pretty good with salsa rhythm or irhythm or SBM. 

Sent from my iPhone

[SmartAlx]

The footsteps conveys the dance, which you aren't implimenting yet, right?

Sent from my iPhone

[SmartAlx]

Just brainstorming but...

Can you make the letters in salsa look like musical notes?  Might be good if you could make those letters look like they are on sheet music. 

Sent from my iPhone

[SmartAlx]

Kind of like this...  I think personally I'd prefer it straight, not all wavy.

Sent from my iPhone