Webdesign Trends und Tipps 2019

Große Bilder und knackiger Inhalt mit viel Weißraum, damit dieser wirken kann – das sind Aspekte, die schon lange gefallen und auch in Zukunft funktionieren. Wir werfen einen genaueren Blick auf das, was 2019 im Webdesign so richtig angesagt sein soll und geben euch darüber hinaus wertvolle Tipps für eine gelungene Website-Gestaltung!

Animationen und Interaktionen

Durch die sich stets weiterentwickelnden technischen Möglichkeiten gewinnen Hover- und Scroll-Animationen stetig an Bedeutung. Solche Effekte können dafür sorgen, dass der Besucher länger auf eurer Website bleibt, denn sie wecken den natürlichen Spieltrieb, der jedem Menschen innewohnt. Darüber hinaus können Animationen gezielt eingesetzt bei der Orientierung auf eurer Internetpräsenz helfen. Wichtige Inhalte können noch besser hervorgehoben werden und die Website wird optisch aufgewertet.

Darüber hinaus können Animationen einen kleinen Belohnungseffekt erzeugen, indem z. B. ein „senden“-Button eines Formulars nach dem Klick in einen Haken umgeformt wird.

Formulare und Buttons

Ausgestaltete Formulare fügen sich perfekt in eure Website ein und stören die übrige Optik nicht.

Buttons dürfen in diesem Jahr gerne größer dargestellt sein, Text hat dabei zum Rand hin viel Platz. Eine Schriftart im Schnitt „light“ sowie ein zarter Rahmen lässt den modernen großen Button auffällig und gleichzeitig dezent elegant wirken.

Auch 2019 wieder aktuell: Schaltflächen mit einem Pfeil „nach oben“, der den Nutzer schnell und einfach wieder an den Anfang der Website bringt.


Wünschst Du Dir in diesem Jahr eine neue Website für Dein Unternehmen? Oder befindest Du Dich gerade im Aufbau eines Start-ups und möchtest von Anfang an modern im Web auftreten? Welche dieser Trends und Tipps würdest Du in jedem Fall mit eingebaut wissen wollen?

Schriftarten und -größen

Serifenlose Schriften gelten nach wie vor für die Bildschirmanwendung als die erste Wahl, was die Lesbarkeit angeht. Doch grade im Bereich Überschriften wird auch in diesem Jahr gerne Kante gezeigt: Verspielte Handschriften, holen den Leser emotional ab, serifenbetonte Schriften heben sich klar vom serifenlosen Fließtext ab und farblich hinterlegte Texte heben wichtige Begriffe wie ein Textmarker besonders schön hervor.

Vor allem über Hintergrundbilder oder -videos finden sich immer öfter extreme Schriftgrößen, die das dargestellte Motiv entweder zusätzlich hervorheben oder elegant in den Hintergrund rücken.

Magicard verwendet isometrische Darstellungen, um Lösungen für unterschiedliche Anwendungsbereiche zu präsentieren.

3D-Modelle vs. Flat-Design

Einen willkommenen Kontrast zum beliebten Flat-Design bilden isometrische Darstellungen bzw. 3D-Modelle, die bestimmte Sachverhalte einfach und schnell übermitteln können.

curenails.co zeigt eine stimmige Kombination aus aufgebrochenen Rastern mit dezenten Grafikelementen und Scroll-Animation.

One-Page-Design

Ebenso aktuell sind One-Page-Designs, die schon lange nicht mehr nur für Landing Pages Verwendung finden. Sie können z. B. eine Form von digitaler Visitenkarte darstellen, die mit ansprechenden Grafiken eine Kurzvorstellung eures Unternehmens oder Produktes sowie natürlich eurer Kontaktdaten beinhalten kann.

Grid-Layout

Raster- bzw. Kachel-Gestaltung (Grid-Layouts) finden sich schon öfter auf modernen Internetseiten. Neuer ist der Ansatz, diese Raster aufzubrechen, asymmetrisch anzuordnen und mit weiteren Grafikelementen zusätzlich aufzulockern. Diese können kombiniert mit geschickten Überlappungen z. B. mit bewegten Hintergründen, animierten Grafiken oder auch Videos besonders spannend wirken. Die Aufmerksamkeit eures Besuchers kann so sanft gelenkt und eure Inhalte können noch besser transportiert werden.

Eine Kombination aus gradlinigen Formen mit verspielten Strichgrafiken sowie natürlichen, abstrakten Formen ist 2019 voll im Trend!

Auf der Website der ALTERnatives Wohnen eG erscheint der asymmetrische Hintergrund hinter dem Text auf der Desktop-Ansicht. In der mobilen Ansicht entfällt dieser grün eingefärbte Bereich und wird ersetzt durch ein leicht transparentes Weiß, das den gesamten Slider "überdeckt".

Grundsätzlicher Aufbau

Mobile First

Nach wie vor an Bedeutung gewinnt natürlich das Thema „Mobile First“, also das Anlegen des Webdesigns mit primärer Optimierung auf mobile Endgeräte wie Smartphones und Tablets. Aufgrund der kleinen Bildschirmgröße ist ein übersichtliches und klares Layout besonders wichtig. Darauf aufbauend entsteht die Desktop-Ansicht, die oft mehr spielerische Elemente enthalten kann.

Die Grundlagen für jedes gute Webdesign

Eure Website soll natürlich in erster Linie einen Zweck erfüllen: Sie soll Leser informieren, Interessenten dazu animieren, euch zu kontaktieren oder Kunden zum Kauf anregen. Darüber hinaus sollen natürlich auch die Suchmaschinen wie Google euren Internettauftritt als interessant einstufen und einen Suchenden möglichst schnell zu euch führen. Deshalb sind neben den technischen Gesichtspunkten in erster Linie der Inhalt sowie die Nutzerfreundlichkeit wichtig.

Überlegt euch also im Vorfeld beispielsweise:

  • Was ist das Ziel, das ihr mit eurer Internetseite erreichen wollt?
  • Wer liefert die Texte oder sind bereits welche vorhanden?
  • Habt ihr eigene Bilder, die in hoher Qualität auch vollflächig auf der Website dargestellt werden können?
  • Was sind die idealen Handlungsaufforderungen (CTAs), die ihr euren Website-Besuchern an die Hand geben könnt?

Mit der Beantwortung dieser und weiterer Fragen, die ihr natürlich mit eurer betreuenden Agentur gemeinsam erarbeiten könnt, habt ihr das Grundgerüst, an dem sich das Design orientieren kann. Im Folgenden nun Trends und Tipps für ein gelungenes Design für eure Website!

Ein schönes Beispiel für eine auffällige Schreibschrift, die ein emotionales Thema (hier: Essen auf so-schmeckts.de) sehr gut unterstreicht.

Grade bei einem One-Page-Design bietet sich natürlich eine Menüführung mit Scroll-Animation an, die den Nutzer schnell zu einem bestimmten Teil der Seite springen lässt.

Im Kontrast dazu – oder in Kombination – bietet die Verwendung eines Megamenüs Möglichkeiten, sehr umfangreiche Websites übersichtlich zu gestalten. Insbesondere in Kombination mit klaren Icons findet sich der Nutzer nicht nur im Jahr 2019 schneller zurecht.

Umfangreiche Seiten wie die von Heyden-Securit profitieren besonders von der Verwendung eines Megamenüs.

Ein bewegter Hintergrund aus Blütenblättern in Kombination mit wenig Text geben dieser Website ein elegantes Erscheinungsbild – passend dazu verbirgt sich die Navigation hinter den bekannten Balken des Hamburger-Menüs.

Das von mobilen Website-Ansichten schon lange bekannte Hamburger-Menü findet aktuell immer öfter auch auf dem Desktop Verwendung. Der Website-Nutzer hat sich daran gewöhnt, dass sich das Menü hinter diesen zwei bis drei schmalen Balken verbirgt. Grade ein umfangreiches Menü kann so einfach ausgeblendet werden, damit sich der Besucher eures Internetauftritts ablenkungsfrei auf die wesentlichen Elemente und Inhalte konzentrieren kann.

Optisch besonders schön wirkt es, wenn das auf diese Weise versteckte Menü bei Klick in einem farblich passenden Overlay geladen wird.

Auf der Website des Kiebitzhofs erleichtern ansprechende Icons die Orientierung und werten das Gesamtbild der Website auf.

Grafiken und Bildmaterial

Bei der Wahl der Bilder sind individuelle, von einem Fotografen erstellte Bilder solchen aus Stockarchiven grundsätzlich vorzuziehen. Der Trend geht hier weiter in Richtung Authentizität und Natürlichkeit.

Immer aktuell sind aussagekräftige Icons. Ganz besonders natürlich auf kleinen Bildschirmen, bei denen auf kleinem Raum möglichst viele und deutliche Informationen übermittelt werden sollen. Die Icons dürfen im Jahr 2019 gerne verspielt daherkommen, bspw. in handgezeichneter Optik oder mit farbigen Akzenten.

Die Internetpräsenz von WHITETAILGIN gibt dem Hintergrundbild viel Raum und es wird mit passenden Transparenzen gearbeitet, sodass Schrift und Bild gut harmonieren.

Das Jahr ist schon wieder zwei Wochen alt (!) und wir werfen einen Blick auf die interessantesten Trends im Bereich der Website-Gestaltung.

Technische Aspekte wie Suchmaschinen-Optimierung und möglichst kurze Ladezeiten sind natürlich ganz grundsätzlich. In diesem Artikel soll es um die optisch ansprechende Darstellung der Inhalte auf eurer Website gehen.

Große Bilder und knackiger Inhalt mit viel Weißraum, damit dieser wirken kann – das sind Aspekte, die schon lange gefallen und auch in Zukunft funktionieren. Doch bevor wir einen genaueren Blick auf das werfen, was in diesem Jahr im Webdesign so richtig angesagt sein soll, ein paar Worte zu den Basics.