Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
最近きてるかもって思ってるデザイン
Search
tiking
December 13, 2020
Design
0
230
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
170
GraphQL 入門
tiking76
0
1.3k
みんなTCAって 知ってる?ver2.0
tiking76
1
310
みんなTCAって知ってる?
tiking76
0
910
Swiftのちょっとうれしい構文
tiking76
0
69
p1assさんを作ろうと試みました
tiking76
0
120
PRのときに使われがちな略語のやつ
tiking76
0
95
swiftでもグラフ書いてみたくない??
tiking76
0
200
コードでUI構築してみた
tiking76
0
86
Other Decks in Design
See All in Design
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
890
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
830
ito aya|Portfolio2409
itoaya116
0
260
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
390
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
160
ZKK_001.pdf
nicholaspegu
0
1.4k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
49k
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
290
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
32k
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
490
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Documentation Writing (for coders)
carmenintech
65
4.4k
Site-Speed That Sticks
csswizardry
0
28
Six Lessons from altMBA
skipperchong
27
3.5k
Embracing the Ebb and Flow
colly
84
4.5k
The Language of Interfaces
destraynor
154
24k
Building Applications with DynamoDB
mza
90
6.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Agile that works and the tools we love
rasmusluckow
327
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Transcript
最近きてるかもって思っ てるデザイン tiking stdout2020 2020/12/13
Readme name : 舘佳紀 colleage : 会津大学学部3年 さーくる : Zli所属です
Handlename : チキング 好きな言語 swift twitter @tikin0716 gitHub tiking76
きっかけ
ん???なんか無かったか?
え…shadow!?
これって最近だとなんか影を入れるのが流 行りなんかな?
教えてGoogle 先生
とりあえず出てきたから流行りぽいな…
もう少し頑張ってみた
よさそう…
スキューモーフィズムって? スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の 物質に似せるために行うデザインや装飾を指す用語である。 たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあて はまる wikiより参照 ・昔はAppleも採用していたみたい
・マテリアルデザインはこれと、フラットデザインのいいとこ取りしたやつみたい
Neumorphism(ニューモフィズム) ・新しいスキューモーフィズムのことみたい ・ボタンやカードなどの要素が凹凸で表現されていて、明るい影(光)が落とされているのが特徴
実装には2つの方法があるみたい
同じ色合いの3つの色を用意する ・比較的やりやすいかな
色を生成して実装する ・色の調和と同調がとれる
実際にやってみた
明るい色と暗い色を用意する
色をブレンドして中間調を作る
ポップにする ・中間色を背景色にする ・左端に明るい色のドロップシャドウをかける ・右端に暗い色のドロップシャドウをかける ・それぞれに50%のブラーをかける
やってみた
所感 ・デザインについてなにもよく知らなかったけど、 なんとなくわかるようになった。 ・やっぱデザイナーさんはすごいやってことを再確認できた。 ・やっぱ、新しいこと勉強するのは楽しい!
参考にさせていただきました "Neumorphism" なるUIデザインのトレンド Neumorphism (Soft UI) in UI design -
Tutorial Neumorphism: 令和時代のスキューモーフィズム スキューモーフィズムwiki What's New in macOS - macOS - Human Interface Guidelines
追加で読んでおいてほしい資料 UIKitでNeumorphismのデザインを構築するライブラリ iOS vs. Android App UI Designを解説する(更新中)|せいぞう|note
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました