Brillante Ideen und Trends für prominente Widgets Feature Post
Um ein erfolgreiches Online-Magazin zu erstellen, ist ein solides Publikum und viel qualitativ hochwertiges Schreiben erforderlich. Das Layout der Zeitschrift spielt jedoch auch eine entscheidende Rolle bei der Besucherbindung. Eine Technik besteht darin, eine Widget für vorgestellte Beiträge oben auf der Homepage. Hier werden die zuletzt beliebten Artikel präsentiert, um die Leser idealerweise weiter auf die Website zu bringen.
In diesem Beitrag möchte ich über Entwurfstechniken berichten, mit denen ein erfolgreiches Beitrags-Widget erstellt werden kann. Obwohl dieses Widget für ein Layout im Magazinstil oft am besten geeignet ist, können Sie es auch auf kleinere Blogs oder Websites mit dynamischen Inhalten anwenden.
Typografischer Kontrast
Die meisten Beiträge sind auf Miniaturbilder angewiesen, um Aufmerksamkeit zu erregen. Dies hat oft die Form eines Hintergrundbildes, das an die Überschriften der einzelnen Artikel gebunden ist.
Diese Technik sieht fantastisch aus, aber es ist Es ist schwer, einen spürbaren Kontrast zwischen Typografie und dynamischen Hintergrundbildern aufzubauen. Durch das Studium anderer Zeitschriften können Sie subtile Techniken zur Verbesserung der Lesbarkeit anwenden.
Das Next Web ist ein großes Online-Magazin mit einem prominenten Beitrags-Widget auf der Startseite. Jedes Miniaturbild variiert in der Größe, wird aber alle verwendet dunkle Farbverläufe für verbesserten Kontrast.
Artikelüberschriften werden am unteren Rand der Miniaturblöcke über dunklen Farbverläufen platziert. Das heller Text ist auf dunklem Hintergrund leicht zu konsumieren, es deckt aber auch nicht das ganze Bild ab.
Dank moderner Verbesserungen in CSS3 können Entwickler diese Effekte problemlos neu erstellen. Feste Farbverläufe sind perfekt, wenn Sie sie erreichen können fließen natürlich über jedem Daumennagel und weiterhin zeig genug vom bild Aufmerksamkeit erregen.
Eine etwas andere Technik wird auf der Homepage von Digital Trends verwendet. Dieses Post-Widget verwendet kontrastreiche, solide Hintergründe hinter dem Text, um jede Überschrift knackig und lebendig zu machen.
Der Unterschied hier ist, dass jede Hintergrundfarbe zu 100% durchgehend ist. Sie können also nicht das gesamte Miniaturbild sehen kleine Teile gehen aus dem Blickfeld. Der Text ist jedoch deutlich lesbar, was für Besucher, die auf der Digital Trends-Homepage landen, ebenso ansprechend sein kann.
Den richtigen Kontrast zu finden, ist schwierig. Einige Websites wie TechCrunch versuchen, Text neben der Miniaturansicht zu platzieren, um dieses Problem vollständig zu entfernen.
Wenn Ihnen jedoch der Designstil des Überschriftentextes über einem Miniaturbild gefällt, möchten Sie dies Betrachten Sie, wie Kontrastfaktoren in die Gleichung einfließen.
Sporadische Bildgrößen
Der Wert eines vorgestellten Beitrags-Widgets liegt in Feature-Inhalt oben auf der Seite. Asymmetrie ist eine großartige Möglichkeit, die Aufmerksamkeit auf etwas zu lenken. In diesem Fall funktionieren asymmetrische Miniaturansichten sehr gut.
Nehmen Sie zum Beispiel die Homepage von ZDNet. Der größte Artikel auf der linken Seite verwendet das breiteste Miniaturbild, um mehr Platz zu beanspruchen und hoffentlich mehr Aufmerksamkeit auf sich zu ziehen. Andere vorgestellte Miniaturansichten fallen in kleinere Größen mit kleineren Überschriften.
Beachten Sie, wie diese Gitterstruktur Ihr Auge natürlich um die Seite herumführt. Der Blick jedes Besuchers neigt dazu, in einen bestimmten Bereich zu fallen und sich dann zwischen den einzelnen Thumbnails zu bewegen, bis etwas herausspringt.
Auch ZDNet stellt ein dunkler Farbverlauf auf jedes Miniaturbild zu einen typografischen Kontrast aufbauen für besser lesbaren Text. Grundsätzlich ist es eines der besten Post Widget-Designs, die ich je gesehen habe.
Ein sehr ähnlicher Designstil ist auf der Homepage von CNET zu finden. Das größte Miniaturbild nimmt seinen Platz auf der linken Seite ein, da die meisten Besucher von links nach rechts lesen.
Beim Entwerfen eines eigenen Post-Widgets fühlen Sie sich nicht verpflichtet, dieselbe Technik anzuwenden. Sie können mit jeder Miniaturansicht gehen, solange sie zusammenhängend zusammenpassen und ein einheitliches Rasterlayout bilden.
Benutzerdefinierte Thumbnail-Stile
Die Designauswahl variiert von Layout zu Layout, sodass es keine perfekte Lösung gibt. Die nachgestellten Widgets von Widgets sind definitiv komplexer zu gestalten. Sie benötigen daher ein wenig Übung und Geduld, um in ein benutzerdefiniertes Layout zu passen.
Der Stil der einzelnen Miniaturansichten bestimmt, wie das gesamte Widget für Ihre Zielgruppe aussieht. Nehmen Sie zum Beispiel den Widgetstil von The Verge.
Jedes Miniaturbild hat einen farbigen Verlauf über dem Foto. Dies erhöht den Kontrast und verbessert die Lesbarkeit, fügt aber auch der Website ein gewisses Flair hinzu.
Manche Leute mögen diesen Stil nicht, weil sie ihn unansehnlich finden. Es ist aber auch sehr beliebt bei Verge-Lesern, und andere Designer ahmen diesen Stil nach.
Aber nicht nur Farben und ausgefallene Techniken müssen berücksichtigt werden. Raster und Miniaturansichten müssen ebenfalls sorgfältig ausgewählt werden, da sie den Widget-Stil für allgemeine Posts bestimmen.
Eines der besten Beispiele ist Mashables Design, das im Laufe der Jahre viele Phasen durchlaufen hat. Mashable gilt als Mainstream-Quelle für Nachrichten und arbeitet daran, eine große Anzahl von Posts auf der Startseite zu stauen, um sie einfach durchsuchen zu können.
Einige Beiträge verwenden kleine quadratische Miniaturansichten, während ihre Haupt-Bestenliste ein großes Miniaturbild-Banner in voller Größe an den Artikel anfügt. Dies erfordert vom Editor zusätzliche Arbeit, um sicherzustellen, dass alle Beiträge die richtigen Fotos in der richtigen Größe haben.
Aber gleich nach der Landung auf der Website werden Sie es bemerken vermittelt Glaubwürdigkeit. Dieser Stil fühlt sich sehr Mainstream an und kann von fast jeder Art von Online-Magazin verwendet werden, um Vertrauen in die Readerbase aufzubauen. Das einzige Problem ist, genug Inhalt zu schreiben, um die Seite zu füllen!
Multi-Post-Widgets
Einige vorgestellte Beitrags-Widgets zeigen Artikel in a an statisches Gitter. Dies ist oft die beliebteste Wahl, weil es sein kann responsiv gemacht und mischt sich gut in jedes Layout.
Andere Widgets sind auf dynamische Interaktionen wie eine Diashow angewiesen. Nehmen Sie zum Beispiel die Homepage von Vanity Fair mit ihrem Post-Block am oberen Rand der Seite. Es wird jeweils nur ein Beitrag angezeigt, aber neue Artikel werden angezeigt, wenn Sie den Mauszeiger über eine bestimmte Überschrift bewegen.
Sowohl die Miniaturansicht als auch der Titel werden mit einer einfachen Hover-Interaktion automatisch aktualisiert. Zu beachten ist, dass dies für Internetbenutzer, die mit dieser dynamischen Hover-Technik nicht vertraut sind, sehr verwirrend sein kann.
Aber auf der positiven Seite wird diese Technik Platz sparen auf der Seite, indem Sie übermäßigen Inhalt ausblenden.
Stellen Sie sich vor, dass Post-Widgets nicht als Schwarzweiß angezeigt werden. Sie sind nur Seitenbereiche, in denen die interessantesten oder beliebtesten Artikel dargestellt werden. Die Technik (en), mit der Sie diese Aufgabe erledigen, können immer zur Debatte offen sein.
Das komplexe Magazin verwendet eine vollständige Diashow für das vorgestellte Widget. Jeder Beitrag hat ein Miniaturbild zusammen mit dem unteren Farbverlauf für den typografischen Kontrast.
Statt jedoch jedes Miniaturbild nebeneinander zu platzieren, werden die Artikel angezeigt dynamisch streamen durch eine Diashow-Box. Die Navigation kann automatisch eingestellt oder über Pfeillinks gesteuert werden. Dieses Design spart viel Platz und erhöht die Interaktionsbereitschaft der Benutzer mit der Seite.
Einpacken
Es gibt kein richtiges oder falsches Design, wenn es sich um Post-Displays handelt. Sie alle haben viele ähnliche Merkmale, aber jedes Magazin verwendet seinen eigenen Stil für die Organisation von vorgestellten Inhalten.
Ich hoffe, dieser Beitrag enthält praktische Tipps, die Sie beim Entwerfen Ihres eigenen Widget mit Beiträgen verwenden können. Wenn Sie sich jemals festgefahren fühlen, schauen Sie in andere Zeitschriften nach Inspiration. Finden Sie Eigenschaften, die Sie mögen, und finden Sie heraus, wie Sie diese replizieren und in Ihr eigenes Magazinkonzept einfügen können.
