Webdesign-Trends 2016 | 2017

Das World Wide Web entwickelt sich rasant. Das gilt sowohl für die Technologien und das Nutzungsverhalten als auch für das Design der Internetseiten. Trends kommen und gehen zwar, verdienen aber auf jeden Fall Beachtung. Ansonsten gilt die Seite als veraltet, wird einfach weggeklickt.

Die aktuellen Trends im Überblick:

Endlos scrollen oder „Infinite Scrolling“

Klicken oder scrollen? Mit dieser Frage beschäftigen sich Webdesigner seit der Erfindung des World Wide Webs. Die äußeren Umstände begünstigen jetzt das Scrollen, denn Smartphones und Tablets haben keine Maus mehr, Klicken ist deshalb aus der Mode geraten. Es wird ersetzt durch das „Über den Bildschirm wischen“.

Scrollen beziehungsweise Wischen geht rasend schnell, sodass die Länge der Webseite keine Rolle mehr spielt. Einige Unternehmen packen inzwischen sogar alle Inhalte auf genau eine Seite. Das One-Page-Design, auch bekannt als seitenloses Design, verzichtet komplett auf Klicks – Nutzer von Tablets oder Smartphones begrüßen diese Art der Webseitengestaltung.

Seitenloses Design eignet sich vor allem für kleine Unternehmer, wie Freiberufler, Alleinunternehmer, Handwerker oder Dienstleister. Bietet Ihr Unternehmen eine Vielzahl an Produkten und Dienstleistungen an, stößt das seitenlose Design jedoch an seine Grenzen. Unterschiedliche Kategorien oder eine Menge von Abbildungen lassen sich ebenfalls schlecht umsetzen.

Behalten Sie zudem die Ladezeit im Blick. Dauert das Laden einer Seite mehrere Sekunden, ist es empfehlenswert, die Inhalte auf mehreren Seiten zu verteilen. Die Ladezeiten hängen zum Teil auch von Hoster ab. Savvii ist beispielsweise ein Hoster, der sich auf WordPress spezialisiert hat. Deshalb werden bei Savvii Webseiten, die mit WordPress umgesetzt wurden, besonders schnell geladen.

Responsives Design

Letztes Jahr gab es ein neues Google-Update, das Webseiten ohne mobile Version schwer getroffen hat. Diese sind nämlich in den Google-Suchergebnissen nicht mehr in der Top-Platzierung zu finden. Die Umstellung auf mobil oder noch besser auf ein Responsives Design wird somit zum Muss.

Im übertragenen Sinne bedeutet Responsives Webdesign „reagierendes Webdesign“. Das Layout der Webseite ist so flexibel gestaltet, dass ein Aufruf auf dem Computer-Desktop, Tablet oder Smartphone immer die gleiche Benutzerfreundlichkeit bietet.

Die strikte Trennung einer Mobil- und einer Desktop-Version ist nicht mehr zeitgemäß, da die Nutzung von mobilen Endgeräten stetig steigt. Der Nutzer erwartet überall und jederzeit eine Webseite im perfekten Design.

Für Responsives Design gibt es auch vorgefertigte Templates, die die Umsetzung einer responsiven Internetseite erleichtern. Für ansprechende WordPress-Vorlagen lohnt es sich, einen Blick auf www.themeforest.net zu werfen.

Flat Design

„Keep it simple“ lautet die Devise, wenn es um die Erstellung von Webseiten geht. Schon seit einigen Jahren heißt es in der Branche „weniger ist mehr“. Auf Spielereien, wie zum Beispiel Flash Intros wird weitestgehend verzichtet. Stattdessen setzt sich das sogenannte Flat oder auch minimalistische Design immer häufiger durch. In der Anfangszeit wurden die optischen Bausteine teilweise so stark reduziert, dass nicht immer klar war, was angeklickt werden kann und was nicht. Das hat sich inzwischen wieder geändert.

Heute setzt das Flatdesign immer noch auf minimalen Inhalt, dynamische Farben und einfache Typografien. Mindestens genauso wichtig sind aber die Bedürfnisse des Nutzers, der sich gut und schnell zurechtfinden soll. Das gilt auch für Nutzer, die technisch weniger erfahren sind.

Vorteilhaft beim Flat Design sind zudem die hohen Ladegeschwindigkeiten und die einfache Umsetzung auf Responsives Design.

Storytelling

Content – also hochwertiger Inhalt – spielt bei der Webseitengestaltung schon lange eine wichtige Rolle. Die Nutzer werden immer anspruchsvoller, schnell zusammengeschriebene Inhalte werden nicht mehr akzeptiert, stattdessen werden informative Texte mit Mehrwert gefordert.

Unter Storytelling versteht man im klassischen Sinne, dass Werbebotschaften in Form einer Geschichte transportiert werden. Diese Art der Präsentation schafft Nähe und erhöht die Glaubwürdigkeit. Eine Geschichte kann man nicht nur lesen, sondern auch erleben. Storytelling im Webdesign bedeutet, dass der Nutzer mit einem sogenannten Storyboard durch eine Geschichte beziehungsweise einen Prozess geführt wird. Das heißt: Der Nutzer klickt sich durch die Geschichte und folgt zum Beispiel einem interaktiven Verkaufsprozess.

Storytelling funktioniert mit emotionalen Texten, aber auch mit visuellen Elementen. Fotos, Videos oder Animationen erfreuen sich zunehmender Beliebtheit, Geräusche und Musik gewinnen an Bedeutung. Ziel ist es, ein Erlebnis zu schaffen, das unterschiedliche Sinne anspricht.

Eigene Fotos und Videos

Fotolia, iStock, Shutterstock und FotosKaufen (letztere ist besonders empfehlenswert, da günstig und die Bilderrechte fairer behandelt werden) sind Bildagenturen, die Fotos zur Gestaltung Ihrer Webseite anbieten. Ein bisschen stöbern und dann die Fotos schnell herunterladen, ist natürlich bequem, aber nicht unbedingt empfehlenswert. Gute Stockfotos tauchen in den unterschiedlichen Medien auf und sind deshalb schnell abgedroschen. Es fehlt die Authentizität, der persönliche Tough, den nur reale Bilder vermitteln können.

Binden Sie deshalb auf Ihrer Webseite eigene Fotos und Videos ein. Diese müssen nicht aus einem professionellen Shooting stammen, sondern können selbst von Ihnen mit dem Smartphone gemacht werden. Die Bild- und Videoqualität des Smartphones ist inzwischen so gut, dass Sie das Material bedenkenlos für Ihre Webseite verwenden können.

Gehen Sie deshalb mit offenen Augen durch den Tag – Sie werden viele Fotomotive entdecken, die Sie wunderbar in Ihre Webseite integrieren können.

Problematisch ist bei Video- und Fotoinhalten, dass diese von den Suchmaschinen nicht analysiert werden können. Deshalb ist es wichtig, dass Sie an den richtigen Stellen Textbeschreibungen ergänzen. Dies gilt für

• den Bild- oder Video-Dateinamen: Verwenden Sie hier eine aussagekräftige Bezeichnung. (Beispiel: Sandale_Firma-Mustermann_schwarz)
• das Alt-Attribut, welches im HTML-Code das Bild beschreibt. Google soll anhand der Formulierung erkennen, was das Bild darstellt. Hier ist also eine allgemeine Bildbeschreibung gefragt. (Beispiel: Bild Sandale Firma Mustermann in Schwarz aus der aktuellen Sommerkollektion)
• die Bildunterschrift: Beschreiben Sie jedes Bild auf Ihrer Webseite mit ein bis zwei Sätzen. (Beispiel: Firma Mustermann setzt in diesem Sommer auf schwarze Sandalen mit besonders schmalen Riemchen.)

Informative, lesefreundliche Texte

Die Webseiten der Zukunft setzen nicht mehr ausschließlich auf Text, sondern transportieren Botschaften auch über Fotos und Videos. Dennoch kommen die wenigsten Internetseiten ohne Text aus.

Schon in gedruckter Form ist es eine Herausforderung, Schriften so hervorzuheben, dass wichtige Passagen betont und vom Leser optimal erfasst werden. Diesen Anspruch gleichzeitig für Computerbildschirme, Tablets oder Smartphones umzusetzen, ist eine Kunst.

Im Web funktionieren als Hervorhebung am besten fette oder farbige Schriften. Wichtig ist aber, dass Sie Hervorhebungen sparsam einsetzen, ansonsten verlieren sie ihre Wirkung. Mehr als fünf Wörter hintereinander sollten nicht hervorgehoben werden, eine Hervorhebung pro Absatz reicht völlig aus.

Statt fetter oder farbiger Schrift sind auch auf diese Art und Weise Betonungen möglich:

Verwendung

• einer zweiten Schriftart für kurze Textpassagen
• einer anderen Schriftgröße
• kursiver Schrift

Die empfehlenswerten Schriftgrößen für Webdesign liegen bei

• 13 bis 16 px: In dieser Schriftgröße sind Webtexte am besten zu lesen.

• 18 bis 30 px: Diese Größe eignet sich gut für Überschriften und Zwischenüberschriften.