Design/Archive/WikiFont

Wikicons

Colors


C  O   L   O   R       P   A   L   E   T   T   E

Use colors only if it helps user understand a workflow.
 * Blue signifies a progressive action;
 * Green signifies a constructive action;
 * Red, orange, and yellow are to warn user of a destructive action depending on severity (high to low respectively).

Colors on icons should be used sparingly. For example, in the effort of being inviting, we use the color green to encourage clicks that will help show appreciation for the work of our contributors to keep them

Best practises
Make sure icons are pixel-perfect so they retain their meaning and look sharp in all sizes.

An icon should fully express its intended meaning without any text companion. In selective cases when a message or a word is used with icon(s), icon(s) should always appear at the beginning of according to reading direction.

Avoid local concepts
Our users are very diverse. Making sure concepts are not offensive and remain localizable are equally important. Icons based on a specific region may not have the same meaning for the rest of the world. For example, an envelope is more practical than a traditional American mailbox. Avoid concepts such as gestures, animals, religion, humor, ethnicity, and gender.

Visual & Textual directionalities
Designers should also be aware of icons that convey directionality. Concepts such as “forward” and “backward” are associated differently to “right” and “left” depending on the writing direction of our language. For an English speaker, a “next” button can use an arrow pointing to the right as an icon. Conversely, a Hebrew speaker would expect the arrow to point to the left in order to convey the same meaning. Symmetric icons are always safest. However, should you come up with a more effective solution to convey an idea or a message that is not symmetric, provide two versions to support both directions.

Reuse for consistency
When creating new icons, reuse and recompose from existing iconography as much as possible as they have established a meaning with our users. For example, this is an edit icon. To symbolize a disabled edit action due to varying reasons, compose the meaning from the existing edit icon. To symbolize that an edit has been reverted, repeat the same with existing edit icon.