UI Kits are commonly found in most designer's toolboxes. We use them to bootstrap visual elements of a product before diving into the harder work. They are not as common with developers though, and in the spirit of this weekend's Betascape event of joining Art *and* Technology, I'm here to advocate for UI kits as a simple bridge between the design world and the development world.
Typically, every project goes through three main phases: Discovery, Design and Development. Although each phase defines a distinct position in the process, they do intermix. Generally, development starts as early as the Discovery phase, design continues to happen throughout all phases, and new requirements from the client pop up long after the Discovery phase is complete. This three-phased process is natural and effective but could be kicked up a notch by integrating a UI kit to the discovery phase.
UI Kits are packed with features that enable stylized rapid development. Bootstrap, a UI kit that was recently released by Twitter, is an all-inclusive HTML and CSS style guide that includes forms, alerts, block messages, grid columns, and even flyout menus - many of the elements that are often put off during the initial design and development process of a web app.
Using a UI Kit will completely change and enhance your design and development experience. Here's how:
- Product Aesthetics: During the initial phase the client usually receives a few rounds of prototypes before the final approach is decided upon. With the aid of a UI kit developers can work with styles before they've even begun to work with their models and controllers, leading to better looking iterations and proofs of concepts. Adding enhanced design elements to otherwise graphically sparse POCs gives the client a better feel for their product before it even becomes a product.
- Survival: There's a half-serious theory that babies are cute so we won't eat them. Your application, even in its infancy should be something to behold. Applications that are visually pleasing will naturally inspire the creativity of those working on it. UI kits give you style guides that include typography, palette guides, and forms so you can quickly add visual organization and style even during the rapid prototyping stages. Pretty applications are just more fun to work on.
- Cohesive Teams: Getting a base user interface in place at the beginning of a project opens up communication and collaboration channels between designers and developers. The development team will have an earlier idea of the UI approach and be able to align the engineering of the application more closely with the design vision. Disconnects between architecture and UI will be revealed earlier in the process, allowing greater flexibility for changes and tweaks.
- Promotes Creativity: With a good UI kit designers can put layouts together with ease and then spend their time pushing the bounds of creativity rather than pushing pixels.
A UI kit is something that should be in every designer *and* developer's tool box; it should especially be a core part of your team's Discovery phase. It allows the product to take visual shape earlier in the process, aiding both designers, developers, and the client. Style guides take care of the heavy lifting on the front-end, enabling the artists and the scientists to collaborate more effectively.
