Icon Design

Icon Design

Overview

New features need icons, and sometimes icons and other graphics need to be refreshed and redesigned. Some icons represent simple concepts like cut, copy and paste. Some represent abstract physics concepts like rotor blade aeroelasticity.

Problem

Redesign icons to match current branding strategies.

Document icon design policies.

Some teams had very strong feelings of ownership towards particular icons and were wary of any re-design of their icons.

Users and Audience

Every user of STAR-CCM+ plus marketing teams to ensure that icon designs fit in with branding strategies.

Roles and Responsibilities

Designer

Scope and Constraints

Resdesign as many icons as possible to provide a consistent look, retaining the intent of the previous icons.

The UI is built upon NetBeans which accepts 16×16 images in png and gif file formats.

Respect some development teams ownership of particular icons.

Process

There are hundreds, if not thousands of icons in STAR-CCM+, so a redesign, so where to start? I initially focused on the most visible and least well liked icons.

Up until then the icons had been added ad hoc by many people and there were no policies for icon design, so starting with a blank sheet, I aligned the designs with CD-adapco’s branding (light blue) and documented an icon policy based on those new designs.

Other design considerations…

  • Reduced the designs as much as possible, removing unnecessary detail, keeping elements to the minimum.
  • Tried to retain the intent of the original icon, keeping them recognizable to existing users. I’m not here to reinvent the wheel.
  • Reduced the palette and focused on the shape, not the color.
  • Tried to make them tactile, particularly for actions.
  • Kept the design style technically very simple, so that it could be reproduced by anyone.

Outcomes and Lessons

The icons have not needed a redesign in nine years. We’re only just now considering another redesign to align with Siemens policies five years after Siemens purchased CD-adapco.

Here are some of the icons representing objects in the data model before and after the refresh.

Tree before refresh
Tree after refresh