Analysieren von inhaltsintensiven Websites

Seit meinem zweiten Monat beim UI / UX-Bootcamp haben wir uns vom Design einzelner mobiler Anwendungen zu mehr Content-Websites entwickelt.

Redaktionelle Websites sind eine gute Referenz für das Organisieren von Daten, und dies tun sie, indem sie jedem Daten einen sehr starken hierarchischen Wert zuweisen. (Hierarchie vs. Anarchie, habe ich Recht?) Ich habe mich entschlossen, 4 sehr gut organisierte redaktionelle Websites zu vergleichen:

1.Die digitalen Zeitungen:

Zeit und verkabelt. Hierbei handelt es sich um Nachrichten-Websites, die viele Informationen veröffentlichen müssen. Dies bedeutet eine Menge bewegter Überschriften, Texte und Beschreibungen.

2. Die digitalen Zeitschriften:

Vanity Fair und Ebenholz. Diese sind in der Regel bildlastiger, sorgfältig kuratiert und haben weniger Navigationsbereiche.

Ich beschloss, es einfach zu halten und es anhand der Rasterorganisation, der Schriftgröße und der Auswahl der dargestellten Informationen zu analysieren.

Die digitalen Zeitungen

Wireframes für die Time-Website

Grid-Organisation

Die Time-Website ordnet ihre Daten in drei Raster ein und macht sie lesbarer, indem das größte Bild im zentralen Raster platziert wird. Es entfernt Informationen wie den Namen des Autors und die Beschreibung des Titels und hält nur an der Überschrift an.

Auf der anderen Seite verwendet Wired eine eher randomisierte Version von Plakaten, wobei Tag, Titel, Autor, Bild und Beschreibung detailliert sind.

Drahtgitter von Wired

Navigationsleiste, Website-Layout:

Wired folgt dem besten empfohlenen Anteil der Lesefläche, wobei auf beiden Seiten ausreichend weiße Fläche verbleibt. Die sehr verbreitete Navigationsleiste könnte jedoch eine Neugestaltung erfordern. Der hellgraue Hintergrund hilft dabei, genug Kontrast zu erzeugen und trennt einen Abschnitt vom anderen.

Zeit dagegen schafft Hierarchie durch Schriftgrößen und Trennlinien.

Schriftgröße:

Da Time entschieden hat, Informationen wie das Tag und den Namen des Autors zu entfernen, kann die Verwendung unterschiedlicher Schriftgrößen entfallen. Es bleibt für fast die gesamte Site bis auf die Hauptüberschrift und Unterklassen bei einer einzigen Schriftgröße von 17px. Es sieht optisch großartig aus und ist kognitiv nicht sehr schwer.

Wired hingegen ist stark von verschiedenen Schriftgrößen abhängig, die häufigste ist 13px und wird sogar für die Navigationsleiste verwendet. Dies ist möglicherweise nicht die bewährte Methode, da die Standardschriftgröße normalerweise 16 Pixel beträgt. Von den ersten Eindrücken ist die Website etwas unübersichtlich.

2. Die digitalen Zeitschriften:

Die französische Website für Vanity Fair erreicht eine großartige Balance zwischen etwas, das nur als "ernsthafter Spaß" bezeichnet werden kann. (Die Franzosen nehmen ihren Spaß wirklich sehr ernst). Dazu wird eine bestimmte, von Hand gezeichnete Qualität hinzugefügt, zusammen mit vielen ungezügelten Schriftarten. Die Schriftgrößen können bis zu 35px betragen, und zusammen mit der sparsam verwendeten Kontrastfarbe (Pink) verleiht sie der Website einen großartigen Charakter.

Rechts: Layout von Vanity Fair und seinen vielen Schriftarten

Zu guter Letzt ist die Ebenholz-Website. Wie Wired verwendet es auch einen grauen Hintergrund, um den Inhalt in einzelne Plakate zu unterteilen. Diese Website ist besonders interessant, da sie sich durch große Unterschiede in den Schriftgrößen kontrastiert. Die größte Schrift ist 70px, die kleinste ist 16px. Es ist eine großartige Referenz für das Erstellen minimaler Layouts mit sehr neutralen Graustufen.

Im Gegensatz zu Vanity Fair wählt Ebenholz den Autor und die Beschreibung zusammen mit Titel und Tag für jeden seiner Artikel. Dies ist in der Tat eine schwierige Entscheidung, und wir haben gesehen, dass zwei prominente Websites (Time, Vanity Fair) die Erwähnung von Autorenname. Am Ende ist es ein Gerichtsurteil und Verhandlungen zwischen UI und UX.