収集されたWebサイトのpsdレイアウト要件

こんにちはフロントエンド開発者！



psdレイアウトでサイトを作成するとき、デザイナーが描いた要素の一部を実装するという問題に常に直面しています。 ボタンであれ、トリッキーなグラデーションであれ。 これに作業時間を費やしてかわすか、デザイナーにやり直してもらうか、極端な場合はスコアを付けて多少似たようなことをする必要があります。



顧客が非常に注意深く、最後の決定を下すことが多い場合、最終的なものと設計者が描いたものとの間の矛盾に問題があります。 これらのすべての要因が開発者に暗いスポットを置き、デザイナーは彼の賞を受賞し、すでにカクテルを飲んでいますが、彼らはトマトを投げつけて私たちを無能だと非難しますが、問題は私たちからは遠く、デザイナーは時には馴染みさえありませんレイアウトの基本で、いくつかのものが描画できないことを知りません。



私は頭の中で少し重くなり、会社での地位を獲得しました。ある時点で、私はそのようなことができないことに気づき、psdレイアウトで要件を収集し始めました。



しばらくして、これらの標準と要件の導入によるすべての利益を評価することができました。



-デザイナーはより組織的になり、ルールに従う必要があることを覚えています。その結果、psdレイアウトの重量が少なくなり、未使用のレイヤーがなくなり、レイアウトデザイナーだけでなくデザイナー自身にとっても構造が明確になります。 将来、何かを仕上げる必要がある場合、psdファイル全体でブロック内のレイヤーを探す必要はありませんが、ブロック内のフォルダーに移動してすぐに作業を始めます。 この場合も、ファイル内に以前のバージョンのブロックを含むフォルダーを直接作成できます。



-「正しい」レイアウトを受け取ったレイアウト設計者は、リードタイムをより正確に評価できます。他の場所に移動して何かやり直しをする必要がないことを正確に理解しているため、ここでリードタイムの​​短縮も追加できます。 ルールに準拠する場合、csshat.com + lesshat.comのようなものを使用することが可能になるため



-デザイナーが「行った」ことをすべてブラウザに実装できるため、出力結果は描かれたものとより一致します。

ボトムライン：デザイナーは幸せです（何もやり直す必要はありません）、レイアウトデザイナーは幸せです（すべてが順調で、夜は追加の作業に費やされ、神経は大丈夫です）、顧客（コンパイルされたレイアウトは承認されたレイアウトに対応します）、その結果、誰もがこれらの導入から利益を得ますルール。



以下に要件のリストを示します。



1）レイアウト内のグリッドへの準拠（グリッドが何であり、「調理」する方法がわかっている場合）。

なんで？ o_O：

-純粋に審美的な喜び

-ページフレームをすばやく組み立てて要素を配置する機能

提示されたレイアウトに従ってページを作成します。これにより、レイアウトはあなたが描いたものに関してより正直になります。



2）グラデーションがレイヤーに適用される場合、通常のブレンドモード（ブレンドモード：通常）とその実際の色を使用します。

半透明のグラデーションや、「乗算、スクリーン、オーバーレイなど」のような複雑なブレンドモードは使用しないでください。

悪い： joxi.ru/Md6l32D

良いjoxi.ru/M2w9Nweと別の例joxi.ru/11ndBHq



3）「レイヤーオンレイヤー」を使用して、グラデーションなどのさまざまな効果を作成することは望ましくありません。レイヤーは1つでなければなりません。

例： joxi.ru/AGx4CQy



4）グラデーションの境界線なし（境界線、ストローク）。



5）複雑なブレンドモードの使用は、すべてのレイヤープロパティ（内部シャドウ、ドロップシャドウなど）に適用されます。



6）必須のレイアウトで使用されたフォントをTTF、OTF形式のレイアウトに添付します



7）可能であれば、レイアウトで2つを超える非標準フォントを使用しないでください。その数はブラウザでのページのレンダリングに強く影響し、ユーザーのサイトに対する態度に悪影響を及ぼします。



8）Webページの標準タイポグラフィ要素（見出し、段落、表、リスト、引用ブロック）のデザインを提示する独立したレイアウトが必要ですjoxi.ru/MKnCZQM



9）典型的なボタン、リンク、「ガイダンス」の状態の要素、クリックを描いた場合、これがどのように機能するかを考えさせないでください。 リンクがある場合、ホバーに色を表示し、ボタンがある場合、ホバーまたはプレスにその外観を表示し、「非アクティブ」状態を表示します。 これは、そのような要素、ギャラリーの矢印などに適用されます。 など joxi.ru/ZSmaLye



10）レイアウト全体でブロックの一部を収集しないように、各ブロックは独自のフォルダーに存在し、正しい人名を持っている必要があります。 joxi.ru/Agsfo3L



11）サイトの一部（モーダルウィンドウ、ドロップダウンパネルなど）を表示する非表示のレイヤーまたはフォルダーがある場合-フォルダー/レイヤーをハイライト表示する必要があります-見逃さないように色で、近くにある名前も必要ですその機能の意味で。 joxi.ru/G1h9LbN



結論：これらの推奨事項を順守することで、プロジェクトの作成段階-レイアウトを作成されたレイアウトにできる限り正確に実現し、以下を回避できます

-レイアウトとレイアウトの不一致;

-レイアウトの承認に関する問題。

-ブラウザー間の互換性とレイアウトに関する問題は一般的に機能します。



ありがとう