2020年のUIトレンド Neumorphism(ニューモルフィック) = New + Skeuomorphism

Medium

Neumorphism in user interfaces

How UI trends reach for inspiration into the real world and …

DribbbleやInstagramで最近話題となっている2020年、令和の新UI「Neumorphism」

New+Skeuomorphism = Neumorphism とのこと。

Neumorphism Designはどんなデザイン？

マテリアルデザインは、影を使って立体的に表しているのに対して

ニューモルフィックデザインは、押し出されるデザイン。

マテリアルデザインのように浮いているわけではない。個人的にはエンボス加工に近い気がする。

この投稿をInstagramで見る

UX Choice(@uxchoice)がシェアした投稿 – 2020年 1月月14日午前6時43分PST

Neumorphismのメリット・デメリットは？

この投稿をInstagramで見る

rudityas(@rudityas)がシェアした投稿 – 2019年12月月28日午前3時52分PST

メリット

新しいこと

web2.0のリアル感のあるデザインから、フラットデザイン、Androidはマテリアルデザインと変化していきました。

去年から新しくNeumorphismがでてきたことで、2020年のデザインのトレンドになる可能性は高いです。

フラットやマテリアルのような標準になるかはどうでしょう。

デメリット

アクセシビリティ

実際にNeumorphism UIにすることで、アクセシビリティがどうなるかがわかっていない。

例えば当初のフラットデザインは曖昧なフラットでBad UIの代表例にもなっていた。

Neumorphism UI も正しく理解して使わないと、アクセシビリティが悪くなる可能性が高い。

ただ単に、かっこいいからNeumorphismにすると、マテリアルデザインにもありますが、ありえない現実離れしたデザインになったりします。

でも、うまく使えば、押したくなるUIでもある。

実装の仕方・コーディング

一応、例として↑がありますが、個人的には再現し切れていない気がします。

今年はNeumorphism のReactやVueのCSSフレームワークあたりがでてきそう。

今後のNeumorphismが楽しみ☺️

Instagram

インスタやDribbbleをみるといろんなデザインをシェアしている人がいるので、参考にしてみましょう

この投稿をInstagramで見る

to Inspire(@ui.designed)がシェアした投稿 – 2020年 1月月15日午前8時37分PST

この投稿をInstagramで見る

Dev Geeks(@devgeeksco)がシェアした投稿 – 2020年 1月月15日午前1時51分PST

この投稿をInstagramで見る

Ranjani Ramanathan(@rr_designerspace)がシェアした投稿 – 2020年 1月月13日午前3時35分PST