a. case studies
MARTINI UI KIT
This UI kit exemplifies the atomic approach to interface design. The key to good UI is a lean, flexible design system that can adapt to multiple content types & applications, while providing a seamless experience across all break points. Establishing a system like this takes interval and iteration, slowly building and testing the system from a set of core styles.
styles: these are the building blocks of a UI system the basic style elements that dictate the appearance of the web experience. From spacing and grids, to type and color. A good system can do a lot with a few variables.
components: simple interface element that make most interactions within the experience possible. Many of these elements require multiple states, which helps prove the flexibility of the core styles.
exploration: generally once styles and components have been established I like to test them by experimenting with the experiences fleshed out through wireframing and content development. I find this often helps strengthen and solidify core components while testing there ability to achieve the goals defined earlier on in a project. This exploratory phase also helps significantly in developing a set of modules that will ultimately be leveraged in the creation of page types.
modules: collections of various styles and component generally built to a specific purpose. The majority of all content on the site will be delivered in one form or another through these modules, making them the cornerstone of the experience.
page types: a templatized collection of modules curated for the goals of the page. Some page types such as gateways or landings will be more experiential; moving the user through the content. Others, more utilitarian such as forms or search results.
UI kit: the complete kit is the ultimate reference for the front-end build of the site. It must be cleanly presented and well documented. As build is generally happening in tandem with design, communication and iteration are essential. A strong system like this will allow not only the content of the site to evolve over time, but the system itself can be easily updated and adapted to aesthetic adjustments.