Webデザインで先を見据えることが重要である理由

公開: 2021-03-17

優れたウェブサイトと平凡なウェブサイトの構築の違いは、通常、非常に早い段階で決定されます。多くの場合、Webデザイナーがプロジェクトを仮想の「コーナー」にペイントすることが問題になります。そのため、設計は柔軟性がなくなり、さまざまなユースケースに対応できなくなります。

これは、プロトタイピングフェーズで発生する傾向があります。私たちは、見栄えのするアイデアに多くの時間と創造的なエネルギーを費やしています。私たちのクライアントは私たちと同じようにそれを愛するかもしれません。しかし、実際に構築を開始したときにのみ、結果を完全に理解し始めます。

デザインモックアップは、当社のWebサイトプロジェクトのコンパスとして機能します。特定の要素が何を必要とするかについて先を見越して考えることができない場合、それは悪い状況で立ち往生していることを意味する可能性があります。最終的には、さまざまなデバイスやブラウザで動作するために、深刻な妥協をしなければならないサイトになります。これは、アクセシビリティ、パフォーマンス、およびベストプラクティスの順守に悪影響を与える可能性があります。

ありがたいことに、いくつかの計画は、面倒なビルドプロセスを回避するのに役立ちます。クライアントとアイデアを共有する前に考慮すべきいくつかの重要な項目を見てみましょう。

要素がさまざまな画面にどのように適応するか

ウェブデザインへの「モバイルファースト」アプローチについて多くの話題があるのには理由があります。本質的に、これは私達がウェブサイトの最低限の本質から始めることを可能にします。そこから、ビューポートが大きくなるにつれて追加および拡張できます。

それでも、私たち一人一人には、プロトタイプを作成するための独自の好みがあります。デスクトップベースのアプローチをまだ使用している人にとっては、これらの凝ったデザイン要素のすべてが電話でどのように機能するかを考えることが重要です。

CSSグリッドまたはFlexboxの実装を計画している場合は、利用可能な画面領域を最大限に活用するという点で非常に役立ちます。しかし、他の要素が機能するためには、より多くの努力が必要になる場合があります。

たとえば、大きなスライダーは小さな画面では非常に使いにくくなる可能性があります。複雑な画像はそれほど影響力がなく、テキストが境界を超える可能性があります。パフォーマンスも遅れる可能性があります。

この場合、スライダーをモバイルで表示する価値があるかどうかを判断する必要があるかもしれません。あるいは、すべての状況での作業によりよく適応するようにリファクタリングすることもできます。

机の上の電子機器。

アクセシビリティへの影響

デザインは、適切なフォントと色を選択することから始まります。これらは両方とも、ブランディングとアクセシビリティに深く関係しています。

フォントは、読みやすいように鮮明でサイズを調整する必要があります。派手な台本や装飾的なタイプは美しく見えるかもしれませんが、読むのに十分な大きさで、見出しでの使用に制限する必要があります。これらの要件を合理的に満たすことができない場合は、プロジェクトからそれらを完全に削除するのが最善の場合があります。

さらに、色のコントラストも大きな問題になるはずです。背景色と前景色は、アクセス可能と見なされるために、許容可能なコントラスト比を達成する必要があります。さらに、それは良い習慣です。

パレットについて不明な点がある場合は、オンラインツールを使用してその適合性を判断してください。場合によっては、WCAG AA基準に合格するために必要なのは、わずかな調整だけです。

これらの2つの項目に加えて、アイコンなどの要素をどのように表示するかについて計画を立てることも良いでしょう。彼らは直感的ですか？彼らはテキストを伴うでしょうか？

アクセシブルな駐車標識。

下位互換性

たとえば、すべてのWebサイトがInternet Explorer 9と完全に互換性がある必要はありません。また、レガシーブラウザは、必ずしも最新のCSSまたはJavaScriptの使用を妨げるものではありません。ただし、下位互換性については、いくつかの考慮事項を考慮する必要があります。

特に懸念されるのは、古いソフトウェアでWebサイトを完全に使用できなくする設計要素です。特定のブラウザがサイトの訪問者のわずかな割合を占めている場合でも、それでも潜在的なコンバージョンがテーブルに残っています。

設計上の決定がこれらのユーザーにどのような影響を与えるかを検討する価値があります。特定のテクノロジーで利用可能なフォールバックは、物事を適切で使いやすいものに保つのに十分な場合があります。さらに良いのは、実装がかなり簡単にできることです。

以前は、設計者はすべてのブラウザで要素の外観と機能がまったく同じであることを確認することが期待されていました。それは最近の質問では多すぎるかもしれません。ユーザーが古いソフトウェアのコンテンツをナビゲートして消費できる限り、それで十分かもしれません。

ヴィンテージコンピュータ。

まだ起こっていないシナリオ

最小のWebサイトでさえ、時間の経過とともに進化する必要があります。新しいタイプのコンテンツが追加されると、それらをデザインで考慮する必要があります。準備ができていない場合、これらのアイテムを実装すると、すでに存在するものと競合する可能性があります。

たとえば、一連のビデオを追加することを考えてみてください。そのコンテンツを追加するプロセスは十分に簡単かもしれませんが、それはあなたがすでに確立した外観にどのように適合しますか？デフォルトのブラウザUIを利用しますか、それともブランドに合わせて何かを作成しますか？

常に未来を予測できるわけではありませんが、あらゆる種類の可能性を計画することができます。これは、設計システムで実現できることの一部です。最初からいくつかのデフォルトのガイドラインを設定することで、将来の追加に対処するのが簡単になります。

現実には、私たちが現在設計しているものは、将来変更される可能性があります。したがって、その不測の事態に備えることは報われます。

未来のアートを見ている人。

初めて正しく構築する

最初のモックアップを作成することは、見栄えを良くするだけではありません。それはあなたのクライアントを感動させるだけではありません。確かに、それは私たちに私たちのプロジェクト全体を見ることを強いる運動です。

美学は目に心地よいものでなければなりません。ただし、デザインはアクセス可能であり、さまざまな画面に適応できる必要があります。さらに、物事が進化するにつれて、さまざまなタイプのコンテンツに対応する必要がある場合があります。

それが圧倒的に聞こえる場合は、深呼吸してください。これはあなたの経験と専門知識が助けになる場所です。適切なツールを使用することもできます。

過去のプロジェクトで何がうまくいったか（そして何がうまくいかなかったか）を考えてください。回復力のある機能を実装する方法を探します。そうすれば、プロジェクトを成功させることができます。