Google describes Material design as a set of guidelines, icons, and components that combine to create a unified user experience across platforms. Fast, isolated development and experimentation without the fear of breaking our business logic and with a single source of truth.Responsive Dashboard created with Angular MaterialĪngular Material is a set of modern UI components designed by the Angular team and based on Google’s Material design specification. These tools help to bring design, code, and documentation together. In the same way, we could build layouts or even full features in isolation, with storybook as our playground. We don’t need to limit our storybook to just components. Any re-usable value, that we use could be a token. Tokens can be used for much more than just color, typography, or spacing. We could add prop information, code snippets, styling information, args. Storybook makes it possible to add also much richer documentation. The extension also lets us test our components and solution with different color blindness options. By changing the primary contrast text value from our token “white” to “black” in the theme we easily clear the problem. The ratio should be 4.5:1, but it is only 2.12. The button caption color, compared to the background does not meet the WCAG 2 AA contrast ratio thresholds. If we take our button as an example again we can actually see that I have a problem with it. It uses the Axe accessibility tools in the background and makes it super easy to ensure accessibility on the different levels of the solution, starting from the components. One of my favorite addons to the storybook is the accessibility addon. It is another thing to actually test them. It is one thing to try to design UI components to be accessible. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. A file showing color definitions could look something like this: from './buttons/' In practice, tokens are design values, stored in JSON files and used in code. But as they are generic, you are not tied down to any framework or language. They are kind of like SCSS variables and mixins. Tokens are nice, bite-sized “assets”, to communicate design decisions for development. Enter design tokensĭesign tokens are starting to gain popularity, especially in the design systems community. but it much better to get the actual information as data. It is one thing to have a link where there is information about colors, typography, etc. Still, a Figma link leaves room for interpretation. Figma is a fun tool to work with and Sharing designs is quite easy. The basic setup can look something like this: I usually start with a basic template and common definitions, like Text styles, color styles, a basic 8pt layout grid, and work from there towards the details. We use Figma as our primary design tool in all of our projects. Even if not actually building one, there are a lot of good concepts and ideas that can be utilized in projects, where we build digital solutions. Personally, I find Design systems super interesting. They are not just style guides, component/pattern libraries, or brand manuals. Design systems help to create a single source of truth for teams to design, develop and realize digital solutions. More and more companies are investing in design systems.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |