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

最近きてるかもって思ってるデザイン

9d974d9df914b4540ae8febc6cb89f02?s=47 tiking
December 13, 2020

 最近きてるかもって思ってるデザイン

デザインなんもわからんけどはなしました😇

9d974d9df914b4540ae8febc6cb89f02?s=128

tiking

December 13, 2020
Tweet

More Decks by tiking

Other Decks in Design

Transcript

  1. 最近きてるかもって思っ てるデザイン tiking stdout2020 2020/12/13

  2. Readme name : 舘佳紀 colleage : 会津大学学部3年 さーくる : Zli所属です

    Handlename : チキング 好きな言語 swift twitter @tikin0716 gitHub tiking76
  3. きっかけ

  4. ん???なんか無かったか?

  5. え…shadow!?

  6. これって最近だとなんか影を入れるのが流 行りなんかな?

  7. 教えてGoogle 先生

  8. とりあえず出てきたから流行りぽいな…

  9. もう少し頑張ってみた

  10. よさそう…

  11. スキューモーフィズムって? スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の 物質に似せるために行うデザインや装飾を指す用語である。 たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあて はまる wikiより参照 ・昔はAppleも採用していたみたい

    ・マテリアルデザインはこれと、フラットデザインのいいとこ取りしたやつみたい
  12. Neumorphism(ニューモフィズム) ・新しいスキューモーフィズムのことみたい ・ボタンやカードなどの要素が凹凸で表現されていて、明るい影(光)が落とされているのが特徴

  13. 実装には2つの方法があるみたい

  14. 同じ色合いの3つの色を用意する ・比較的やりやすいかな

  15. 色を生成して実装する ・色の調和と同調がとれる

  16. 実際にやってみた

  17. 明るい色と暗い色を用意する

  18. 色をブレンドして中間調を作る

  19. ポップにする ・中間色を背景色にする ・左端に明るい色のドロップシャドウをかける ・右端に暗い色のドロップシャドウをかける ・それぞれに50%のブラーをかける

  20. やってみた

  21. 所感 ・デザインについてなにもよく知らなかったけど、  なんとなくわかるようになった。 ・やっぱデザイナーさんはすごいやってことを再確認できた。 ・やっぱ、新しいこと勉強するのは楽しい!

  22. 参考にさせていただきました "Neumorphism" なるUIデザインのトレンド Neumorphism (Soft UI) in UI design -

    Tutorial Neumorphism: 令和時代のスキューモーフィズム スキューモーフィズムwiki What's New in macOS - macOS - Human Interface Guidelines
  23. 追加で読んでおいてほしい資料 UIKitでNeumorphismのデザインを構築するライブラリ iOS vs. Android App UI Designを解説する(更新中)|せいぞう|note

  24. おまけ

  25. 追加資料のライブラリー実装してみた ・サンプルだけですが…

  26. ここまでありがとうございました