A Pixel Perfect Evolution
Icon Design @ SAS®
For the past 30 years SAS has had a team of designers creating icons for our enterprise software. We have seen icons go from rigid black and white pixel-by-pixel creations to beautifully simple vector-based images.
What Drives Changes in Icon Style?
The evolution of our icons has mainly been driven by technology transformations. As technology changed, so did our icons.
For us, at first, it was the operating system (think MacOS, Windows, Android, etc.). We started to use icons when our software was made available on some of the very first personal computers that had very limited graphics capability. Later, when SAS became available on Windows, we created icons based on the Microsoft Windows color palette and guidelines. Once we moved to web-based applications and Windows XP came out, style was not driven by the operating system anymore. We could establish our own color palette and style. In the past ten years or so, finally, the style is being driven completely by the visual design of the interface.
In the Beginning
For the first ten years or so, technology drove the format and style of our UI icons.
Our first set of icons were basic black and white (or black and green) images that were drawn programmatically pixel by pixel.
Then SAS moved onto the Windows operating system, and we were able to use color, albeit only 16 colors. Working within the limitations, we were able to establish some basic guidelines for our icons:
- Full images only
- Perspective
- Light source
- Outline style
These were drawn pixel by pixel in Photoshop. Always pixel perfect!
Then Came Windows XP and Web-based Applications
This freed us from the 16-color palette. We were still somewhat limited since our main focus was still on Windows:
- 256 color (8-bit color depth)
- GIF format (no anti-aliasing)
We established a new color palette based on our brand colors, a slightly different style, and reevaluated the look of each icon. When warranted, we redesigned. Since we could not take advantage of anti-aliasing (had to use GIF format), we still used Photoshop for icon creation. These icons were also used in our first web-based applications.
Once we started creating icons for web-based applications, we realized that we had a ton of icons. More than one designer could keep up with. We had multiple icons for similar actions (i.e., create a new file, a new project, a new program, and so on). A multidisciplinary review board was created with visual designers, UX designers, and Quality UX testers. The board’s goal was to review current icons, review new requests for icons, remove icons that were no longer necessary, and establish a process for requesting icons. This board helped build our first Icon Library. The library included usage information so our internal clients could search for icons to see if we already had one they could use. The review board still exists and concentrates mostly on reviewing new requests.
Next Major Technology Change: Adobe Flex
When we moved our applications to Adobe Flex the UI was redesigned. We evaluated our icon style to see how it would fit into the new UI. Additionally, Flex allowed our users to be able to switch UI themes. Themes were created so a user had a choice for look and feel, and we had a theme set up specifically for users with low vision.
The UI was finally being fully driven by UX and visual design. Since we needed to switch to a new format to deliver icons (SWF) this became an opportunity to do a redesign. We were now going to be able to create the icons as vector images (yay!).
At first, we were going to use full color detailed icons. We quickly realized that this would not work well for theme switching. It would take many man-hours to create icons for five different themes.
In the end we went monochrome! Monochrome was not only easier to theme but simplified the look of our icons and made them feel like they were more integrated into the UI. We updated our guidelines:
- Color and shadow vs. no shadow was based on theme.
- Established line weight and corner styles.
- Used a cut-away style to distinguish foreground and background objects.
- Set up a grid for drawing the icons in Illustrator to keep them pixel perfect.
Flex was not totally ideal for icons. For each theme we needed to provide a separate SWF file. To help cut down on the number of icons the review board established new guidelines which meant we could eliminate some icons (i.e., use one icon for creating any type of “new” object, so “new file”, “new project”, etc. would use one “new” icon).
Moving on to Web-based Frameworks
From Flex development we moved to web-based frameworks. We decided on PNG format at first, and flattened the icons (no shadows). Since we already had vector versions of the icons, this was easy.
After some research, we decided to go with font-based icons. We have quite a few icons (>1000), and this allowed for small file size, easy color changes per theme, and sizing. Only needed one icon font for all of our themes. We did not update the style of the icons at this time — kept them flat and monochrome.
We also used these icons in support of our products on Windows10 using a combination of icon font and PNG files following the Windows10 style guidelines.
New Visual Style
In 2018 the Visual Design team created a new look and feel for the UI. The new visual style was going to need a different default icon size. We saw this as a great opportunity to make the icons better reflect the visual design language of the new themes. We wanted the icons to look more in parallel with the fonts in our UI. This was a large project:
- Redesigned all of our icons (>1000) by simplifying and standardizing our icon patterns even more:
- same modifiers (same “clock” for any time modifiers, same “user” for any user modifiers, etc.)
- same base images (files, tables, folders, users, etc.)
- Established guidelines, made templates, and created a small image library that all the designers could easily use.
- It took five designers about four months to complete.
We also updated all the icons used in our applications on Windows 10 to SVG format using our own color palette.
Where We Are Today
Now all of our icons are delivered to development as SVG files. Same style and pixel perfection. Lucky for us, when we did our big redesign, we created SVG versions of every single icon. We were ready for the change. What’s next? You never know!
Opinions are my own.
