Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

Icons, keeping them simple so you don’t look stupid

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:

Can you develop graphics and define standards? Propose gifs, 30 x 30 pixels in size, that both establish a design standard and are representative of a grouping called problem types. The problem types you are addressing are Towing and Parts Delivery. Towing represents a vehicle needing wrecker service pickup for a vehicle and parts delivery represents a mechanic needing parts delivered from the parts warehouse to the field where the repair is occurring. Provide at least one gif for each problem type.

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 …

Think Solution

the hospital signAs 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

need a tow?tow sans signageBecause 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.

car parts and cogsparts sans signageSimilarly, 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

“Do you not know that in a race all the runners compete, but only one receives the prize? So run that you may obtain it. Every athlete exercises self-control in all things. They do it to receive a perishable wreath, but we an imperishable. So I do not run aimlessly; I do not box as one beating the air. But I discipline my body and keep it under control, lest after preaching to others I myself should be disqualified.” – 1 Corinthians 9:24-27

spin your salvation until you get sickSame 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.

8 Comments

  1. This is so true! In both my church and work lives, I have seen innumerable instances where people designed more because it was pretty rather than because it met goals. This most often happens with powerpoint presentations.

    Lately, I have been telling people more and more lately to “keep it simple and remember your goals.” People often forget that the reason something is being designed is to meet a set of goals (or they never bothered to understand why they were doing it in the first place).

    It’s hard to go wrong with simple. Getting fancy without knowing what you’re doing, or why you’re doing it, is where most people get into trouble. If you stick to simple, the worst people can say is that it will be plain.

  2. Very nice, Dean. I like those icons. But then again, I’ve always liked simple. Graphics has never been my strong suite. I haven’t taken a single art course in my life! (maybe I should….)

    And congratulations on the new job! Good luck!

  3. One of the major things that people need to know when getting into design is that it’s not about making things pretty or making things necessarily beautiful. The point of design is to communicate information to a user/reader.

    You are correct Dean in saying that things need to be simple, and easy to read even without text. Personally I had no idea what your tow-truck was until it was explained, the yellow looked like a cubed head and mouth to me… if the yellow wasn’t there it would probably work better. but I’m just nit picking.

    There is an interesting principle in the Gospels that I think works as a maxim for (commercial/communication) design. Design as they are. As easy as possible for ANYONE to understand yet we know behind it lies such complexity and structure that when explored reveals exactly that. mmm I love it. when it works you know it works.

  4. I’ve got “The Non-Designer’s Design Book”, it’s pretty helpful. Maybe I should give it away to someone who wants it.

  5. Ants, if you’re looking for someone to give that book away to, I’d be more than happy to help you out! :-D

  6. I just read something today that explains what I’ve been unable to communicate to this forum.

    People remember 70% of what they see and only 15% of what they read.

    So if we are talking about communicating our content, we need to realize that the visual portion of our content is at least as important, if not more so, than our writing.

    Just because we supply people with excellent content does not mean everyone will consume it. Many have to be enticed, even if it is for their own good and they want the content in their hearts and minds.

  7. I also had trouble figuring out the tow truck icon. I thought it was a camera with something sticking out the top.

    But your advice is well taken.

  8. Dean, it’s interesting that you posted about icons. I had a long discussion with the church secretary last night about the icon categories that we are using on the month view of the calendar. As it is now there are way too many icons for the reader to comprehend, and she was thinking that a few calendar events didn’t fit into the existing categories.

    Not wanting to add more complexity, and to even reduce the amount, we tried coming up with different solutions. We haven’t hit one yet (so if you have some ideas, let me know), but during the process she did have a very out of the box idea which was to use the 4 things that the people in Acts 2:42 did, but it didn’t seem to quite work.