アトミックデザイン：Webデザインについてあなたが知っていると思ったことを爆破する

公開: 2019-07-29

柔軟性は制約がないことと同じであり、創造性を発揮するには、制限がない必要があるというのが一般的な信念です。ただし、プロジェクト、特にWebデザインのように複雑なプロジェクトを完了するには、構造を作成することで実際に柔軟性を高めることができます。フレームワークが必要です–それは交渉の余地がありません。あなたが本当に自由を持っているところであなたの芸術的で創造的な筋肉を曲げることは、それらが機能的で現実的であるのと同じくらいインスピレーションを得たデザインをもたらすでしょう。アトミックデザインは、ウェブデザインへの官能的で系統的なアプローチであり、フレームワーク内で実験する機会を提供します。

設計システム

デザイナーはもはや単にWebページを作成するだけではありません。彼らは設計システムを作成します。設計システムには次のものが含まれます。

色
グリッド
テクスチャ
タイポグラフィ
NS。

UXPlanetのJackStrachanが設計システムをどのように説明しているかが大好きです。「要するに、設計システムは、明確な基準に基づいて再利用可能なコンポーネントのコレクションであり、一緒に組み立てて任意の数のアプリケーションを構築できます。デザインシステムは、さまざまなタッチポイントで作業するときに、製品全体で一貫したエクスペリエンスと視覚言語を翻訳する方法です。」

デザインの要素は主観的である可能性があり、すぐに圧倒的で混沌としたものになる可能性があります。それらを分類するために、デザインはより系統だった方法で見られなければなりません。それがウェブデザイナーのブラッドフロストがしたことです。

アトミックデザインの誕生

ブラッドがアトミックデザインを思いついた理由は次のとおりです。「インスピレーションと類似点を探す中で、私は化学に戻り続けました。すべての物質（固体、液体、気体、単純、複雑など）は原子で構成されていると考えられています。これらの原子単位は結合して分子を形成し、分子はさらに複雑な生物に結合して、最終的に私たちの宇宙にすべての物質を作り出します。」

彼はさらに、インターフェースはビルディングブロックに分類できるコンポーネントで構成されていると説明しています。小さいものから大きいものへの順序は次のとおりです。

原子
分子
生物
テンプレート
ページ

出典：BradFrost.com

アトミックデザインのビルディングブロック

アトミックデザインの主な魅力は、一貫性を促進することです。作成する要素の多くは、簡単に複製、再利用、またはスケーリングできます。そして、それらすべてを追跡するために、デザイナーは、すべての要素とスタイルを1か所で確認できるライブラリを自分で構築できます。カスタマイズの余地もありますが、ビルディングブロックの範囲がより複雑で壮大になるにつれてのみです。 5つの構成要素に取り掛かりましょう。

1.原子

自然界ではアトムが重要であるため、HTMLタグはWebインターフェイスにとって重要です。意味：すべてのWebインターフェイスは、HTMLタグまたは基本要素（アニメーション、ボタン、カラーパレット、フォント、フォームラベルなど）で始まります。これらのアトムは、それ自体ではWebデザインに有益ではありませんが、Webインターフェイスを構築するために必要です。

アトミックデザイン

2.分子

分子は原子よりも複雑ですが、全体的に複雑ではありません。あまり役に立たない原子をグループ化すると、より有用な分子が得られます。検索フォームラベル+入力+ボタン（原子）=完成した検索フォーム（分子）

アトミックデザイン

3.生物

分子をグループ化すると、前任者よりも複雑な生物が得られます。ロゴ+ナビゲーション+検索フォーム+ソーシャルメディアアイコン（分子）=完成したマストヘッド（生物）

アトミックデザイン

理想的には、ウェブサイト上またはさまざまなウェブサイト間で生物を再利用し、一般的なレイアウトを維持し、さまざまなテキストや画像でカスタマイズできるようになります。たとえば、デザインするすべてのWebサイトで同じタイプのマストヘッドを使用したり、製品ページで繰り返す製品固有の有機体（画像+タイトル+価格）を作成したりできます。

これは、Webインターフェイスが独自のカスタマイズされた方法で本当に形になり始めるときです。これまでは、インターフェースは単なる要素のコレクションにすぎませんでした。生物の段階では、ウェブサイトはより視覚的になります。

アトミックデザイン

あなたがあなたのプロセスをクライアントと共有することになった場合、これは彼らが行く部分です、「ああ、私はそれを手に入れました」。これは、ワイヤーフレーミングを開始するか、モックアップをまとめて、クライアントが先に進む前にフィードバックを提供できるようにするときです。

4.テンプレート

生物をグループ化すると、テンプレートが作成されます。これは、実際のページレイアウトが一緒になるときです。分子と有機体には独自の内部レイアウトがありますが、テンプレートの段階では、それらがどのように相互に補完し、相互作用するかを確認し始めます。それらが互いに関して配置されている場所。そしてそれらが全体としてどのように流れるか。テンプレートは、分子と生物のコンテキストを提供します。テンプレートには、カスタムコンテンツやオリジナルコンテンツではなく、プレースホルダーコンテンツが含まれていることに注意してください。

出典：BradFrost.com

5.ページ

ページは、プレースホルダーコンテンツを実際のコンテンツに置き換えることで、テンプレートを次のレベルに引き上げます。それはおそらく最終的なコンテンツではないでしょうが、それは最終的なデザインとコンテンツをより代表するでしょう。この時点で高品質で永続的なコンテンツを追加することは、Webサイトのテスト、レビュー、および調整が必要なため、無駄になる可能性があります。とはいえ、完成したコンテンツをプラグインすることは可能です。それは、そのプロセスのどこにいるかによって異なります。

これは、ウェブサイトが最も精査される段階です。取得したレビューとフィードバックによっては、分子、生物、テンプレートを変更する必要がある場合があります。これは、設計のバリエーションをテストする良い機会でもあります。

最終的な考え

アトミックデザインについてのことは、それが新しいものではないということです–言い回しはそうですが、理論はそうではありません。これは、ウェブサイトが長い間設計されてきた方法です。アトミックデザインの用語で話すことは、自動的に優れたデザイナーや開発者になるわけではありません。堅実な作業に代わるものではありません。

この種の用語を使用して方法論を明確にすることで、このように話すことの利点の1つは、開発者以外の人にとっても理解しやすいことです。プロセスをクライアントに説明できます。そして、組織化された開発者にとって、それはデザインを区分化する方法です。 1つのコンポーネント、または機能していない要素の小さなグループにドリルダウンできます。「このすべてに欠陥がある」と言う代わりに、木々のために森を見るのに役立ちます。

アトミックデザインにより、創造性に迷うことなく創造性を受け入れることができます。複雑な適応、問題の解決、クライアントのニーズへの対応、そして最終的には行き届くWebサイトの作成など、芸術性とスキルが最も必要とされる場所で時間を費やすことができるように、プロジェクトをより早く開始できるように基本要素と設計システムを調整します。基準を超えています。

そのWebデザインの勢いを維持し、すべてのWebデザインプロジェクトで従うべき優れたUIデザインの10のルールを確認してください。

ShadeDesign /shutterstock.com経由の注目の画像