An iconoclast for icons - the saga of icons on the Labs site

One of the goals of the Autodesk Labs site port to the Mosaic platform was to gain more flexibility. The old site had a feedback section that looked like:

One of the drawbacks of this was that each technology preview was required to have an email address and a discussion forum. If I wanted to try a technology preview using just a forum for feedback, I couldn't, because the Email Your Feedback text on the page had to link to something. I had considered this since in a forum, everyone gets to see the questions asked and the answers provided. Though emails get answered, only the recipients see them. Also, only technology preview team members can answer the emails. In a forum, anyone (team members and other users) can provide answers. In addition, the site had small icons for Facebook, StumbleUpon, Tumblr, and LinkedIn that site visitors never used.

Another thing I noticed on the old site was that there was a big chunk of white space on the right side of the page.

I thought we should try using that space. Since I have seen that email and the discussion forums are not the only ways technology preview users give us feedback, I thought I would make that explicit. The new site allows links on the right side for all of the possibilities:

I say "allows" because all or none of these can be present. Each one is optional. As I mentioned at the onset, the new site provides more flexibility.

So given this new set of things to click on to provide feedback, I needed some icons. To launch the site, I created some temporary ones. I made them 104 pixels by 104 pixels so no one could possibly overlook their existence when they come to the Autodesk Labs page for a technology preview. I even prototyped the ability to attach documents to pages:

Social media is very popular these days, and I wanted people to know that they can provide feedback via Facebook comments, Twitter tweets, blog comments, and YouTube video comments in addition to traditional email messages and forum posts. Those big icons make no mistake about that!

I knew these icons were big, but they were only temporary. I put in a request to our web team to get some icons professionally made. In the web team's professional opinion, my icons were too big. Way too big. They supplied me with a set of icons that were only 32 by 32 pixels in size.

Although they were beautiful, I thought the ones supplied were too small. They would get lost on the page. Site visitors would not use them just like the ones we used to have. Plus they wouldn't be using much of that wasted space on the right. So I decided to compromise and request icons that were 64 by 64 pixels in size. The web team denied my request. They hung to their artistic vision of the small icons. So I was left to my own devices.

Although the process I am about to describe was followed for all 6 icons, I will use just the Facebook icon as an example. Although I knew it would pixelate, the first thing I did was simply rescale the 32 by 32 icon from the web team to 64 by 64 pixels. I thought it looked fuzzy:

To avoid the fuzziness, I thought what if I kept the 32 by 32 part the same and just filled it to take up 64 by 64 pixels. I also added text so people could tell what the link pointed to:

The text was hard to read, so I went back to the fuzzy ones. When I actually added them to the Autodesk Labs site, they turned out to be even fuzzier than originally expected because the site template that incorporates the icons scales the images to 104 pixels by 104 pixels - the size of the original icons. It looked like this:

Since I now knew I needed an image that was 104 by 104 pixels, I decided to make images of that size. Since the background of the page was white, I could just take the 64 by 64 pixel images and surround it by white pixels.

Although it does not look so bad pictured above, all together on the page, the icons looked like they were floating, so then I figured I could use the white space to have more legible text.

That black text just looked out of place. I noticed that:

appeared right above these icons and was written in white text on a green background. So I tried to incorporate that for consistency. Boy did the resulting icons look big.

The extra green just took over too much of the page, so I decided to trim it.

I then noticed that I had used a 12 point font for the text but Download Now was in 11 point. So for consistency (and to make it fit better), I redid them using an 11 point font. I also reduced the amount of green to make the overall appearance on the page noticeable but not so big.

I was then able to use my Fotolia account, purchase some artwork, scale them down, and make them look better.

Looking back at the history, I see:

So that's how I got what you see on the site. I agree it is not great. I am not a designer. I don't even play one on TV. My background is software engineering. I now have a program management role which is more like marketing, so I am doing what I can with my untrained eye. It is quite possible ways to improve them will emerge in the days ahead. If you have visited the site before Friday night, you may need to refresh the page to see the new icons.

Paint.net is alive in the lab.