Webdesign

Webdesign-Trends im Jahr 2009

30. März 2009
von

Von Vitaly Friedman, übersetzt von Rene Schmidt

Webdesigner sind experimentierfreudig. Wir beobachten, wie Menschen mit unseren Werken interagieren und wir probieren gerne neue Designs aus, die sich vielleicht durchsetzen und zu Klassikern werden. Über die letzten Monate haben wir zahlreiche Webdesigns analysiert, neue Trends ausgemacht und viele Design- Programmier-Lösungen bewertet. Wir präsentieren Ihnen nun Möglichkeiten, neue Trends umzusetzen und entsprechende Beispiele. In diesem Artikel zeigen wir Ihnen 10 Trends, die wir ausgemacht haben.

Typische Design-Elemente im Jahr 2009

Lassen Sie uns zunächst einen Blick auf die unserer Meinung nach wichtigsten Trends werfen.

  1. Prägedruck

    Web Webdesign-Trends für das Jahr 2009

  2. Rich User Interfaces

    Web Webdesign-Trends für das Jahr 2009

  3. Transparente PNGs

    Web Webdesign-Trends für das Jahr 2009

  4. Große Schriften

    Web Webdesign-Trends für das Jahr 2009

  5. Alternative Fonts (sIFR z.B.)

    Web Webdesign-Trends für das Jahr 2009

  6. Modale Dialoge

    Web Webdesign-Trends für das Jahr 2009

  7. Media blocks

    Web Webdesign-Trends für das Jahr 2009

  8. Magazin-Layout

    Web Webdesign-Trends für das Jahr 2009

  9. Karussel-Slideshows

    Web Webdesign-Trends für das Jahr 2009

  10. Einführungstexte

    Web Webdesign-Trends für das Jahr 2009

Schauen wir uns diese Trends näher an.

1. Prägedruck

Den Trend zu Texten mit Prägedruck-Schriften haben wir im Webdesign während unserer Untersuchung nicht erwartet. Diese Technik wurde bis vor kurzem kaum im WWW verwendet. Prägedruck gibt es in verschiedenen Stilen auf verschiedenen Websites zu verschiedenen Themen. Besonders häufig wird sie bei Produktpräsentationen verwendet.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

2. Rich User Interfaces

Glücklicherweise werden die Benutzerschnittstellen auf modernen Websites und Web-Anwendungen schöner und benutzbarer. Im letzten Jahr wurde die Benutzerfreundlichkeit erheblich verbessert. Die Benutzerschnittstellen sind schöner und benutzbarer geworden. Inzwischen ähneln sie immer mehr klassischen Desktop-Anwendungen. AJAX und Flash werden häufig eingesetzt, um Nutzern die Art von dynamischer Interaktion zu bieten, die sie von anspruchsvollen und professionellen Anwendungen erwarten.

Insbesondere Weißraum haben wir im letzten Jahr häufig gesehen, ebenso wie mehr Zwischenräume und generell mehr Platz für Designelemente. Wir haben auch beobachtet, dass viele moderne Benutzerschnittstellen visuell auf Nutzerinteraktionen reagieren. Beispielsweise ändert sich die Darstellung eines Buttons, wenn man auf ihn klickt. Der Button sieht dann “eingedrückt” aus. Zu sehen ist der Effekt beispielsweise auf Newspond.com und Quicksnapper.com). Weiterhin können immer mehr Dienste von den Nutzern personalisiert werden. Für uns ist das ein klares Zeichen, dass das Jahr 2009 das Jahr der adaptiven Benutzerschnittstellen ist.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Beide Beispiele sind der Beweis, dass Entwickler mehr Wert auf die Präsentation der Funktionen ihrer Web-Anwendungen legen und versuchen, sie interaktiver zu machen.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

3. Transparente PNGs

Transparente PNGs werden, obwohl der Internet Explorer 6 sie nicht unterstützt, inzwischen häufig eingesetzt. Offensichtlich versuchen Designer, Hintergrundbilder nahtloser zu kombinieren und einen Stil nachzuahmen, der bisher meist nur in Print-Magazinen verwendet wurde.

In den meisten Fällen heben sich halbtransparente Hintergründe vom Rest einer Seite ab und eignen sich daher gut, um ein wichtiges Designelement hervorzuheben, beispielsweise eine Überschrift oder eine Ankündigung. Manchmal werden transparente PNGs auch als Hintergrund für modale Dialoge verwendet.

Im letzten Jahr haben wir schon verschiedene Wege vorgestellt (engl.), wie Sie Transparenz im Webdesign einsetzen können. Viele Designer scheinen das tatsächlich gemacht zu haben. Meist wird Transparenz im Kopf- oder Fußbereich einer Seite verwendet, andere Designs gehen aber darüber hinaus.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

4. Große Schriften

In der Vergangenheit haben wir bereits einige sehr schöne Beispiele für den Einsatz von großen Schriften vorgestellt. Im Jahr 2009 bleiben sie weiterhin populär. Besonders Design-Agenturen, Portfolios, Produkt-Websites und Onlinedienste nutzen große Schriften, um ihre wichtigsten Aussagen hervorzuheben.

Die Größe der Schriften geht oft über 36 Pixel hinaus und in vielen Fällen werden teure Schriften eingesetzt, um Botschaften zu übermitteln. Auch die Aspekte der Typografie scheinen ins Zentrum der Aufmerksamkeit bei Webdesignern gerückt zu sein, beispielsweise Durchschuss, Zeilenhöhe und die Art des Fonts. Das Resultat ist, dass diese Websites besser aussehen, ein konsistenteres Design haben und Vertrauenswürdigkeit signalisieren.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

5. Alternative Fonts

Auch Fonts für die Gestaltung von Text stehen vermehrt im Zentrum der Aufmerksamkeit von Websdesignern. Obwohl die Klassiker wie Helvetica, Arial, Georgia und Verdana zweifellos dominieren, haben wir einen leichten Trend hin zu alternativen Fonts ausgemacht (umgesetzt mit sIFR beispielsweise).

Interessant ist, dass diese Fonts oft sehr gut in das Design der Websites integriert sind und den visuellen Eindruck der Website verbessern. Sie werden meist nie aus reinem Selbstzweck oder als “Upgrade” der bestehenden Typografie einer Website verwendet.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

6. Modale Dialoge und Lightboxes

Modale Dialoge (Dialogfenster) sind im Wesentlichen die zweite Generation der Popups. Sie sind eine benutzerfreundliche Alternative zu den klassischen Javascript-Dialogen und lenken aktiv die Aufmerksamkeit des Nutzers. Bevor sie über dem Inhalt der Website erscheinen, ist immer eine Aktion des Nutzers erforderlich, beispielsweise ein Login oder eine Registrierung. Die Fenster von modalen Dialogen sind oft geschickt gestaltet: sie haben meist halb transparente Hintergründe und einen Knopf zum Schließen.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

7. Media Blocks

Mit der zunehmenden Verbreitung von Breitband-Internet verbringen Nutzer mehr Zeit im Internet als noch vor einigen Jahren. Designer nutzen die neuen Möglichkeiten, um Inhalte attraktiver und einprägsamer zu präsentieren. Es ist daher kein Wunder, dass immer mehr Websites Videos und Screencasts dafür verwenden. Auf diese Weise ist es möglich, Informationen schnell und effizient zu vermitteln.

Nutzer können sich zurücklehnen und die Informationen so sehr einfach aufnehmen und schrittweise nachvollziehen, ohne nach Informationen suchen zu müssen, Texte zu lesen oder sich mit der Navigation zu beschäftigen. Die Filme sind normalerweise recht kurz und kommen sofort auf den Punkt. Sie sind meist sachlich gehalten, können aber auch unterhaltsam sein.

Sie sollten aber sicherstellen, dass Videos eine Alternative sind und nicht der einzige Inhalt Ihrer Website. Nicht jeder Nutzer hat eine Breitband-Verbindung und nicht jeder Nutzer möchte Videos sehen, beispielsweise weil gerade Musik im Hintergrund läuft. Außerdem hat nicht jeder Flash oder JavaScript installiert oder aktiviert.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

8. Magazin-Layout

Eine interessante Entwicklung beim Blog-Design ist die Übernahme verschiedener Layout-Techniken, die bisher nur bei traditionellen (Print-) Medien genutzt wurden. Die Anordnung der Beiträge, der Gebrauch von Typografie, Illustrationen und sogar die Textausrichtung ähneln traditionellen Print-Techniken. Grid-basierte Designs werden ebenfalls populärer, werden derzeit aber meist nur auf Portfolio- und Produkt-Websites sowie großen Blogs verwendet – fast nie sieht man sie auf Unternehmenswebsites oder Online-Shops.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

9. Karussell-Slideshows

Karussell-Slideshows sind Slideshows mit einer Karussell-Navigation, in der die Vorschaubilder vertikal oder horizontal bewegt werden, während man durch die Slideshow blättert. Um zu navigieren, muss der Nutzer in der Regel auf einen Pfeil klicken. Das Karussell bewegt sich dann in die gewünschte Richtung.

Anstatt sich auf der Suche nach Inhalten durch verschiedene Bereiche einer Website zu klicken, können Nutzer die Inhalte in der Karussell-Navigation ohne vertikales Scrollen schnell durchstöbern. Die Nutzer sparen Zeit und die Karussell-Navigation lenkt deren Aufmerksamkeit direkt auf die Inhalte. Diese Art der Navigation ist oft auf Websites zu Unterhaltungsthemen und großen Blogs zu finden. Aber auch Designer verwenden sie oft in ihren Portfolios, um ihre Referenzen interaktiv zu präsentieren.

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

10. Einführungstexte

Der Bereich links oben auf einer Website ist der wichtigste Teil einer Seite, weil Nutzer dort zuerst hinsehen. Daher ergibt es Sinn, dort die wichtigste Botschaft einer Website zu platzieren, um sicherzustellen, dass sie schnell gelesen wird.

Dies ist auch das, was die meisten Designer tun, egal, ob es sich um eine Web-Anwendung, ein Corporate Design, einen Online-Dienst oder um ein Portfolio handelt – sie platzieren Slogans und kurze Einführungstexte im oberen Bereich einer Seite und verwenden dafür, ausdrucksstarke und lebendige Typografie, um einen guten ersten Eindruck zu hinterlassen. Einige Einführungstexte sind kurz, andere eher lang. In jedem Fall nehmen sie recht viel Platz ein – oft gehen sie über die ganze Breite des Layouts und sind 250 bis 400 Pixel hoch. Allerdings sind solche Einführungstexte eher selten auf Blogs oder in Online-Shops zu sehen. ™

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

Webdesign-Trends für das Jahr 2009

2 Kommentare zu „Webdesign-Trends im Jahr 2009
  1. inservo am 30. März 2009 um 17:10

    Ich will ja nicht überkritisch sein oder meckern, aber kann es sein, dass die Posts anfangen, sich zu wiederholen? Ich bin irgendwie der Meinung, exakt diesen Post schonmal gelesen zu haben oder ist das nur ein Fehler in der Matrix (=DejaVu)?

  2. timmse am 30. März 2009 um 21:06

    Gabs schonmal im Smashingmag… deswegen steht da ja auch “übersetzt von..” ;Ö

    >> http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!