Status icons for applications

I’m a believer of showing a visual status of things, in applications, when possible. For example, instead of just showing the text "On Hold", I might want to show some sort of red icon with it to make it more readily idententifiable. Maybe that’s just because I’m a visual person.

Well, I’ve made these icons whenever I’ve needed them, which always takes a few minutes. So this time, I decided to create a scalable .PSD file called IconSet.psd which has: circle, triangle, square, pentagon, and hexagon. Since these are "objects" in Photoshop, I can just use the Fill Bucket and pour whatever color I need. Also, I can resize the image too and because it’s vector graphics-based, the image scales cleanly.

Anyhow, if you need such a file, it is attached below. Just "show" the two layers (background and foreground) and you can use the bucket to paint the foreground whatever color you need. The emboss/shadowing is a layer style, so that works automatically:

Download (41 KB)

And if you just need 16×16 icons, here is an example of the output:

IconCircle_16x16_BlueIconCircle_16x16_GreenIconCircle_16x16_OrangeIconCircle_16x16_RedIconCircle_16x16_Yellow
IconHexagon_16x16_BlueIconHexagon_16x16_GreenIconHexagon_16x16_OrangeIconHexagon_16x16_RedIconHexagon_16x16_Yellow
IconPentagon_16x16_BlueIconPentagon_16x16_GreenIconPentagon_16x16_OrangeIconPentagon_16x16_RedIconPentagon_16x16_Yellow
IconSquare_16x16_BlueIconSquare_16x16_GreenIconSquare_16x16_OrangeIconSquare_16x16_RedIconSquare_16x16_Yellow
IconTriangle_16x16_BlueIconTriangle_16x16_GreenIconTriangle_16x16_OrangeIconTriangle_16x16_RedIconTriangle_16x16_Yellow

but like I said, it also scales up indefinitely too – here’s a 48×48 for example:

IconSet

Lastly, just a note on accessibility – 8% of males and .5% of females are colorblind in some form, in the U.S.. That means that if you differentiate items purely by icon color, the application may not be easily usable by those with certain types of color-blindness. So, you should really differential things by color AND shape in your application. For example, if you did a red, yellow, and green circle to show "status", then that may just appear as different shades of gray to a colorblind person. instead, use a red triangle, yellow square, and green circle for example.

Posted in .NET 3.5, .NET 4.0, ASP.NET, ASP.NET MVC, Best-practices, General, Professional Development, Uncategorized, WinForms

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Archives
Categories

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 2 other followers

%d bloggers like this: