ウェブデザイン：個人へ

こんにちは、Habrachitatel！ 私はWebデザイナーとして働いていますが、今日も前回の記事で始まったテーマの開発を続けていきます 。 つまり、サイトを作成するときに通常一緒に働く2人の専門家の相互作用について話しましょう。 この記事は、デザイナーと、レイアウトを操作する際の典型的な間違いに焦点を当てています。



Photoshopで作業しているWebデザイナーのDmitryとレイアウトデザイナーのVladimirが参加する8つの状況を以下に示します。 これらの2人は自分のビジネスを知っていますが、常に対立があり、時々、一方のモニターを頭につけて他方を攻撃したいという奇妙な欲求があります。 しかし、私たちはすべて文明化された人々であり、そのような非難を許すことはできません。 したがって、これら2つの貴重な専門家の間の紛争の原因のいくつかを理解することになります。

1.シャープネス

ドミトリー（D）はサイトのレイアウトのレンダリングを終了し、明確な良心をもってウラジミール（B）に提供します。 このサイトはシンプルなので、レイアウトデザイナーが1日で管理しました。 しかし、レイアウトはDmitryにとってやや恥ずかしかったです。

D：情報提供者はどうですか？ 小さくなったようです。
Q：四方から1ピクセルずつトリミングする必要がありました。
D ：？
Q：明確な境界がありません。ぼやけたピクセルを削除しました。

レイアウト設計者は、設計者が計画したよりも少し多くウィジェットをトリミングする必要がありました。 その結果、レイアウトに余分なインデントが表示されました。 しかし、これが唯一の問題ではありませんでした。 後に、厳密に垂直線と水平線を持つレイアウトのすべてのグラフィック要素も十分に明確ではなく、最終的にユーザーの視力に負担がかかり、頭痛の種になることが判明しました。

すべての画像はクリック可能です。

誰のせいですか？

ドミトリーが情報提供者に対する彼の行動の違法性をウラジミールにどのように説得しようとしても、ドミトリーは依然として100％有罪である。 タイプセッターは、要素をカットするピクセルを推測する必要はありません。

どうする

Photoshopはベクターグラフィックスをサポートしています。 しかし、たとえば、正方形を作成すると、ほとんどの場合、その境界線はあいまいになります。 これは、正方形のサイズを指定するときにマウスが常にピクセル間に正確にあるとは限らないためです。この場合、プリミティブの境界線は隣接するピクセルに接触し、半透明になります。

これらの不正確さをすぐに修正することはすぐに優れています：隣接するピクセルに触れることなく、プリミティブの境界をズームインおよびズームアウトして正確に示すことができます。または、正方形の消しゴムを使用できますが、プリミティブをラスタライズする必要があります。 一般に、問題は迅速かつ簡単に解決されますが、それを忘れてはいけません。 同じことがアイコンと細いストライプにも当てはまります。 垂直および水平の境界線/線がある場合は常に、極端な明瞭さを制御する必要があります。

2.擬似3D

現在、Dmitryは彼のレイアウトの明瞭さを監視し、ユーザーとVladimirの間で片頭痛を引き起こしなくなりましたが、これは最初の簡単なテストでした。 新しい注文、新しいレイアウト。

Q： 1日で作らなければなりません。

3日が経ちました...

D：ウラジミール、問題はありますか？
Q：レイアウトには非常に多くの影付きのグラデーションがあるため、眠れない夜とRedBullを少し必要としましたが、最終的には管理しました。
D：わかりました、注文は失敗しましたので、自分で整理しましょう、新しいものがあります。 この2日間の余分な日は、お客様にとって非常に重要なものでした。
Q： ...
D：ウラジミール？

誰のせいですか？

さて、再びこの厄介さ。 顧客はレイアウトを気に入っており、承認さえしましたが、レイアウトプロセスには予想よりもはるかに時間がかかりました。 なんで？ 一方では、レイアウト設計者による作業量の不正確な推定、他方では、レイアウトは擬似3D要素でオーバーロードされます。

どうする

影-明確な境界線がなく、オブジェクトを拡大し、場合によっては透明度を使用する必要性を追加します。 時々、影は隣接するオブジェクトと交差することがあり、これはレイアウト設計者にとって本当のhemoです。 考えてみてください：彼らは本当に情報や機能的なアイデアを持っていますか？ わからない？ その後、それらを削除します。 はい、CSSを使用してシャドウを実装できるようになりましたが、ほとんどの場合、デザイナーが意図したとおりにシャドウはどこにも表示されません。

グラデーションは、影に比べてそれほど大きな問題ではありません。 時には、スタイルの滑らかさを非常に強調して、レイアウトを落ち着かせます。 また、グラフィックを乱雑にしたり、グラジエントが重要でない場合は、余分なコードを追加することもあります。 そして、非線形勾配について話している場合、この場合、その使用の必要性を200％確信する必要があります。

3.透明性

ドミトリーとウラジミールは新しいプロジェクトに取り組む準備ができています。 はい、1つの注文が失われ、評判の一部さえ失われますが、それらは決定的で容赦ありません。 試してみると評判を回復できます。 とても。 レイアウトの準備が完了し、承認され、明快さが整い、疑似3Dが適度になり、トラブルが発生することはありません。

Q：このテキストは何色ですか？
D： 「何」という意味で、属性を見てください。
Q：見えます。 属性は黒ですが、テキストは明らかに明るいです。
D：スポイトを使用します。
Q：この色の数字を正確に言うことができますか？
D：すぐに表示されます...
Q：そして？
D：ピペットするだけ。
Q： ...

誰のせいですか？

レイアウトデザイナーも、デザイナー自身も、レイアウト内のテキストの色を正確に判断できない場合があります。 これはどのように可能ですか？ 簡単です。 テキストの色を選択するとき、デザイナーは色属性ではなくレイヤーの透明度を使用することがあります。 より簡単で高速です。 背景、たとえば赤があります。 テキストではなく、明るいはずですが、白ではありません。 デザイナーはテキストの色を白に設定し、レイヤーの透明度を使用して再生します。その場合、キーを見逃すことはありません。 しかし、結果の色の本当の意味を知ることは不可能です。 非常に悪いデザイナーの習慣。

どうする

すべてが非常に簡単です。テキストに透明度を使用しないでください。 透明度なしですぐに色を取り、将来、問題から身を守ります。

すでにそのような不快な状況にある場合、唯一の簡単な方法は、テキストを巨大なサイズに設定して太字を追加することです。そうすれば、ピペットを使用する方が正確になります。 テキストがラスタライズされていないことが望まれます。

もちろん、透明性は完全に不要です。 たとえば、透明度がほとんどないフローティング水平メニューは、視覚的にレイアウトを容易にし、ユーザーを混乱させません。

4.オーバーレイ効果

これにより経験が得られますが、デザイナーとレイアウトデザイナーの関係は改善されていません。 少なくとも同僚が何をどのように行っているかを表面的に理解する必要があります。そうしないと、競合が発生します。 たとえば、次のように：

Q：このレイヤーでオーバーレイ効果を使用しましたか？
D：はい、問題はありますか？
B：大。 レイヤーの相互作用を削除するまで、構成しません。
D：自分で掃除できます。
Q： ...

誰のせいですか？

レイアウトでブレンド効果を使用しないでください。 決して。 これらの効果はPhotoshopでのみ機能します。 設計者はこのルールを一度だけ学ぶ必要があります。

どうする

ブレンド効果の使用が本当に必要な場合は、レイアウト内のすべてがレイヤーの相互作用なしになるようにレイヤーを変換する必要があります。そうしないと、タイプセットに役に立たなくなります。 おそらくこのために、デザイナーは相互作用の結果を別の画像にマージして再度使用する必要がありますが、これはもちろん不便ですが、レイアウトデザイナーに影響を与えることは受け入れられません。

5.テキスト属性

何があっても、私たちのカップルは働き続けます。 そして、ウラジミールが新しいDmitryのすべてのレイアウトをすでに自然に恐れているかどうかは関係ありません。注文は進行中です。 新しいプロジェクトには大規模なスケジュールは必要ありませんでした。ミスをする場所はまったくありませんでした。それがレイアウトデザイナーの考えです。

Q：ドミトリー、なぜこのテキストでso笑されたのかわかりません。
D：グラフィックがほとんどなく、すべてがテキストにかかっているので、最大限に使用しました。
Q：高さを増やし、幅を減らし、記号間の間隔を変更しました-ある種の壮大な計画ですか？
D：テキストをタイプセットする方法を学ぶ必要があります。
Q： ...

誰のせいですか？

テキストに属性を適用し、そのプロパティを変更するのは、そのようなテキストが後でラスタライズされて、たとえば一部のスライドで使用される場合のみです。 しかし、今では、スライドであっても、テキストをラスタライズしないようにしています。 フォントデザイナーのニーズに合った多くのフォントがあります。 レイアウトデザイナーの生活を難しくしないでください。価値はありません。

どうする

テキストがラスタライズされていない場合は、プロパティに変更を加えないでください。さらに、スタイルのタイプについても説明しています。 太字フォントをどこかで使用する場合は、Photoshopの機能に太字を追加しないでください。 適切なフォントにはそれぞれ、特定のフォント用に特別に適合された既製のフォントスタイルがいくつかあります-これで十分です。

6.色

すべてが終わった後、ウラジミールは別のデザイナーと仕事をする機会について真剣に考え始めます。そして、私たちのDmitryは、どんな場合でも苦労せず、単に自分の仕事をするレイアウトデザイナーと一緒に喜んで仕事をします。 唯一の問題は、Dmitryがそのようなレイアウトを見つけられないということです。レイアウトがないためではなく、デザイナーが組版の基本さえ理解していないためです。これはDmitryとVladimirの両方にとって悲しいことです。

D：レイアウトを提供したとき、3つの主要な色があり、オレンジはレイアウトにあったものと一致しなくなりました。
Q：オレンジと一致したコードはどれですか？
D：スポイトを再び使用することはできませんか？
Q：できます。
D：それでは問題は何ですか？
Q：レイアウトが思ったよりオレンジ色になっています...

誰のせいですか？

あなたがデザイナーである場合、色に関するすべての作業は完全にあなた次第です。 レイアウトの不正確さは、その後、最も不適切な瞬間に確実に感じられることを忘れないでください。 デザイナーにとって明らかなことは、レイアウトデザイナーにとってはまったく明らかではありません。常に覚えておいてください。

どうする

Dmitryは、レイアウトのキーの1つとしてオレンジ色を使用しました。 しかし、彼は毎回新しいオレンジ色の要素のカラーコードをコピーするのが面倒でした。 その結果、ウラジミールは、コードと一致しないオレンジ色の完全なセットを持つレイアウトを取得します。 どうする ほとんどの場合、レイアウト設計者は最初に出会ったオレンジ色のコードをすべての場所で使用し、ほとんどの場合これに気付かないことはありません。

7.明るさ

デザイナーは、レイアウトデザイナーに自分自身を嫌わせる方法がたくさんあります。 たくさん。 しかし、私たちはほんの少数を検討します。 ただし、目標を達成するには十分です。 競合は突然発生する場合もあります。 完璧なレイアウトが完璧に作成されました。 しかし、ウラジミールはどこかにキャッチがあると感じています。

D：冗談ですか？
Q：レイアウトを完了しましたが、なぜ冗談を言うのですか？
D：はい、レイアウトの要素の3分の1がありません！
Q：それはできません、私はそれにすべてをしました。
D：冗談で、レイアウトを開いて、見せてくれたものと10の違いを見つけてください！
Q：違いが見当たりません...
D：とても面白い。
Q： ...

誰のせいですか？

状況は信じられないほどですが、絶対に現実的です。 どちらも部分的には責任があります。具体的に誰かを選び出すことは不可能です。 これらの貧しい人々がようやくこれが起こった理由を理解するまで、多くの時間が経過し、多くの言葉を話すことができますが、それは最も楽しいものではありません。 かなり不快です。

どうする

他の誰かが推測していない場合-問題はモニターの異なる輝度設定にあります。 デザイナーは、組版モニターに比べて輝度が低いモニターのレイアウトに取り組みました。 Dmitryは、主に明るい色でサイトの作業を行いました。白が多く、一部の要素は明るい灰色です。 彼のモニターでそれらを完全に区別しましたが、高輝度とLEDバックライトを備えた新しいモニターでは、これらの要素は点の空白範囲ではまったく見えません。
これは実際には実際の状況です。 バナリティーの解決策は簡単です。モニターと同僚がほぼ同じ明るさ/コントラスト設定を持っていることを確認してください。 1回のキャリブレーションテストでモニターをキャリブレーションすると、世界はすぐに親切になります。

8.致命的なエラー！

次の状況の後、私たちのカップルは多くの最も検閲されていない式を使用したので、以下にそれらを与えることはできません。 新しいプロジェクトは非常に大規模でした。

誰のせいですか？

もう問題ではありません。

どうする

実行する。

PS。 ご清聴ありがとうございました。この記事が上記の状況に陥らないようにすることを願っています。また、インターネット環境の品質はそれらに大きく依存しているため、デザイナーやレイアウトデザイナーにも理解してほしいと思います。
すべての画像は記事専用に描かれ、クリック可能です（元のサイズで表示するため）。