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:


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


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: Logo

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.


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

Join 9 other followers

%d bloggers like this: