29.06.2006

Design-Evolution VI: KURIER

Teil sechs beschäftigt sich mit dem Projekt KURIER Online.

Die Designphase war sehr intensiv, dauerte von Mitte Oktober bis Ende April und läuft letztlich noch immer. Erst diese Woche wurde eine Symbolsprache eingeführt, die bereits auf der Startseite visualisiert, welche Hintergrundinformationen ein Artikel zu bieten hat.

Es ist also nahezu unmöglich, den Projektverlauf in ein paar Screens festzuhalten. Man sieht aber trotzdem ganz gut, wie sich das Projekt entwickelt hat und wie viel hunderte winzigkleine Designentscheidungen alleine auf der Homepage zu treffen waren.

  • Screen 1

    Nach einem Briefing, ging es zuerst darum, erste Ideen zu sammeln und in einem Screen festzuhalten. Einer der wichtigsten Punkte für die Optik war, die Enge, die den Vorgänger geplagt hat, aufzulösen und durch ein luftiges Design zu ersetzen. Aus diesem Grund auch von Anfang an die Entscheidung zu einem horizontalen Menü um dem Content Raum zum atmen zu geben. Eines der Kernprobleme dieses Screens war aber, dass er noch viel zu wenig die Marke KURIER vermittelte.

  • Screen 2

    Screen 2 ist hier schon deutlich näher an der KURIER CI. Wie in Screen 1 gibt es auch hier noch am Kopf der zweiten Spalte einen „Newsticker“, der zusätzlich zu den aktiv platzierten News, einen Bereich bot, der Meldungen nach Aktualität listete. Klickte der User auf mehr, öffnete sich ein Layer, der die jeweils drei aktuellsten Meldungen der Ressorts zeigte. Das Menü wurde hier völlig versteckt und durch das Wort „Navigation“ ersetzt. Klickte der User auf diesen Link, passierte folgendes …


  • Screen 3

    … die komplette Site rutschte nach unten und machte einem Menü platz, das die gesamte Struktur von kurier.at offenbarte. Obwohl die Idee verlockend schien, die Navigation nur dann zu visualisieren, wenn der User sie aktiv anfordert und ihm dann alle Wege zu eröffnen, war das ganze doch zu ungewohnt für viele Leser. Diese extreme Veränderung der Page hinter einem so unscheinbaren Button, funktionierte für die avisierte Zielgruppe nicht.

  • Screen 4

    Hier sieht man zum ersten Mal maßgebliche Elemente der finalen Version. Die Navigation beschränkt sich auf fünf Channels, deren Submenüs in den Footer wandern. Ziel des ganzen ist es, den User mehr auf die bewusste Auswahl wichtiger Artikel zu fokussieren und die Navigation über Inhalte zu unterstützen. Hier findet man auch bereits den hervorgehobenen Top-Artikel, die oben eingezogene Lifestyle-Leiste und die Fotomeile.


  • Screen 5

    Ab hier beginnt die berühmte Feinkosmetik. Die Buttons in der Menüleiste werden durch echte Tabs ersetzt. Die Lifestyleleiste erfährt einen Versuch mit Farben. Rechts über der Fotomeile, halten die Top-Links Einzug. Ein fixer Bereich, in dem auf wichtige Services direkt verlinkt werden kann.

  • Screen 6

    Statt drei, gibt es nun fünf Artikel in der Lifestyle-Leiste. Die farblichen Hinterlegungen verschwinden wieder, wodurch die Kontraste erhöht werden und die Seite mehr „zusammenwächst“. Hier wird auch die wichtige Entscheidung getroffen, die Submarke „kurier.at“ aufzugeben und durch das Logo des gedruckten Blattes zu ersetzen.


  • Screen 7

    Die Suche wird, durch die Platzierung in der roten Leiste, deutlich aufgewertet. Der Login-Bereich wandert in die Kopfleiste. Es fällt die Entscheidung, dass alle Stories auf der Einstiegsseite mit Bildern veröffentlich werden. Sämtliche Elemente werden in ein strafferes Raster gepresst.

  • Screen 8

    Im letzten Schritt, wird die Gewichtung der Seite optimiert. Das Wetter wandert in die Lifestyle-Leiste, deren Bilder Abschied nehmen müssen. Die Fotos der Artikel in der zweiten Spalte erhalten dafür ein größeres Format, das mehr Inhalt zu vermitteln vermag.
    Der neue KURIER geht am 29.04.2006 online!


8 Kommentare zu „Design-Evolution VI: KURIER“

  1. Rene

    Ich möchte fast behaupten, dass mir der erste Entwurf eher gefällt als der endgültige (Stichwort “Farben”). :)

  2. macx

    Ich kann mich nur wiederholen: Die neue Webseite ist im Finanlsatus einfach erste Sahne. Wirklich super durchdacht, pfiffig und ein klares, sauberes Design.

  3. Milos

    Da kann ich mich der Meinung von Macx nur anschliessen. Ich bin immer noch sehr begeistert! Und die Betreiber dürfen sich glücklich schätzen. Ich denke ich bin nicht der einzige “Neu-Leser” der nun, Aufgrund deines Designs, zu den Stammlesern gehört… ;-)

  4. Markus Stefan

    @Rene: Der Screen ist auch ganz nett. Es fehlt aber für so ein Projekt noch seeehr viel Hirnschmalz und vor allem CI.
    @Macx: mille grazie! :-)
    @Milos: Du bist also der Leser, den wir gewonnen haben!!! ;-)

  5. mätthi

    wie immer wundervoll!!!!!

    Hab mit die Zeitung sofort gekuaft ;)

  6. Matthias

    Also ich fand den ersten Entwurf auch schöner als das Resultat.

  7. Milke

    hab ich gerade gefunden, guckst du hier..

    http://www.alvit.de/css-showcase/css-galleries-tabs-navigation-showcase.php

  8. Markus Stefan

    Das ist übrigens eine sehr schöne Seite! Hier sieht man recht gut, wie eigentlich gleiche Dinge, doch immer wieder anderes aussehen können.

Auch eine Meinung?

Trackback/Pingbacks:

Thomas goes .NET - [Design] Entstehung eines Portal-Designs
[...] Month: 49This Week: 12Comments: 1019 Community  Thursday, 29 June 2006 [Design] Entstehung eines Portal-Designs Hier kann man einmal nachlesen und sich anschauen, wie die Arbeit richtiger Designer abläuft,wenn es darum geht ein Portal zu kreieren bzw. zu relaunchen. Das Ergebnis ist durchaus überzeugend. Schon beeindruckend, vor allem wenn man selbst viele Projekte erlebt hat, in denen der Programmierer den Designer gespielt hat. Design 06/29/2006 22:16:49 (W. Europe Daylight Time, UTC+02:00)   Comments [0] _uacct = "UA-191133-2"; urchinTracker(); [...]