Project “RDM” UI Iconography

Overview

A selection of icons were created for the perspective “RDM” project. There was a need for both new and updated icon designs based off of an older skeuomorphic set. Throughout the design process the relationship between the icons and the user interface was focused upon. I designed the visual identity of the user interface while working on this project which helped increase my understanding of the content and user expectations these icons represented.

My Role

I reviewed the original set of icons that needed an update and documented new actions that required new designs. Throughout the process I worked closely with the client on a weekly basis sharing sketches, requesting feedback and delivering the final set of icons in the correct format.

Challenge

The technical domain and content this application served created an interesting challenge when trying to define a complex action or component with line, shape and color. The application had a large number of screens, options and sections that required consistency and an understanding of their relationships.

Solution

Working with the client I defined two distinct color schemes for two separate groups of icons. Consistency was important when defining the two color schemes and sections. In order to achieve visual consistency the use of line weight, negative space and color were focused upon across each group.

Project "RDM" Iconography sketches description here...
Selection of initial sketches exploring some of the different options and concepts found within the user interface. I had originally planned to include subtle shadows to help define shape. The shadows were removed early on after testing the icons out using smaller sizes.

 

Project "RDM" Iconography description here...
Menu, tool and options based icon visual style. A solid color was chosen as it proved to be easier to read and provided a more focused experience for the user.

 

Sub application icon visual style. Two colors were chosen for the icons that represented the sub applications found within the platform. Introducing the brand’s primary color as an accent helped the user understand these were not tools. This increased the contrast between the two groups of icons and provided a better experience.