Designansätze für Publisher-Websites

Was ist eine "digitale Publisher-Website"? Es ist eine Website, die sich darauf konzentriert, täglich viele Artikel zu veröffentlichen. Es ist eine Ebene über einem "Blog". Es handelt sich im Grunde genommen um eine News-Site oder eine virale Publishing-Plattform wie BuzzFeed.

Der Designansatz für eine solche Website unterscheidet sich von einem Produktverkauf, einem Geschäft, einem persönlichen Blog oder einer anderen Art von Website. Sein Layout wird oft als "Magazin" -Stil bezeichnet, der auch auf Themenmarktplätzen eine ziemlich gesättigte Kategorie darstellt.

Was unterscheidet eine Publisher-Website?

Es gibt zwei Hauptunterschiede zwischen einer Publisher-Website und einer reguläreren.

Der erste offensichtliche ist die Menge an Inhalten. Jetzt gibt es natürlich riesige Websites, insbesondere E-Commerce-Websites wie Amazon oder eBay, die höchstwahrscheinlich viel mehr Inhalte enthalten, aber dies sind Plattformen, die Inhalte von den Benutzern der Website erhalten. Verlage haben Redaktionsteams, die Vollzeit arbeiten, um Inhalte nach einem Zeitplan zu erstellen. Genau wie eine Zeitung.

Der andere große Unterschied ist die Einnahmequelle. Eine Unternehmenswebsite wie Coca Cola generiert ihre Einnahmen nicht aus der Website , sondern aus ihren Produkten. Die meisten Unternehmenswebsites dienen lediglich der digitalen Präsenz.

Wenn man das weiß, ist es wahrscheinlich offensichtlich, dass die Website-Einnahmen eines Publishers von der Website selbst stammen. Wie? Anzeigen! So generieren Google oder Facebook den größten Teil ihres Einkommens.

Anzeigen werden am entschiedensten im Web geschaltet und haben bei vielen Websites oberste Priorität. Ihr Inhalt konzentriert sich darauf, so viele Leser wie möglich anzusprechen, damit sie die Anzeigen in ihren Layouts sehen können.

Aus gestalterischer Sicht ist dies die Hauptpriorität von Verlags- und Zeitschriftenwebsites.

Entwerfen von Websites mit viel Inhalt

Werfen wir einen Blick auf einige große Verlage wie Variety:

Das erste, was man sieht, ist eine große Anzeige oben. Wir werden uns das gleich genauer ansehen - das Inhaltslayout. Ein großer Header mit vielen Links - Hamburger oben, Suche, Aufruf zu Aktionen und dann noch mehr Menüpunkte. Ziel ist es, einen einfachen Zugriff auf alle Inhaltskategorien zu ermöglichen. Dies steht in starkem Gegensatz zu vielen Unternehmensseiten mit weniger als 10 Seiten (ausgenommen Blogseiten).

Danach - eine große Box für den Hauptartikel. Dies ist eine gute Designentscheidung. Dies erleichtert Ihren Besuchern die Entscheidung, was zu tun ist. Wenn es 10 gleich wichtige Elemente gibt, kann die mentale Belastung bei der Auswahl eines Elements dazu führen, dass einige Benutzer von der Seite abprallen. Mit einer klaren visuellen Hierarchie von wichtigen bis weniger wichtigen Elementen kann ein Designer Benutzer dazu bringen, länger auf einer Webseite zu bleiben.

Rechts eine weitere Anzeige und ein "Beliebtestes" Widget, genau das, was die meisten Benutzer gerne sehen würden. Um so viel Inhalt aufzunehmen, hat Variety beschlossen, daraus einen scrollbaren Bereich zu machen.

Dies ist die Art von Layouts, die Sie bei größeren Publishern am häufigsten verwenden würden.

BuzzFeed ist ein weiteres Beispiel für ein Layout, das für größere Textmengen geeignet ist. Hier ist das Design jedoch verspielter mit lebendigen Farben und aufmerksamkeitsstarken Formen (wie die drei Schaltflächen in der oberen rechten Ecke).

Es gibt mehr "Ranking" als 1, 2, 3 im Trend rechts, das leuchtend rote Etikett für "Breaking" -Nachrichten und so weiter. Ein Haupttrend bei einem ähnlichen Design besteht darin, die Aufmerksamkeit des Benutzers auf sich zu ziehen. Diese Aufmerksamkeit muss jedoch gut gerichtet sein, da Sie sie nicht auf zwei gleich wichtige Elemente aufteilen möchten.

Hier ist ein Beispiel für den falschen Ansatz, bei dem alles versucht, an der Spitze zu stehen:

Wir sind uns bewusst, dass der Zweck völlig anders ist und die oben genannte Website tatsächlich einen guten Gewinn bringen kann, aber sie veranschaulicht gut das Prinzip „alles, was versucht, Ihre Aufmerksamkeit zu erregen“.

Digitale Verlage und Werbung

Das Design rund um Werbung ist ein weiteres wichtiges Thema für Verlage. In Anbetracht dessen, dass es die Haupteinnahmequelle ist, hat es auch höchste Priorität. Es gibt einige Dinge, die ein Designer hier berücksichtigen sollte. Zum einen erhält er Feedback oder gute Informationen vom AdOps-Team, das die Anforderungen und die Funktionalität dieser Anzeigen gut versteht.

Beispiele hierfür sind Anzeigengrößen. Es gibt 300 × 250, 300 × 600, 728 × 90 sowie 300 × 50.

• Einige bleiben möglicherweise auf einer Seite des Bildschirms, wo Sie an verschiedenen Punkten vorbeirollen können
• Einige bleiben vielleicht in ihrer eigenen kleinen Ecke, andere bleiben immer oben auf der Seite.
• Andere würden in Paaren von zwei 300 × 250 oder einem 720x90px auftauchen.

Woher wissen Sie das alles und was sind die Anforderungen?

Also ja, Schritt eins wäre, all diese Informationen zu sammeln. Eine einfachere Art, es zu betrachten, sind Layouts. Ein einzelner Beitrag kann abhängig von den Zielen des Herausgebers mehrere Layouts haben. Manchmal gibt es weniger Anzeigen, manchmal mehr. Manchmal ändern Anzeigen die Größe für unterschiedliche Ladungen, manchmal bleiben sie konstant. Es kann sich jedoch alles schnell ändern, wenn neue Trends und Regeln herauskommen. Oft täglich!

Einige der wichtigsten Dinge, die Sie beachten sollten, sind:

• Anzeigen mit einer Höhe werden möglicherweise geladen. Dies bedeutet, dass Inhalte nach unten gedrückt werden und ein Design, das für ein bestimmtes Widget über der Falte erstellt wird, fehlschlägt.
• Anzeigen benötigen möglicherweise Hintergründe. Dies kann ein hellgrauer Hintergrund sein, der die Anzeige umgibt und die Ecken des Bildschirms berührt.
• Anzeigen benötigen häufig einen Abstand, um versehentliche Berührungen zu vermeiden. 20 bis 30 Pixel sind ein guter Abstand zwischen Anzeigen.
• Sie möchten vorher / nachher ein "Advertisement" -Label hinzufügen, um mehr Anzeigenanbieter anzusprechen.
• Es sollte nicht zu viele Anzeigen geben! Der Sweet Spot dafür ist, was ein AdOps-Team daran arbeiten würde, für einen bestimmten Publisher, eine bestimmte Seite und sogar einen bestimmten Traffic (wie Facebook, Snapchat usw.) herauszufinden.

Leistung der Publisher-Website

Ein Hauptgrund für die schlechte Leistung sind Setups mit mehr als 8 Anzeigen, die versuchen, mit Tonnen anderer Skripte zu laden. Warum ist dies ein Anliegen des Designers, wenn alles im Code enthalten ist? Können die Entwickler es nicht einfach optimieren? Nun ja, aber das ist fast ein Vollzeitjob für sich und einer, bei dem der Designer helfen könnte. Um all dies zu verstehen, müssen Sie zunächst ein wenig über Browser verstehen

Quelle

Browser können die CPU oder die GPU eines Computers verwenden, je nachdem, wie ein bestimmtes Element von einem Front-End-Entwickler codiert wird. Manchmal verwenden Aktionen wie Animationen und Interaktionen beim Hover-Drücken die CPU oder die GPU. Wenn eine Animation zum Beispiel die CPU verwendet, ist es sehr wahrscheinlich, dass es zu Verzögerungen kommt. Wenn es sich um die GPU handelt, ist es möglich, eine bessere Leistung zu erzielen. Die Anforderungen des Designers können der Unterschied zwischen den beiden sein.

Hier einige allgemeine Tipps:

• Verwenden Sie wenig bis gar keine Schatten. Das Rendern von Schatten ist sehr teuer, insbesondere auf mobilen Low-End-Geräten und Laptops.
• Verwenden Sie keine Hintergrundfilter oder Unschärfen (oder Filter), da diese auch sehr teuer sind.
• Halten Sie Formen so einfach wie möglich, um zusätzlichen Rechenaufwand zu reduzieren.
• Fordern Sie keine Animationen von Elementen an, die sich auf das Layout auswirken (andere Elemente). Gestalte so viel wie möglich darum herum. Alles, was sich überschneidet oder ein Popup ist, ist eine bessere Wahl.
• Halten Sie die Bilder relativ klein. Dies würde es Entwicklern ermöglichen, kleinere Bilder zu laden, was Gewicht auf der Site sparen würde.
• Halten Sie Animationen im Allgemeinen auf ein Minimum, insbesondere beim Laden vor Ort. Gleiches gilt für Layoutverschiebungen. Das erste Laden ist die CPU-intensivste Zeit für eine Website, wenn das gesamte JavaScript angewendet wird.

Quelle

Priorität des Designs

Der Großteil des Datenverkehrs auf Publisher-Websites stammt von Mobile. Die Zeit, die am meisten für das Polieren aller Details aufgewendet wird, sollte dort liegen. Auch auf Mobilgeräten sind die meisten Optimierungen erforderlich, da die meisten Geräte keine High-End-Flaggschiffe sind, sondern Smartphones im Wert von 200 bis 300 US-Dollar.

Bei Mobilgeräten liegt Ihr Fokus darauf, den Inhalt lesbar zu halten und gleichzeitig Anzeigen auf klare Weise zu präsentieren. Halten Sie den Abstand zwischen anklickbaren Elementen und Anzeigen groß, um versehentliche Klicks auf die Anzeigen zu vermeiden. Reduzieren Sie nach Möglichkeit alle Animationen und Überlagerungen, die dazu führen könnten, dass sich die Site weniger bissig anfühlt.

Zusammenfassung

Publisher konzentrieren sich auf viele Inhalte und viele Anzeigen. Im Allgemeinen haben Zielseiten und Archive eine geringere Priorität als einzelne Ansichten, da der Verkehr häufig direkt zu den Artikeln aus anderen Anzeigen gelangt. Als Designer liegt Ihr Fokus darauf, den optimalen Weg zu finden, um Anzeigen zu schalten, die richtigen Abstände hinzuzufügen und sie gut vom Hauptinhalt zu trennen, damit alles lesbar und verwendbar bleibt.

Reduzieren Sie komplexe UI-Elemente auf ein Minimum, um die Geschwindigkeitsleistung zu verbessern und so wenig Animationen wie möglich anzufordern. Um alles gut zu machen, müssen Publisher häufig mit Entwicklungsagenturen zusammenarbeiten, die gute Erfahrungen mit AdOps haben, den neuesten Trends und technischen Stacks in der Branche wie DevriX folgen.