Webフロントエンド

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

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

私の目標は、1つからいくつかのわかりやすいルールと概念を提供することですフロントエンド開発者別の言い方をすれば、それはあなたがあなたのデザイナーが一生懸命取り組んだことを台無しにすることなくプロジェクトの最初から最後まで行くのを助けるでしょう（あるいはあなたがまともな結果であなた自身のプロジェクトをデザインすることさえ可能にするでしょう）。

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

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

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

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

優れたフロントエンド開発者は、プロのグラフィックツールを使用する必要があります。代替品を受け入れない。

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

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

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

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

開発者は、元のフロントエンドの設計を可能な限り一致させる必要があります。

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

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

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

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

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

このフォントはあなたのプロジェクトに適していますか？疑問がある場合は、設計者に相談してください。

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

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

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

おそらく、全体的なデザインの小さな部分を作成することになります。

トンネルビジョンは、フロントエンド開発者にとってよくある落とし穴です。単一の詳細に焦点を合わせるのではなく、常に全体像を見てください。

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

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

関係と階層

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

ヘッダー、本文、フッターに分けて要素の階層を表示するWebページ。

優れたフロントエンド開発者は、設計の関係と階層を尊重します。優れた開発者はそれらを理解するでしょう。

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

低レベルの設計ドキュメントテンプレート

空白と配置に気を配る

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

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

デザイナーが空白をどのように使用したかを理解し、フロントエンドビルドでそれらの概念に従うように最善を尽くしてください。

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

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

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

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

少ないほうがいいですね。あなたのデザイナーが最初から良い仕事をしたなら、あなたはあなた自身のデザインのアイデアを注入することを控えるべきです。

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

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

時間は私たちすべてを馬鹿にする

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

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

デザインを改善できると思われる場合は、設計者にご相談ください。彼らがすでに同様のアプローチを試み、それに反対することを決定した可能性があります。

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

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

私はあなたがそれを取ることを期待していませんそれはるかに、しかしそれは「デザインに目を向ける」ことのない時間がどれほど役立つかを強調しています。これは設計プロセスの不可欠な部分であり、飛躍的な進歩を遂げることができます。

ピクセルの問題

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

フロントエンド開発者は、元のデザインを最後のピクセルまで一致させるようにしてください。

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

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

反応を得ます

「デザインの目」をつかむのは難しいです。自分でそれを行うのはさらに困難です。あなたは求めるべきです他人の入力どうすれば改善できるかを実際に確認できます。

どのサイトがcプログラミングを学ぶためのチュートリアルを提供していますか

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

デザイナーにあなたの作品を批評させましょう。彼らの批判をうまく利用し、彼らに敵対しないでください。

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

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

デザイナーとの長期にわたる生産的な関係を構築します。有用なフィードバック、品質、実行には不可欠です。

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

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

結論

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

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

すべてのフロントエンド開発者が素晴らしいデザイナーになるわけではありませんが、すべてのフロントエンド開発者は少なくとも有能デザインの面で。

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

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

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

関連： 設計原則：階層の概要