Trends 2020: 3 Ideen, ein geradliniges Webdesign aufzuwerten

Trends 2020: 3 Ideen, ein geradliniges Webdesign aufzuwerten

Titelfoto von Free-Photos auf Pixabay

Schon auf webdesign-journal.de gibt es eine erfrischend kritische Auseinandersetzung mit den mindestens einmal jährlich auftauchenden Trend-Empfehlungen.

Auch wir möchten Dir hier nicht weitere X Trends vorstellen, sondern liefern Tipps, wie Dein schlichtes Webdesign mit wenigen Handgriffen individueller gestaltet werden kann.

Weiterhin ausgeklammert ist in diesem Artikel das Thema Mobile First/responsive Webdesign, da dies mittlerweile einfach zu den Standards gehört. Eine moderne Seite muss mobil optimiert sein. Das ist kein Trend. Das ist einfach so.

Standardlayouts im Web

Schon seit längerem gibt es einen gewissen Standard was die Layouts für Webseiten angeht: Geradlinigkeit von Kopf bis Fuß: Oben ein über die gesamte Bildschirmbreite verlaufendes Motiv, im Inhaltsbereich gibt es Kacheln (auch Card Design genannt) und im Fuß des Webdesigns die Kontaktdaten und/oder Links zu Impressum und Datenschutzerklärung.

Standardlayout: Geradlinig von Kopf bis Fuß

Der klassische Aufbau, wie er bei Webseiten heute häufig zu finden ist: Geradlinig, unverfänglich und auf den Inhalt fokussiert.

Grundsätzlich gibt es nichts daran auszusetzen. Schließlich ist diese Form nicht umsonst so beliebt: Übersichtlich, schnell und einfach aufgebaut, klarer Fokus auf den Inhalt. Vor allem bei einem hohen Umfang an Informationen ist ein geradliniger Aufbau zu empfehlen.

Gleichzeitig wird das Internet dadurch eintönig, sich von der Masse abzuheben schwierig. Während es für einen kreativen Designer zudem frustrierend ist, im Grunde immer wieder dasselbe Webdesign zu verwenden, wünschen Kunden sich oft genau das, was ihnen bei den Mitbewerbern gefällt. Da der oben abgebildete Aufbau häufig anzutreffen und gelernt ist, wird es eben oft gewünscht. Dazu passt das Zitat von Jonas Hellwig wirklich wie die Faust aufs Auge: „Der Webdesign-Trend ist auf seinem Höhepunkt angekommen, wenn Profis sich am Effekt bereits satt gesehen haben, Kunden aber unbedingt genau diesen Stil wünschen.“ (wie auch schon im oben verlinkten Artikel genannt)

Nach einem Höhepunkt folgt in der Regel bekanntlich das Abflauen. Allerdings glauben wir, dass sich der Grundaufbau bei den meisten Seiten in naher Zukunft nicht ändern wird. Reibungslose Bedienbarkeit ist bei den allermeisten Webseiten das A und O, der zu vermittelnde Inhalt hat Vorrang vor ausgefallenen Designs. Der Nutzer soll finden, wonach er sucht und einfach Kontakt aufnehmen und/oder ein gewünschtes Produkt erwerben können. Bedeutet das zwangsläufig ein immer eintöniger werdendes Erscheinungsbild im Web? Wie lässt sich ein geradliniges klassisches Webdesign aufwerten, um dem Kundenwunsch nach einfacher Bedienbarkeit gerecht zu werden und gleichzeitig frischen Wind in die Sache zu bringen? Ideen für mehr Individualität im Webdesign, ein Stück Zuckerbrot für das Designerherz und Wiedererkennungswert für Deine Webseite.

Idee 1: Einfacher Twist im Kopfbereich

Abwandlung im Kopfbereich mit Wasserzeichen

Durch kleine Abwandlungen im Kopfbereich bekommt der klassische Aufbau einer Webseite eine individuelle Note.

Hier bleibt der Inhaltsbereich der Seite geradlinig, der Fokus wird somit nicht von den eigentlichen Inhalten abgelenkt. Im Kopfbereich jedoch wird der Logo- und Navigationsbereich schmaler, ein passendes Wasserzeichen eingefügt. Alternativ zum Wasserzeichen kann eine individuelle Grafik/Illustration natürlich auch mit voller Deckkraft eingesetzt werden.

Es gibt noch kein Bildelement, das zu Deinem Unternehmen passt? Dann können folgende Fragen helfen: Kommen Elemente aus der Natur in Frage (Pflanzen, Tiere, Landschaften)? Ein alltägliches Objekt? Eine geometrische Form? Mit einem solchen Element entsteht in Deinem Webdesign in jedem Fall ein dezenter Wiedererkennungswert, der dem Betrachter sofort bei Seitenaufruf ersichtlich wird und gleichzeitig nicht vom eigentlichen Inhalt ablenkt.

Wenn Du bei der Erstellung von passenden Bildelementen Hilfe benötigst, melde Dich gerne bei uns.

Du fragst Dich vielleicht, warum in diesem Beispiel das Motiv von der Höhe her reduziert dargestellt wird. Ein Bild mit hoher Aussagekraft darf natürlich auch in Kombination mit einem Wasserzeichen größer dargestellt werden. Die schmalere Abbildung jedoch ist zu empfehlen, wenn an dieser Stelle eine Grafik Verwendung findet, die lediglich ein Schmuckelement darstellt (siehe Exkurs weiter unten).

Idee 2: Hintergründe und Überlagerungen für mehr Lebendigkeit in Deinem Webdesign

Bruch der Geradlinigkeit mit geometrischen Formen im Hintergrund

Eine auf den ersten Blick starke Abweichung vom geradlinigen Aufbau, wobei dennoch eine gute Übersichtlichkeit erhalten bleibt.

Dieser Vorschlag hebt sich deutlich von dem klassischen Design ab. Hier findet sich ein großes Motiv im Kopfbereich, das ein passendes Zitat untermalt. Grafiken im Hintergrund (hier geometrische Formen) und Überlagerungseffekte mit dezenten Schatten sorgen in diesem Webdesign für Tiefe und Lebendigkeit (Wie in diesem Trend-Artikel unter Punkt 4). So wird die starre Geradlinigkeit aufgebrochen während durch den gezielten Einsatz des Effekts die Bedienbarkeit erhalten bleibt.

Übrigens: Keine Angst vor langen Webseiten. Der Mythos, eine Seite müsste möglichst ohne langes Scrollen die wichtigen Inhalte liefern, ist eben nur ein Mythos. Du kennst das bestimmt von Dir selbst: Du scrollst eine Webseite eher bis zum Ende, als dass Du Dich durch alle Navigationspunkte klickst. Gleichzeitig gilt es dabei zu beachten, dass die Inhalte zur jeweiligen Seite passen. Manchmal ist das Anlegen eines weiteren Menüpunktes dann eben doch die bessere Entscheidung. Das kommt ganz auf Art der Webseite, des Themas, der beabsichtigten Aussage an. Zu längeren Webseiten passt in jedem Fall die beliebte Methode, die Navigation beim Scrollen am oberen Bildschirmrand fixiert zu halten.

Idee 3: Verspieltes Webdesign im Fußbereich

Überraschung im Fuß der Webseite

Hier kommt das Beste zum Schluss: Ein verspieltes Design im Fußbereich sorgt für einen kleinen Überraschungsmoment bei Deinen Webseitenbesuchern.

Für einen schönen Überraschungseffekt sorgt eine besondere Gestaltung im Fuß der Webseite. Wie auch bei den vorrangegangenen Vorschlägen darf hier natürlich eine Illustration gewählt werden, die zu Deiner Webseite passt. Anstelle der Blüten können hier beispielsweise Wellen mit stilisierten Korallen eingesetzt werden, wenn Dein Unternehmen einen Bezug zum Ozean hat. Auf der von uns erstellten Webseite folge-deinem-talent.de sind geometrische Formen zum Einsatz gekommen. Diese finden sich in dem Fall sowohl im Kopf- als auch im Fußbereich des Webdesigns.


Exkurs: Icons/Bilder/Stockmaterial

Ein großes Bild direkt am Anfang Deiner Webseite macht natürlich nur Sinn, wenn es etwas zu erzählen hat. Generell wirst Du durch Verwendung von Stockbildern natürlich keine Punkte in Sachen Individualität/Wiedererkennung gewinnen.

Besser ist es da bereits, sich bei der Bildrecherche Zeit zu nehmen, um besondere Motive auszuwählen und/oder genutztes Material aus Bildarchiven durch Bearbeitung aufzuwerten. Denkbar ist beispielsweise die Umsetzung eines Farbverlaufs oder – aufwändiger – weite Teile eines Bildes wie eine Skizze erscheinen zu lassen und nur bestimmte Bereiche wie im Original zu belassen. Dieser Effekt eignet sich auch, um den Fokus auf einen bestimmten Bereich des Bildes zu lenken. Bei der Bearbeitung sind selbstverständlich die Nutzungsrichtlinien der jeweiligen Datenbank/des Urhebers zu respektieren.

Noch besser sind individuelle Fotos vom Fotografen oder speziell für Dein Unternehmen erstellte Illustrationen. So kann beispielsweise Dein Team gezeigt werden und das Webdesign bekommt automatisch eine persönliche Note. Eine individuelle Illustration kann perfekt auf Dein Unternehmen/Deine Botschaft zugeschnitten werden und sagt damit auf einen Blick mehr als tausend Worte.

Vor diesem Hintergrund sind ebenfalls austauschbare Icons wie solche aus Stockarchiven oder vorgefertigte Icon-Sets und -Schriftarten mit Vorsicht zu genießen. Die Verwendung solcher Materialien ist einfach und vergleichsweise kostengünstig, verwässert aber Deine Aussage, wenn dasselbe Icon auf jeder zweiten Webseite Verwendung findet.

Die Investition in individuelle Grafiken zahlt sich aus, wenn Du mit Deiner Webseite aus der Masse hervorstechen willst. Bedenke auch, dass Du nicht jedes gesetzte Bild individuell halten musst. Eine personalisierte Grafik im Kopfbereich Deiner Seite macht schon einen gewaltigen Unterschied. Dem tut eine Kombination von gut gewähltem Stockmaterial im Inhalt keinen Abbruch.

Was es im responsive Webdesign bei den Bildgrößen und Dateiformaten zu beachten gibt, findest Du in diesem Artikel.


Fazit: Kleine Abwandlungen im Webdesign sorgen für Wiedererkennung

Ein geradliniges Design bringt viele Vorteile mit sich: Der Besucher findet sich einfach zurecht und kann schnell Kontakt zu Deinem Unternehmen aufbauen oder ein gewünschtes Produkt unkompliziert erwerben. Zudem lässt sich die Erstellung einer Webseite durch einen einfachen Aufbau kostengünstig halten, da auf individuelle Designarbeit verzichtet wird. Durch ein wenig Mehraufwand kann jedoch auch einem schlichten Layout eine persönliche Note verliehen werden.

Ob es eine dezente Anpassung im Kopfbereich, ein sich durch das gesamte Webdesign ziehender Bruch der Geradlinigkeit oder eine Überraschung am Schluss der Webseite sein darf, wird natürlich individuell entschieden. Unsere Beispiele sorgen in jedem Fall für den nötigen Wiedererkennungswert auf Deiner Webseite und erhalten dabei die Vorteile eines geradlinigen Webdesigns.

Tags


Kommentare

Es sind noch keine Kommentare vorhanden.

Kommentar schreiben

Captcha