良い結果を得るためのシンプルなWebデザインのヒント

ウェブサイトをデザインする方法は無数にあります。 それを念頭に置いて、それを台無しにする無限の方法もあります。 2番目のカテゴリに分類されないようにするための主な方法は2つあります。設計の基礎を学び、それに応じて適用します。 また、何がうまく機能し、何が機能しないかを学ぶのに十分な経験が必要です。

すべての設計者は異なる学習パスを取り、多くの場合、旅のさまざまな段階にあります。 あなたがこれを読んでいるなら、うまくいけば、あなたはあなたの仕事をさらに改善し、より良いデザインを生み出すことも試みています。

残念ながら、必要なすべての知識を1500語に収める方法はありません。 代わりに、UX / UI要素にアプローチする方法を再考するためのいくつかのヒントをターゲットにします。 理想的には、この考え方は、設計作業の他の領域にも適用できます。

製品/サイトをよく理解することから始めます

コンテンツやウェブサイトを完全に理解していないと、デザインを行うのは非常に困難です。 今、あなたは医学のウェブサイトをするために医学を勉強する必要はありません、それは目標ではありません。 ただし、ユーザーが必要とする可能性のある情報にユーザーがどのようにアクセスするかを知っておく必要があります。

音楽制作アプリを設計する場合は、まず既存のアプリをいくつか入手し、それらを試してみて、その背後にある理論と特定の要素がどのように機能するかを読んでください。

理想的には、クライアントと協力する必要があります。クライアントもプロジェクトに深く関わっており、ユーザーにより良いUXを実装するのを支援したいと考えています。

ただし、サイトの内容と解決する問題についての基本的な理解が不足している場合は、ユーザーエクスペリエンスを損なうか、既存のソリューションに従わせて、スキンを変更するだけで済みます（これは機能する場合があります）。

Webサイトの場合、適切なナビゲーションに取り組み、特定のランディングページに適した要素を決定するために、サイトマップを目の前に置く必要があります。 「チョコレートファクトリー」の設計を行う場合は、それを作成するプロセスを視覚的に提示したり、情報ダンプを実行したりできます。 それはすべてサイトの目的に依存します。

これらの情報はすべて、成功率を高めるために事前に必要なものです。 これがどれほど複雑かを考えると、あなたが初心者のフリーランスのデザイナーであるならば、それはあなたに起こるかもしれないので、最初からたくさんの質問をするのが最善です。 チームで作業する場合は、コンテンツ、UX、目的などについてチームメンバーに相談することを忘れないでください。

デザイン固有のヒントとコツ：

それでは、次のデザインで利用できる特定のUI / UXのヒントを見てみましょう。

1 –コントラスト！

サイトのコントラストを台無しにするのはとても簡単です。 経験の浅いデザイナーを見つける簡単な方法は、全体的なコントラストを確認することです。 この例を参照してください。

ソース

テキストがどこでもどれほど軽いかわかりますか？ 白いテキストの付いた緑色のボタン、薄い灰色のテキスト？ それをより対照的なUIと比較してみましょう：

ソース

フォントの大部分は黒（またはほぼ黒）で、重要性の低い情報はわずかに灰色になっています。 緑が暗くなり、上に白いテキストが表示されるようになりました。

ここでのヒントは、テキストを操作するときは、白地に黒または黒地に白から始めることです。 さらに要素を追加し、視覚的な階層で区切る必要がある場合は、最初に太字にするか、フォントサイズを変更してみてください。 その後になって初めて、それが機能しない場合は色の変更を行いますが、理想的には30〜40％以下の違いです（通常、不透明度は70％に設定されます）。

2 –一貫した空白

もう1つのよくある間違いは、要素の周囲に一貫性のない間隔があることです。 実際、ほとんどの設計者が何年にもわたる作業の後でこれに苦労し続けることは非常に一般的であり、それは非常に理解できます。マウスでボックスを移動します。 少し滑らせて、1〜2ピクセル横に動かすのは簡単です。 または、その違いを直接見つけるのに十分なほど目を訓練していない可能性があります。

次の例では、さまざまなコンポーネントの周囲にさまざまな空白があることを確認します。 散らかっているものもあれば、間隔が空いているものもあります。 視覚的にはあまり一貫性がありません。

対照的に、これは、コンテンツの量/コンポーネントのタイプがほぼ同じであるが、外観がより一貫している例です。

ソース

これを実現するにはさまざまな方法がありますが、ほとんどの場合、測定だけでは機能しません。 あなたがそれを見るとき、それはしばしば「感触」です。 バランスが取れているように見えますか？ ボックスがある場合は、いつでも横から30ピクセル、タイトルの下に30ピクセル、字幕の下に15ピクセルなどを測定できます。これは、良いアプローチです。 ただし、タイトルや画像などの大きな視覚要素では、重い要素を補うために少し増やしたい場合があります。

3 –色

優れた設計のもう1つの基本的なコンポーネント。 色は一緒にうまく機能する必要があります。 Webサイトにアプローチする簡単な方法の1つは、単一の原色に固執し、残りを単色に保つことです。

次の例は、これまでの3つの提案すべてに従います–良好なコントラスト、バランス、および色の使用：

ソース

色から始める簡単な方法の1つは、https：//colorhunt.co/などのサイトから評判の高い配色に従うか、Dribbbleから組み合わせのインスピレーションを得ることです。 カラーホイールを使用すると、組み合わせを理解するのに役立ちますが、多くの場合、最適な組み合わせを特定するには、デザイナーが少し手を加える必要があります。 カラーホイールは、多くの場合、デザインに適用するのに最適な色を生成しません。

Adobeのカラーホイールの例：

ソース

真ん中は素敵な緑色ですが、左側/右側の結果は使いにくいです。

4 –サイト全体のスタイルに固執する

ウェブサイトの雰囲気を構築することは、デザイナーの主な仕事の1つです。 「きれい」という考えを定義するのは非常に難しいですが、特に人々は何が良いのか、何が悪いのかについて異なる見方をしていることが多いためです。 。 これを心配する代わりに、一貫性に焦点を合わせ、スタイルに固執します。

どういう意味ですか？ さて、ボタンをデザインしましょう。 フォントサイズ、フォント、色、背景、間隔などを設定します。次のようになります。

ここで、画像とタイトルを追加すると、次のようなことができます。

コーナーを参照してください。 すべて完璧な90度のコーナー、丸みなし。 さて、それは私たちのデザインがほとんど鋭い角に従うことを意味します。 また、画像にこれらの完璧なコーナーがある場合は、より一貫性があります。 入力を追加する場合と同じように、すべての入力の角も鋭くなります。 もう1つの要素を追加しましょう：

右上隅と左下隅にボックスのグリッドを追加しました。 これらは円である可能性がありますが、シャープな外観を維持するために、正方形に設定しました。 サイト全体で同じ考え方を維持する必要があります。 要素を変更し始めると、その感触が失われ始め、その結果、デザインに一貫性がなくなり、ブランドが弱体化する可能性があります。

これは上からの同じデザインですが、丸みを帯びた外観です。

それは同じですが、今ではとても違った感じがします。

5 –コンポーネントを使用した設計

コンポーネントは、FigmaやAdobeXDなどのすべての最新のデザインツールに存在します。 それらは非常に正当な理由でそこにあります-開発者はそれらが可能な限り再利用できる方法でサイトを実装します。

上記のような要素を作成する場合は、別のページに「コピーアンドペースト」するだけで、簡単に機能します。 わずかな違いはありますが、再度コーディングする必要はありません。 設計者として、理想的には、同様の方法でコンポーネントを再利用したいと思うでしょう。

3つの投稿が連続しているホームページを作成する場合は、ホームページから同じ投稿を再利用できる可能性があります。 これにより、時間を節約し、開発者の時間を節約し、ユーザーの設計の一貫性を保つことができます。

ソース

セクションの見出しを作成していると想像してください。 見出しのある8つのセクションが必要な場合は、毎回デザインしますか、それとも前のセクションをコピーして貼り付けますか？ 理想的には、それを再利用したいと思います。 しかし、中央揃えから左揃えに変更する必要がある場合はどうなりますか？ たぶんサイズを少し変えて、色を変えてみませんか？ これからのヒントは、それをしようとしないことです。 オリジナルのままにしてください。 本当に異なるビューが必要な場合（左/中央/右揃えを除く）、1つのバリエーションのみを作成してみてください。 それらの5つまたは10ではありません。

DevriXによる例

要約すれば：

良い結果を得るには、色、コントラスト、空白、バランス、視覚的階層、順序などのデザインの基本を深く理解する必要があります。 それを念頭に置いてデザインし、使いやすさ、一貫性、スタイルに焦点を当てるとき、そしてそれが「WOW！」でなくても。 デザイン、それはすべての面でしっかりしていて、うまく機能します。そして、それはしばしば長期的にブランドのためにより良い結果を生み出します。