Issue 1: Color updates and a new component library
Issue 1
Hello, ESDesign!
There’s a good chance that you’ve heard about our effort to “freshen-up” the Mineral UI system. Well, we’re excited that in the past few weeks we’ve made some great progress, and we’d like to share some of that with you.
We’re also stoked to introduce the Mineral website. You can find links there for all the resources you should familiarize yourself with if you’re designing or building UI with the Mineral system. Please check it out, and don’t forget to bookmark!
Latest
Color Me Surprised!
The first update for Mineral is a subtle improvement to our color strategy. This is focused in two areas, Severity Color Ramps and Color Names.
We’re proud to share that both of these advancements were contributed to Mineral by our fellow designers, as a result of challenges observed in products with actual customers.
-
Enhanced Color Ramps for Severity
One of the main features in AIOps is that the product monitors customer data and displays alarms according to importance. Severity Color plays a big role in providing visual prominence and urgency to the messages presented to users.
AIOps encountered a limitation to Mineral’s original 3-color Severity Color ramps, and needed a 4th severity option to best address the needs of its customers. This 4-color approach improves on Mineral’s original guidance by allowing a product to choose either 3 or 4-color Severity Colors.
The previous medium Severity Color, Bronze, is being removed and replaced with a Yellow and an Orange. Products that need only 3 of these colors, should use Green, Yellow and Red.
-
User-Friendly Names for Decorative Colors
Sparked by user feedback, Rally recently conducted user research to determine if the names of their new colors were intuitive and easily-identifiable for users. They determined that the stylized color names they were using were not immediately matched to their respective colors.
This prompted them to rename the Decorative Colors to be simpler and less stylized. This substantially improved users’ ability to associate colors to their names. This improves usability and promotes easier interactions between users with varying degrees of color vision ability. We’ve adopted this approach to Mineral’s colors as well, giving them simpler and more identifiable names.
See the improved color documentation now. You’ll need a Figma account. If you don’t already have one, use our Figma account creation guide for help.
Technically, it’s a Whole New Mineral
While the design of Mineral isn’t changing much, the technical underpinnings have changed entirely. Rather than write out components from scratch, Mineral is now built on top of Material UI, a comprehensive React component library aligning to the Material Design guidelines, with massive community support. We’re hard at work theming and extending Material UI components to look and feel like their Mineral counterparts.
For more information, including a guide to get started using the components, check the Resources for Developers page on our website. We are working on more technical documentation, particularly for the components.
Hey, designers! Do you work with a developer that should know these things?
Please forward them this email and ask them to subscribe.
Up Next
Right now, our top priority is consolidating all of the documentation out there into a single, trustworthy location. Beyond that, here‘s our plans so far.
-
Contribution Model
We want to make it as easy as possible to contribute to Mineral, to absorb the improvements you’ve made in your products, and to help you make it your own. To that end, we are developing models to provide those contributions.
-
Roadmap
We are operating this project transparently, and a viewable roadmap is a big aspect of that.
-
More Components
We will continue to design, theme, and extend more components. If you have an immediate need, please let us know.
Happy Earth Day!