From Essentials to Components
Prior to beginning this design sprint, we had already created a basic style guide we called The Essentials. This is a foundation that loosely defined our: Typography, Colours, Icons, button, form controls. The Essentials give us the basic building blocks to work with to combine and form Components.
Design Components
Working our way up in scale, the next level is Components.
When working on designing apps and web designs, most blocks on the screen are components. A component can be a combination of a few Essentials. Things like cards, banner and navigation are traditional examples of Components.
Reviewing our UI inventory, we began to see patterns emerge. We discussed and corrected the use when necessary, and started defining our standardised components.
“The UI components are the expression of the visual and interaction design for the product. They enable developers to build consistent UI quickly by using them as the building blocks. Developers only focus on implementing complex business logic rather than bothering too much at UI details”.
Using this approach, UX designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.
Component-based thinking also helps developers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together. Most importantly, the next level template design, which is a combination of components, will be consistent.
Design principles
Design Principles are great when you’re working on a large scale system. By establishing a set of Design Principles, it’s easier to keep the product aligned with the UX Vision.
Proximity
Proximity creates relationship between elements. It provides a focal point. The elements should be visually connected in someway.
Repetition
Repetition strengthens a design by tying together individual elements. It helps to create association and consistency.
Balance
Balance provides stability and structure to a design. It’s the weight distributed in the design by the placement of elements.
Composable
It should fit well when placed next to or layered with other components to form a larger composition.
Touch Friendly
Focusing on a touch experience. That means designing with gestures and interactions in mind.
Leveraging the framework
With the redesign, we decided to standardize the Styleguide based on Bootstrap 3, since it would give us the best velocity out of the gate. This is due to its pre-built and well-documented styles, and it’s fundamental accessibility guide and mobile responsiveness. We don’t need to reinvent the wheel.
Of course, bootstrap will not cover everything we need, such as Conversational UI, Comments. sometimes, we need to create specific components for PageUp, for example Buckets, Person Card, Job Card.
Our approach to writing new Components is:
- Don’t write new CSS classes.
- Check the Bootstrap docs to see if there’s a class you can utilize.
- Use CSS variables to see if you can manipulate Bootstrap to do what you need it to do.
- If all of the above don’t help, now write new component, then document the usage and use case clearly.
- Keep markup semantic, compatible with Bootstrap.
- Check the composability of the components.
It’s ultimately our development team’s’ adherence to follow classes across the application that enabled us to do such a radical redesign. This was enabled by often referencing the Bootstrap docs. And through maintaining a well-documented and up-to-date, living, integrated style guide framework and including it in our applications from either CDN or NPM package.
Closing Thoughts
There were some great debates around the use cases for the components, such as Tabs vs Accordions. It’s created a lot of good questions, such as: When should we use this pattern over the other? What problem does this component solve? How do users interact with it on different devices?
While the design will become increasingly clear, you — as a designer — will become more confident using them in Template the next level of design.
