Thiết kế vật liệu không liên quan đến thiết kế phẳng trong các nguyên tắc của nó. Thiết kế vật liệu không đồng nhất ở chỗ nó là một nỗ lực để làm cho thiết kế web trở nên thực tế hơn trong cách nó mô tả các yếu tố, sử dụng các lớp và hoạt hình theo cách có ý nghĩa bên ngoài trình duyệt. Hiện tại thiết kế phẳng và thiết kế vật liệu tương tự nhau, nhưng thiết kế vật liệu có thể được áp dụng cho các thiết kế khác với thiết kế giống như phẳng.
Nó tuân theo 3 nguyên tắc
- Vật chất là phép ẩn dụ
- Hãy mạnh dạn, đồ họa, có chủ ý
- Cung cấp ý nghĩa với chuyển động
Phân lớp trong thiết kế vật liệu được thực hiện thông qua các yếu tố di chuyển tiến hoặc lùi dọc theo trục z, đến và từ người dùng và thêm bóng thực tế để truyền đạt ý nghĩa hơn. Các yếu tố hoạt hình, chẳng hạn như có một vị trí ảnh hưởng đến hoạt hình khi một mục danh sách bị xóa, có nghĩa là để cải thiện lưu lượng và sự hiểu biết của người dùng trong khi làm cho trải nghiệm mượt mà hơn. Khi làm như vậy, nhiều ý nghĩa có thể được miêu tả thông qua thiết kế vật liệu hơn là thiết kế phẳng
Các nhà thiết kế của Google đã tạo ra các mô hình giấy để tìm ra lớp và bóng cho thiết kế vật liệu của họ.
Có các hướng dẫn thiết kế khác bao gồm khoảng cách, màu sắc, tính khả dụng và chi tiết hơn về định vị và hoạt hình mà bạn có thể xem trong trang web của Google về chủ đề này .
Một cách tốt để tìm hiểu thêm về thiết kế vật liệu và cách triển khai là sử dụng các ứng dụng mà Google đã tạo bằng thiết kế vật liệu và để đọc về các chi tiết thiết kế , đây là của Brian Lovin trên ứng dụng Hộp thư đến.
Mọi người có thể cho rằng thiết kế vật liệu là một loại mở rộng của thiết kế phẳng, nhưng trên thực tế các nguyên tắc là khác nhau. Xu hướng hiện nay là tạo ra thiết kế phẳng, giống như hiện tại mà Google sử dụng, nhưng các nguyên tắc thiết kế vật liệu vượt qua các giới hạn đó và cũng có thể được áp dụng cho các phương pháp thiết kế khác.