マテリアルデザイン - 公式チュートリアルのサンプル画面

MaterialDesign1.png

マテリアルデザインについて調べています。

Wikipediaには「Googleが提唱したデザインシステム(設計体系)の一種、および、それを実現する開発技術や手法、デザイン、試みなどの総称である。」と記載されています。

UX/UIデザイナーであれば、必ず必要となる知識の1つだと思いますし、エンジニアもある程度知っている必要があると思います。

ということで、今回はマテリアルデザインの中でも、WEBの実装に近い部分「Material Web Components」のサンプルを紹介します。

こちらがMaterial Web Components公式チュートリアルのサンプル画面です。

初期表示
MD-sample1.png

ユーザー名を入れない場合のアラート(英数字で何か入れる必要があります)
MD-sample2.png

パスワードが短い場合のアラート(英数字で8文字以上入れる必要があります)
MD-sample3.png

ログイン後画面
MD-sample4.png

チュートリアルでは、これらの画面をマテリアルデザインのコンポーネントを使って作成します。

次回は実際に試してみようと思います。



  にほんブログ村 IT技術ブログへ


スポンサーサイト



コメント

非公開コメント