Zadu's Style Guide:
Simplifying a Complex Product

Basic Form and Color Map
This graphic, pulled from the style guide, provided a visual reference of the basic dominant and subordinant colors for all of Zadu's web interfaces. It also acted as a reference for line weights, spacial treatments, and shape relationships.
click here to view a larger image

The Zadu style guide used an ownership metaphor to define how a designer could most effectively use the shapes and colors to communicate "Zadu" to the user, whether he be a partner, potential partner, or a consumer.

The more warm a color was, the more Zadu owned it, with the above orange belonging exclusively to Zadu. The cooler the color, the more the user owned it, with blue being exclusively reserved for the user. Actions were defined along the same vein, with red belonging more to Zadu, and white belonging more to the user. The colors themselves were pulled from Zadu's logo, as was the angular rhombus shape.

As with the colors, the defined shapes also had an ownership weight applied to them, with angular shapes belonging to Zadu and softer shapes belonging to the user. The rhombus and rhombus grid belonged exclusively to Zadu. Shape definition opened the door for Zadu products to be skinable and still remain recognizably "Zadu".

An example of a user-owned page on the consumer site. The white area would be an interaction area where the user could perform user-owned (user-centric) actions.
click here to view a larger image

Having defined and grouped basic shapes and colors, those groupings could then be applied to one another to consistently communicate actions and a sense of "place" within the site hierarchy. Basic "scripts" were pre-defined for common interactions.

Another example of the consumer site. Here the user is interacting with Zadu the corporation.
click here to view a larger image

Lastly, we have an example of a potential partner interacting with Zadu the corporation on the partner, or corporate B2B, site.
click here to view a larger image