Neumorphismを試してみた話

Neumorphismを自分のポートフォリオで試して得た学びをまとめました

Transcript

1. Neumorphismを試してみた話 mashida (@pntgn09)
2. mashida (@pntgn09) UI/UX デザイナー (5年⽬) リアルタイムのオンラインLTは初 くま＆わらびもちが好き
3. Neumorphism Ҿ༻ : https://medium.com/@jason_kelley/neuomorphism-2c4cbe84caae
4. Neumorphism ը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c Ҿ༻ : https://medium.com/@jason_kelley/neuomorphism-2c4cbe84caae
5. New + Skeumorphism Ҿ༻ɾը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c
6. Skeumorphism ը૾ : https://www.interaction-design.org/literature/topics/skeuomorphism
7. Skeumorphism • 実世界にあるモノにリアルに似せて作るデザイン • ex: iOS 7までのapple純正アプリ • 質感やモノのそれっぽさを再現させる  → 直感的にユーザに機能を伝えられるメリット Ҿ༻ : https://www.interaction-design.org/literature/topics/skeuomorphism
8. Neumorphism Ҿ༻ɾը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c
9. Neumorphism (New ＋ Skeumorphism) • Skeumorphismよりもリアルさがミニマム・シンプルなデザイン • ex: 「A・NA・TA for DREAM」(2020) • 凹凸の質感を光の当たり具合・側⾯の影で再現  → 凹凸で階層を表現している • 2020年 ~ 2021年のトレンド • Michal Malewicz⽒の記事で紹介 Jason Kelly⽒が命名 Ҿ༻ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c ࢀর : https://en.99designs.jp/blog/trends/web-design-trends/
10. Portfolioに反映
11. Neumorphism.ioを使う Ҿ༻ : https://neumorphism.io
12. Portfolioに反映 ࢀর : https://asdmay.github.io/
13. 試してみて気づいた3つのこと
14. 試してみて気づいた3つのこと • 階層構造が深い・要素が詰まったUIには向いていなさそう • 凹凸表現のシャドウのエリアが広くなる • 向いているUI: IoT系のリモコンアプリ, ⾳楽プレーヤー etc
15. 試してみて気づいた3つのこと • ⽩(#ffffff)・黒(#000000)背景には採⽤しづらい • 光源の⽅向の明るい⾯を背景⾊より明るくする必要あり • 同様に暗い⾯も背景⾊より暗くする必要あり
16. 試してみて気づいた3つのこと • ⼿軽にリッチな表現ができる • Material Designのシャドウ表現を変えるだけ • 階層が浅いページならすぐに試せる
17. まとめ
18. まとめ • Neumorphism (New ＋ Skeumorphism) • 2020年 ~ 2021年のトレンド • 凹凸の質感を光の当たり具合・側⾯の影で再現するデザイン • ⼿軽にリッチな表現ができる • 複雑な階層構造や要素の詰まったUIでは使いにくい