開発者向けのトップ10フロントエンドデザインルール

フロントエンド開発者としての私たちの仕事は、基本的に、コードを介して設計を実現することです。 デザインを理解し、その能力を発揮することは、その重要な要素です。 残念ながら、フロントエンドの設計を真に理解することは、口で言うほど簡単ではありません。 コーディングと美的デザインには、かなり異なるスキルセットが必要です。 そのため、一部のフロントエンド開発者は、設計面で本来あるべきほど熟練しておらず、その結果、彼らの仕事は苦しんでいます。

私の目標は、あるフロントエンド開発者から別の開発者へのわかりやすいルールと概念を提供することです。これにより、設計者が懸命に取り組んだこと（またはおそらくあなたがまともな結果であなた自身のプロジェクトを設計することさえ可能にします）。

もちろん、これらのルールは、1つの記事を読むのにかかる時間の中で、悪いものから素晴らしいものへと変わることはありませんが、それらを仕事に適用すれば、大きな違いを生むはずです。

グラフィックプログラムで何かをする

プロジェクトを完了し、デザインファイル内のすべての美的変異を維持しながら最初から最後まで進むことは本当にまれです。 そして、残念ながら、設計者はすぐに修正するために駆け寄るわけではありません。

したがって、フロントエンドの仕事では、美的関連の微調整をしなければならないという点が常にあります。 チェックボックスをオンにしたときに表示されるチェックマークを作成する場合でも、PSDが見逃したページレイアウトを作成する場合でも、フロントエンダーはこれらの一見マイナーなタスクを処理することになります。 当然、完璧な世界ではそうではありませんが、私はまだ完璧な世界を見つけていないので、柔軟である必要があります。

このような状況では、モックアップには常にグラフィックプログラムを使用する必要があります。 Photoshop、Illustrator、Fireworks、GIMPなど、どのツールを選択してもかまいません。 コードから設計しようとしないでください。 実際のグラフィックプログラムを起動し、それがどのように見えるかを理解するために少し時間を費やしてから、コードに移動してそれを実現させます。 あなたはエキスパートデザイナーではないかもしれませんが、それでもより良い結果が得られます。

デザインに合わせて、それを打ち負かそうとしないでください

あなたの仕事は、あなたのチェックマークがどれほどユニークであるかに感銘を与えることではありません。 あなたの仕事はそれをデザインの残りの部分と一致させることです。

設計の経験があまりない人は、一見些細なことでプロジェクトに自分の足跡を残したくなることがあります。 デザイナーにお任せください。

「私のチェックマークはすばらしく見えますか？」と尋ねる代わりに「私のチェックマークはデザインとどの程度一致していますか？」と尋ねる必要があります。

あなたの焦点は、それをしのぐことを試みることではなく、常にデザインを扱うことにあるべきです。

タイポグラフィはすべての違いを生む

デザインの最終的な外観のどれだけがタイポグラフィの影響を受けるかを知って驚かれることでしょう。 デザイナーがそれにどれだけの時間を費やしているかを知って、あなたは同じように驚くでしょう。 これは「ピック・イット・アンド・ゴー」の取り組みではなく、かなりの時間と労力が費やされます。

実際にタイポグラフィを選択しなければならない状況に陥った場合は、かなりの時間を費やす必要があります。 オンラインにアクセスして、適切なフォントの組み合わせを調べてください。 これらの組み合わせを試して、プロジェクトに最適なタイポグラフィが完成することを確認するために、数時間を費やしてください。

デザインを使用している場合は、デザイナーのタイポグラフィの選択に必ず従ってください。 これは、フォントを選択することだけを意味するのではありません。 行間隔、文字間隔などに注意してください。 デザインのタイポグラフィと一致させることがいかに重要であるかを見落とさないでください。

また、正しい場所で正しいフォントを使用していることを確認してください。 デザイナーがヘッダーのみにGeorgiaを使用し、本文にOpen Sansを使用している場合は、本文にGeorgiaを使用し、ヘッダーにOpenSansを使用しないでください。 タイポグラフィは美学を簡単に作り上げたり壊したりする可能性があります。 デザイナーのタイポグラフィと一致していることを確認するために十分な時間を費やしてください。 よく過ごす時間になります。

フロントエンドの設計はトンネル視力を許容しません

あなたはおそらく全体的なデザインの小さな部分を作るでしょう。

私が行ってきた例は、カスタムチェックボックスを含むデザインのチェックマークを、チェックボックスを付けずに作成することです。 あなたが作っている部品は全体的なデザインの小さな部品であることを覚えておくことは重要です。 ページのチェックマークが見えるのと同じくらい重要なチェックをしてください。それ以上でもそれ以下でもありません。 あなたの小さな部分についてトンネル視力を得て、それをあるべきではないものにしてはいけません。

実際、これを行うための優れた手法は、これまでのプログラムまたはデザインファイルのスクリーンショットを撮り、それが使用されるコンテキストでその中のデザインを作成することです。 そうすれば、それがページ上の他のデザイン要素にどのように影響するか、そしてそれがその役割に適切に適合するかどうかを実際に確認できます。

関係と階層

デザインが階層でどのように機能するかに特に注意してください。 タイトルはテキストの本文にどれくらい近いですか？ それらはそれらの上のテキストからどれくらい離れていますか？ デザイナーは、どの要素/タイトル/テキスト本文が関連していて、どれが関連していないかをどのように示しているように見えますか？ 彼らは通常、関連するコンテンツを一緒にボックス化する、関係を示すためにさまざまな空白を使用する、関連する/関連しないコンテンツを示すために類似または対照的な色を使用するなどによって、これらのことを行います。

デザインが関係と階層を実現する方法を認識し、それらの概念が最終製品に反映されていることを確認するのはあなたの仕事です（特別にデザインされていないコンテンツや動的コンテンツを含む）。 これは（タイポグラフィのような）別の領域であり、あなたが良い仕事をしていることを確認するために余分な時間をかけるのにお金がかかります。

空白と配置に気を配る

これは、デザインを改善したり、他のデザインをより適切に実装したりするための優れたヒントです。デザインで20単位、40単位などの間隔を使用しているように見える場合は、すべての間隔が20単位の倍数であることを確認してください。

これは、美学に目を向けていない人にとって、非常に簡単な方法で、大幅な改善を迅速に行うことができます。 要素がピクセルに合わせて配置されていること、およびすべての要素のすべてのエッジの周りの間隔が可能な限り均一であることを確認してください。 それができない場合（階層を示すために余分なスペースが必要な場所など）、他の場所で使用している間隔の正確な倍数にします。たとえば、デフォルトの2倍で分離を作成し、3倍で分離を作成します。 、 等々。

多くの開発者は、デザインファイル内の特定のコンテンツに対してこれを実現しますが、コンテンツの追加/編集、または動的コンテンツの実装に関しては、実装内容を真に理解していなかったため、間隔がいたるところに広がる可能性があります。

デザイナーが空白をどのように使用したかを理解し、ビルドでそれらの概念に従うように最善を尽くしてください。 そして、はい、これに時間を費やしてください。 作業が完了したと思ったら、戻って間隔を測定し、すべてが可能な限り整列して均一に配置されていることを確認します。次に、さまざまなコンテンツを含むコードを試して、柔軟性があることを確認します。

自分が何をしているのかわからない場合は、やらないでください

私は、すべてのプロジェクトでミニマリストデザインを使用する必要があると考えている人ではありませんが、デザインチョップに自信がなく、何かを追加する必要がある場合は、少ないほうがよいでしょう。

デザイナーが主な作業を担当しました。 あなたはマイナーなフィラーをする必要があるだけです。 デザインがあまり得意でない場合は、その要素を機能させるためにできる限り最小限の量を実行することをお勧めします。 そうすることで、デザイナーの作品に自分のデザインを注入することが少なくなり、影響を最小限に抑えることができます。

デザイナーの作品を中心に据え、あなたの作品を後部座席に置きましょう。

時間は私たち全員を馬鹿にする

デザイナーの秘密をお話しします。実際に紙やPhotoshopのキャンバスに置いたものの90％（またはそれ以上）はそれほど素晴らしいものではありません。

彼らはあなたが今まで見たよりもはるかに多くを捨てます。 実際のクライアントを気にせずに、次のキュービクルの男に自分の作品を見せてもらえるようになるまで、多くの修正とデザインのいじりが必要になることがよくあります。 通常、空白のキャンバスから優れたデザインに1つのステップで移行することはありません。 間にたくさんの反復があります。 人々はそれを理解し、その過程でそれを可能にするまで、良い仕事をすることはめったにありません。

では、これをどのように実装しますか？ 重要な方法の1つは、バージョン間で時間をかけることです。 気に入ったものになるまで作業してから、片付けます。 数時間待ってから（一晩置いておくのがさらに良いです）、もう一度開いて見てください。 あなたはそれが新鮮な目でどれほど異なって見えるかに驚くでしょう。 改善すべき領域をすばやく選択します。 彼らはとてもはっきりしているので、そもそもどうして彼らを見逃したのだろうと思うでしょう。

実際、私が知っている優れたデザイナーの1人は、このアイデアをさらに発展させています。 彼は3つの異なるデザインを作ることから始めました。 それから、彼は少なくとも24時間待って、それらをもう一度見て、それらをすべて捨てて、4分の1から始めます。 次に、彼はそれがどんどん良くなっていくので、各反復の間に1日を見込んでいました。 彼がそれをある朝開いて、完全に幸せだったとき、または少なくともデザイナーが完全に幸せになったときだけ、彼はそれをクライアントに送りました。 これは彼が作成したすべてのデザインに使用したプロセスであり、非常に役立ちました。

そんなに遠くまで行くとは思いませんが、「デザインに目を向ける」ことなく、どれだけ有益な時間を過ごせるかが浮き彫りになります。 これは設計プロセスの不可欠な部分であり、飛躍的な進歩を遂げることができます。

ピクセルの問題

最後のピクセルに至るまで、完成したプログラムの元のデザインと一致するように、すべての力を尽くす必要があります。

一部の地域では、完璧にはなれません。 たとえば、文字間隔の制御はデザイナーの制御ほど正確ではない可能性があり、CSSシャドウはPhotoshopのシャドウと正確に一致しない可能性がありますが、それでも可能な限り近づけるようにしてください。 デザインの多くの側面で、ピクセル単位の精度を実際に得ることができます。 そうすることで、最終結果に大きな違いをもたらすことができます。 あちこちにあるピクセルはそれほど多くはないように見えますが、それはあなたが思っているよりもはるかに全体的な美学に影響を与えます。 だからそれから目を離さないでください。

元のデザインを最終結果と比較するのに役立つ[ツール]がいくつかあります。または、スクリーンショットを撮り、それらをデザインファイルに貼り付けて、各要素を可能な限り厳密に比較することもできます。 スクリーンショットをデザインの上に置き、半透明にして、違いがわかるようにします。 次に、それを特定するためにどの程度の調整を行う必要があるかがわかります。

反応を得ます

「デザインの目」をつかむのは難しい。 自分でそれを行うのはさらに難しいです。 どうすれば改善できるかを実際に確認するには、他の人の意見を求める必要があります。

私はあなたがあなたの隣人をつかんでアドバイスを求めることを提案しているのではありません、私はあなたが本当のデザイナーに相談して彼らにあなたの仕事を批評させそして提案を提供させるべきであることを意味します。

そのためには勇気が必要ですが、最終的には、プロジェクトを短期的に改善し、長期的にはスキルレベルを向上させるためにできる最も強力なことの1つです。

微調整する必要があるのは単純なチェックマークだけですが、喜んで手伝ってくれる人はたくさんいます。 デザイナーの友達であろうとオンラインフォーラムであろうと、資格のある人を探してフィードバックをもらいましょう。

それは時間がかかるように聞こえるかもしれませんし、あなたとあなたのデザイナーの間に摩擦を引き起こすかもしれませんが、物事の大きな計画では、それは価値があります。 優れたフロントエンド開発者は、聞きたくないものであっても、設計者からの貴重な情報に依存しています。

したがって、デザイナーと建設的な関係を築き、維持することが重要です。 あなたはすべて同じ船に乗っているので、可能な限り最高の結果を得るには、あらゆる段階で協力してコミュニケーションをとる必要があります。 デザイナーとの絆を築くための投資は、誰もがより良い仕事をし、すべてを時間通りに実行するのに役立つため、それだけの価値があります。

結論

要約すると、フロントエンド開発者向けの設計のヒントの短いリストは次のとおりです。

• グラフィックプログラムでデザインします。 小さなものでさえも、コードから設計しないでください。
• デザインに合わせてください。 オリジナルのデザインを意識し、それを改善しようとせず、ただそれに合わせてください。
• タイポグラフィは巨大です。 それが正しいことを確認するために費やす時間は、その重要性を反映している必要があります。
• トンネル視を避けてください。 あなたの追加が必要なだけ目立つようにしてください。 あなたがそれらを設計したという理由だけでそれらはより重要ではありません。
• 関係と階層：それらを適切に実装できるように、それらが設計でどのように機能するかを理解します。
• 空白と配置は重要です。 それらをピクセルに対して正確にし、追加するもの全体で均等にします。
• 自分のスキルに自信がない場合は、できるだけ最小限のスタイルで追加を行ってください。
• 改訂の合間に時間をかけてください。 後で戻って、デザインが新鮮な目で機能することを確認してください。
• ピクセルパーフェクトな実装は、可能な限り重要です。
• 勇気を出せ。 あなたの作品を批評するために経験豊富なデザイナーを探しましょう。

すべてのフロントエンド開発者が素晴らしい設計者になるわけではありませんが、すべてのフロントエンド開発者は少なくとも設計に関して有能である必要があります。

何が起こっているのかを特定し、最終製品に設計を適切に適用するには、設計の概念について十分に理解する必要があります。 完全なデザイナーがいる場合（そして、ピクセルごとに真にコピーするのに十分なディテール指向である場合）、ブラインドコピーを回避できる場合があります。

ただし、大規模なプロジェクトをさまざまなコンテンツのバリエーションで輝かせるには、デザイナーの頭の中で何が起こっているのかをある程度理解する必要があります。 デザインがどのように見えるかを確認するだけでなく、なぜそのように見えるのかを知る必要があります。そうすることで、仕事に影響を与える技術的および美的制限に注意することができます。

したがって、フロントエンドの開発者であっても、定期的な自己改善の一環として、常に設計についてさらに学ぶ必要があります。