cu Reed Snider

Security Trading Platform

Creating a design library using a dark user interface pattern.

In designing a dark user interface for a modern trading platform there are special considerations around color, contrast and layering. Dark UI's can be tricky as the dark background makes certain shades of white text challenging to read and certain colors pop out much differently than they do within a white background user interface.

The challenge was to create a library of color combinations that have great legibility and meet accessibility standards. Since the information in the interface is very important to read correctly and the users spend all day in front of the software, the need to alleviate some of the stresses on the eye through more muted colors and appropriate contrast was essential.

iris ui colors and icons

Apart from the design of the more visual aspects there was a need to create design consistency within the interface that could help deliver a more familiar look and feel. The interface was very bland and it was hard to find items because all action buttons and messages looked the same, despite their function. The cancel button looked the same as the accept button, the error message looked the same as a success message.

When designing the variety of buttons and their use cases I worked with our users to help figure out what options and actions are most common, what things need to be easy to click and what should be hidden or suppressed based on typical use of the product. Although the framework (WPF and .net frameworks) were relatively rigid, we were able to adjust some of the designs to make the experience of using the application more intuitive and help them make decisions. Ultimately, the Axure RP living web URL page was the chosen resource for developers to see and replicate the latest designs of the living design library.

iris ui table layouts
  • Defining color contrasts to match each shade of black
  • Assessing the various user interfaces using dark UI
  • Collaborating with users to narrow down needs and wants
Reed Snider contact

This website was coded by Reed Snider