Aufgabe

Die Endaufgabe des Kurses bestand darin, eine bestehende Webseite im Hinblick auf gute Typografie zu überarbeiten. Im Fokus standen dabei typografische Details die wir verbessern sollten.

Meine Wahl viel auf MacRumors, eines der bekanntesten Newsportale rund um Apple Hardware und Software.

Neue Font

Der erste Schritt für mich war eine neue Schriftwahl. Die alte Schrift „Verdana“ sieht einfach nicht mehr modern aus und gehört zu den Standard Schriften.

Nach einigem experimentieren entschied ich mich für die Apple Hausschrift „SF Pro“. Im Vergleich zur Verdana läuft die SF Pro zwar etwas mehr zusammen, hat dafür aber ein charakteristisches runderes Design und ist die Apple Systemschrift für Mac, Apple TV, Apple Watch, iPhone und co. So macht es konzeptionell Sinn auch diese Schrift für ein Apple zentriertes Newsportal zu verwenden.

Die Schrift habe ich von 13px auf eine angenehmer lesbare 18px Schriftgröße erhöht.

Startseite

Das grundlegende Layout der Startseite habe ich beim alten gelassen. Die Seitenleiste ist neben kleineren Detailanpassungen gleich geblieben. Der Artikel-Stream hingegen hat einige größere Anpassungen bekommen.

Jeder Artikel ist nun mit einer angenehm großen Überschrift zu differenzieren. Hier findet sich auch das CI-Rot wieder. Das Datum wird an die jeweilige Zeitzone vom User angepasst und der Autor des Artikels entfällt hier. Ziel ist es die Startseite aufgeräumter zu gestalten, dass die User schneller finden können was sie suchen. Dazu gehört „unnötige“ Information an dieser Stelle nicht zu zeigen.

Bisher zeigt MacRumors immer jeweils den kompletten Artikel auf der Startseite. Um den Nutzer nicht endlos scrollen zu lassen, ist beim Redesign jeder Artikel gekürzt. MacRumors-Artikel sind immer so aufgebaut, dass nach einem kurzen Intro ein Bild oder Video gezeigt wird. Danach kommt der Rest des Artikels. Hier wird der Artikel jetzt gekürzt!Das Bild wird dann über die Überschrift gesetzt, um eine höhere Gewichtung zu bekommen.

Navigationsleiste

Die Navigationsleiste (und einige andere Elemente) bekommen den typischen iOS Look, mit stark abgerundeten Ecken. Details wie die neue Schriftart, neue Icons/Glyphen und ein besserer Schatten verbessern die bestehende Navigationsleiste weiter.

Das Logo bekommt ebenfalls die neue Schriftart, um mit dem Rest der Webseite zusammen zu passen.

Artikel

Das große blaue „X“ im Hintergrund der Artikel Seite lässt die Überschrift herausstechen und gibt eine visuell interessante Komponente für die schrift-lastige Seite. Die Seitenleiste wird an dieser Stelle nicht mehr gezeigt, da sie nur unnötig vom Hauptinhalt ablenkt.

Die Zeilenbreite ist nun auf gut lesbare 60-70 Zeichen reduziert. Bilder stehen aus dem Artikel heraus. Das gibt dem Artikel nicht nur eine bessere Struktur, sondern die Bilder sind auch etwas größer. Zitate stehen ebenfalls aus dem Text. In Kombination mit der dicken Schrift sind sie im Vergleich zur alten Version deutlich besser zu sehen.

Die „bottom line“ jedes Artikels ist nun auch deutlicher getrennt. So ist klarer ersichtlich wo der Artikel endet und was Randinformationen sind.

Kommentare

Alle Kommentare stehen nun durch die farbliche Abhebung besser getrennt zum Artikel. Natürlich übernehmen sie die Satz-Gestaltung des Artikels. Die Zitate in Kommentaren stehen nach rechts heraus, da sie sonst mit dem Bild kollidieren.

Um besser zu verdeutlichen, dass es sich ausschließlich um positive Votes bei den Kommentaren handelt, zeige ich nun das Thumbs-Up-Icon (👍).

Suche

Für die Suche gibt es, ähnlich wie bei der Startseite, große Überschriften. Der Suchbegriff wird jeweils in der Überschrift und im Text angezeigt und ausgezeichnet. Der Suchbegriff im Text wird dabei mit maximal 20 Wörtern vor und nach dem Begriff in Kontext gesetzt. Endet/beginnt ein Absatz in dem Bereich der 20 Wörter, wird der Ausschnitt an dieser Stelle eher gekürzt. So kann der Nutzer besser in Kontext setzen, wo im Artikel der Suchbegriff erwähnt wird.

Weitere Verbesserungen wie ein kleines Thumbnail und Trennlinien lassen die Suchergebnisse ebenfalls viel besser erfassen.

Zusätzliche Details beinhalten das erneute anzeigen des gesuchten Begriffs, reduzierte gezeigte Informationen und die MacRumors typischen Links für die Seitenanzeige unten.

Mikrotypografie

Auch MacRumors blieb nicht vor mikrotypografischen Fehlern versehrt. Die klassischen falsch gesetzten Anführungszeichen und Apostrophe, aber auch schmale Leerzeichen innerhalb der Klammern habe ich an allen Stellen verbessert.

Eine weitere Verbesserung sind die angepassten Aufzählungszeichen. In der neuen Version erinnern sie an ein iOS App Icon und passen sich an das Navigationsleisten Design an. Außerdem sind sie ein wenig in der Größe reduziert, um weniger aufdringlich zu wirken (Siehe Bild bei „Artikel“).