オーロラデザインケース

ご存知のように、開発中の複雑なプロジェクトの作成には、さまざまな時期に複数のデザイナーが関与することがあります。誰かのプロジェクトに取り組み続けながら、それらを使用するための要素とルールの組織化されたシステムを使用することは非常に便利です。

これはまさに、私たちのプロジェクトの 1 つである Aurora に必要な方法です。私たちの仕事は、基本的な要素の概念を作成して、それらから電子商取引管理の分野でプラットフォーム用の本格的なインターフェイスをさらに構築することでした。

クライアントは例として、Design-Kit、色、フォント、ユースケースなどを含む Carbon システムを提供しました。彼らの製品の類似物と同様に。さらに、マテリアル デザインの例に焦点を当てました。彼らの Web サイトには開発に役立つコンポーネント オプションがあるからです。
作業の過程で、まずプロジェクトのフォント、アイコン、メインカラーが提案されました。同時に、サンプルのボタンと入力を作成して、選択したフォントとアイコンがどのように相互作用するかを示しました。これに基づいて、クライアントはアイコンのフォント、色、および外観を選択しました。そのため、ロゴの色の 1 つであるピンクがプライマリ カラーとして使用され、2 つ目のグレーがセカンダリ カラーとして使用されます。

役割がマークされたすべての使用済みフォント スタイルは、Figma プロジェクトのスタイルに保存され、リストから選択できます。

色は同様の方法で保持されます。ただし、これらは [カラー スタイル] セクションのフォルダーに分割されています: プライマリと追加。カラーパレットを拡張するために、選択した色に黒と白を異なる比率 (20%、40%、60% など) で順番に追加する方法を使用しました。カラー レイアウトのフレームは、意図した色の役割も示しています。

さらに、クライアントが提供する既製のセットから選択できるように、いくつかのシャドウ オプションが追加されました。

次に、ボタン、入力、ドロップダウン、および言語選択ボタンの外観が選択されました。すべてのボタンはコンポーネントであり、その外観は目的に応じてプロジェクトで直接変更できます。ボタンのアイコンは、オートレイアウトメニューでも変更できます。

サンプルのログイン ページを作成した後、言語を選択するためのドロップダウン ボタンの外観が少し変更されました (よりコンパクトになりました)。

入力には 9 つのオプションがあり、アイコンの有無にかかわらず使用できます。パスワード入力フィールドには、さまざまな状況で使用でき、固有のプロパティがあるため、より多くのオプションがあります。たとえば、パスワードの強度を示すスケールと、ユーザーが必要な文字数を入力した場合に要素が緑色で強調表示されます。また、認証コード入力フィールド用に別のコンポーネントを作成しました。

次に、チェックボックスとトグルのコンポーネント、およびテキストを含む同じ要素のコンポーネントが作成されました。さらに、さまざまなサイズのアバター、グループを含むコンポーネント、ツールチップ、使用例、ドロップダウン リストを追加しました。

要素とテキストが実際にどのように機能するかを示すために、クライアントの希望を考慮してログイン画面を作成しました。その後、暗いテーマが追加されたので、別のコンポーネントを作成しました。

また、ダーク テーマのコンポーネントをセットアップするために、既製のログイン レイアウトを使用し、色と透明度の適切な組み合わせを選択しました。一部の要素については、何も変更する必要はありませんでした。たとえば、プライマリ ボタンの場合です。

したがって、かなり短時間で、クライアントは Figma で要素を編集できるシンプルな UI キットを受け取ります。これは、多額の費用をかけずに、プロジェクトの主なスタイルの焦点を示す優れた方法です。

行く前に：

この記事を楽しんでいただけたなら、拍手を 10 回してください。

コメントであなたの意見を共有してください。

Fusion Techをフォローして、最新の記事を入手してください。

[email protected] で新しいプロジェクトを受け付けています。

DribbbleとBehanceで当社のポートフォリオを探索するか、単に当社のWeb サイトにアクセスしてください!