top of page

UI Kit (Design system)

This UI Kit was a UI redesign that was going to be applied to existing products and future products across the entire company. Since the currently implemented style was very outdated, I was tasked with designing a new look that would be the basis for a Design System. After all the assets were designed, they were applied to panels, pop up windows and to the applications to show how they should be used individually and in combination.

 

The UI Kit allowed the UX Designers to utilize pieces from the kit and apply them to their project. Front end developers could pull the components or patterns from a library, (or build the component if it was not in the library yet) and then add them to their project. This system saved the UX designer and the front end developers quite a bit of time in mocking up final designs and programming the UI. This UI Kit was a living document, so not all aspects were completed at the time of this posting. 

Colors & Typography@2x.jpg
Color & Type
Sliders, Inputs, Widgets@2x.jpg
Sliders Inputs Widgets
Menus & Navigation@2x.jpg
Menus & Nav
DropDown Menus@2x.jpg
Dropdown Menus
Buttons & Toggles@2x.jpg
Buttons & Toggles
ToolTips@2x.jpg
ToolTips
Container Construction@2x.jpg
Container Construction
Container Examples@2x.jpg
Container Example
Save-Load@2x.jpg
Save/Load
Pop Up Windows@2x.jpg
Pop Up Window
Search-Filter@2x.jpg
Search/Filter
Messaging
Messages2@2x.jpg
Messages@2x.jpg
Applied To Applications@2x.jpg
Applied

All works are © 2016 Karen Sanok

bottom of page