top of page

Site Component Library

Built in Adobe XD and Figma.

01 of 3

Why did I create this component library?

Part of my role at Instructure was to create high fidelity mockups for various purposes. The purposes include conceptualizing stakeholder ideas, creating new web components, testing new designs, and mapping out what content is needed for a project. The usefulness of being able to see an idea come to life before it gets sent to development has been essential to our workflow.

comp-library-2.png

02

How extensive is this library?

In order to be able to offer stakeholders multiple options and take advantage of our entire website toolkit the component library had to be all inclusive for anything that existed on the live website. Everything from a small text block to the entire navigation with animated transitions for each drop down. 

  

66 high fidelity components. 25 accessible brand colors. 16 unique fonts. 

comp-library-3.png

03

How often is this used?

This component library gets daily use by multiple members of the team to showcase ideas, test designs, and even create web ready graphics. With over 500+ unique mock ups built so far, it has become an essential part of a productive workflow. 

comp-library-6.png

...over 500 more!

bottom of page