あなたがすでにウェブデザイナーとして作った可能性が最も高い間違い

公開: 2016-06-07

すべてのWebデザイナーは完璧を望んでいます。しかし、彼らはただの人間であり、間違いは常に現れる可能性があります。いくつかの詳細を見落とすのはとても簡単です。間違いを犯さなかったデザイナーは世界に存在せず、それを回避することは、通常、しばらくしてから起こることです。

ここで、Webデザイナーが常に犯す最も一般的な間違いのいくつかについて説明します。これは、おそらく少なくとも1回は犯した間違いです。あなたの悪い習慣を正し、あなたが現在罪を犯しているハードルを克服して、あなたの仕事がこれまで以上に良くなるようにしてください。

フラッシュの使用

現代のウェブサイトのデザインでは、Flashの機能が非常に優れていても、Flashが使用されることはめったにありません。私たちは訪問者に印象的なアニメーション体験を提供する可能性に直面していますが、それに関連する手荷物があります。

WebデザインでFlashを使用するとさまざまな問題が発生します。サポートが不足していて、使用されているプログラミング言語が異なるため、読み込み時間が長くなり、モバイルユーザーに問題が発生します。現在Flashをサポートしているデバイスの数は非常に少ないです。また、将来的にはサポートの増加は期待できません。まったく新しいライブラリ、特にAngularJSやjQuaryなどのJavaScriptに基づくライブラリは、より強力で人気があるように見えます。

本当に大きな画像を使用する

Webデザインの最近の傾向は、サイト全体で大きな画像を使用することです。それは間違いなく体験をより楽しくし、ユーザーは素晴らしいものを見ることができますが、デザイナーと開発者が知っておく必要のあるいくつかの複雑さがあります。

より大きな画像が使用されるたびに、ページの負荷が自動的に増加します。これは、サイト訪問者にとって非常に悪いシナリオにつながる可能性があります。良いニュースは、画像の最適化に大いに役立つさまざまなツールにアクセスできることです。検討したいものは次のとおりです。

GruntJS-ImageMin
ImageOptim

PreProsのようなアプリは、アプリケーション内で画像を自動的に最適化するのに役立ちます。問題は、ツールはワークフローを支援しますが、少なくとも完全には、ロード時間に関連する大きな問題を解決しないことです。

現在、多くの設計者がSVGを使用しています。ブラウザ環境でグラフィックをアニメーション化および描画するためにコードを使用します。したがって、ページの読み込みが加速され、目を引くさまざまな要素ができあがります。

また、応答しない要因のために、画像が大きくなるとWebデザインが複雑になるという事実も強調する必要があります。高さと幅を設定したデザイン要素について話しています。ブラウザは画像を拡大縮小しますが、ファイルサイズは同じです。

W3Cは、「 <picture> 」をHTML5要素として使用できるようになりました。これにより、表示画面の幅に基づいてさまざまなサイズの画像を呼び出すことができます。これが発生すると、視聴者のエクスペリエンスは大幅に向上しますが、実装するまでは、大きな画像は避けてください。

固定の幅と高さを使用する

固定サイズがコーディングされている場合、ユーザーの適応は自動的に制限されます。回避策はありますが、100％レスポンシブなWebデザインパターンを作成することを常に検討する必要があります。 CSSで設定されている固定の高さは、ユーザーの表示領域を制限する可能性があります。メディアクエリを調整することでそれを乗り越えることができますが、追加された追加のコードはパフォーマンスの問題につながります。あなたは本当にそれを必要としません。ほとんどの場合、固定サイズは使用しないでください。最新のWebデザイン環境では、これらを可能な限り回避する必要があります。

設計適合についての仮定を立てる

Webデザイナーは通常、AdobePhotoshopやSketchなどのソフトウェアを使用します。作業が完了すると、一般的な前提は、レスポンシブワークフローに特定のブレークポイントがあることです。標準として見られる画面幅は多くの異なる画面サイズをカバーしますが、それらすべてをカバーすることは確実ではありません。市場には何千ものモバイルデバイスがあります。すべてに役立つデザインを作成することは非常に困難です。

特定の幅で作業するときは、計画を立てる必要があり、前向きな考え方がWebデザイナーにとって重要なスキルになります。仮定が行われていないこと、および通常のグラフィックエディタの作業が終了した後に実際にブラウザ内で作業することを確認する必要があります。

あまりにも多くの効果とアニメーションを使用する

この問題は、世界で最も人気のあるサイトのいくつかでも見られます。非常に多くのウェブサイトが息をのむような体験を提供しており、多くのウェブサイトが本当にユニークで素晴らしいものを提供しています。ただし、これは、できるだけ多くのエフェクトやアニメーションを追加することを意味するものではありません。機能性とグラフィックの影響の適切な組み合わせを見つける目的で、Webデザインの原則を組み合わせることが非常に重要です。

アニメーションとエフェクトでやりすぎることに関連する2つの大きな問題があります。

ページの読み込み時間が長くなります
エフェクトとアニメーションは、古いコンピューターでは問題になります

現在人気のあるハックとアニメーションは、フェードイン、アップ、またはダウン要素を追加するものです。それらは見栄えがよく、サイトの見栄えを良くしますが、それは常にそれらを使用する必要があるという意味ではありません。ほとんどの訪問者が使用するデバイスに対して全体的なページの読み込みが多すぎるかどうかを確認し、ページの読み込み速度を決して忘れないでください。これらは非常に重要であり、訪問者に常に素晴らしい体験を提供する必要があります。

リンクのスタイリングが不適切

これは、現時点で考えているよりもはるかに一般的な間違いです。リンクは常にそれらが行うことを行う必要があります。これは、リンクのスタイルが不適切な場合、人々はそれらがリンクであると理解することはないということを意味します。リンクは常にリンクのように見える必要があるため、常に訪問者について考える必要があります。実験して、標準の青い下線に固執することはできませんが、やりすぎないでください。

CSSでDRYを使用しない

これに気付いていない場合、DRYは「Do n'tRepeatYourself」を意味します。これはWebデザインの方法であり、実際には、デザイナーがコードを簡潔に複製するのに役立つことを意味します。 Webサイトのスタイリングには、常に必要なコードのみを使用することをお勧めします。

従来のCSSを使用する場合、他の要素内で使用される特定の要素で多くの繰り返しが必要です。セレクターは非常に大きくなり、実際に書き込むのに多くの時間がかかります。 HTMLページのすべての要素をスタイル設定する代わりに、デザインでクラスを使用すると、すべてが非常に簡単になります。

現時点で非常に良いアイデアは、Sassのような前処理言語を利用することです。それらは必要なCSSテクノロジーの観点から非常に便利です。使用される言語には、変数、関数、ミックスイン、ネストなどの機能が含まれているため、開発と設計が高速化されます。生成されたコードは、CSSコードにコンパイルされます。 Web開発者とWebデザイナーは、使用するコード行が少なくなり、言語のおかげで繰り返しを簡単に回避できるようになりました。

優雅な劣化

Graceful Degradationは、最新のブラウザーで特定のユーザーエクスペリエンスレベルを提供できる一方で、古いブラウザーではユーザーエクスペリエンスレベルを下げることができるWeb機能を構築する方法として定義できます。これは少し複雑に聞こえますが、例として、Internet Explorer8および7のサポートについて説明します。ほとんどのユーザーがブラウザを長期間更新しないことを知って驚かれることでしょう。このため、両方のブラウザバージョンで適切なサポートが提供されるように、適切な機能低下を追加する必要があります。

最新のWebサイトは簡単に開発できますが、後で、特定の依存関係のために古いブラウザではページが非常に悪く見えることに気付く可能性があります。

プログレッシブエンハンスメント

これは、上記の優雅な劣化に似たものです。違いは、すべての単一のWebブラウザーでサポートされている基本的な経験レベルから開始することにより、プロセスが逆に処理されることです。次に、設計者/開発者は、それを使用できるブラウザーで使用できる機能を追加します。

このオプションと上記のオプションはどちらも複雑です。それらは通常、本当に優秀なデザイナーによってのみ使用されます。ただし、現在利用可能な多くのブラウザでは、オプションを真剣に検討する必要があります。 Webデザイナーは通常、何をサポートするかをクライアントに正確に決定させます。ただし、特にアクティブでターゲットオーディエンス内にいるユーザーに非常に優れたエクスペリエンスを提供するには、これらのアプローチを使用する必要があります。

ナビゲーションの問題–非ユーザーフレンドリーであること

そこにあるウェブサイトの最も重要な部分の1つはナビゲーションです。デザイナーは、訪問者の体験を自然にすることができなければなりません。目的は、ナビゲーションを本当にシンプルで直感的にすることです。デザインがこの要素を考慮に入れている場合、ユーザーはエクスペリエンスが適切なものであることを自動的に理解します。

ユーザーエクスペリエンスが悪いときはいつでも、訪問者はイライラします。彼らは単に特定のサイトに再度アクセスすることはなく、問題の解決策について他のページを調べます。使いやすさは、常に設計者が考慮する必要があります。デザインは見栄えがする必要がありますが、機能性を忘れてはなりません。使いやすさが必要であり、これがないと、デザイン全体が役に立たなくなります。

コンテンツへの焦点の欠如

「形態は機能に従う」は、20世紀、近代建築の工業デザイン段階で登場した、非常に一般的な建築原理です。これは、Webデザインで常に覚えておく必要のある原則です。

Webとグラフィックデザインは、必要な機能の点で現代建築に本当に似ています。オブジェクトフォームは、最初に意図された目的または機能に基づいている必要があります。ウェブサイトという点では、インターネット全体に広がる情報データベースと見ることができます。ユーザーは特定のデータを取得するためにWebサイトにアクセスします。これは、コンテンツがそのデータを提供するためにステップインする場所です。訪問者は最終的にサイトにアクセスしてデータを見つけられないため、デザインを見ることさえせずに、どこか別の場所でデータを探します。同時に、設計によってデータの検索やダイジェストが非常に困難になった場合でも、同じ結果が発生します。

インターネットユーザーは現在、情報へのアクセスを望んでおり、このアクセスを高速化することを望んでいます。フォームオーバー機能は、Webデザインにおいて非常に重要になります。この原則を考慮に入れていないということは、提供されるコンテンツではなく、外観に焦点が当てられていることを意味します。結果として、ウェブサイトはあまり人気がありません。コンテンツは常に目立つ必要があります。

結論

彼らのルーツでは、訪問者が実際にサイトにアクセスする理由を考慮せずに、本当に美しくユニークなものを考え出そうとすることに関連する最も一般的なWebデザインの間違い。このため、本当に優れたデザインと完全な機能を組み合わせるために必要な忍耐力を常に持ちたいと考えています。

常に機能的なウェブサイトを作成し、時間の経過とともに新しいテクノロジーを学び続けます。世界最高のWebデザイナーは学習を続け、実行できることと実行できないことすべてについて常に最新の状態を保ちます。あなたはあなたのウェブデザインを作成し、クライアントと話し、そして訪問者が提供されているものに感謝することを確認したいと思います。これは言うよりもはるかに簡単ですが、やがてすべてがはるかに簡単になります。

本当に素晴らしいものを作成するために、常に必要なだけの時間をかけるようにしてください。ウェブデザインにおけるもう一つの言及されていない間違いは、あなた自身がその完璧なウェブサイトデザインを実際に作成するのに必要な時間を与えていないことです。これは通常、クライアントが最短時間で作業を行う必要があるために発生します。あなたができることを知っているその恒星のウェブデザインを作成するのに十分な時間を常に持っていることを確認してください。