Application Look & Feel

Scenome applications have a default look and feel that is meant to convey a sensation of clarity, clean interaction, and consistency. Scenome applications accomplish a lot with a few simple components.

Icons

Scenome icons must follow these simple rules.

  1. Icons must be true-color Windows Bitmap files.
  2. Toolbar/Menu icons are 16×16 pixels.
  3. Hierarchy icons are 20×16 pixels.
  4. RGB(192,192,192) is the transparent background color.

Icons are not explicitly required; however you cannot easily use a command inside a toolbar unless it has an icon.

Generic Icon

Scenome applications have a generic icon you can use as a placeholder. This icon can be found in the \ICONS directory as GENERIC_SCRIPT_ICON.BMP for SSL scripts and GENERIC_COMMAND_ICON.BMP for C++ commands. There is also a script icon named BLANK.BMP that you can use when you need a very obvious placeholder.

Icon Groups

Scenome has groups of icons. The icons in each group have a similar look/feel. In visual terms, Scenome uses crisp icons that avoid anti-aliasing wherever possible. There are a few exceptions. Icons with text typically make use of a small amount of ant-aliasing.

Many of these icons are anti-aliased.

Icon Series

All modifiers use the same icon. There are other groups of very similar commands that also use the same icon where and when it is impractical or undesirable to use a different icon for each command. In the case of modifier icons, we actually developed unique icons for most of the modifiers. We found that using a different icon for each modifier did not help distinguish the modifiers from one another and actually made the modifiers look very dissimilar from one another, almost as if they were different elements. Since we want to reinforce the idea that modifiers are the same, or at least part of a cohesive unit, we use the same icon for every single modifier. Similarly, we use the same icons for most group-derived nodes, although we do change the color.

Hierarchy icon samples.

Visual Margins

Scenome interface icons are 16×16 pixels but visual crowding occurs if you always use the entire canvas. Most of the icons use at least two pixels of border to prevent visual crowding, which means that you really only have 14×14 pixels for most icons. Generally, icons are centered in the canvas unless it looks bad to do so. In the following toolbar, the use of a two-pixel border results in a much cleaner toolbar that is easier to read.

Toolbar examples.

Editor Icons

Editor icons use a mostly blue palette and a solid colored background to implement a "flat" look. These icons should not use any strong colors because otherwise they are highly eye-catching ( distracting ). Emphasis should remain on the control surface with which the user is interacting and not on the tab control icon.

Editor icons use a special color palette and background.

Production Method

Scenome icons are, almost without exception, hand painted with PhotoShop. You can take advantage of the same principles by using consistent, clean designs.

Color Grading / Palettes

Most icons avoid the use of saturated colors. This is done to maintain consistency and to reduce visual clutter/distraction. You can perform a simple visual test to determine if the icon uses an acceptable palette: when placed next to another icon in a set, no icon should stand out too much.