Das Thema des Kurses bei Chris Magiera lautete „Webtypografie”. Der Kurs setzte sich mit technischen Neuerungen im Web, Frameworks, modernen Tools und allgemein Typografie im Web auseinander.

Zum Ende des Semesters entstanden in Gruppenprojekten Redesigns bekannter Webseiten mit Fokus auf die Typografie.

Die größte Schwäche der Webseite des Standards ist augenscheinlich der Versuch jeglichen Content der Seite in kleinster Form auf der Startseite abzubilden (Clutter). So entsteht ein mehrspaltiges Layout welches den Lesefluss völlig bricht und dem Leser mehr Informationen darstellt als er aufnehmen kann. Dadurch wiederum überfliegt der Leser lediglich die Hauptartikel und blendet alles andere völlig aus.

Weiterhin verwirrt die ausufernde Verschwendung von Farben, denn jede Unterseite bringt ein eigenes Farbschema mit sich, welches mit dem Farbcode des derStandard Corporate Designs nicht viel gemeinsam hat. Auch viele verschiedene Stile bei grafischen Elementen machen die Webseite sehr unruhig und lassen sie wie ein Flickenteppich wirken.

Die verwendete Typografie wirkt sehr unpersönlich (Arial), denn den Trend zur Verwendung von Webfonts hat man völlig verschlafen.

Gut gefällt, dass derStandard versucht so viel eigenes Bildmaterial wie möglich zu verwenden und nicht immer auf Agenturen wie Reuters oder dpa zurückzugreifen.

Ein erfolgreiches Redesign bedarf einer ausführlichen Analyse der aktuellen Webseite. Darüberhinaus haben wir nicht nur die Webseite derStandard.at betrachtet, sonder uns den digitalen Nachrichtenmarkt insgesamt gewidmet. Wir haben sowohl die direkte deutsch- und englischsprachige Konkurrenz von Süddeutsche.de, Spiegel.de, Zeit.de, usatoday.com bis hin zu nytimes.com analysiert als auch bekannte Blogs mit Schwerpunkt guter Lesbarkeit wie z.b. medium.com. Durch die weitläufige Betrachtung konnten wir einen guten Eindruck des digitalen Nachrichtenmarktes bekommen und aktuelle Designtrends aufspüren. Sehr hilfreich und aufschlussreich bei der Anaylse der Webseite DerStandard.at waren für uns die Mediadaten (http://derstandard.at/Sales) für Anzeigenkunden. Diese Daten lieferten ein genaues Bild über die Zielgruppe und Verteilung der Besucher über die Webseite.

[](http://www.derstandard.at „www.derstandard.at“) Startseite: [www.derstandard.at](http://www.derstandard.at „www.derstandard.at“)

• Zu viel von Allem Die aktuelle Seite ist überladen, unübersichtlich und kleinteilig. Es gibt von allem zu viel. Zu viele Artikel, Themen, Menüpunkte, Farben, Links, Größen, Spalten … 14 Rubriken mit 88 Unterrubriken, 26 Hauptfarben, 52 Farbtöne, über 200 verlinkte Artikel auf der Startseite, 11000 Pixel lange Startseite … Die Liste ließe sich beliebig lang fortführen.

• Responsiv? Fehlanzeige! Die Webseite hat eine feste Breite von 975px und richtet sich am linken Rand aus. DerStandard.at ist nicht Responsiv, es wird aber eine Mobil-Version unter [mobil.derstandard.at](http://mobil.derstandard.at „mobil.derstandard.at“) angeboten.

• Uneinheitliches Design Die visuelle Erscheinung ist sehr unruhig und uneinheitlich. Die unterschiedlichen vollflächigen Hintergründe verstärken den Eindruck. Es gibt Icons mit und ohne Schatten, ein- und mehrfarbige, mit und ohne Verlauf, 2D und 3D. Fixe und scrollbare Elemente. Drei unterschiedlich breite Spalten. Ingesamt fehlt eine klare und einheitliche Designsprache.

• 14 Menüpunkte mit 88 Unterkategorien Die Navigation dreispaltige Navigation enthält zu viele Menüpunkte und Unterkategorien. Die Mediadaten zeigen hingegen, das sich mit 7 Menüpunkten 70% der Benutzer erreichen lässt. Mit den drei Service-Angeboten sind es sogar 85%.

• 60% der „derStandard”-Nutzer sind jünger als 40 Jahre Das komplette Erscheinungsbild ist nicht Zieglgruppen gerecht ...

• Typografie DerStandard.at verwendet für alle Texte „Arial”. Die Zeilenbreite bei Fließtexten liegt im guten Bereich von 50-80 Zeichen. Die Unterscheidbarkeit von Fließtext und Überschriften ist deutlich genug aber nicht gut, im allgemeinen gibt es zuviele Textgrößen. Die Schriftgröße wirkt insgesamt zu klein und die Abstände zu anderen Artikel/Textelementen zu gering.

• Einspaltiges Layout Ein Fazit der Konkurrenz-Analyse bekräftigte uns darin Artikel einspaltig untereinander anzuordnen. Sehr viele der aktuell überarbeiteten Nachrichtenseiten verwenden statt mehrspaltigen Artikelanordnungen die einspaltige und die Reduktion der Anzahl der Artikel auf der Seite. (z.B. Zeit.de, sueddeutsche.de ...) Mehr zum Raster weiter unten.

• Freiraum / Reduzierung Ein weiterer Trend lässt ich in der Reduzierung der Artikelanzahl erkennen und den Artikeln mehr Freiraum zugeben. Die Webseiten wirken dadurch ruhiger und nicht mehr so überladen und kleinteilig. Dies haben wir auch auf unser Redesign übertragen und noch stärker betont

• Lesbarkeit Das einspaltige Layout, die Reduzierung und der Freiraum wirkt sich direkt auf die Lesbarkeit der kompletten Webseite aus. Dies zeigt, dass der Fokus auf gute Lesbarkeit eine immer wichtigere Erfolgsstrategie bei Nachrichtenseiten darstellt. Das durchsetzten von Webfonts fördert nicht nur die Lesbarkeit, sondern gibt den Nachrichtenseiten die Möglichkeit zur Abgrenzung zu Konkurrenz und ein eigenes Erscheinungsbild.

• Mobil / responsiv Nachrichten werden immer schneller kommuniziert und konsumiert. Die sofortige Erreichbarkeit der neuesten Nachrichten, an jedem Ort mit jedem Gerät gehört zum Standart und für uns eine responsive Webseite die perfekte Lösung.

Das Logo nimmt im Redesign eine zentrale Rolle ein und wurde von uns leicht modifiziert. Die Unterstreichung der Wordmarke haben wir etwas dünner gehalten und visuell an die Schrift angeglichen. Dadurch wirkt die Unterstreichung nicht mehr so massiv und schwer und das Logo ist insgesamt harmonischer und ausgeglichen. DerStandard.at ist die bekannteste österreichische Nachrichten-Webseite, um dies im wahrstensinne, „zu unterstreichen”, haben wir den Farbton von Magenta auf Rot geändert. Das Logo bildet nun den dreiteiligen Aufbau der Österreichischen Flagge, rot weiß rot, durch den Schriftzug (rot), Weißraum (weiß) und Unterstreichung (rot). Für den Schriftzug des Logos wurde und wird weiterhin die „Helvetica Neue - Black” verwendet.

Wie bereits erwähnt spielt das Logo eine zentrale Rolle im Redesign. Wir habe dessen Elemente auf das neue Design übertragen. Die Farbtöne, die Unterstreichung und das klare Erscheinungsbild. Auf der Startseite war uns eine gute Unterscheidbarkeit der einzelnen Kategorieabschnitte sehr wichtig. Wir haben das Logo aufgegriffen und den Schriftzug durch die jeweilige Kategorie ersetzt und die Unterstreichung fortgeführt, um die visuelle Unterteilung der Kategorien zu verstärken. Dem Benutzer wird jetzt viel schneller und einfacher Bewusst in welcher Kategorie er sich befindet.

• Schriftart Wir haben uns für die serifenlose und für das Web optimierte Schrift Droid Sans von Steve Matteson entscheiden. Diesen Font gibt es lediglich in 2 Varianten normal und bold. Die Stärke der Schrift liegt im Fließtext und ist somit für unsere Nachichtenseite eine gute Auswahl. Zudem zeigt der die Schrift stärken auf kleinen Displays und mobilen Endgeräten.

• Absätze Absätze dienen der Gliederung des Inhalts um den Leser nicht mit einem endlosen Text zu überfordern. Wir haben uns hier für einen einfachen Zeilenbruch mit halber Leerzeile entschieden. Gerade auf Nachrichtenportalen ist eine Gliederung eines langen Textes von Vorteil. Die darin enthaltenen Informationen können somit einfacher und strukturierter aufgenommen werden.

• Ausrichtung „Das erste Wort der ersten Zeile ist das entscheidende Wort eines Textes.” W.A. Dwiggins Somit haben wir uns natürlich auch wie gewohnt im Web für einen linksbündigen Flattersatz entschiedenen.

• Hierarchie Um eine inhaltliche Ordnung zwischen einzelnen Artikeln zu gewährleisten, dient eine typografische Hervorhebung der jeweiligen Rubrik als grafische Klammer zum Inhalt. Für die Kategorieebene haben wir fette unterstrichene Versalien als Auszeichnung & Markierung gewählt. Eine Überschrift dient dem Leser als Orientierung und soll den Einstieg in das jeweilige Thema erleichtern. Für eine Unterscheidbarkeit der Überschrift haben wir die Schriftgröße so erhöht, dass diese sich schnell von der Rubrik und dem Fließtext abgrenzt.

• Zeilenabstand Der Zeilenabstand unserer Nachrichtenseite ist größer als die Grundeinstellung. Die Zeilenhöhe im Web sollte zwischen 130% und und 150% liegen. Damit sorgen wir für für eine optimale Lesbarkeit am Monitor.

Um eine geordnete und reduzierte Darstellung der neu gestalteten Nachrichtenseite zu gewährleisten, haben wir das derzeitig verwendete Farbschema stark reduziert. Wir haben im ersten Schritt die Kombination mehrerer Farbtöne getestet und uns dabei gefragt wie viele Farben wir verwenden sollten und welche unsere dominierende Farbe ist.

Im Gestaltungsprozess haben wir uns dann für das Rot als Auszeichnungsfarbe entschieden. Diese Farbe wird in erster Linie zur Kennzeichnung der einzelnen Rubriken genutzt. Als zweite Funktion dient das Rot als Hover-Status einer Linkauszeichnung. Somit gewährleisten wir für den Benutzer eine einfache Orientierung und für die Marke derStandard.at einen Bezug zum Logo.

Im Vordergrund stand die Überlegung, ein einfaches Raster zu finden, welches den natürlichen Lesefluss nicht unterbricht sondern stützt. Besucher einer Nachrichtenplattform möchten schnell und reichlich Informationen aufnehmen. Wir haben uns daher für ein 2 Spalten-Raster entschiednen. Dieses Raster ist Einfach und bringt gleich mehrere Vorteile. Der Benutzer kann beim Scrollen der Seite, gleichzeitig die Überschrift des Artikels und das Bild aufnehmen. Zudem werden lange Klickwege der Maus vermieden.

Da in einer guten Gestaltung auch ein jedes Raster einmal aufgebrochen werden sollte, gerade um Akzente zu setzen oder auch den Leser nicht mit der immer gleichen und monotonen Gestaltung zu langweilen, haben wir uns dafür entschieden, Bilder eines Artikels abseits vom Text-Raster zu platzieren.

Im Ganzen dient das Raster aber der Kontinuität und der Harmonie die unterschiedlichen Informationen zu ordnen und strukturieren.

Um dem Leser die Möglichkeit zu geben eine Seite „abzuscannen” und alle Artikel die ihn interessieren direkt lesen zu können haben wir uns dafür entschieden die Artikel direkt im Listenlayout anzuzeigen. Durch einen Klick auf einen Artikel fährt sich dieser dadurch direkt nach unten aus, ohne dass eine neue Seite geladen werden muss. Auch die wichtigsten Kommentare werden so angezeigt, können jedoch bei Interesse expandiert werden, so dass alle Kommentare eingesehen werden können.

Dies hat den Vorteil, dass der Leser nach erfolgreichem Durchlesen des Artikels direkt wieder bei der Artikelübersicht landet und somit im Lesefluss und derselben Scrollrichtung bleibt. Außerdem entfällt so das vor- und zurück navigieren das einige User sonst betreiben müssen. Ein weiterer Usecase der sich verändert ist, wenn User eine Seite erst scannen, währenddessen alle Artikel in Tabs öffnen um sie dann der Reihe nach zu lesen. Diese erhalten so auch eine schnellere Lesemöglichkeit, denn durch die Anzeige des Artikels direkt auf der Übersicht werden Tabs nicht mehr benötigt.

Wir haben unsere Wireframes und Ideen direkt in einem Prototyp umgesetzt und den zwischenschritt in Layoutprogrammen teilweise übersprungen. Dadurch konnten wir für uns schneller verschiedene Versionen testen. Zum Beispiel Schriftarten und -größen besser und schneller aufeinander abstimmen und sehen wie sich die Änderungen auf die komplette Seite auswirken. Auch in anderen Projekte gehen wir dazu über schneller Webprototypen zu entwickeln und Designändernungen wie Farben, Schrift, Größe und Abstände direkt an allen Elementen zu testen. Unsere Idee, die Seite ein- oder zweispaltig Aufzubauen, konnte durch einen schnellen Test im Webprototyp schnell zugunsten der einspaltigen Variante getestet werden. Weiter Tests waren verschiedene Anordnungen der kompletten Artikelansicht, Mouseover-Effekte, verschiedene Navigationen und dessen Interaktion, sowie die Interaktion Artikel direkt auf der selben Seite zu öffnen und zu schließen.

Durch das Anzeigen des Inhalts von Vimeo akzeptieren Sie die Datenschutzbestimmungen des Anbieters.

Vimeo vertrauen und Inhalt immer anzeigen

Anzeigen

©thomas petrach

Vimeo

Passwort: fhpwebtypo

Der Webprototyp kann mit dem Benutzername und Passwort „webtypo” [hier](http://derstandard.benschmitt.de „derstandard.benschmitt.de“) getestet werden. Der Webprototyp wurde nur für den Chrome Browser unter Mac OSX getestet und entwickelt.

[](http://derstandard.benschmitt.de/ „derstandard.benschmitt.de“)

Die zu Beginn gehaltenen Vorträge brachten eine gute Grundlage und Auffrischung der Thematik mit sich, um später unser Redesign Projekt angehen zu können.

Wir waren frei jeglicher Vorgaben, und konnten unsere Vorstellungen exakt so umsetzen wie wir es anfangs planten, was ein schöner Kontrast gegenüber Auftragsarbeiten ist, da wir uns auch nicht mit technischen Hürden, Werbung oder allgemein Finanzierungsmethoden beschäftigen mussten.

Entstanden ist ein funktionstüchtiger Prototyp der einen guten Eindruck unserer Arbeit zeigt.