レイアウトデザイナーの頻繁な不満：「彼らは理解できないレイアウトを作ります！ インデントダンス、さまざまなサイズとスタイルのヘッダー、グリッドから要素が落ちる！ 私は彼らと働きたくありません。」 設計者は、やがて、レイアウト設計者がレイアウトを台無しにすることを訴えます。
これらの苦情は補完的なものです。 問題の根本を理解し始めたら、両方とも責任があります。 これら2人のフロントワーカーを調整する方法は？
ほとんどの場合、両方を変更する必要があることを理解する必要があります。
デザイナー：
1.グリッドを使用する
「Webデザイナー」と呼ばれる多くの人々がこの基本的な仕事の要素を無視しているのは驚くべきことです。 グリッドは、レイアウトの厳密な水平階層を定義します。 ほとんどのレイアウト設計者は既製のグリッドを使用するか、独自のグリッドを作成します。これにより、レイアウトの精度と速度が向上します。
Bootstrapなどのメッシュの仕組みを学びます。
列のサイズを自分で計算するのが難しい場合は、特別なオンライン計算機を使用してください。
10、8、または4ピクセルのグリッドを使用します。 マテリアルデザインの概念とこの記事を学習すると、8pxメッシュを学習する上で非常に役立ちます。
2.レイアウトの基本を学ぶ
npm、git、またはプリプロセッサを操作して、Javascriptの詳細を掘り下げる必要はありません。 何ができるのか、何ができないのかを理解するには、レイアウトをマスターする必要があります。 レイアウトの作成方法を自分で理解すれば、レイアウトデザイナーに設定したタスクの難易度を客観的に評価でき、その場合は単純化できます。
3.さまざまな状態のオブジェクトの状態を表示する
多くの場合、デザイナーがホバー効果（オブジェクトをホバーまたはクリックしたときに何が起こるか）をレイアウトデザイナーに表示しないか、または通知さえしません。 そのような場合、レイアウト設計者はしばしば、ホバー効果を自分の頭の中で見ているようにします。
レイアウト設計者に考えさせないでください。 次のようなオブジェクトの状態を表示できます。
- 残りの要素とは異なる要素を1つ作成し、その上に「ハンド」カーソルを置きます。
- モーダルウィンドウの場合は、別のレイヤーを作成します。このレイヤーは簡単に非表示にでき、例やプロトタイプを使用して、ウィンドウの表示と非表示を表示できます。
ホバーのすべてのオブジェクトを別のシートに転送して、前後の状態を表示することもできます。
4.タイプ
レイアウト上のすべてのオブジェクトを入力します。 これがOpen Sans 1.2emのタイトルである場合は、どこでもOpen Sans 1.2emとします。 ボタン、段落、行送り、インデントでも同じことを行います。 すべてが同じに見えるべきだと言っているのではありません-いいえ。 タイプされたオブジェクトが多くなればなるほど、レイアウトデザイナがオブジェクトを操作しやすくなることを理解する必要があります。 レイアウトデザイナーと完全に連携したい場合は、Atomic Design + BEMの組み合わせを検討してください。
5.レイヤーの名前を変更する
怠zyな人はこの点については話しませんでしたが、レイアウトデザイナーがランダムに配置されたレイアウトレイヤーを思いつくことが多すぎます。 意味に応じてレイヤーの名前を変更し、タイプ別にグループ化します。 名前にはBEM構文を使用でき、ボタン、ヘッダー、フッターなどの一般的な用語も使用できます。
6.画像とアイコンを収集する
レイアウトからすべてのアイコンと画像を収集し、意味に従ってプロジェクトフォルダーに配置します。 たとえば、img / photos / photo1.jpg、img / icons / facebook.svgなどのようになります。 この簡単な手順により、レイアウト設計者は、グラフィックを挿入するときに、レイアウトをより迅速かつ効率的に操作できます。
7.キットを作成する
キットとは、システムのすべてのタイプされた要素が登録されている別のシートを意味します。たとえば、すべてのレベルと種類のヘッダー、ボタンとそのバリエーション、分割線などです。 以前に入力したオブジェクトがある場合は、別のシートでキットに簡単に転送できます。 これにより、レイアウト設計者は、BEM手法を使用してベースを簡単に準備し、レゴブロックのようなサイトを構築できます。
8.コメント
レイアウトに静的レイアウトを提供する場合、質問が発生する可能性のある設計要素に関するコメントの最大数を残してみてください。 怠けてはいけません。 すぐに時間をかけて、将来のためにたくさんの質問を省いてください。 インターフェイスを作成するためのほとんどのプログラムでは、これを最も便利な方法で実行できます。
レイアウトデザイナー：
1.デザイナーの目を通してレイアウトを見る
レイアウトを開始する前に、デザイナーのアートワークを評価することは非常に重要です。 このオブジェクトまたはそのオブジェクトを作成するのは難しいと思うかもしれませんが、最初にデザイナーがそれを行った理由を理解してください。 設計者に独自のオプションを提供します。ほとんどの場合、彼はこの特定のソリューションを使用した理由と、レイアウトを損なうことなく変更または削除できるかどうかを説明します。
2.デザインを描いてみてください
デザイナーの仕事をよりよく理解し、実際に彼の仕事を評価するには、彼の役割で自分自身をテストしてください。 グラフィックを操作し、1つまたは複数のレイアウトを描画するプログラムを選択して、デザイナーに対して行うすべての要件を順守します。 あなたの作品をアーティストとして評価し、チャットルーム、フォーラム、友人、知人の人々に贈りましょう。 これは、デザイナーがパンを食べても無駄にならないことを確認する別の理由を示します...まあ、またはアーティストがいつもあなたの中に眠っています。
3.デザイナーのために意思決定をしないでください
非常に多くの場合、レイアウト設計者は、いくつかの「ささいなこと」を無視して、それらを構成しません。 彼らは、デザイナーが単に持ち去られ、不必要な「きれいな女性」を描いたと信じています。 いや！ 優れたデザイナーは、デザインを描く製品を研究し、要素、構成を熟考し、このレイアウトにすべてを配置して、単一の写真を作成します。 設計の変更について疑問がある場合は、必ず設計者に確認してください。
4.対話を維持する
デザインについて話し合う。 レイアウトを受け取ったら、それを評価し（最初の段落に従って）、設計者に変更を加える必要がある場所と理由を伝えます。 アダプティブグリッドとは何か、なぜそれが特に必要なのか。 論争の的となっている点を明確にする：デザイナーが単に過失を犯したのではなく、意図的に作曲のリズムを破壊した可能性があります。 ボタン、リンク、または画像にホバー効果がない場合は、どのように見えるか、どこに描画されるかを尋ねます。 物議を醸す問題について話し合うようにしてください。そうすれば、あなたの仕事だけでなく、デザイナーの仕事も改善されます。
5.仕事のための一般的なツールについて話し合う。
レイアウト設計者は、レイアウトに不便な形式のレイアウトを取得する必要があり、サイズ、色、影、またはインデントを見ることは非常に問題になります。 どちらのプログラムが最適であるかを設計者に決定してください。 市場にあるさまざまなソフトウェアにより、これを簡単に行うことができます。 ユーザーインターフェイスの作成に関しては、Adobe製品（Adobe XDなど）、Sketch、Figma、Framerのいずれかを選択できます（先日、次のリリースでインターフェイスを作成する機能がリリースされました）。 1つまたは複数のプログラムを選択し、対話方法を理解します。
おわりに
2人のフロントワーカーの仕事で最も重要なことは、互いの能力を理解し、コミュニケーションをとることです。 どの関係でも、一貫性と良好なコミュニケーションが必要です。 これらのポイントを一度に1つずつ、またはすべてを一度に導入すると、仕事が心からの喜びをもたらします。
Grigory MochalinとIlya Dzenskyがこの記事に取り組みました。