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. 

 
 
 
 
BA_folio_designProcess_4x5_02.jpg

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. 

BA_folio_designProcess_4x5_02b.jpg

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. 

BA_folio_designProcess_4x5_02.jpg

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.