Spotifyトレースしてみました。

前回のCocoda!#002の課題でSpotifyについて調べたので、今回はSpotifyをトレースしてみました。
XD、Web版、幅1366pxで作成してます。

完成品はこちら 💁‍♀️

トップ画面

検索画面

Spotify Color and Text

Huluのトレースをした時もそうでしたが、グレーのバリエーションが豊富です。あとはフォントのサイズ違いが多くて、細かいのが特徴でした。あまり多用はされていないですが、上記以外にも14pxや13pxも使われていました。

Spotify Components

コンポーネントもめちゃくちゃシンプルで、トップはプレイリストカードとメニューリストが、検索画面だと、ジャンルカード（勝手に命名）があるだけでした。プレイリストカードは、アルバムだと四角で、アーティストだと四角の部分が丸くなっていて（こちらはトレースしなかったんですが）、視覚的に分けていることがわかりました。

（OOUIをちょっとかじったので、図を書いてみたのですが、これであっているのかちょっと不安😇）

全体として、とても回遊しやすい作りになっていて、ジャンルからプレイリスト、プレイリストからトラックのリスト、トラックからアルバム、アルバムからアーティストのプレイリストとずっとポチポチして永遠に終わりのない旅に出かけれそうな操作性でした。

感想 

シンプルなのに、とても操作性のある、回遊しやすい設計になっていて参考にしたいと思ったのと、ジャンルの部分の配色が絶妙で、グラデを作っていくのがとても面白かったです。