Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Neumorphismを試してみた話

10c8a39aceda66f69b4ee6b4d39a30f5?s=47 mashida
February 09, 2021

 Neumorphismを試してみた話

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

10c8a39aceda66f69b4ee6b4d39a30f5?s=128

mashida

February 09, 2021
Tweet

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では使いにくい