2010年代のWebデザインのトレンドは続くのか

開示: あなたのサポートはサイトの運営を維持するのに役立ちます!このページで推奨する一部のサービスについては、紹介料を稼ぎます.


2018年のウェブデザインのトレンド

ワールドワイドウェブの初期の頃は、ウェブマスターがすべての可能な効果を使用することが流行でした:アニメーションGIF、点滅するテキスト、自動再生midisは、サーフィンしたすべてのサイトに注意を向けていました。.

インターネットの荒涼としたフロンティアデーはエキサイティングで画期的なものでしたが、パターン化された背景の赤いテキストのようなトレンドは、目に優しくなかったり、ユーザーフレンドリーでした.

ありがたいことに、私たちはウェブの誕生以来、長い道のりを歩んできました。私たちがオンラインに接続するために使用するテクノロジーは、きしむようなダイヤルアップモデムの接続を聞くために使用していた日から進化し、誰も固定電話を拾ってオフラインにしたことはありませんでした。.

Webデザイナーも、変化するテクノロジーに対応するために進化しなければなりませんでした。過去数十年の間に、デザイントレンドの波が訪れ、消え、ユーザーエクスペリエンスに重点を置くように進化しています。今日のデザイナーは、これまで以上にミニマリズム、読みやすさ、使いやすさを重視しています.

しかし、物事は継続的に改善されていますが、改善のように見える傾向があっても、途中で間違った方向転換や落とし穴が生じる可能性は常にあります。無限スクロールは、より多くの情報を表示して訪問者をページに長く表示するのに役立ちますが、より多くの記事が読み込まれるとジャンプし続けるWebサイトのフッターを表示しようとすると、ユーザーは不満を感じるかもしれません.

固定要素の人気は理解できます。重要な情報を訪問者の目の前に置きたいです。ただし、これらの共有ボタンがページコンテンツのブロックを開始すると、逆効果になる可能性があります。 Webデザイナーはトレンドに遅れずについていく必要がありますが、創造性を駆使してこのような問題に対する革新的な新しいソリューションを考案する必要もあります.

今年のトレンドについて言えば、どのイノベーションが勝ち残り、10年後、20年後のどちらを笑うのかはわかりません。 2014年のウェブデザイントレンドのこの内訳により、継続する価値があるトレンドと、取り残すべきトレンドを自分で決定できます.

ウェブデザイントレンド

時代のデザイン:2014年のウェブデザインのトレンド

ウェブは、ウェブサイトが読み込まれるとすぐにバックグラウンドでクレイジーな色とフォント、自動音楽が再生される90年代初頭から劇的に進化しました。今日のWebでは、シンプルでユーザーフレンドリーになるように設計された、よりシンプルなアプローチが採用されています。 2014年に期待できるものは次のとおりです.

レスポンシブデザイン

  • レスポンシブデザインとは、ウェブサイトが表示されている画面のサイズに合わせて自動的に調整されることを意味します.
    • これは、人々が従来のコンピューター画面から離れるようになるため、Webデザインにとって重要です.
      • アメリカの成人の90%が携帯電話を所有しています
      • アメリカの成人の58%がスマートフォンを所有
        • 携帯電話の所有者の60%が自分の電話を使用してインターネットに接続しています
      • アメリカの成人の42%がタブレットを所有
  • レスポンシブウェブデザインでは、柔軟な組み合わせを使用します。
    • レイアウト
      • すべてがピクセルではなく比率でサイズ調整されます.
    • 画像
      • すべてがピクセルではなく、リレーションによってサイズ設定されます.
    • CSSクエリ
  • レスポンシブデザインの例は次のとおりです。
    • com
    • com
    • com
  • 独自のレスポンシブテンプレートを作成するか、既存のレスポンシブフレームワークを購入する.
    • 例は次のとおりです。
      • カルマ
      • アバダ
      • 包む
  • 長所:
    • 保守の軽減:複数のサイトではなく1つのサイトを設計および保守する.
    • 検索エンジン最適化(SEO)の向上:1つのサイトは1セットのURLを意味し、SEOをより管理しやすくします.
    • あなたのサイトが継続的に市場に出回っている何十もの新しいデバイスと互換性があるかどうか心配する必要はありません.
  • 短所:
    • 実装には予想よりも時間がかかる場合があります.
    • 技術はまだ発展途上.
    • 画像はサイズ変更されるのではなく、縮小されるだけなので、ページの読み込み時間に悪影響を及ぼし、訪問者を混乱させる可能性があります.

もっとスクロール

2014年には、実装が非常に簡単であるため、スクロールが増えるでしょう。.

  • 視差スクロール:Webサイトの背景をページの他の部分とは異なる速度で移動できます.
    • 例:Nasaプロスペクト
    • 長所:
      • アニメーションで訪問者を驚かせることができます
      • ユーザーに行動を促す
      • 訪問者が全体をスクロールするときにページに長く留まるように勧める
    • 短所:
      • メタ情報が1セットしかないため、SEOがヒットする
      • 1つのページに大量のデータがあると、ページの読み込み時間が遅くなり、イライラするユーザーにつながる可能性があります
  • 水平スクロール:上下ではなく左から右にスクロールします.
    • 例:世界野生生物財団アースアワー2012
    • 長所:
      • デザイナーは画面上により多くのコンテンツを格納できます.
    • 短所:
      • ユーザーは、横にスクロールする必要があることに気付かない場合や、完全なエクスペリエンスを得るために横にスクロールしたくない場合があります。.
  • 無限スクロール:ユーザーがスクロールするときにページのコンテンツを読み込みます
    • 例:Facebookニュースフィード
    • 長所:
      • より高速なブラウジング
      • タッチデバイスとうまく相互作用します
      • コンテンツの露出:無限スクロールは新旧のコンテンツを等しく公開し、古いコンテンツの「保存期間」を長くします。
    • 短所:
      • ナビゲーション:
        • ユーザーは特定のアイテムにスクロールして戻ることもブックマークすることもできず、もう一度上から開始する必要があります.
        • 無限スクロールでは、ユーザーがどれだけのデータを処理する必要があるかはわかりません.
      • ユーザーフォーカス:スクロールから離れると、以前の参照ポイントではなく、先頭に戻るため、ユーザーが何をしている/読んでいるのかに集中することが難しくなります。.

少ないテキスト

  • テキストを多用するデザインの代わりに、画像、アイコン、ビデオを中心としたデザインが増えます。.
    • comは10語未満の機能であり、ユーザーはアプリを使用する方法を理解するためにビデオを視聴する必要があります.
    • comのホームページのナビゲーションバーには、テキストの短い段落といくつかの単語が表示されます.
    • The-Studio.co.ilは、いくつかの単語と画像のみを備えています.
  • 長所:
    • より洗練されたWebデザイン
  • 短所:
    • ウェブサイトのデザインを508準拠にするのは難しい
      • 508準拠とは、従来の方法でインターネットにアクセスできない障害を持つ人々のためにWebを準拠させることを指します.

フラットなユーザーインターフェイス

  • フラットユーザーインターフェイス(UI)は、スタイルではなく、機能性に焦点を当てたデザインを指します.
    • 要素は、その名前が付けられたものに似ているように作られています.
    • すべてが以下のために設計されています:
      • 明快さ
      • シンプルさ
    • それは削除することを意味します:
      • グラデーション
      • ベベルエッジ
      • 反射
  • 私たちはすでにそれを見てきました:
    • ウィンドウズ8
    • Apple iOS 7
    • WordPress 3.8
  • フラットなデザインは変形形態のデザインに対して機能します.
    • 変形デザインでは、視覚的な詳細を使用して、あるものを別のもののように見せます.
      • 例:車内での木製パネルの使用
  • 長所:
    • シンプルなユーザーインターフェース
    • 明るい/大胆な色の使用は気分を後押しします
    • 素晴らしいタイポグラフィに焦点を当てる
    • ビジュアルはシャープでクリーン
  • 短所:
    • 使いやすさの懸念:対話するためにクリックまたはタッチする場所がわからない場合があります.
    • カラーパレットは一致させるのが難しい場合があります。使用する色が多いほど、適切に一致させるのが難しくなります。.
    • 弱いタイポグラフィのデザインが見つけやすくなります.
    • 全体的なデザインが単純すぎるように見える.

フィックスコンテンツ

  • これは、ユーザーがスクロールしている間、ページ上に留まるナビゲーションバーやコンテンツのセクションなどのページ要素を指します。.
    • caは、サイドバーナビゲーションを維持したまま水平スクロールを許可します.
    • netには、Webサイトの左側に固定位置のソーシャルメディアバーがあり、バーを配置したままユーザーがコンテンツをスクロールできます。.
  • 長所:
    • 使いやすさのメリット:ユーザーは探しているものをはるかに簡単に見つけることができます.
  • 短所:
    • フィックスコンテンツは、スクロールを超えてスペースを浪費する可能性があります.
    • ナビゲーションバーなどの一部の固定要素は、モバイル環境に変換するのが難しい場合があります.

出典

  • モバイルテクノロジーのファクトシート– pewinternet.org
  • レスポンシブWebデザイン:その概要と使用方法–coding.smashingmagazine.com
  • レスポンシブWebデザインとは何ですか? – smallbiztrends.com
  • 17,389ドルのウェブサイトテンプレートとテーマが$ 3から– themeforest.net
  • レスポンシブWebデザインの長所と短所– business2community.com
  • パララックスウェブデザインとは–定義、ヒント & 考慮事項– unleashed-technologies.com
  • NASA:プロスペクト– nasaprospect.com
  • WWFフードストーリー– assets.wwf.org.uk
  • 無限スクロールはすべてのウェブサイトに当てはまるわけではありません– nngroup.com
  • 無限の彼方へ!無限スクロールの賛否両論– inspiredm.com
  • Snapchat – snapchat.com
  • スタジオ– the-studio.co.il
  • テキストを減らし、マルチメディアを増やす–ウェブサイトデザインの新しいアプローチ– designmodo.com
  • 遺失物–マッピングページ– howto.gov
  • フラットデザインとは– gizmodo.com
  • フラットデザインの長所と短所– designmodo.com
  • 2014年の18のピボタルWebデザインのトレンド– econsultancy.com
  • 固定ナビゲーションバー:長所と短所– awwwards.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map