Developing good design can be much easier if you develop good reusable components.
This page shows some of the major symbols of the icon language we developed for Charles River IMS v9 and some of the combinations of symbols the language enabled. The complete design project produced over 300 icons.
The icons needed to meet several goals, including:
-
Improve comprehension for new users
-
Retain key elements of recognition for users upgrading from older version of Charles River
-
Ensure consistency across multiple components of the Charles River product line
-
Remain within the size constraints of tools that present over 100 buttons at a time
Rather than designing hundreds of individual icons, we developed a visual language whose primitive elements could be combined to generate new meanings. This let us create new icons in an orderly and recognizable manner as the project grew and new features were added.
|
Concept |
Example Icons |
Notes |
|
Account |
   |
The “briefcase” represents an account. |
|
Blotter |
 |
Represents the tool itself. Invoking the blotter for functions is represented by the specific function. |
|
Cancel |
  |
Cancel is the white “X” inside a red disk. |
|
Cash (sweep, repo) |
   |
Cash is represented by a gold "coin" to avoid using any national currency. |
|
Change |
  |
Pencil is the "change" operator; can be red or yellow. |
|
Clear |
  |
The eraser is the "clear" operation. |
|
Clone/Make a Copy |
  |
Clone operation represented by duplication of the cloned object |
|
Compliance |
  |
Compliance is the "check" operator |
|
Delete |
  |
The black X represents deletion as operation or operator. |
|
Electronic Payments Network |
   |
The white "transmit" lines on a green disk represent EPN. |
|
Export |
  |
A green arrow pointing to the left signifies export or sending data out. |
|
Find |
 |
Magnifying glass is "find". |
|
Form (or Detail) |
  |
Grey-bordered white boxes represent a detail view or other non-list form. |
|
FIX |
   |
The lightning bolt represents FIX (legacy). |
|
FX |
  |
The globe represents FX functionality; additionally a currency order represents an FX order due to space constraints. |
|
Import |
   |
A yellow arrow pointing right represents import or bringing data in. |
|
List |
|
Alternating dark/blue banding is the list object, referring to list views, lists of objects, etc. |
|
Merge, Cross, Step Out |
  |
International road symbols are used to represent movement and interaction. |
|
New |
 |
Yellow triangle is the "new" operator. |
|
Options |
 |
Options is the data form with black/red detail. |
|
Order |
  |
“Order” is the chopped rectangle shape. It can be detailed, shaded or colored. |
|
Order Types |
    |
Buy, Sell, Short, Cover set color variants of Order. Buy and sell colors are used extensively for order-related icons. |
|
Order Operations (buy, sell) |
   |
Generate, swap, switch, process generics all operate on buy/sell orders |
|
Place/Fill |
    |
Place/Fill uses legacy top-right/bottom-left arrows. Combinations such as Import Fill and Unplace are done by overlays. |
|
|
    |
Print is represented by the printer image. |
|
Properties |
 |
Properties is a document (data) that has been checked |
|
Quote |
   |
The "speech bubble" represents a quote |
|
Reload, Revert, Restart, Undo |
    |
Left arrows indicate going back and associate with operations that move things backward. |
|
Report, Metadata, Message |
   |
The document shape represents data in many forms. |
|
Run, Start |
  |
Green right-aimed triangle represents starting or running and may be applied to an object like a profile or strategy. |
|
Save |
  |
Save action and operator is the standard floppy disk. |
|
Search |
  |
Binoculars for search. Advanced operations indicated by overlaid plus symbol |
|
Send |
  |
Three motion lines to the left of an object represents a "send" modifier |
|
Split |
  |
The diagonal white band represents splitting. |
|
Workbench |
 |