著名な Feature Postウィジェットの素晴らしいアイデアと動向

オンラインマガジンを成功させるには、しっかりした視聴者と質の高い執筆が必要です。しかし雑誌のレイアウトはまた訪問者の参画の重要な要因を演じます。 1つのテクニックは 注目の投稿ウィジェット ホームページの上部にあります。これは最も理想的にはサイトにさらに読者を駆り立てるための最も最近人気のある記事を紹介します.

この記事では、成功した機能を備えた投稿ウィジェットを作成するために使用できるデザイン手法について説明します。このウィジェットは雑誌スタイルのレイアウトで最も効果的に機能しますが、小さいブログや動的コンテンツWebサイトにも適用できます。.

文字体裁のコントラスト

注目の投稿のほとんどはサムネイル画像に頼っています。これはしばしば各記事の見出しに結び付けられた背景画像の形をとります。.

このテクニックは幻想的に見えますが 活版印刷と動的背景画像の間に顕著なコントラストを構築するのは難しい. 他の雑誌を研究することによってあなたは読みやすさを改善するのを助けるために微妙な技術を拾うことができます.

Next Webは、ホームページ上に著名な投稿ウィジェットがある大規模なオンラインマガジンです。各サムネイルはサイズが異なりますが、それらはすべて使用します コントラストを改善するための暗いグラデーション.

記事の見出しは、暗いグラデーションの上のサムネイルブロックの下部に配置されます。の 明るいテキストは暗い背景に使いやすい, まだそれは全体の画像をカバーしていません.

CSS3の最近の進歩により、開発者はこれらの効果を簡単に再現することができます。あなたがそれらを得ることができれば固定グラデーションは完璧です 各サムネイルの上に自然に流れる そしてなお 十分に画像を披露する 注目を集める.

Digital Trendsのホームページでは、少し異なる手法が使用されています。この投稿ウィジェットは コントラストの高い無地の背景 各見出しをくっきりと鮮やかにするためのテキストの背後.

ここでの違いは、各背景色が100％純色であることです。サムネイル写真全体を見ることはできません 小さな部分が見えなくなります. しかし、テキストは明らかに読みやすく、Digital Trendsのホームページに最初にアクセスした訪問者にとっても魅力的です。.

適切な量​​のコントラストを見つけるのは難しいです。 TechCrunchのようないくつかのウェブサイトはこの問題を完全に取り除くためにサムネイルの横にテキストを配置しようとします.

あなたがサムネイルの上に見出しのテキストのデザインスタイルが好きならしかしあなたはあなたがしたいでしょう コントラスト係数がどのように方程式に入るかを検討する.

散発的な画像サイズ

注目の投稿ウィジェットの価値は 機能コンテンツ ページ上部にあります。非対称は、何かに注意を向けるための優れた方法です。この場合、非対称のサムネイルサイズは非常に効果的です。.

例えばZDNetのホームページを見てください。彼らの注目のウィジェットでは、左側の最大の記事はより広いスペースを取り、うまく行けばもっと注目を集めるために最も広いサムネイル画像を使用します。他のおすすめサムネイルは、見出しが小さくなるほど小さくなります。.

このグリッド構造が自然にページの周囲を見ている様子に注目してください。各訪問者の視線は特定の1つの領域に分類される傾向があり、その後、何かが飛び出すまで各サムネイルの間を移動します。.

ZDNetも 濃いグラデーション 各サムネイル画像の上に 文字体裁のコントラストを構築する 読みやすいテキスト基本的にそれは私が今まで見た中で最高の機能を備えたポストウィジェットデザインの一つです。.

非常によく似たデザインスタイルがCNETのホームページにあります。ほとんどの訪問者が左から右に読んでいるので、一番大きいサムネイルが左側に表示されます。.

あなた自身の注目の投稿ウィジェットをデザインするとき、これと同じテクニックに従う必要はありません。あなたはそれらがまとまって収まりそして統一されたグリッドレイアウトを形成する限り、あなたはどんなサムネイルサイズででも行くことができます.

カスタムサムネイルスタイル

デザインの選択はレイアウトごとに大きく異なるため、完璧なソリューションはありません。注目の投稿ウィジェットは、デザインが間違いなく複雑です。そのため、カスタムレイアウトに収まるように勉強と忍耐が必要です。.

各サムネイルのスタイルは、ウィジェット全体が観客にどのように見えるかに影響します。たとえば、The Vergeにある注目のウィジェットスタイルを取ります。.

各サムネイルは、写真の上にカラフルなグラデーションがあります。これはコントラストを高め、読みやすさを向上させますが、それはまた同様にウェブサイトに一定の才能を追加します.

彼らはそれが派手で魅力的でないと感じるので、何人かの人々はこのスタイルが好きではない。しかしそれはまたVergeの読者の間でかなり人気があり、他のデザイナーはこのスタイルを真似ています.

しかし、色と空想のテクニックだけが考慮すべき要素ではありません。グリッドとサムネイルのサイズも、注目の投稿ウィジェットスタイル全体を定義するのに役立つので、慎重に選択する必要があります。.

おそらく最も良い例の1つは、長年にわたって多くのフェーズを経てきたMashableのデザインです。現在ニュースの主流の情報源と考えられて、Mashableは容易なブラウジングのためにホームページに多数の投稿を詰め込むことに取り組んでいます.

一部の投稿では小さな四角いサムネイルを使用していますが、メインのリーダーボードではフルサイズの大きなサムネイルバナーを記事に固定しています。すべての投稿に適切な写真が正しいサイズで表示されるようにするには、編集者による追加の作業が必要です。.

しかし、サイトに着陸した直後には、 信頼感を放つ. このスタイルは非常に主流を感じており、リーダーベースとの信頼関係を築くためにほとんどすべてのタイプのオンラインマガジンで使用できます。唯一の問題はページを埋めるのに十分な内容を書くことです!

マルチポストウィジェット

注目の投稿ウィジェットの中には、記事を 静的グリッド. それがすることができるので、これはしばしば最も人気のある選択です。 レスポンシブにしてうまくブレンド 任意のレイアウトに.

他のウィジェットはスライドショーのような動的なインタラクションに依存しています。たとえば、Vanity Fairのホームページのおすすめの投稿ブロックがページ上部に表示されます。一度に1つの投稿のみが表示されますが、特定の見出しの上に移動すると新しい記事が表示されます.

サムネイルとタイトルの両方が単純なホバー操作で自動更新されます。注目すべき1つのことは、この動的ホバー手法に慣れていないインターネットユーザーにとって、これは非常に混乱を招く可能性があるということです。.

しかし良い面では、この手法は スペースを節約 余分なコンテンツを非表示にしてページに表示する.

注目の投稿ウィジェットを白黒として考えないようにしてください。それらは、最も興味深い記事や人気のある記事を紹介するためのページセクションです。あなたがこのタスクを達成するためのテクニックは常に議論の余地があります。.

複雑な雑誌は彼らの特集ウィジェットのためにフルスライドショー表示を使用しています。各投稿にはタイポグラフィのコントラストのための下のグラデーションと一緒に注目のサムネイルがあります.

しかし、各サムネイルを並べて配置する代わりに、記事は 動的にストリーミングする スライドショーボックスを通して。ナビゲーションは自動的に設定することも、矢印リンクで制御することもできます。このデザインは、スペースを大幅に節約し、ユーザーがページと対話することをより積極的にします。.

要約

注目の投稿表示に関しては、正しいまたは間違ったデザインはありません。それらはすべて似たような多くの特徴を共有していますが、各雑誌は注目のコンテンツを整理するために独自のスタイルを使用しています.

この投稿があなた自身のおすすめ投稿ウィジェットをデザインするときに使う実用的なヒントを提供することを願っています。あなたが動けなくなったと感じたら、インスピレーションを得るために他の雑誌を見てください。あなたが好きな特性を見つけて、あなた自身の雑誌デザインに溶け込むためにそれらを複製する方法を見つけ出してください.