Identity, UI/UX, Digital
Sai Perchard, Harold Herbert
Mosaic is a web-based tool to organize and visualize large research projects. Mosaic automatically processes user input to produce a dashboard of beautiful maps, timelines and node graphs that show the context and structure of research. Harold Herbert and I helped the pre-launch startup articulate their brand identity and visual language.
The mood board shows a reverence for antiquity, juxtaposed against the precision of modernity. Roman architecture and the principles of truth, justice, & reason inspired our visual approach. A Mandala represents a graphical microcosm for the universe, and by extension the mosaic of collective knowledge available on the platform.
Icon & Logo
The logotype, set in Gill Sans, feels historical, without looking aged. The circular border pattern is a modern interpretation of the Greek meandros, symbolizing unity and infinity. In the center sits a simple square, the most basic representation of a Mandala. This collection of visual metaphors alludes to the vision of Mosaic: organization and visualization of the world’s knowledge.
olors are restrained, yet sophisticated. Blues and khakis comprise the primary palette. Khakis suggest a classical Greek or Roman landscape – the origins of antiquity, and a period of great learning and discovery. A set of accents provide color for use in the user interface. Illustrating a visual distribution of color provides guidance for application.
Akzidenz Grotesk and Gill Sans provide a strong typographic foundation. Akzidenz, on which Helvetica was based, provides a clear, legible option for body copy and content text. Medium and extended weights are used for headings, contrasted against Gill Sans in uppercase.
Variations on the meandros pattern are provided as a decorative element for use in print, and limited use on web. They remind us of the icon, and extend the visual motif of Greek and Roman architecture.
Interface elements provide guidance as to how the established rules of type and color may be applied to a user interface. We draw on a set of common UI elements as an exemplar. This should provide guidance to the product designer and serve as foundation for a comprehensive UI library.
Type is set in medium contrast against a textured, organic paper stock, surrounded by our repeating border pattern to give a feeling of reverence to the content it frames. This effect is accentuated on the business card through the use of centered type. Stationery represents the physical touchpoint of an otherwise digital platform. It is low volume, but high impact - and care is taken to craft an experience at parity with digital.