Designtrends aufspüren und nutzen
Angesagte Optik

Designsünden?

Designtrends aufspüren und nutzen

Müssten Designer eine Liste mit Dingen bilden, die out sind, wäre das vermutlich kein großes Problem: Unterstrichene Links, dicke Fotos als Hintergrundbilder, sichtbare HTML-Tabellen oder -Frame-Ränder, Standardränder rund um verlinkte Bilder und noch mehr Sünden fallen einem da sofort ein. Aber sind das wirklich alles Sünden? Im Prinzip denken wir doch einfach nur an ein spezielles schlechtes Beispiel zu jedem dieser Aspekte. Aber gerade bei unterstrichenen Links oder dicken Fotos als Hintergrundbild ist es eher der dilettantische Einsatz, der bisher abschreckt. Gut eingesetzt können beide Mittel durchaus überzeugen.

Design und Technik

Designtrends aufspüren und nutzen

Lässt sich die Out-Frage vielleicht technisch besser beantworten? HTML-Ränder in hässlicher 3D-Grau-Optik sind sicherlich nicht mehr aktuell und kommen auch nie wieder. Hier hat die Technik, sprich der CSS-Standard, neue Möglichkeiten gebracht. Daraus lässt sich schon etwas ablesen: Trend ist oft mit einer technischen Innovation verbunden. Der CSS-Einsatz hat auf jeden Fall neue Webdesigns angestoßen. Am auffälligsten ist das sicherlich im Typografie-Bereich, der nun endlich über fett und kursiv hinausgeht. Vorreiter sind hier individuell gestaltete Blogs, die sich auf das Wesentliche konzentrieren.

Empfehlungen aus der Technik abzuleiten ist allerdings schwierig. Frames soll man meiden das hat optisch wenig Auswirkungen. Zentrale CSS und Standardkonformität ist wichtig die Auswirkungen hier sollen sich in Grenzen halten. Tatsächlich zielen viele dieser Empfehlungen eher auf einfachere Verwaltung und bessere Verbreitung der Seite ab. Sie werden zwar teilweise wie Dogmen ausgekämpft, haben aber auf der optischen Seite kaum Auswirkungen.

Wenn schon nicht feststellbar ist, was genau out ist, und die technische Entwicklung maximal optische Innovationen hervorbringt, aber keine verhindert, lässt sich der Begriff Trend oder trendiges Design kaum eingrenzen. Einen Ausweg allerdings gibt es: die Kombination aus Anschauen und Ausprobieren. Dabei geht es vor allem auch um das Herausarbeiten und Auflösen von Widersprüchen: Modernes Design kontra Technik und modernes Design kontra Usability.

Zielgruppe umreißen

Designtrends aufspüren und nutzen

Innovativ und trendig heißt oft neu oder gar außergewöhnlich. Dementsprechend lässt sich ein solches Design kaum bei jeder beliebigen Zielgruppe umsetzen. Für Websites wie OBI oder die Post ist der Trend eindeutig bestimmt von ihrer Hausfarbe und vielen Farbflächen teilweise durchsetzt mit Icons und einer einfachen Symbolsprache. Allerdings fehlt diesem Trend der Geruch des Neuen. Rein gestalterisch handelt es sich eher um eine Konvention als einen Trend. Echtes Trenddesign bricht meist mit bestehenden Regeln.

In ihren Anfängen entstehen Trends oft in kleinen, innovativen Agenturen. Aber auch außerhalb des kommerziellen Bereichs entstehen Trends wie beispielsweise das Thema Street Art. Angelehnt an die Graffiti-Szene sind hier Gestaltungselemente über den Airbrush in den Bildbearbeitungswerkzeugen in das Design eingeflossen. Aktuell kommen aus dieser Szene Trends wie fließende Farben, also frisch gesprüht, und Schablonenschriften wie die Gunplay.

Street Art ist natürlich nicht für jede Website und Zielgruppe das Richtige. Der Trend entwickelt sich nach den meist sehr extremen Anfängen in Nischen hin zu bestimmten Branchen. Häufig eingesetzt werden solche Effekte im Trendsport-Bereich beim Surfen, Kiten oder Snowboarden. Auf dem Weg verlieren extreme Effekte oft ihre starke Ausprägung. Sie werden an das Image der jeweiligen Firma angepasst. Nimmt man Trendsport-Firmen wie Volcom (www.volcom.com) aus dem Snowboard-Modebereich, so sieht man, dass nicht das Trendige an sich im Vordergrund steht, sondern das Image der Firma. Volcom ist mit Musik assoziiert, verwendet Collagen und Foto-Elemente, um ein eigenes Lebensgefühl sichtbar zu machen. Trend-Elemente sind von ihren wilden Anfängen schon auf absolutes Normalmaß gestutzt worden.

Trash ist cool

Designtrends aufspüren und nutzen

Einen ähnlichen Weg wie die Street Art hat die Trash-Optik genommen. Ebenfalls als Exot gestartet, haben sich ausgefranste Buchstaben, Kanten und Formen mittlerweile schon fast in den Mainstream verirrt. So zeigt beispielsweise BMW im Werbebanner für das BMW-Williams-Formel-1-Team ausgefranste, verwaschene Sätze auf einer Asphaltoberfläche. Hier wird der Trend zielgruppengerecht aufgearbeitet. Die optische Plausibilität ergibt sich aus der Verbindung Bremsspur, Asphalt und Schrift.

Ist ein Trend erst einmal für eine weite Zielgruppe umgesetzt, verliert er logischerweise etwas das Ansehen des Coolen, Neuen. Das heißt aber nicht, dass er nicht auch im Trendbereich weiter verwendet werden könnte. Oftmals ergibt sich kombiniert mit anderen Gestaltungselementen ein neuer Trend oder zumindest eine sehr spannende Abwandlung. So entsteht aus einem Trend eine Verbesserung und schließlich wieder ein ganz eigener Trend.

Tabellig

Designtrends aufspüren und nutzen

Bei größeren Websites steckt im Hintergrund immer häufiger eine umfangreiche Anwendung, beispielsweise ein Content-Management-System, ein Shop oder beides. Dies wirkt sich oft auch auf das Design aus: Eine tabellenlastige Optik mit Kästen und sichtbaren Modulen entsteht. Die Navigation ist oftmals recht gleichförmig an der linken Seite oder dem oberen Rand platziert je nach Gusto mit Javascript oder ohne.

Diese starren Regeln zu durchbrechen ist aufwendig, aber im Trendbereich durchaus gebräuchlich. Quiksilver (www.quiksilver.com), eine Modefirma, verwendet beispielsweise einen animierten Quader, der dem Nutzer zuerst ein paar Fragen stellt und dann die Navigation zeigt. Die Navigation selbst ist dann allerdings wieder hierarchisch gelöst, um der Komplexität einer solchen Seite Rechnung zu tragen. Ebenfalls außergewöhnlich ist die Navigation von Nike (www.nike.com). Nike reduziert die Seite beim Einstieg auf das Wichtige: den Kunden in eine Sprache und einen Bereich zu transportieren. Technisch kommt bei beiden Ansätzen Flash zum Einsatz.

Bei der Navigation zeigt sich allerdings, dass der Hang zum Außergewöhnlichen auch seinen Preis hat. Die Usability, die Nutzbarkeit, nimmt ab, wenn der Nutzer auf einer Website ihm unbekannte Navigationselemente erkunden muss. Die Navigation links oder oben ist für jeden leidlich erfahrenen Websurfer kein Problem steht die Navigation auf einmal rechts oder versteckt sich hinter einem Kubus, wird es schwieriger. Hier muss die Zielgruppe der Website auf jeden Fall den nötigen Spieltrieb mitbringen. Ideal ist, wenn es immer einen schnellen alternativen Weg zur Information gibt.

Reines Trenddesign steht allerdings nicht nur mit der Usability auf Kriegsfuß, sondern manchmal auch mit der zurzeit vielfältig diskutierten Accessibillity. Hier ist vor allem das Problem, dass viele trendige Designformen, Schriften und Ähnliches ein hohes Maß an Positions- und Größenkontrolle benötigen.

Interaktive Optik

Designtrends aufspüren und nutzen

Ebenfalls in den Bereich Trend fällt die interaktive Optik. Zwei Dinge stehen hier zur Auswahl: Zufall und Nutzerwahl. Per Zufall lassen sich Bilder, das Design selbst oder Teile wie einzelne Fotos ändern. Etwas weniger gebräuchlich ist die Nutzerwahl: Der Nutzer hat die Möglichkeit, auf Knopfdruck das Design oder Teile davon zu wechseln. Im Zusammenspiel mit Personalisierung entsteht eine individuelle Website. Allerdings wird gerade Letzteres eher selten eingesetzt, weil individuelles Aussehen
sich unter Umständen negativ auf den Wiedererkennungswert und die Identifikation mit der Lebenswelt einer Website auswirkt.

Trend-Elemente

Designtrends aufspüren und nutzen

Auf einer Website folgen meist nur bestimmte Elemente einem Trend zusammengenommen ergibt sich dann der Eindruck einer trendigen Seite. An dieser Stelle sollen kurz einige Elemente beleuchtet werden, die zur Zeit einem Trend entsprechen. Vieles davon war über längere Zeit out. Hauptsächlich deshalb, weil es mit den heute dilettantisch wirkenden Anwendungsformen in der Frühzeit des Webs assoziiert wird.

Zu solchen Problemkindern gehören Verläufe und sich wiederholende Hintergründe. Bei den Hintergründen hat CSS auch ein wenig mitgeholfen, da damit ein Element auch nur einmal oder nur horizontal oder vertikal wiederholt dargestellt werden kann. Ebenfalls in ist der Nadelstreifen-Look, also jede Art von schrägen Linien in dicker oder dünner Ausprägung und als Raster. Technisch landen sie als Hintergrundbild in Tabellenzellen oder div-Blöcken und entwickeln oft im Zusammenspiel mit Elementen im Vordergrund ein Eigenleben.

Eigenentwicklung

Designtrends aufspüren und nutzen

Eine Eigenentwicklung soll nun noch den Weg in die Praxis ebnen. Als Trend-Element fiel die Wahl auf ein Hintergrundmuster in Ornamentform. Ausgangspunkt ist die Website www.dingbats-uk.org.uk/download/sassy/sg.html. Selbst nicht gerade trendig, finden Sie dort Links zu interessanten Schriften mit Symbolen. Die richtigen Ornament-Elemente liefern die Flowers-Schriften, aber auch alle anderen sind einen Blick wert. Für noch mehr Möglichkeiten kann man natürlich auch die Tapete in Omas Wohnzimmer oder ein beliebiges anderes Foto als Ausgangsbasis verwenden.

Installieren Sie den Truetype-Font und öffnen Sie dann ein Vektorgrafikprogramm (hier: Illustrator). Blenden Sie das Raster ein und zeichnen Sie ein Quadrat mit sichtbarer Linie als Hilfshintergrund für die Kachel. Fügen Sie dann einige Zeichen aus dem Font ein, wählen Sie das oder die Elemente aus und wandeln Sie es mit [Strg Shift O] in Pfade um. Mit der Funktion Zusammengesetzten Pfad zurückwandeln aus dem Kontextmenü lassen sich nachträglich einzelne Elemente löschbar machen, um das Ornament frei zu gestalten.

Rotieren Sie die Elemente und erstellen Sie teilweise neue. Komponieren Sie das Ornament innerhalb des Rechtecks. An zwei Seiten, zum Beispiel links und unten, können die Elemente auch über das Rechteck hinausragen. Sie werden später um die Länge des Rechtecks verschoben und erscheinen somit später rechts und oben.

Entwickeln Sie zuerst eine Reihe und verschieben Sie diese dann numerisch, um mehrere Reihen untereinander zu hängen. Die Werte sind dabei individuell die endgültige Größe wird erst im Bildbearbeitungsprogramm realisiert. Schieben Sie dann den mittleren Teil der Gesamtkomposition über das Rechteck und skalieren Sie ihn, falls nötig, damit die Kachelübergänge passen.

Wählen Sie dann die Elemente aus und verwenden Sie Objekt, Schnittmaske, Erstellen. Kopieren Sie das Element in ein neues Photoshop-Dokument (auf der Heft-CD muster1.psd). Stellen Sie in Photoshop den Bereich mit dem Freistellungswerkzeug quadratisch frei.
Jetzt geht es ans Einfärben: Wählen Sie die Hintergrundebene aus und füllen Sie mit dunklem Rot (RGB: 104/10/0). Wählen Sie die Ebene und wählen Sie den Effekt Farbüberlagerung mit einem hellen Rot. Mit Abgeflachte Kante und Relief sowie Schein nach außen entsteht noch eine geprägte Optik.

Füllen Sie eine weitere Ebene mit dem Muster Tür mit Fliegengitter aus der Strukturen-Musterbibliothek. Andere Muster gehen natürlich auch. Stellen den Ebenenmodus auf Weiches Licht und die Deckkraft auf 20% (muster3.psd). Dann passen Sie noch die Bildgröße auf 128 x 128 Pixel bei 72 dpi an (muster4.psd). Um das Muster zu testen, können Sie es auswählen, mit Bearbeiten, Muster festlegen in ein Muster verwandeln und damit ein neues Dokument füllen.

Fazit

Designtrends aufspüren und nutzen

Trendiges Design ist bei weitem nicht auf Seiten mit sehr junger Zielgruppe oder auf Seiten der Trend-Ecke beschränkt. Ein bisschen Trend und Anderssein tut vielen Websites gut. Sie wirken dadurch unterschwellig moderner und heben sich von der Konkurrenz ab. Allerdings muss alles stets in den Gesamtrahmen passen. Design ist kein bunter Turm aus Legobausteinen, der einfach aus einem großen Haufen aus Steinchen zusammengesetzt wurde. Vielmehr besteht die Kunst gerade darin, die Steinchen zu sortieren, die richtigen auszusuchen und sie dann zu einer schlüssigen Komposition zu arrangieren. Im Vordergrund sollte immer das Image des Website-Betreibers und die transportierte Lebenswelt stehen. Der Aufbau von Gestaltungselementen erfordert dann viel Feingefühl und Geduld.