コンポーネント

Trelloのような*「UIこそがプロダクトの要かなめ」*となるようなWebサービスの場合、*UIコンポーネント(部品)*は最も重要なデザインパーツだと言えます。

ここでは、Nachosの各コンポーネントの中から、特に主要なものをご紹介していきます。

ボード

7.png
スクリーンショット：2017年9月

先述したとおり、Trelloでは8pxグリッドデザインを採用しているので、ボード全体のデザインは基本的に8pxの倍数でデザインするという方針があります。
実際、一番上部のグローバルヘッダーや、ボードとグローバルヘッダーの間のボードタイトル部分は、それぞれ40pxと48pxになっています。
また、一番下のスクロールバーの高さは16pxになっており、マージンとして縦横8pxが確保されています。

8.png
スクリーンショット：2017年9月

縦長のリストが横に並列される場合、リストとリストの間は、やはり8pxの隙間を作ります。

9.png
スクリーンショット：2017年9月

ボードメニューのようなコンポーネントも原則として8pxの倍数で作成していますが、画像で確認できるように、8pxでは狭く感じて16pxでは逆に広く感じる部分は、間をとって12pxを採用する場合もあります。

カード

10.png
スクリーンショット：2017年9月

カードはTrelloの中でも重要な役割を果たすコンポーネントです。
タスク自体が1枚のカードとなり、そこにはさまざまな情報が詰め込まれます。

11.png
スクリーンショット：2017年9月

カードには、リストに表示される*「表」と、クリックしたあとに表示される「裏」*がありますが、カード裏にもさまざまな情報が格納されます。

アバター

12.png
スクリーンショット：2017年9月

メンバーのアバター(プロフィール画像)に関しても詳細に取り決められています。
小・中・大の順に32px・48px・88pxで作成するほか、大きい272px四方で作成していきます。