I was heavily involved in mobile UI design a few years ago, which meant that I spent a fair amount of time creating battery charging icons and animations. After all, since charging our phones is something that we all do on a very frequent basis, the graphics should be at least somewhat interesting to look at. Right? This was actually more important years ago than it is today – mobile phone batteries were pretty much useless back then, and I’m thankful that I don’t have to charge my devices every day now.
Anyway, this vector chrome and glass battery illustration was a quick and loose early proof of concept for a charging animation I was putting together. I never finished it, so it’s pretty sloppy – but I would like to think that someone could take what I’ve already done and create a pretty neat illustration or animation from it.
Since my goal was to show the current state of the battery charge, I made the center section transparent. Colored bars were going to be placed inside, with a slight pulsing and glowing effect to show the animation. The end caps are chrome, and a bit crude, but the combination of the metal and glass textures should work well with a wide variety of colors and styles. I would’t use this in a UI with a flat design language, but it my have some use if you are looking to add some dimensionality to your design.
But don’t limit yourself to thinking of this as a battery illustration only. Remove the nib on the front end cap, stretch the center section as long as you’d like, and you’ve got yourself a pretty good looking metal and glass pipe that could be used for….um…well…I have no idea! That’s why it’s always interesting for me to see how you all use my graphics. If you do end up using this illustration as something other than a battery graphic, please leave a comment with a link to what you’ve created!