Sushi Design System - UI Kit

Zomato

このアプリについて

Sushiは、Zomato独自のデザインシステムであり、クリーンでシンプルなデザイン言語に従って堅牢なユーザーインターフェイスを構築するのに役立ちます。私たちzomatoは、これをゼロから構築しました。これは私たちにとって単なるデザインシステムではなく、それ以上に、ユーザーに新しく強化されたエクスペリエンスを提供するのに役立ちます。 Sushiは、アトミックでクリーンでシンプルなデザイン言語に従って、オーダーメイドのユーザーインターフェイスを構築するのに役立ちます。 Sushiは独自のデザイン言語に基づいて構築されていますが、Googleのマテリアルデザインコンポーネントを多くの分野で社内で完全に採用して使用しています。

設計システムおよびブランドガイドラインのリファレンスとして、製品、エンジニアリング、マーケティング、ブランディングなど、Zomato内のさまざまなチームによって利用および表現されています。

デザインシステムとは何ですか？
設計システムは、明確な標準に基づいて再利用可能なコンポーネントのコレクションであり、これらを組み合わせて任意の数のアプリケーションを構築できます。デザインシステムは、デジタル製品の構築に使用するアセットとコンポーネントのコレクションだけではありません。 Intercomの製品設計ディレクターであるEmmetConnolly氏は、次のように述べています。「…ほとんどの設計システムは、実際には単なるパターンライブラリです。ほぼ無限の方法で組み立てることができるUIレゴピースの大きな箱です。すべての要素が一貫している可能性がありますが、それは組み立てられた結果が一致するという意味ではありません。あなたの製品は、再利用可能なUI要素の単なる山ではありません。それは構造と意味を持っています。これは一般的なウェブページではなく、概念のシステムの具体化です。」

寿司デザインシステム

基礎
基盤はデジタルブランドのガイドラインであり、デザインシステムのタイポグラフィ、カラーパレット、アイコン、間隔、影、情報アーキテクチャを定義します。寿司は、原子設計の原則に従って、原子➡️分子➡️生物として順序付けられた構成可能なコンポーネントを使用してボトムアップで構築されます。

アトミックデザイン
私たちのシステムにマッピングされたアトミックデザイン（Brad Frostによって説明されている）。

#Atoms
分割できない最小の単位は原子です。 Android（または任意のモバイルUI）では、テキストラベル、ボタン、およびイメージホルダーはアトムです。

#Molecules
複数のアトムを形成する必要があるが、それでもユーザーにとっては単一のエンティティのように見え、動作するビューは分子です。たとえば、入力フィールドには、入力ボックス、エラーフィールド、およびクリアボタンがありますが、これらを合わせると1つのエンティティになります。

#Organisms
複雑ですが再利用可能なコンポーネントであり、まとまりのある方法で連携して機能します。複数の原子と分子で構成されています。適切な例は、それぞれに数字とアイコンが付いたタグで構成される評価バーです。異なる評価が選択されると、タグの色も変わります。各タグは個別に他の場所でも使用されますが、評価バーとして、すべてが連携して新しい意味を作成します。

タイポグラフィ
ご存知かもしれませんが、タイポグラフィは、書記言語を読みやすく、読みやすく、表示時に魅力的にするためにタイプを配置する技術です。タイプの配置には、書体、ポイントサイズ、行の長さ、行の間隔、文字の間隔の選択、および文字のペア間のスペースの調整が含まれます。

次の書体バリエーションをサポートしています-

ExtraLight
光
通常
中くらい
セミボールド
はげ
ExtraBold

最大8つのフォントの太さを持つ任意のフォントを使用し、これらのエイリアスからそれらを割り当てることができます。デモ用にMetropolis、Okra、Robotoがありますが、ブランドに合った任意のフォントを使用できます。

色
寿司はまた、そのパレットで事前定義された色のセットを提供します。非常にユニークなケースの場合は、自由に独自の色を使用してください。それ以外の場合は、製品のすべてのコンポーネントにこのパレットの色を使用することをお勧めします。

コードリポジトリ