Icons, Icons, Icons | Part 1: Production

Working as the UX Visual Designer for Informatica the last 6 years I have created a lot of icons, over 1000 to be exact. Some of the first products I worked on required creating icons in BMP format with a HEX value background for transparency which was a complete time suck. I'd rather be focusing on great design rather than fussing with 256 pixels. Luckily, there have been many advancements in icon production over the years and the use of icons and graphics on the web.

Currently, the majority of Informatica products are web apps developed mostly with HTML 5. This has brought about a huge shift in how we use graphics and icons in our products. We spent many years with GIFs, and quickly jumped over PNGs and now we are focused on SVG formats and icon fonts.

Using SVG file formats has been a huge leap in icon production for us ( I mean me. I am the only designer). Now, I am able to make one vector image in one size and alter it's color and size directly in the code. As well as provide hover and select variations in the code. What use to require creating 4-5 various graphics for one icon now only requires one. Editing the icon also proves incredible easy. You only need to update a single file as the attributes to the file are code based. The only drawback we have found is that if you repeat an SVG icon in say a table, there is a processing lag, as the HTML works to read the icon image code over and over and over. In those cases, it actually is better to have a single PNG file which the code only refers to once.

With the advent of SVG icons, I discovered Icon Fonts! I think these are just awesome. I have been using a site called Fontastic.me which makes it super easy to create icon fonts, especially if you have all those SVG files ready to go. With an icon font you can put all the necessary icons for a product into a single resource. The names are there, the key commands are there and then send it off to your happy developers. We have been working on a new product called Project Springbok which uses the icon font in HTML to draw all the icons in the web app. It has gone smashingly well. The font is also a single resource in the code which cuts down on processing and the code as well defines all the attributes of the icons - color, size, and interaction.

Another benefit of the icon font is that I can give the font to UI designers, they can install it and then they have easy access to put icons into their wireframes. No more emails requesting a "delete" icon for the umpteenth time.

Have any questions? Let me know.

Designing with Objectivity

Everyone has an opinion. Especially when it comes to the arts. I have worked as a graphic designer for over 20 years. I have been a book designer, advertising designer, web designer, print designer and now I focus on the visual design of user interfaces for enterprise software.

In my current position as Staff Visual Designer (that's just a corporate name for Creative Director) at Informatica Corp., I am often up against opinion and it is primarily my job to mold opinion into constructive criticism. I also consistently advise that we don't make final design decisions on being subjective, especially in user experience design. The ultimate goal of product visual design is to allow the visual design to enhance the user interface design. We never want the visual design to get in the way of user productivity. 

This of course seems obvious, but the best way to control subjectivity in design and design reviews is to focus on the objective aspects of design and those aspects can be defined in visual design goals. Does the design meet said goals? Great. Could the designs meet them in a different way? Even better. You say you just don't like yellow because it reminds you of butter? Oh well. I usually spend some time at the beginning of every project identifying the goals of the visual design.

Some Common Visual Design Goals

• Follow the font and color specs from the corporate brand guidelines.
• Follow corporate logo guidelines.
• Don't use extra graphics/colors or elements that don't provide a use or context.
• Bring the data to the forefront (our users read data, let them read the data).
• Create visualizations of data that enhance the users understanding of the data.

Although design goals help to produce design and provide a context for the reviewers, there is a bigger aspect that provides context for visual design and that is Design Principles. I work within the R&D department at Informatica in the UX Team. I currently am the only visual designer but I work with researchers and UI designers and together we are the UX Team. We have a set of overriding Design Principles we use for all our designs.

Some of our Design Principles

• Help Users Maximize their Productivity
• Design Based on Real-world Needs
• Mind the Details
• Work to Simplify
• Strive for Aesthetic Quality

Using visual design goals on a project basis and using design principles in all your work, you can achieve design results which are engaging, enhance usability, solve problems and hopefully pleases everyone (fingers crossed).