HTMLレイアウトデザイナーがWebデザイナーをそれほど嫌うのはなぜですか

レイアウトデザイナーとしての仕事中に、私は新人からデザイン（または左利きの人も）、プロまで、さまざまなレイアウトを処理する必要がありました。 そして、この間、私はレイアウトの最も典型的なバグのまともなサンプルを取得することができましたが、経験豊富な専門家でさえも回避することはできません。 一部の組織では内部に「設計レイアウトの要件」があり、理論上、設計がこれらの要件を満たしていない場合、問題なく修正のために送信する必要がありますが、実際には、ドキュメントをプッシュするよりも自分で必要な変更を加える方が簡単であることが多いと言いますここでトラッカーに。 しかし、これらの「要件」でも、明らかに可能な「ジャム」がすべて言及されているわけではありません。 私は最も人気があり普遍的なものを提供しようとします（個人的な拘束なし）。 はい、ところで、私はPhotoshop psdを使用するためのすべてのバグをもたらします-実際、これはWebレイアウトの標準です。 はい、ベクター内のレイアウトに出くわしませんでした（神に感謝しなければなりません）。



1.マークアップ。 ページのベース、いわゆるレイアウトまたはスケルトン。

a）最も有名であまり人気がありませんが、これからはそれほど人気が​​ありません-レイアウトの幅は常に表示デバイスの暗黙の幅より20-24ピクセル（正確には-24ピクセル以上）小さくする必要があります。 つまり 1024ピクセルの水平解像度用にドキュメントを準備する場合、最大レイアウト幅は1000ピクセルです。 理由が理解できることを願っています-スクロールバーの幅とウィンドウの境界を考慮します。 誰かが低い高さのスクロールバーを無視してもよいと思う場合、ユーザーは常にウィンドウを垂直に縮小できることがわかります...これはおそらく編集のための最も時間のかかるバグです（レイアウトデザイナーがそれを処理する必要がある場合）-時々統合されたグラフィックおよび/またはマークアップは単にこれを適切に行うことを可能にしません。 ピースをカットしたり、拡大縮小したり、残りのコンテンツを調整したりする必要があります。 ホラー、要するに！

b）モジュラーグリッド。 むしろ、グリッドではなく、メインブロック/写真に描かれたガイド-一度それらの間に定規を描くだけで、結果の値をcssに入れることができます。 重要ではありませんが、それは人生を本当に素晴らしいものにします。 ガイドのないレイアウトは非常にまれであることに注意してください。 しかし、ほとんどの場合、デザイナーはメインスピーカーのためのわずかなガイドで管理します。

c）組版の同じ既知の惨劇-いわゆる「魚」は通常完全に刻まれており、コンテンツの量が極端な例を挿入する人はほとんどいません。 そして、コンテンツがいっぱいまたは欠けている場合の特定のブロックの動作を明確にする必要があります（たとえば、画像の縦横比がレイアウトにレイアウトされているものに対応していません-振りかける、もしそうなら、どのように「入力」しますか、またはユーザーの名/姓Ivanov Ivanなどより長くなります）

d）「ゴム」。 ゴムが欲しいですか？ レイアウト設計者が疑問に思うように、最小解像度と最大解像度で2つのレイアウトを添付するように親切にしてください-どのブロックとどのようにストレッチするのか！



2.タイポグラフィ。

a）ヘッドセット。 「安全なフォント」の有名なリストがあります。 ほとんどの人はそれを知っています。 しかし、時々Myriad Proの一部がスカルプトされて起動する場合があります...広く普及しているという事実にもかかわらず、OSの標準パッケージに含まれていないことを説明し始めます。 ほとんどの場合、設計者がヘッドセットを交換しますが、学習し始めている人がいます...言ってください、しかし、あなたは@ font-faceプロパティを認識していません。 はい、私は知っていますが、1-変換できるように通常の高品質のフォントを与えてください（すべての種類のフォントスクワイル非常に厄介なレンダリングは「典型的な」ピンではありません）、2-私たちは著作権を侵害しませんか？ ほとんどの場合、はい、判明-フォントは支払われます。 要するに、多くの問題。

b）スムージングフォントは常にオフにする必要があります！ また、ブラウザの1つがそこで何かを実行できることを「扱う」必要はありません。 ええと、IEは、たとえば、できますか？ Photoshopが「突然」、「滑らかに」などのことを知らない しかし、実際には、マネージャーが1つのレイアウトを承認し、レイアウトの出力で、不格好で読めないごみがあります。 そして誰が責任があるのでしょうか？

c）リーディング。 少なくとも「auto」は常に小さくする必要があります（通常、これはサイズの次の「標準」値を意味しますが、正確ではありません-手動で選択する必要があります）、むしろ特定の値です。 CSSは常にポイント値とリーディングの両方を必要とするためです。 そして、あなたはそれを信じないでしょう-私のキャリアの間、主要な価値の窓で、私はおそらくすべての可能な価値を原則的に見ました。

d）非デフォルト（100％）の文字と単語の間隔もまた、緊張を強めます-それは何ですか？ 「古い設定」のままですか？ デザイナーの気まぐれ？ または本当に意識的なトリック-あなたは明確にする必要があります。

e）テキスト効果のうち、影のみが許可されます。エミュレートできるすべての機能（グローとストローク）、内側の影とグラデーションはcss（およびjsを通じても「喜び」）でサポートされません。



3.エフェクトとグラフィック。

a）レイヤーの効果を減らすことは避けたほうがいいです。一部の効果はCSSを介して実装でき、これが最適化です。

b）レイヤーと効果では、どのような状況でも、下層レイヤーに依存するため、ノーマル以外のレイヤーブレンディングモードを使用しないでください。これは、レイヤーを平坦化し、グラフィックを使用して貼り付ける場合にも適用されます。 これは一般的に壮大です！ 何らかの種類のオーバーレイがスタックしているため、1つの方法しかありません-すべてのレイヤーを減らして要素をピクルスにすることは、特に大きな半径のグロー/シャドウがある場合、ベクトルでレンダリングすることに似ていることに注意する必要があります

c）効果を賢く使用する-なぜラベルを1色にし、「カラーオーバーレイ」効果を使用するのか？ なぜ外側と内側の影を同時に使用するのですか？ など 勾配-わかりました、個別に交渉します...

d）埋め込みグラフィック（アイコン、ボタン、その他の装飾）の場合-レイヤーをまとめて、レイアウト設計者が目的のレイヤーを探してレイアウトを調べないようにすることをお勧めします。 また、スマートオブジェクトを埋め込む方が良いです。埋め込まれた画像は非常に迅速に作成され、必要に応じて変更できます。



4. その他。

a）すべての設計要素と添付のガイドを備えた既製のcssスプライトがあればいいのですが、これはNF領域のものです！

b）以下をリストする説明ノートをレイアウトに添付することをお勧めします。

-使用済みのヘッドセット（ページのメインフォントファミリをすぐに登録し、個々のブロックのみで変更できるようにするため）。

-「非自動」リードおよびインターバルを使用したブロック。

-カラースキーム-メインテキストブロックにすぐに指定された色（使用するすべての色はリストに意味をなさない）、リンクの色-デフォルトでは、ホバー時、訪問時; 使用されるグラデーションの参照色など



これがおそらく主なものです。 ご覧のとおり、デザイナーがこれらの点を考慮することはそれほど多くなく、ストレスもありません。 しかし、確かにレイアウト時間は半分に短縮されます！ 誰かがこれを行動のガイドと考え、少なくとも部分的にレイアウトを改善してくれたら嬉しいです-そして突然彼らは一緒に働くようになります。



PS私は、あなた自身が、どんな理由で、イラスト入りの例を投稿しません。 ご質問がある場合は、お問い合わせください。

PPSありがとうUFO！