Making the sBASSdrum app icon

make_s_logo

I was pleased to see one of the WWDC style guide videos talk about app icons. I had not seen this until today, but it seems that we agree on many points. When choosing the sBASSdrum icon, I wanted to have something that echoed some part of the interface. Obviously, it would have been unreasonable to just shrink down the UI:

sbass_wholeui

sbass_wholeui

sbass_wholeui

In the original design there were some smaller yellow-orange buttons with a small light above them that turned on when you pressed the button. So one of the original icons looked like:

sbass_button

sbass_button

sbass_button

It was too busy, it didn’t give enough meaning, and that button style also got eliminated. Actually, as the interface was evolving it became obvious that putting any interface control in the icon would probably be a self-limiting strategy.

So, what would not likely change? The logo. And, honestly, a lot of thought didn’t go into the logo: a fancy spacey font I had acquired a while ago for other projects turned out to evoke futuristic space themes. But, what I liked about the font was that it seemed to scale well when shrunk. And so the same thought was applied here.

Since the name of the app is “sBASSdrum”, it seemed logical to use the first letter of the logo:

sbass_logo_black

sbass_logo_black

sbass_logo_black

Another consideration was that background wallpaper can be busy. I’m a big fan of whitespace, and in this case it’s more “darkspace”. But having a plain black background was boring. Since this is a space ship and the center of the interface has a window so you can see stars rushing past, it seemed only logical to find a way to integrate that into the texture of the icon. Thus, in the end we have the S flying through space with a nice dark-colored moat around it.

sbass_actualicon

sbass_actualicon

sbass_actualicon

I thought the end result looked decent enough and it met all the goals of readability. Here are some examples of the sBASSdrum app icon on light, dark, and heavily textured backgrounds, and when shrunk small in an app group:

IMG_0222_light

IMG_0220_mediumdots

IMG_0219_darkphoto

IMG_0221_darktexture

IMG_0224_lightgroup

IMG_0225_darkgroup