A client of mine had recently asked me to come up with a series of ideas for some banner flags that wrapped around progress bars. His project involves the need to display loads of dynamic information to his users (though a web-based interface), and he was unhappy with his current layout. After some preliminary creative brainstorming sessions, I rolled up my sleeves and got to work.
Normally I shy away from using Adobe Illustrator for these types of tasks – I know, that’s not exactly “designerly” of me, but the truth of the matter is that I am much faster in Photoshop than anything else. But there were two things that pushed me to consider doing this work entirely in Illustrator. First, I had made it a personal goal of mine at the beginning of the year to flex my creative muscles a bit and learn new techniques. Second, I was given more time than usual to complete this task – he wasn’t in any particular hurry to replace what he already had, and all of this work was for his planned 2.0 release early next year. As rare as far-reaching project deadlines are, I knew that I had to take advantage of this opportunity.
So…what you see here are some of my preliminary concepts. The goal was to create a family of shapes and objects that would wrap around a progress bar, almost making it bit mechanical-looking. The design of the progress bars weren’t important at this stage – we were just looking at some possibilities for the shapes and how they intersected the bars underneath. To create the illusion of depth, I played a bit with transparency and reflections – not an easy task to do in 2d for this 3d designer! I think I did alright, though I was thinking the whole time that “I could do this sooo much faster in Photoshop or Form-Z”.
Ultimately, these preliminary concepts led to a completely different design (and a mighty clever one at that) so I’m offering this set as a freebie. Feel free to download and use these however you wish, though as always, I would be highly appreciative of some credit if there is any way for you to sneak it into your layout.
Click here to download the source Adobe Illustrator 5.5 vector file.
No Responses Yet