完璧なpsdレイアウトのための18のルール-デザイナーにとって便利なチェックリスト

一般原則-結婚しないでください。

結婚しないでください。 結婚に合格しないでください。

トヨタ



既に実装済みの設計を持つプロジェクトを開発に取り込むことはめったにありませんが、これは起こります。 レイアウトの問題のある段階でスタジオ内にモックアップを作成すると、開発者はプロジェクトマネージャーまたはデザイナー自身に、何を意味し、どのように見えるかを確認できます。 しかし、顧客が既にモックアップのために誰かにお金を与え、その後開発のためにあなたに来た状況では、これは機能しません：デザイナーと開発者の間で通信することが不可能になり、モックアップの欠陥を修正する人はいません この記事では、レイアウトを送信する前に、悲嘆デザイナーがどこに行き、何をチェックするかを学びます。

「ほぼ」グリッド上

グリッドは、レイアウトを簡素化し、主要な要素の位置を決定するように設計されています。 場合によっては、デザイナーが12列のグリッドから意図的に離れて、並外れたデザインを作成します。



ただし、レイアウトの作成中にグリッドに準拠している場合は、これが正しいことを確認してください。 レイアウトデザイナーは、ページごとにデザインが大きく異なる可能性があると不平を言っています。同じブロックが左または右に表示され、アイコンのサイズが異なり、ボタンが互いに似ていません。



要素がグリッドからノックアウトされると、レイアウトプロセスが遅延します。ページが視覚的に一致していない場合、ブロックの位置の計算や編集にさらに時間がかかります。 また、グリッドを超えるオブジェクトがより小さな対角線を持つデバイスでどのように動作するかが不明であるため、ページの応答性にも問題があります。

Sibiriksスタジオの開発者、Sergey：

「おそらく主な問題は、すべてのデザイナーが少なくともhtmlとcssの基本を知っているわけではないため、レイアウトがレイアウトに関係なく行われることです。 たとえば、モバイルバージョンとデスクトップバージョンのコンテンツの複製が不可欠になるように、アダプティブ上でブロックが再コンパイルされると、よく起こります。これにより、レイアウトの作業が遅くなります」。

ウラジミール、スタジオ長：

「プログラマーが「これは不可能です」と言って、必要に応じて実行するケースが100万件あります。 それで可能です そして、プログラマーにとっては不便ですが、設計の観点から興味深い制限のほとんどは人為的なものです。 明確な境界線を描くことは不可能です。 反復的な議論と計画の実施のみを試みます。 試して、見て、話し合って、試してみてください。 そうしないと、すべてがくすんだパターンになります。 一部のプロジェクトでは、これで問題ありません。 しかし、一部のために-いいえ。 コンベアの精神でやるのですか、それとも祭りの仕事をするのですか？ これについては、 創造性のスライダーで詳しく説明しました。」

レイヤーのコピーと貼り付け

Photoshopでは、レイヤーを乗算するのが便利です。スタイルとすべての設定とともにコピーし、適切な場所にドラッグします。 創造的な衝動で、一部のデザイナーは、レイヤーに適切な名前を付けて自分自身でそれらを配置することを気にせず、その後、レイヤーが属するブロックとレイアウト上のどこを探すべきかを理解できなくなります。







メイクアップに転送するときは、レイアウトロジックに基づいて、レイヤーに一意の名前が付けられ、フォルダーに分散されていることを確認してください。 そして、不必要な、または少なくとも接着剤のような、互いの間のエフェクトのレイヤーを削除することを忘れないでください（なぜこれを行うことができないのか-以下）。

インデントインデント

理想的なレイアウトでは、ブロックのすべてのインデントと寸法を統一する必要があります。 ここにはもう1ピクセルあります。1ピクセル少なくすれば、レイアウト設計者は座って使用方法を選択できます。 クライアントは異なりますが、おそらくページの外観には影響しません。誰かにとっては、余分なピクセルがすべて印象的です。 または、おそらく、テスターはPixel Perfectプラグインを介してレイアウトソースに完成したレイアウトを課し、そのような不整合をエラーと見なして100万個のバグのリストを作成します。 ヘッダーとフッターのコンテンツ領域のインデントがすべてのページで同じであることを確認してください。



オブジェクトには隠れた危険もあります。Photoshopでフォームを作成するときに、デザイナーがグリッドを使用していても、次のエラーが発生する場合があります。







レイアウト設計者はこれらの微妙な点を考慮に入れることはほとんどなく、おそらくグリッドに正確に収まるようにオブジェクトのサイズをカットします。 したがって、すべてのオブジェクトは整数サイズでなければならないというルールがあります。そうしないと、結果が元のレイアウトとは大きく異なる可能性があります。

「目で」色

Photoshopには便利なツール-スポイトツールがあり、デザイナーはそれを使いたがります-色数を覚えておく必要はありません。 ただし、要素の端を突くと、背景の色合いによって色が歪むことがあります。 もう1つの危険は、スポイトの半径が1ピクセルを超える場合、Photoshopは隣接する色の間の平均値を表示することです。



アンドレイ、開発者

「デザイナーが色を決定するのは特に目障りです」。その後、さまざまなサイズのグレーのセットに座って、どのグレーを使用するかわからない。 これは、内部ページで作業するときにデザイナー自身が使用できる、プロジェクトの平凡なカラーマップがないという事実と、レイアウトデザイナーによるものです。

暗黙のルールでは、番号＃000000の下に黒を使用することは推奨されていません。白の背景とは対照的です。 違いを見てください：







レイアウトデザイナーを困らせるデザイナーのもう1つのライフハックは、色（テキストを含む）を明るくすることです。デザイナーは単にレイヤーの透明度を上げます。 レイアウト設計者はピペットを使用する必要がありますが、エラーの可能性が高くなります（特に要素のグラデーション塗りつぶしの場合）。

ラスタライズされた要素

テキスト

デザイナーがしばらくの間、印刷会社で印刷するためのレイアウトを行った場合、テキストをラスタライズする習慣に罪を犯す可能性がありますが、レイアウトデザイナーにとってこれは深刻な問題になります。そのようなテキストはコピーできません。 そして、これは最小の問題です。レイアウトデザイナーは、ラスタライズされたテキストのスタイル、サイズ、色をどこで取得しますか？これが問題です。

影とグラデーション

レイアウト中、レイヤーがラスタライズされるときに、このゾーンのさまざまな領域でピペットでつつくよりも、開発者がシャドウまたはグラデーションのパラメーターを見る方が便利で高速です。 これにより、レイアウトが高速化され、結果に影響があります。色の遷移を間違える可能性が低くなります。



暗い背景（たとえば、ホバー）が画像に重ねられている場合、画像自体に接着することはできません。パラメータを確認できるように、別個の半透明またはグラデーションレイヤーである必要があります。

オーバーレイ効果

オーバーレイするとき、下層のコンテンツが考慮され、レイアウト中にそのような効果を転送することは簡単ではないため、レイアウト設計者はそれらをあまり好きではありません。 無駄ではありません。すべてのブラウザのバージョンが、デザイナーが意図したとおりに表示できるわけではありません。





異なるブラウザーでエフェクトをブレンド

フォントの問題

分数サイズ

通常、これは、たとえば、変換ツールがブロック全体に適用された場合に偶然に発生します。フォントは画像に比例して増減します。 問題は、ブラウザーが小数値を考慮せず、単純にそれらを最も近い値に丸めるということです。

多くのフォント

プロジェクト全体で、3つ以下のスタイルを使用することをお勧めします。これらのスタイルは、1つのヘッドセット（ライト、レギュラー、ボールド）のフォントでも、異なるフォントでもかまいません。 これは厳密な制限ではありません-それはすべてプロジェクトのタスクに依存しますが、フォントバリエーションが少ないほど、読者がテキストに集中するという特定の意味があります。 レイアウトとともに、そこで使用されていたヘッドセットを転送するか、少なくともGoogleフォントへのリンクを与えることがルールと見なされます。

開発者のアンドレイ：

「現在、ほとんどのブラウザはTTF、OTF形式のフォントから遠ざかりました。開発者が古いフォントを使用すると、どこでも正しく表示されません。 スタジオで私たちは長い間WOFFまたはWOFF2形式に切り替えているので、問題はありません。 フォントは、 ここまたはここで翻訳できます 。

カスタムフォントの使用

非標準フォントとそのスタイルは、Webバージョンの存在を確認する必要があります。 実際、そのようなフォントはページの読み込み速度に影響を与えます-それらを表示するには、ブラウザが最初にそれらをダウンロードする必要があり、しばらく時間がかかります。 良い方法では、非標準フォントの重量は1メガバイトを超えてはいけません。 また、ページにフォントが1つしかない方が良いでしょう。 さて、フォントにはお金がかかることを忘れないでください。 時々大きい。 フォントが特定のプロジェクトのために特別に開発された場合がありました-それは別のタスクです。

不器用なタイポグラフィ

段落間の行間隔とインデントがレイアウト上のブロック内で一致せず、ページごとに異なることがよくあります-それらが同じであることを確認してください。 見出しを段落から個別のテキストブロックに分けて、それらの間のインデントを手動で大きくしないでください。リード設定と段落を使用してください。

開発者Eugene：

「可能であれば、顧客自身が管理パネルから変更できると想定される場合、標準のテキストページに複雑な効果を使用しないでください。 ほとんどの場合、彼はそのような要素をdivで「ラップ」できます。 これはスニペットやその他のトリックで解決されることもありますが、コンテンツを入力する際に​​複雑さを引き起こします。

段落、段落、見出し1〜4レベル（h1、h2、h3、h4）、箇条書きおよび番号付きリストのレイアウトを明確に表示する必要があります。 さらに良いことに、これらすべてを別のドキュメント（ガイドラインまたはUIキット）に入れてください。 ここで、リンクの動作（アクティブ、ホバー、訪問済み）を追加できます。





Spasskaya TowerプロジェクトのUIキット

理解できないアニメーション

ボタンやドロップダウンリストなどの要素にはいくつかの状態がありますが、多くの場合、デザイナーはそのうちの1つだけを描画します。 これにより、たとえば、だらしないポップアップが表示されます。これは、レイアウト設計者自身がサンプルがないために行ったものです。



アニメーションとインタラクティブな相互作用に関係するオブジェクトがレイヤーに分解されていることを確認します。 たとえば、オブジェクトの上にカーソルを置いたときのビュー-1つのレイヤー、クリックしたときのビュー-別のレイヤー、静的なビュー-3番目のレイヤー。 同じルールがバナーにも適用されます。



レイヤーをアニメーションとインタラクティブな色でマークし、それらにコメントを付けることをお勧めします。 また、これがどのように機能するかをコメントに書き留めて、例を挙げることも非常に望ましいです。

ユージン、アートディレクター：

「PhotoshopはPhotoshopですが、今では非常に多くのプログレッシブツールがあり、その中に各要素に必要なコード行がすぐに作成されます。レイアウトデザイナーが設計レイアウトを作成済みのページに変えることは難しくありません。 一般に、もちろん、それはすべてレイアウトデザイナー自身に依存します。彼が普通であれば、どのエディターをペイントしても、結果は普通になります:)”

PNGアイコン

プロジェクトでは、タスクに応じてアイコンが異なります：デザイナーは自分の手でユニークなセットを作成する場合がありますが、 ここで百万のオプションの中から1つを見つけて必要に応じて変更する方が簡単で迅速な場合があります。



しかし、デザイナーがPNG形式のアイコンを使用することがあります-その中で、高解像度の画面でスケーリングすると（そして今では携帯電話でもピクセル密度が狂っています）、画像の端がぼやけています。 したがって、ルール：すべてのアイコンはSVG形式である必要があります。そのため、アイコンのサイズに関係なく、アイコンは明確なままです。



一部のレイアウト設計者は、アイコンが1つの場所（別のフォルダー）に収集され、その名前がレイアウト内のレイヤーと同じであることを好む。 別の方法は、SVG画像をメインファイルに埋め込む方が便利です。これは、別のフォルダーで目的のアイコンを検索するよりも、レイアウトからsvgをカットする方がはるかに簡単で速いためです。

チェックリスト

創造的な爆発では、すべてが正しく行われていることを追跡することは困難です。 レイヤーがコピーされて名前なしで残され、オブジェクトが列の端から少しはみ出しました。ここでは、フォントは正しいスタイルを選択する代わりに、組み込みのPhotoshop設定で誤って「フェード」しました。 そして、私たちのチェックリストを持っている人と！

Photoshopレイアウトをレイアウトに転送するために準備するためのチェックリスト

1. デザイナーがグリッドを使用した場合、レイアウト上のすべてのブロックはグリッド上に厳密に配置されます。
2. レイアウト上のすべてのオブジェクトのサイズは整数です。
3. ページ上の重複する要素は常に同じです。
4. すべてのレイヤーはフォルダーにグループ化され、レイアウトロジックに従って配布されます。 余分なものは削除され、同様のものは結合されます。
5. 統一された要素からインデントします。
6. レイアウト上の色は、プロジェクトの原色と一致します。
7. テキストとしてのテキスト（ラスタライズされていない）。
8. ブレンド効果、シャドウ、グラデーションはラスタライズされません。
9. ブレンド効果を使用することをお勧めします。
10. フォントには部分的なサイズがあります。
11. プロジェクトで使用されるフォントは、別のフォルダーに収集されます。
12. 非標準フォントとそのスタイルは、Webバージョンが存在するかどうかがチェックされます。 1つの非標準フォントの重量は1 Mbを超えません。
13. テキストの行間とインデントは統一されています。
14. すべてのアイコンはSVG形式であり、1か所で収集されます。 アイコンの名前は同じでわかりやすく、レイアウト上の同じレイヤーの名前と一致しています。
15. すべてのアクティブな要素にホバーのあるレイヤーがあります。
16. アニメーション/インタラクティブな相互作用に関与するオブジェクトは階層化されています。 バナー用-同様に。
17. アニメーションとインタラクティブな相互作用についてのコメントを示し、これがどのように見えるかについての例を示します。
18. プロジェクトの色とテキストスタイルのパレットを使用して、レイアウトのガイドラインが作成されました。