フロントエンドの観点から見た Web デザイン_html/css_WEB-ITnose

コードは論理的で簡潔であることが必要です。そしてこれはデザインから始まります。箱のようなデザインパターンに非常によく合っており、手に入れた瞬間に非常にプロフェッショナルで省力化されたように感じます。

まず、フロントエンドとして、私がデザイン案を受け取るときに最初に見る部分について話しましょう:

1. ウェブサイト全体の背景色、デザインルールを守り、主に統一されたデザインを求めます

例えば、ボタンの幅、高さ、背景色、使用するテキスト、文字サイズ、文字色はすべて同じなので、コードを書くときにこれらをクラスに書き込むことができます後の再利用が容易になります。

2. Web ページの水平方向と垂直方向の分割を開始します。この時点で、コンテンツがどのレイヤーにあるか、どの列 (x, y) であるかがわかります。コードを書くときの非常に階層的な感覚

3. (x, y) 内のコンテンツを見てみましょう。これには主にコンテンツ領域 A の背景/境界線/パディング/マージンが含まれます。 (マージン) / 影 (影) / 丸い角 (境界線-半径)

4. 注目のアイコンや独自のタグなど、いくつかの詳細を確認します。これは、何千万もの Web デザイナーにとって最も難しい場所です。ウェブサイトを一目見て忘れられないものにするためには、ユニークなスタイルが必要です。

5. この時点で、Web ページ上の動的な効果だけでなく、ユーザーが使用中にそれを提示する方法など、インタラクティブ性の効果を考慮し始めました。

6. 圧縮コードや画像などの Web ページのパフォーマンスと読み込み方法。 7. データのやり取り