コンテンツ集約型レイアウトのヒントと例の設計
Web用の包括的なレイアウトを作成するには、スキルと多大な努力が必要です。 Webデザイナーは、最も不可能なところで、非常に洗練された方法で作業を実行します。. Webページが進化するにつれて、これまで以上に多くのスペースを占め、より多くのコンテンツを保持する必要があることがわかりました。. Webサイトをデザインする方法をすでに理解している場合、それはこれらの方法をよりよく理解することに対する大きなボーナスです。 Webサイトのコア機能が変わることはほとんどありません。ただし、平均的なページコンテンツよりも多くの場合、他の要素、たとえばホワイトスペース、タイポグラフィ、要素の配置などが使用されます。.
コンテンツを多用するレイアウトを構築するためのいくつかの重要なヒントをカバーするために詳細を説明します。これらは、ソーシャルネットワーキングアプリ、大企業や企業のWebサイト、またはそれらの中間にあるものまでさまざまです。自問することが重要です」私はこのデザインで何を達成しようとしていますか?「より広い見通しを予測するのに役立つようにページをデザインしているとき.
カスタムWebページ
実際のWebデザインの経験がいくらでも、私たち全員がどこかで始めなければならなかったのは事実です。カスタムWebページを設計することは、一般に、従来の仕様を適用する前のWebプログラミングのキャリアに向けた最初のステップです。.
私はいつもテンプレートにインストールされると考えられるページ要素の小さなリストを作成することを勧めます。これらがすべて書き留められると、悪いアイディアを排除したり、見逃したり忘れたりした宝石を拾うことが容易になります。これはまた、道路へのストレスを軽減するための簡単な計画への道を開きます。.
レイアウトワイヤフレーム
一般的な5ページのWebサイトでは、同じ要素が繰り返し表示されることがよくあります。トップコーナーのロゴ、ヘッドナビゲーションリンク、サイドバーで分割されている可能性のあるメインコンテンツエリア、その他の機能（ログイン、検索ボックスなど）.
詳細なページレイアウトを構築するための良い出発点を検討してください。多くの設計者は、それほど明白ではない欠陥を排除するために考えられるワイヤフレームデザインをスケッチすることが有用であると感じています。これはどんな派手な紙も必要としません、そして、尽きることのない支配されたノートでさえもすることができます。ワイヤフレームの目的は、後で詳細を記入するために、サイトのレイアウトをどこに余裕をもって向けるべきかについて大まかなアイデアを与えることです。.
コンテンツが重いレイアウトの場合は、プラットフォームに含まれる容量を考慮する必要があります。 100ページを超える複雑で複雑なコンテンツをホストするために2〜3列の閉じたレイアウトを構築しても、スペースを取る余地はあまりありません。前もってスケッチして計画を立てることで、ページコンテンツのための広いスペースの量を制御できます。これはテキストやブロック領域をカプセル化するだけでなく、画像やビデオも扱います。.
華麗なホワイトスペース
ホワイトスペースは多分 最も重要な要素 コンテンツ集約型のレイアウト設計で考慮する必要があります。ウェブサイトのコンテンツは、他の通常のウェブサイトよりもそれをすべて規定しています。あなたの言葉を消化する余地がないために読者がその内容を理解できない場合、トラフィックはむらがあり不快になるでしょう。.
段落とページヘッダーは、カスタマイズから始めるのに最適な場所です。 CSSプロパティを使用すると、外部余白を操作して各ブロック行テキスト要素を埋め込むことができるはずです。これらには、すべての見出し1〜6、段落、ブロック引用符、リスト、フォーマット済みテキスト、および少数の下位要素が含まれます。.
読者の注意を引きたい場合は、主要なテキスト要素の下にスペースを入れることが重要です。段落と小さい見出しは、15px-25pxの下余白を適切に配置することで最も効果的に機能します。 h1やh2などの大きなページ要素の場合は35px +を検討してください（これはフォントサイズにもよります）。垂直方向の要素間のスペースは、スクロールと「一目でわかる」スキャンに重要です。しかしながら 行の高さ テキスト要素の行間に影響を与えるもう1つの重要なCSSプロパティです。段落はそれらのフォントサイズに比べてはるかに大きな行の高さの値を持つべきであるので行の間に余分な余白がたくさんあります.
動的スタイルを検討する
間隔は別として, デジタルタイポグラフィ ページから飛び出すように操作する必要があります。今日、世界中には何億ものWebサイトがあり、どこにでも同じフォントタイプが表示されるのが一般的です。.
コンテンツの多いWebサイトのレイアウトを設計している場合、結果は別の当たり障りのないテンプレートのようになります。高度な活版印刷スタイルのために遊ぶべきたくさんの特性があります。テキストの影、文字間隔の狭さ、背景のプラットフォーム、アイコンなど…リストは無限大です.
本当にあなたはデザイナーです、そしてあなたの最後の言葉は法律です。レイアウトの設計は、ターンアラウンドのない単一車線の高速道路に匹敵するものではありません。その過程であなたは戻ってスタイルを変えたり、新しい要素を操作したり、あるいはコンセプトを完全に捨てたりすることができます。他にも役に立つCSSのヒントをいくつか検討して、何が最適かを確認してください。!
ドロップダウンメニューを利用する
非常に多くのコンテンツがあるため、すべてのリンクが1ページに収まることはほとんどありません。ページのオーバーロードを処理する方法については多くのオプションがあります。サイドバーブロックに余分なリンクを配置したり、サイトフッターの列に縫い付けたりすることは、2つの目的のあるオプションです。.
最も便利で便利な選択は、ヘッドカテゴリとサブカテゴリを持つドロップダウンナビゲーションスキームを作成することです。あなたが非常に詳細なトピックを持っているならばサブサブカテゴリーを提供する多くのオープンソーススクリプトもあります.
おそらく、最も早く、最も苛立たしい戦略は、JavaScriptフレームワークから始めることです。最も人気のあるものには、jQuery、MooTools、またはおそらくPrototypeが含まれます。これらのライブラリのすべてがドキュメンテーションを提供し、多くが利用可能な無料のドロップダウンメニュースクリプトを持っています.
コンテンツビューを計画する
実際には、平均的なWebサイトに含まれるすべてのコンテンツを格納するための単純なボディ領域を作成するのははるかに困難です。ブラウザの標準が変わり、モバイルのサポートが半端なくなったため、このようなコンテンツを多用するWebサイトが撃墜されるのは当然のことです。表示中のWebページの各スタイルに注意を払う。複数の画像を含むものもあれば、主要なグラフィックやビデオを含むもの、あるいはまったくグラフィックを含まないものもあります。最終レイアウトのコーディングが終わったら、複数のHTMLページを作成してさまざまなビューを配置します。.
これらは、メインコンテンツエリア内のコンテンツを除いて、すべて同じ内部マークアップを持ちます。個々のページビューはそれぞれ操作可能で、完成品に関する洞察を提供します。これを切り替えると、各ページで必要になると思われる主要なビューがすべて含まれます。ページ要素の他の例には、コメントボックス、ビデオ、埋め込みギャラリー、ページ分割リンクなどがあります。.
戦略を徹底的に計画する
実のところ、強力なWebレイアウトを作成することはまったく難しいことではありません。多くのデザイナーは、ブロック要素の植え方やカラーハイパーリンクなど、細部に気付くことがあります。これらの詳細はブランディングメッセージを介して送信されるので重要です。小さい要素からメッセージがページ全体と一緒になるはずです。各障害に対してどのように最善のアプローチが行われるかを理解するために、設計の段階を精神的に計画します。もしあなたがクライアントと仕事をしているのなら、事前にどのような種類のコンテンツがページを埋めるのか話し合うのがいいでしょう。これにより、一般的なレイアウトに最適なアプローチを計画して戦略を立てることができます。.
もう1つ特に注目されているトピックは、モバイルデザインです。この新しい市場は、スマートフォンだけでなく強力なタブレットPCにも大きな拡大を見せています。. これは、ユーザーがモバイル画面からあなたのレイアウトにアクセスしている可能性があることを意味します - コンテンツがあふれていないこと、そしてきれいに表示されていることを確認してください.
7コンテンツの多いWebサイトの例
以下は、人気のあるコンテンツが多いWebサイトからのスクリーンショットの例です。これらはほとんどが物理的な市場とデジタル市場の両方で有名なブランドです。以下のアイデアをいくつかチェックして、自分のプロジェクトにインスピレーションを得てください。コメント欄で他のコンテンツの多いWebレイアウトも気軽に共有してください。.
クリッカー
クリッカーはテレビや映画愛好家のための新しいソーシャルネットワーキングアプリケーションです。あなたは新しいアカウントに登録して、季節とエピソードのリストによってアーカイブされたあなたのお気に入りの古典的なテレビ番組のいくつかを見つけることができます。あなたはより少ない情報とより多くのビデオコンテンツでサイトをIMDBと比較することができます!
Webデザインの未来
Future of Web Design 2011は、今春からロンドンで始まります。詳細とテキストベースのレイアウト設計の優れた例については、ホームページをチェックしてください。すべての詳細は真に共有されており、講演者、スケジュール、ワークショップ、スポンサーなどを提供しています。.
主らしい
このコミカルなレイアウトでは、主人公Lik Likelyが「漫画化」されていてイラストに穴が開いています。このサイトは3つのコラムに分かれていて、それぞれが新しいコンテンツ、広告、フィードリンク、アーカイブを持っています。デザイン自体は非常にレトロであり、イラストデザインを巧妙に取ります.
マイクロソフト
ほとんどの技術愛好家はマイクロソフトに精通しています。実際、コンピュータが何であるかを理解しているほとんどの人はあなたにMicrosoftとBill Gatesの簡単な説明さえ与えることができます。彼らのホームページには、何十ものソフトウェアパッケージ、ニュースの更新、プレスリリース、そして開発者情報のためのコンテンツがあります。ページを少し進むと、動的なコンテンツの切り替えで縦のタブメニューを見つけることができます.
検索エンジンの土地
Search Engine Landは、検索エンジンとインターネットマーケティングを中心とした人気のあるWebマガジンです。彼らは頻繁に素晴らしい品質の投稿で更新し、毎日彼らのサイトに何十万もの人々を駆り立てます。メインページは、各コンテンツモジュールと広告を入れるために使用される3つの列に分割されています.
ホワイトハウス
アメリカ合衆国のホワイトハウスのデザインはとても清潔でプロフェッショナルに見えます。大統領のスケジュールや他の重要な政治的出来事に関する多くの情報があります。ページスペースを軽減するための1つのトリックは、ページの見出しに向かって小さなコンテンツスライダーを追加することです。これは、訪問者がページに着いたときに3〜4のビッグニュースの見出しを表示するのに最適です。.
ヤフーポータル
大規模コンテンツのWebサイトに関しては、Yahoo！ピークに向かってトレンドしている必要があります。 Yahoo! Webメール、ニュース、ビデオ、さらにはWeb検索など、何百ものサービスを顧客に提供します。 Yのいくつかをチェックしてください！サイドバーからポータルリンクをクリックして、それらのテンプレートの比較方法を確認します。.
結論
これらは、具体的なコンテンツ要求の多いレイアウトを構築するための重要なポイントと手順のほんの一部です。大規模なコンテンツ貯蔵庫を持つWebページは、SEOの飼料を保持する負担と見なされることが多く、本当の価値はありません。ユーザーが各Webサイトから得る最初の印象として、デザインがすべてです。大量のコンテンツがあると、これは雑然とした一般化を超える災害になる可能性があります。練習を止めることは絶対に避けてください、そしてほんの少しのプロジェクトであなたは内容集約的なレイアウトを想像するための熟練を拾います.
