[Material Web 1.0] Material Design with a Web Platform

material design

Introduce

Material Design is a design language developed by Google in 2014. It is based on the idea of creating interfaces that are intuitive, beautiful, and responsive. Material Design uses a variety of elements to achieve this, including:

• Motion: Material Design uses motion to create a sense of depth and realism in interfaces. Buttons and other elements move in response to user input, and animations are used to guide users through tasks.
• Depth: Material Design uses shadows and highlights to create a sense of depth in interfaces. This helps users understand the hierarchy of elements on a screen and identify what is interactive.
• Light and shadow: Material Design uses light and shadow to simulate the way that light interacts with physical objects. This helps to create interfaces that are more realistic and engaging.
• Color: Material Design uses a vibrant color palette to create interfaces that are both visually appealing and easy to read.

Material.io includes extensive UX guidance as well as UI component implementations for Android, Flutter, and the Web. In this blog, I’ll concentrate on Material with the web application.

Material 3, the most recent version, enables personal, adaptive, and expressive experiences ranging from dynamic color and improved accessibility to foundations for large screen layouts and design tokens.

Material 3

The benefits of using Material Design

• It creates a consistent user experience across different platforms. Whether a user is using an Android app, a web app, or a desktop app, they can expect a similar look and feel. This makes it easier for users to learn how to use new products and to switch between different devices.
• It is visually appealing. Material Design uses a vibrant color palette and realistic animations to create interfaces that are both beautiful and engaging.
• It is responsive. Material Design interfaces are designed to be responsive to user input. This means that buttons and other elements move and change in response to user touch and gestures. This makes interfaces more intuitive and easier to use.

Material Web

If you’re a frontend developer, you must be familiar with the use of library components.

Material Web is Google’s component library for building applications that work in any web framework.

Material Web, also known as Material Web Components or MWC, is a library of web components that follows Google’s Material Design guidelines.

Material Web

Web components

Web components are custom HTML elements with encapsulated styles and behaviors. They work across many different frameworks (such as Lit, React, Vue, and Svelte) as well as web environments (such as Eleventy, Wordpress, and Ruby on Rails).

Design Token

Design tokens are the building blocks of all UI elements. In MWC, tokens are CSS custom properties that can be used to style components.

Tokens ensure the same style values are used across design files and code

Material 1.0

Material 1.0 (released in September 2023) Web components are a collection of web components built on the Material Design language. These web components provide web developers with an easy way to create beautiful, user-friendly, and responsive web interfaces.

The following are the features and components that are currently available on Material version 1:

• Features
  - Color theming
  - Typography theming
• Components
  - Button
  - FAB
  - Icon button
  - Checkbox
  - Chips
  - Dialog
  - Divider
  - Elevation
  - Focus ring
  - List
  - Menu
  - Progress indicators
  - Radio
  - Ripple
  - Select
  - Slider
  - Switch
  - Tabs
  - Text field

Quick start

Install Material web components.

npm install @material/web

Import element definitions from `@material/web/<component>/<component-variant>.js`.

// index.js
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/checkbox/checkbox.js';

Use the <component-name> tag in HTML markup. Refer to the component docs for more guidance on using each component.

<script type="module" src="./index.js"></script>

<label>
  Material 3
  <md-checkbox checked></md-checkbox>
</label>

<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Next</md-filled-button>

End.

In this article, I’m just introducing you to the concept of material design and its applications in web application development.

Material Web 1.0 has just been released, so there will be many features and components that are not available at the moment.

See you in the next post!