The Color And The Shape

Color. It paints our world. From the birds and the sky, to the flowers and the forests, to the Trapper Keeper you drew on in high school, color surrounds us. Color has multiple uses in the world. It used to convey identity, contrast, emotion, and information. As beautiful and powerful as color can be, it can also be limiting.

When the context changes, the meaning can be lost or altered. Colors can have different meaning when the culture of your audience changes. The color white in western cultures is symobolic of cleanliness, the good guys, and brides. In eastern cultures, white is used for funerals. Imagine spending a day creating a beautifully vivid graph, then make some xerox copies on the office copy machine. Do you perceive the information the same way as before? not likely.

This isn’t unlike an experience for someone who is color blind. Being asked to make decisions without all the information is difficult for anyone. How can the situation be improved? Shape. In the graph example above, using a different type of line would help retain information. For example, using a green solid line and a red dashed line would allow the lines to continue to be easily distinguished from one another – even in black and white.

Shape is also used to create better buttons. The image above shows 2 sets of buttons. The first row of buttons is an example of something you dont want to see on the web today, 2 plain rectangular buttons – red and green – with no other information. One way to improve these buttons is to add shape, as seen in row 2 of the above image. By adding a check to the green button and an “X” to the red button, they are clearly distinguished from one another to a color blind user. Also more information is communicated as to what the buttons mean, even if you didn’t add a button label. The symbols on the buttons can also provide value to not-native speakers if they don’t entirely under the text label.

A third area where shape can provide value, is in your navigation areas. There are a number of beautiful modern website designs that use a unique indicator to designate the current page. This could come in the form of an arrow, rectangle, or other unique shape. In the example below, Untitled Startup uses an indicator to designate the current page. This a great technique to increase usability and accessibility since it doesn’t rely on color alone to convey information.

Color is a great tool to have in your toolbox, but it shouldn’t be the only one. The examples provided here are simple by design. Try experimenting on your future projects by working the use of shape into your design.