見出し画像

Dribbleで見つけたデザインをトレース03〜音楽再生画面〜

こちらをトレースしました!

動き付き


デザインをみた所感

▼情報設計について
・NEXTやYou may also likeの項目があるので、いろんな曲と出会える感じかな
・当たり前だけど、メインコンテンツであるジャケットが大きめ。
・音楽アプリは、曲名大きめフォントでアーティスト薄めor小さめフォントになってる。
・Artistページでアーティストについてる星はわかるが、ハートは何に対してだろう?

▼グラフィックについて
・余白たっぷり
・流行りの半モーダル
・ドロップシャドウめっちゃついててかなり上に上がってる
・半分だけ背景ひくのは、現実のUIではあまりみない。グラフィックらしさある
・空いたスペースにどこまで再生されたかのあしらいがあって綺麗
・ジャケットの色と背景色同じ青でまとまりがある
・フォントの色も青みがかっている灰色でそこでもまとまりがでている
・フォントは、丸みのあるフォントでやさしい感じ
・アーティスト名で飛べるようになってる(動き付きの元のページ参照)が、押せる感じない。


1画面目トレース

フォントサイズ、全部ぴったり!うれしー!
図形は、絶対左に寄っているな。
けど、だんだん合うようになって来た。

デザインに関しての発見は
一番重要な再生ボタンが、左マージンからすこしはみ出してて、そうすると目立つ効果があるのかな?※
右のあしらいめっちゃいいいね。
あとは4/5くらいにひくの流行ってるね。別に黄金比でもなんでもないけど、なんでこの位置なのかね?

※丸は四角にくらべて小さく見えるからですね!


出典:機械と人間の隙間を埋める。デザイナーの必須スキル「視覚調整」とは


2画面目トレース


タグ、正解のものがすごいバランスよくて綺麗。私のは、ちょっと狭い感じ。
私のは7pxで、正解は8px。マージンは8pxくらいないと、余裕がない感じに見えます。
このデザインは、隙間がたくさんなので余計にそう見えるのかな。
オレンジのバッジも、小さい方が上品で丁寧な感じがしました。

この記事が気に入ったらサポートをしてみませんか?