top of page

Creative UI Toolkit

The toolkit is a shared sketch design file containing references to our standards, styles and guidelines, design ready elements, components and patterns, pre-sized image production components as well as web page templates.

The Objective

In an effort to add to the creation of a company design system, and to add efficiency and consistency to our digital platforms and creators, we set out to create a creative toolkit that everyone in the agency could use. This toolkit was intended to have easily understood standards, guidelines, and implementation. So from creatives familiar with our process and programs to new hires, they should be able to access this and start using immediately. 

LTC_UIKIT.005.jpeg

The Challenges

The use cases and standards around usage of components was not well known outside of the digital teams throughout the agency. So standards and guidelines had to be defined and added to improve consistency around design and have experiences make sense throughout digital platforms. There was also confusion of proper process from design to handoff that would streamline publishing content for all teams. Additionally there was a need from channel owners and logic to add templates for agency use. 

LTC_UIKIT.007.jpeg
LTC_UIKIT.009.jpeg

Solutions

Standards and guidelines from our "Core" online page were added to this sketch file for easy access of information and clear understanding of implementation of design. Our hero components and image sizes to be delivered were drastically consolidated, making it much easier to understand and prepare assets for delivery to authoring teams. This would also improve consistency and faster loading times across our web pages. We also added newly developed functionality in our hero components, defined them specifically, and added our ongoing templated designs for use across the agency along with design principles for company and master brand alignment. This was the first phase of our ever evolving toolkit project.

LTC_UIKIT.015.jpeg
DP.jpg
bottom of page