Behind the Scenes :: the Icon Design & Development Process

When we redesigned the website earlier this year, one of the main goals was to show how Wendy Wood Design was a bit different that everybody else — both with the visuals and our messaging. Since a significant portion of our initial design development is drawing and sketching, showing this part of our skill set made sense.

Knowing all of this, the web team asked if I would be open to hand-drawing some icons for the new site. My answer? An enthusiastic “Yes!”

Now, originally, we planned for only four icons (the ones you see on the home page above). But as we started to flow in content, we realized the whole web site would be more interesting if we added icons to more pages. And just like that… four, fun little icons turned into 17 items that needed to be conceptualized, sketched, drawn, digitized and sent to my web team before I could launch. (Gulp!)

 

How the icon designs unfolded

As you might well know, creating and gathering content for complex projects is no small task. And while it was tempting to send content piece by piece to my web team, I knew from experience that this was not the way to go for three reasons:

1. It is harder for to manage the art if I send icons one by one — much better to send them all at once
2. The icons needed to work well as a group, so the first icons I completed would likely change as I develop the last few
3. If I kept making changes and sending them along, the likelihood of using wrong files increases, then frustrations on both ends start to run high

So I blocked off a few days in my calendar, shut off my email, and got to work.

 

The easiest icons were tackled first

For me, that meant starting at the end. In this case — the contact page. The text for these icons had very tangible and recognizable visuals that could be easily associated with them. For instance, Snail Mail is an easy enough visual icon to grasp — a letter with a stamp. And I have always loved the paper airplane icon that Apple Mail uses for “send” (it evokes a feeling of playfulness for me) so that seemed like the obvious choice for the email icon.

The ‘call’ icon seemed easy — originally I thought a drawing of a SmartPhone, but that did not seem right. In the end, I liked the idea of speech bubbles — it was important to invite clients into a conversation. Focus on the outcome of the call, not the physical phone eventually felt right.

After these drawings were sketched on paper, I took a picture with my phone and used Airdrop to transfer them to my computer. (I used to email pictures to myself — Airdrop on my iMac is SO much easier!) I placed these drawings in Adobe Illustrator and converted them to line art. Here I adjusted the lines so they were roughly the same line weights.

Then, I decided the icons were a little too organic, so I deleted part of the drawings and replaced them with straight lines — which are shown in green. This seemed to balance them out and connected them to the rest of the site.

Since they still felt a little flat, I decided to play around with a drop shadow. The default settings for these shadows can be a little harsh and over-done, so I added just a small effect — very soft and light — and that achieved the depth I desired.

 

 

At this point, I took a screen grab of the working site and roughly placed the icons. Looking good in Illustrator is one thing, but if they don’t look good together in the layout, then they need adjusting.

Here I played around with different shades of gray and thickness of lines until I felt they balanced with the layout.

Below you can see the placeholder icons with no drop shadow effect and text roughly placed to the right of them. (You can compare the icons below to the final here).

 

Here’s where it got a little more challenging

Three down, 14 to go! The good news is I had a great starting point for the rest of the icons:

1. The illustration style and approach was set
2. The line weight and color worked with the layouts
3. Dropshadow settings were noted

The challenge was to translate the remaining ideas into icons — ideas that had less tangible, physical assets associated with them. I started sketching ideas then researched what others had used to accomplish the same thoughts.

I sketched, traced and placed the remaining icons. Often re-doing some of my work if all the icons did not look good together.

 

Snippets out of my sketchbook:

 

 

Originally, I designed them all with green accents:

 

 

 

But after seeing them in the layout, I felt that they were a bit bland in green. Eventually, I chose hues from my color palette for consistency. I placed them in their layouts and printed them out.

 

 

Printed out together for the first time:

 

I realize that printing out pages is an odd thing to do for a web project, but I really wanted to get a good look at them as a whole. Seeing them all side by side allowed me to look at them a little more closely and make critical adjustments I was not able to see on screen.

Placing these icons served another purpose: It easily allowed my web team to know where each icon was to be placed.

 

The final icons

Everyone involved in the web site design development loved the icons. They added a personal touch and immediately showed what I do and how I help.

 

 

 

Interested in giving your next project a personal touch? Reach out here or keep in contact with my newsletter.

I hope to hear from you!