UI Kit & Living Style Guide
UI Kit & Living Style Guide
Problem:
Style, design patterns and component structure was not consistent across products within the same brand. On the design side, patterns were inconsistent and style was subjective. On the engineering side, multiple frameworks and front end languages were being used. Each time a new product was built, custom SASS/CSS was used instead of repeatable, consistent code blocks.
Solution:
Started with a UI kit in Sketch, so that each designer working on different products within the brand could have grab and go components. When new patterns or components are needed, they are reviewed with the team and once approved, they added to the UI Kit.
After creating reusable components for design mockups, I paired with the director of UX to build out a living style guide to institute a consistent framework and SASS naming conventions. We used Materialize as the foundation and customized to our brand and design patterns.