I recently went through a job interview process that included a 4-part test of my skills. One of these parts covered graphics, which included the following assignment:
While I have a Bachelor of Arts degree, I’m not going to try and pass myself off as someone with a commercial art degree – especially since my degree is in the field of music (e.g.opera). That said, I’ve had enough theory, design and even some art history to know that I needed to buy, consume, digest and practice every single word penned by Robin Williams in “The Non-Designer’s Design Book” … but I digress.
The point is, to avoid painting this coder and sometimes writer into a corner, I need to keep my graphic solutions as simple as possible. With the above assignment, this meant doing two things:
- Boil each icon down to a single noun or verb
- Use something simple to tie each icon together
Let’s take for example the towing metaphor …
As I drove around town thinking about the problem, I took note of the road signs. One that caught my attention was for the hospital located about a mile down the road from where I work. It didn’t have a picture of someone with a broken arm; rather it had a plainly stated letter ‘H’ on a blue background. In other words, the sign showed us the way to the solution, not the problem.
Likewise, rather than ‘offer’ someone a flat-tire or an overheated-engine, that is rather than tell them what they already know, why not show them a solution – you know, solve their problem, don’t remind them of theirs? This narrowed down the graphic solution to one of two metaphors:
- display a car being serviced
- display a tow truck
The first thing I did was draw both a car and a tow truck – on paper. In case you don’t do a lot of icons and graphics, 30×30 doesn’t leave you a whole lot of room to get fancy. There are those who somehow manage to render glorious 3-D icons in less space – I’m not one of them.
Breaking it Down
Because of limited space, I boiled-down my hand-drawn images into primitive shapes – outlining the penciled sketch with a Sharpie™. For the tow truck, I simple put together a semi-circle, a rectangle, a triangle, a circle and a question mark – just like they teach you on the back of a match book.
Semi-circle? Where? You don’t see the semi-circle because I cut the image in half, only showing the back-end of the tow truck; the wheel and the hook being enough to convey the idea to anyone who’s old enough to drive.
Similarly, for parts I opted to use the solution of a cog. This was rather easy to put together once I figured out I could use a 5 pointed asterix character in which I trimmed off the outer edges with a circle – then cut a donut hole in the middle with a circle. The trick was finding the right font as most ‘*’ are rendered with six points.
Tying it Together
Finally, I used the orangey warning sign-like diamond to tie both images together. Like I said, nothing that rivals the experts, but enough to convey the message (within the context of auto repair) … and land me the job.
The point is, I’m not a professional graphic artists, so either I hire a pro or I keep my solutions relatively simple. This means breaking down the message of the icon into a single noun or verb – preferably one that represents a solution, not a problem. Once I’ve got my eyes myopically set on the prize, it then just a matter of sketching out the idea on paper, defining it in the most primitive of shapes, recreating them with my graphic package, and then cutting and/or juxtapositioning them until the pieces of the puzzle come together into a singular “Don’t Make Me Think” idea.
Be Single Minded
Same goes for selecting graphics you buy or ‘borrow.’ Think about it in terms of that horrible animated GIF of the spinning cross we still see inflicting church websites, what singular thought does the graphic convey to you? “We’ll get you so saved we’ll make your head spin until you lose your lunch?” No thanks!
I know there are some graphic-guru lurkers. Go ahead, leave a comment as I’m sure I left out something really important (or basic) and/or overlooked something else that might be useful – or perhaps you’ve got a better icon – don’t be shy, leave a comment.