Was ist gutes Web-Design?

Index

1. Entwicklung des Web Designs
2. Prinzipien des Web Designs
3. Die besten Anwendungen des Web Designs
4. Trends des Web Designs

1. Entwicklung des Web-Designs

Schönheit liegt im Auge des Betrachters.

Das Aussehen von Websites hat sich in den letzten 30 Jahren stark geändert. Erinnerst du dich an die späten 90ger und frühen 2000der? Vorbei sind die Zeiten, als man sich noch in das Internet über das Telefon einwählen musste, um in den Chat zu gelangen oder auf MySpace aktiv zu sein.

Fonts waren limitiert und Text schlecht positioniert. Die Farben grell und laut und der Stil eckig. Alles glich einer wahllosen Fotocollage auf dem Pinnbrett eines wenig aktiven Schwimmvereins.

Frühes Web-Design

Hinter den Kulissen des Forschungszentrums CERN, wurde 1991 die allererste Homepage geboren. Diese bestand aus nur einfachem Text auf weißem Hintergrund. Die Websites der frühen 90ger waren funktionsgebunden. Eine Möglichkeit für eine riesige Entwicklung stand offen: Web-Design.

Darunter versteht man, das was der Besucher einer Website sieht und wie er damit umgeht, folglich auf die Website reagiert. Anfang der 2000der Jahre, enthielten Websites die obligatorische Navigationsleiste mit den Reitern bzw. Tabs zu den Unterseiten. Hauptüberschriften hoben sich vom eigentlichen Textinhalten ab und Logos erschienen bereits.

Die Startseite wurde damals häufig noch als Startseite oder im englischen “Front Page“ benannt. Heute muss man den Besuchern nicht mehr sagen, wo sie sich befinden, wenn sie eine Website öffnen.

Das frühe Web-Design basierte auf Tabellen und Text. Es war somit wenig visuell und mehr beschreibend. Es wird deshalb auch als “read only web”, also das nur lesbare Web beschrieben, kurz Web 1.0.

Seit den letzten 14 Jahren befinden wir uns unter anderem noch etwas im Zeitalter des Web 2.0 , welches Aktionen der Besucher wie: ansehen, lesen und schreiben umfasst. Web-Design wurde und wird mehr und mehr interaktiv.

Schematische Entwicklung des World Wide Webs

Web 3.0 geht noch einen Schritt weiter, es erlaubt dem Nutzer die Ausführung von Tätigkeiten im Netz. Dies bedeutet, dass der Besucher einer Website mit dieser agieren kann wie in einem Programm oder App. Momentan ändert sich das Web zu einem mehr symbiotischen Web oder Web 4.0, in der das Selbst-Lernen vorherrscht und auf Individualisierung Wert gelegt wird. Alles ist auf den einzelnen Nutzer angepasst. Eine weitere Entwicklung ist die Verwendung von mobilen Geräten und die Notwendigkeit Web-Inhalte auf diesen zugänglich zu machen.

Responsive Web-Design

Wenn eine Website sich automatisch an alle Geräte und somit Formen von Bildschirmen anpasst, dann ist diese Website responsive. Das responsive Web-Design erlaubt es das Format und den Schriftsatz so einzurichten, dass es von einem Text mit wenig Zeilenumbrüchen auf einem großen Bildschirm zu einem Text mit vielen Zeilenumbrüchen auf einem kleinen Bildschirm wechselt. Bilder im Querformat werden Bilder im Hochformat, ohne dabei an Qualität zu verlieren.

Das Verhalten vom responsiven Design lässt sich mit den Feldern und Figuren eines flexiblen Schachbretts vergleichen. Wenn du das Schachbrett zusammenschiebst oder dehst, werden alle Felder und Figuren mitwandern.

Alle Vorlagen bei Webnode sind so programmiert, dass diese responsive sind. Der Editor formatiert den Text so, dass der Textfluss automatisch angepasst wird und keine willkürlichen Zeilenumbrüche eingefügt werden müssen, damit dieser auf allen Geräten zu lesen ist.

Mobile First design

geht Hand in Hand mit dem responsiven Design. Unter dem versteht man, dass Web-Inhalte so entworfen werden, dass diese für mobile Geräte zuerst geschaffen werden, nicht für den Desktop Computer. Im Oktober 2020 haben sich global mehr als 4,3 Millionen Menschen Websites von ihren mobilen Geräten angesehen. Die Zahl steigt ständig.

Google hat seinen Algorithmus auf mobil-freundliches Web-Design optimiert. Websites im Mobile First Design werden automatisch besser gerankt. Das Design ist nicht nur responsive, es beinhaltet auch eine einfache Struktur und Navigation kombiniert mit einer schnellen Ladegeschwindigkeit.

Letztere ist ein wichtiges Element des modernen Web-Designs, über das wir im folgenden Abschnitt sprechen möchten.

2. Prinzipien des Web-Designs

Stil

Der Stil einer Website ist essenziell. Er gibt den Ramen der Website. Er beschreibt wie die Elemente einer Site relativ zueinander positioniert sind. Wichtige Elemente sind:

• Navigationslinie
• Kopfzeile
• Fußzeile
• Weitere Abschnitte

Elemente einer Website, z.B. Navigationsline, Kopfzeilenbild, Fußzeile

Diese Elemente sind alle relative zur Navigationsleiste angeordnet. Es bestehen grundsätzlich vier verschiedene Typen von Standardstilen. Eine Navigationsleiste oben oder links angeordnet sind die häufigsten. Webnode bietet hier alle Standardformen.

Von links nach rechts: Hamburger Button, obere Navigationsleiste, untere Navigationsleiste und seitliche Navigationsleiste.

Was auch immer du für eine Vorlage wählst, du kannst die Stile später verändern bzw. wechseln.

Auch wenn mehr als 80% aller heutigen Websites die Navigationslinie oben angeordnet haben, wächst die Flexibilität zu anderen Varianten. Die klare Positionierung des Hamburger Buttons (drei Linien) oben rechts, welcher alle weiteren Seiten im Drop-Down Menü öffnet, ist eine modernere Lösung, die den Fokus auf den Inhalt, wie das Hintergrundbild und Überschriften lenkt.

Gewöhnlicherweise ist die Fußzeile für Kontakt- und alle rechtlichen Informationen, wie dein Impressum oder die AGB, vorgesehen. Ebenso platzierst du hier Links und Icons zu anderen Websites oder Social Media-Plattformen.

Die halbe Welt lässt die Kontaktinformationen als Kontakte- Tab in der Navigationsleiste erscheinen. Aus diesem Grund halten Website Vorlagen einen Platz für diese bereits vor.

Unsere Augen wandern von links nach rechts. Was immer auf der rechten Hälfte des Bildschirms zu sehen ist, erhält automatisch mehr Aufmerksamkeit.

Als bereits in den früheren Jahren des Web-Designs, werden Logos immer noch gerne oben links auf der Website platziert.

Die Idee hinter den verschiedenen Stilen ist, dem Besucher eine schnelle und klare Übersicht zu geben. Alle Elemente einer einzelnen Seite haben einen festgelegten Platz, auf dem sie erscheinen. Dies ist ein ganzer Meilensprung von dem Collagen- Design, dass uns von den frühen Jahren des Internets in Erinnerung ist.

Layout

Das Layout beschreibt welchen Platz alle Elemente einer Website auf dem Bildschirm einnehmen. Diese können zum Beispiel den ganzen Bildschirm abdecken, oder nur in der Mitte oder am Rand auftreten.

Einfache Spalte

Hier ist der Inhalt der einzelnen Seite in einer einzelnen Spaltenansicht ausgelegt. Diese Spalte nimmt den meisten Raum des Bildschirms ein. Durch die Einfachheit ist das Design der einzelnen Spalte (single column design) sehr populär.

Geteilter Bildschirm

Wenn du mehr als eine wichtige Information auf einer Seite präsentieren willst, ist es notwendig diese in zwei oder mehr Spalten unterzubringen. Beispielsweise haben Websites, die Nachrichten und Artikel veröffentlichen Inhalte in zwei Spalten mit Text und Bild aufgeteilt.

Variationen dieses Typs werden durch unterschiedliche Verhältnisse der Aufteilung erzielt, wie 50:50 und so weiter.

In Online-Shops werden zum Beispiel auf den Seiten der Produkte das Produkt als Bild links und die Information als Text rechts gezeigt.

Card Grid Design

Diesen Typ von Design entdeckst du auf den Seiten von Pinterest, Facebook oder Twitter.

Der englische Begriff Card Grid Design gleicht dem wie Karten auf einem Tisch ausgelegt werden könnten. Die Karten entsprechen Bildern oder Symbolen in Form von Icons auf der Website mit einer optionalen kurzen Beschreibung. Von diesen gelangen die Websitebesucher auf weitere detailreichere Unterseiten. Idealerweise macht die Abbildung auf den kommenden Inhalt neugierig.

Das Browsen durch die Seiten einer Website wird somit intuitiver, angenehmer und viel unterhaltsamer.

Es gibt zwei Formen dieses Layouts:

• Basierend auf Karten gleicher Größe, angeordnet als quadratisches Raster (wie in der oberen Abbildung)
  
  
• Basierend auf Karten verschiedener Größe und Form, mit einem Raster, welches in Höhe und Breite variiert

“Above the fold” und”below the fold”

Sobald du die Website auf dem Bildschirm siehst, springt dir die Navigationsleiste, die Hauptüberschrift oder ein Slogan und vielleicht ein einleitender Text und ein nettes Bild ins Auge. Wenn du mehr sehen willst, musst du herunterscrollen. Was du auf den ersten Blick siehst, wird als “above the fold” und alles was du erst nach dem Scrollen siehst als “below the fold” verstanden. “The fold” (die Falte) ist das untere Ende des Bildschirms.

Die wichtigsten Informationen solltest du demnach oberhalb des unteren Bildschirmrandes erwähnen, um die Aufmerksamkeit deiner Besucher zu erhalten, ohne dass diese hierfür extra scrollen müssen.

Die Standardstile und Layouts geben der Website ihr ansprechendes Aussehen. Gutes Web-Design bedeutet nicht nur Ästhetik, sondern auch Funktionalität und Anwendbarkeit. Wir möchten, dass nachdem wir auf einer Website suchen, schnell und einfach finden.

Die wichtigsten Faktoren, die die Funktionalität gewährleisten sind diese folgenden drei:

Alles was SEO fördert

In jedem Website-Baukasten verfügt der Editor über Felder, die die Seiten für Suchmaschinen optimieren (SEO), wie zum Beispiel:

• Metabeschreibung
• Seitenname
• Webadresse
• Verwendung von Schlüsselwörtern im Text und Titeln

Google bevorzugt Überschriften im Text, indem es den Hauptüberschriften, im Code als H1 klassifiziert, die größte Gewichtung gibt.

Moderne Website-Builder, wie Webnode, haben diese Überschriften bereits im Code der Vorlage definiert.

Überschriften von allen Unterseiten sind automatisch als H1 festgelegt, so dass du nicht darüber gedanken machen musst deine Titel festzulegen und dich voll auf die Wortwahl konzentrieren kannst.

Geschwindigkeit

Diese geht mit der Nutzerfreundlichkeit einher. Google hat dies im Januar diesen Jahres angepasst. Websites, die schnell laden, werden automatisch besser in den Suchergebnissen gerankt.

Webnodes Websites sind einfach aufgebaut. Sie sind so codiert, dass die maximale Ladegeschwindigkeit auf allen Geräten erreicht wird.

Dies, natürlich nur solange du eine gute Internetverbindung hast und du die in die Website hochgeladenen Bilder unter Kontrolle hast.

Nuzterfreundlichkeit

Oder auch “augenfreundliches Design” bezieht sich darauf, wie gut die Seiten der Website untereinander strukturiert ist, mit anderen Worten, wie intuitiv die Navigation ist.

Webnode’s Vorlagen sind durch eine übersichtliche, konkrete Navigation bestimmt, die eine limitierte Anzahl an Tabs in der Leiste zulässt. Die Hierarchie der Unterseiten ist auf maximal 3 Stufen begrenzt, so dass alle Seiten mit 3 Klicks reibungslos erreicht werden können.

Weiterhin wird der Pfad der Webadresse aller Unterseiten kurzgehalten. Lange URLs mit mehreren “/” sind nicht praktikabel und mittlerweile unmodern. Egal, ob du deine Bildergalerie als Unterseite einer Unterseite versteckt hälst oder ob diese direkt auf der Navigationsleiste erreichbar ist, wird die Webadresse immer: “meinehomepage/galerie” heißen.

3. Die besten Anwendungen des Web-Designs

Eine Website-Vorlage bietet Ihnen Rahmenbedingungen,­ den Stil und die Funktionen dieser. Vorgefertigte Bilder, Schriftarten und passende Farben geben dir eine Anregung, wie deine Website am Ende aussehen kann. Es liegt an deiner Kreativität, was du damit machst. Was macht deine Website zu einer guten Website?

Wir haben ein paar Tipps für dich, wie du die Website noch besser strukturieren und das Design optimal nutzen kannst.

Branding und Web-Design

Das Traumpaar des Jahres!

Denke an deine Marke, Aufgabe, Ziele und Absichten. Dein Was und Weshalb kannst du durch das Design deiner Website hervorheben, um dich selbst und/oder dein Unternehmen dadurch noch einzigartiger erscheinen zu lassen.

Wer zum Beispiel Süßigkeiten verkauft, sollte vor Farben und frohen Fonts nicht zurückschrecken. Es lohnt sich die Kraft der Farben genauer zu erforschen, da diese in jeder Kultur andere Werte vermitteln. Finde deine harmonischen Farben und Muster und verwende diese kontinuierlich.

Passe deshalb das Design deiner Website deinem Image oder Marke an. Deine Kunden und Besucher werden dich somit schnell wieder erkennen.

Muster und Texturen

Beide verschönern und individualisieren den Hintergrund der Texte auf den einzelnen Seiten. Dieser muss nicht weiß oder einfarbig sein. Dieser kann ein Landschaftsbild sein, eine Animation von fließendem Wasser, oder ein interessantes geometrisches Muster.

Im Webnode Editor lassen sich eine Vielzahl von unterschiedlichen Mustern als Hintergrund hochladen, und du kannst jeder Zeit deine eigenen integrieren.

Struktur und Führung

Enthülle deine Seiten wie ein 5 gängiges italienisches Festmenü. Lass Pasta deine Startseite sein. Reduziere die Informationen auf den übergeordneten Seiten. Machen detailliertere Informationen auf verlinkten und im Menü versteckten Seiten zugänglich.

Stelle dir die wichtigen Seiten wie ein Poster vor oder ein Werbeslogan. Halte den Text kurz und knackig, um Interesse zu wecken. Eine Möglichkeit deine Website eine bessere Struktur zu verleihen ist das vorher beschriebene Card Grid Design zu verwenden.

So kann zum Beispiel jedes Bild eine Dienstleistung oder Produktkategorie vorstellen, von der Besucher auf weitere ausführlichere Inhalte gelangen.

Unterteilungen

Leite deine Besucher durch die einzelnen Abschnitte deine Seiten. Du kannst zum Beispiel in einem Abschnitt der Startseite oder Über Uns -Seite kurz andeuten, wer bist und wie deine Geschichte begann, und dann zu weiteren Seiten leiten, wie einen Blog, oder im Fall einer Firma, deine Mitarbeiter präsentieren.

Weniger ist mehr. Nimm dir dies für alle einzelnen Seiten und deren Elementen vor, wie die Textlänge, verwendete Fonts und Schriftgrößen, Formen des Hintergrundes und Farben. Nicht immer muss alles beschrieben werden, lasse deine Bilder für sich selbst sprechen.

Gebe deinen Lesern ein Verschnaufspäuschen. Der als “white space” bekannte Inhalt sind unausgefüllte Stellen deiner Website. Du findest diesen zwischen Abschnitten oder vor der Einführung eines neuen Elementes wie einer Bildergalerie oder eines Formulars. Dieser negative Raum muss nicht zwingend weiß sein, er kann auch ein Muster haben oder eine dezente Farbe. Wichtig ist, dass kein Inhalt an Text oder Bildern vorkommt.

Dieser gibt deinen Lesern eine Gedankenpause. Im Zeitalter, wo Informationen immer und überall abrufbar und somit nicht immer vermeidbar sind, schätzen wir diese Pausen. Deine Leser können sich in solchen Pausen einen zweiten oder dritten Kaffee gönnen.

Führe deine Websitebesucher durch deine Seiten mit Geometrie.

Zweidrittel Regel

Diese aus dem Bereich der schönen Künste kommende Regel besagt, dass Bilder in gleichen Dritteln aufgeteilt werden. Horizontale als auch vertikale Linien teilen Bilder in oben, mittig und unten, als auch links, mittig und rechts. Die sich hierbei kreuzenden Linien bilden Ankerpunkte, entlang denen das Auge wandern kann. In diesen Bereichen des Bildes werden strategisch Objekte angeordnet.

Der “Spaziergang entlang der Klippen bei Pourville” von Claude Monet ist ein wunderbares Beispiel der Zweidrittel Regel. Hier siehst du zwei Damen an der normandischen Küste auf den Atlantik schauend. Sie verweilen in der Mitte rechts des Bildes, über ihnen der perfekte Wolkenhimmel im oberen Drittel.

The Cliffwalk at Pourville (1982) Claude Monet (Art Institute of Chicago) ist ein ideales Beispiel der Zweitdrittelregel.

Es ist kein Zufall, dass solche Bilder harmonisch wirken und leicht zu verstehen sind.

Eine gute Idee ist, sich darauf zu konzentrieren wichtigste Informationen in einem Drittel der Seite unterzubringen und die anderen Drittel entsprechend auszugleichen.

Beispiel der Zweidrittel Regel im Webnode Editor. Das Raster bietet 9 verschiedene Platzierungen.

Glücklicherweise hilft der Webnode Editor Ihnen beim Positionieren der Elemente auf einer Seite. Du kannst von einer der 9 Positionen auswählen.

Kontinuität

Diese bezieht sich auf alles, was auf deiner Website veröffentlicht ist. Deine Farben, Schriftarten, Hintergründe, die Wahl deiner Überschriften und vieles mehr. Du entscheidest, was du darstellen willst und wieviel davon. Mache es deinen Lesern leicht und konzentriere dich auf ein Thema pro Seite. Nicht mehr.

Eine Tischlerei würde zum Beispiel Stories erzählen, die mit dieser Tätigkeit zu tun haben. Tipps zur Pflege von Holz sind hier besser aufgehoben als die Bilder des feucht-fröhlichen Betriebsausfluges. Du kannst Videos und Kundenrezessionen einbringen, Sei kreativ, aber auch konsequent.

Aus der Mode gekommenes Design

Was ist das Schöne ohne das Hässliche?

Diese Elemente waren vor ein paar Jahren noch in, werden heutzutage eher vermieden:

• Slider
• Slideshows
• Banner
• Karussells
• (zu viel Inhalt) unterhalb des sogenannten “Folds”

Der globale Trend ist die Dinge zu vereinfachen. Minimalismus und Klarheit sind gefragt. Deine Besucher mit einer Slideshow oder Videopräsentation auf der Startseite zu konfrontieren, überfordert diese.

Banners wurden gebraucht, wo die Möglichkeiten der Werbung noch limitiert waren. Werbung erfolgt in Google Ads und auf den sozialen Kanälen oder YouTube.

In der letzten Dekade wuchsen die für uns verfügbaren Informationen und Informationsquellen exponentiell. Wir suchen, browsen, klicken, sliden, scrollen in Suchmaschinen, auf Websites, sozialen Mediaplattformen und in Apps. Es gibt viel das es gilt aufzunehmen. Reduzierung ist die Lösung.

Mit den bereits beschriebenen besten Anwendungen versuchst du folgende 6 Dinge zu vermeiden:

• Zu viel Text
• Keine leitende Orientierung auf den Seiten
• Schlechte Bildqualität
• Chaotische Struktur aller Seiten
• Kontrastlose Farben, Monotonie
• Unharmonische Hintergründe, sich beißende Farben und zu viel variierende Schriftarten

Du hast nun die essenziellen Zutaten, um dein Website-Design zu optimieren. Lass uns nun die neusten Trends betrachten, die deine Besucher noch mehr ins Staunen versetzen werden.

4. Trends des Web-Designs

Web-Design hat heutzutage folgende Aufgaben:

Es soll Spaß machen. Interaktiv sein. Website-Besucher möchten sich selbst auf den Seiten einer Website zurechtfinden und hierbei die für sich wertvollen Erfahrungen machen und Dinge lernen.

Einfachheit

Die Königin ist die Einfachheit. Minimalismus im Web-Design wird als sogenanntes Flat Design bezeichnet, bei dem jedem Element mehr Raum gegeben wird.

Es bezieht sich nicht nur auf den bereits erwähnten “White Space“, sondern ebenfalls auf klare harmonische Farbgebung bei denen sich Umrisse scharf und präzise abzeichnen. Helligkeit und Licht stehen hier im Vordergrund. Denke an den Architekten Mies Van de Rohe und dessen weiten offenen Bauhausstils der 20ger und 30ger Jahre.

3D Effekte

Zu den einfachen Formen gesellen sich mehr und mehr 3D Effekte. Neumorphism ist eine Form von Design, welches Buttons und Icons topographisch durch Schatteneffekte hervorhebt oder umgekehrt in den Hintergrund schnitzt. Das kreierte positive oder negative Relief lässt die Schaltfläche plastischer wirken.

Neumorphismus, Beispiel des positiven Reliefs

Webnode integriert diese Nuancen durch dekorative Ramen und Schatteneffekte von Abschnitten oder Buttons.

Dekorative Ramen und Schatteneffekte

Dunkel oder Farbabstufungen

Was den Hintergrund von Seiten betrifft, so dominiert das dunkle Design und changierende Farben von dunkel zu hell oder warmen zu kalten Tönen. Hierbei sind entweder weiche Töne oder Kontrastfarben vorwiegend. Letztere sind schonender für bildschirmmüde Augen.

Geschichtenerzählendes Web-Design

Es ist nicht nur das Äußerliche, das eine Website attraktiv macht, sondern auch die Geschichte dahinter. Der Inhalt und Zusammenhang spiel eine maßgebende Rolle. Bilder erzählen viel. Illustrationen, Comics, Memes als auch Mimen bringen Geschichten verspielter hervor.

Warum nicht den Menschen genauer erzählen, wie du dich zum Chefkoch gebacken und gebraten hast? Oder wie deine Tischlerei Altes neu aufwertet? Stell dich, deine Mitarbeiter oder Freunde als gefeierten Held oder kuriosen Charakter mit unterhaltsamen Illustrationen dar.

Wenn du unseren Blog regelmäßig liest oder uns auf Facebook folgst, bist du bestimmt den Gesichtslosen Gesellen in gedeckten Farben begegnet, die dir von allen Neuigkeiten berichten.

Memes, Mimes und Emojis sind nicht länger auf den social Media und Chats begrenzt. Sie bringen die Dinge auf den Punkt. Und dies mit Leichtigkeit und einer Prise Humor. Websites gehen somit mit dem was in den sozialen Medien präsentiert wird über.

Einfache Text-Boxen mit ansprechenden Farben, genügen nicht länger. Das Blättern in einem Comic oder Illustration regt Fantasien an und katapultiert in andere Welten. Broschüren und Zeitschriften unterhalten, bringen Ideen. Eine Website ist kein Goethe Roman. Leichtigkeit wird erwünscht.

Roboter

Die kleinen Helfer wie Chats sind in Echtzeit immer für dich da. Du hast sicher schon mal skeptisch die Chat-Sprechblase einer Website geschlossen und dachtest dir, Chatten ist doch unpersönlich, nicht wahr?

Denke daran, dass sich hinter den Chat-Robotern echte Menschen verstecken. Die Bots sind von Menschen für Menschen programmiert und berücksichtigen dein Anliegen.

Weiterhin lassen Chat-Programme nur eine limitierte Anzahl an vorprogrammierten automatisierten Antworten zu, so dass du sicher sein kannst, dass hinter der Sprechblase tatsächlich jemand sitzt und dir schreibt, dir Rede und Antwort steht damit du am Ende zufrieden bist.

Interaktivess Web-Design

Jede Website, die das Agieren mit dem Besucher, durch ein Quiz, ein Formular oder ein Chat-Bot ermöglicht, verkörpert interaktives Web-Design. Modernes interaktives Design geht noch einen Schritt weiter. Es gibt dem Nutzer das Gefühl über das was er oder sie auf der Website sieht und tut die volle Kontrolle hat. Die Navigation durch die Seiten ist bewusst intuitiv. Fragen können jeder Zeit im Chat gestellt werden. Direkte Feedbacks sind über die Website in Form von Formularen oder Chats gegeben.

Das Ziel ist die Interaktion zwischen dem Besucher und der Website noch mehr zu vereinfachen und flüssiger ablaufen zu lassen. Website-Besitzer analysieren mit Programmen wie Smartlook oder Hotjar die Routen und Klicks, die ein Besucher tut. Mit Google Analytics werden Aktionen wie Einkäufe in einem Online-Shop ausgewertet. Die Prozesse die Besucher durchlaufen, beispielsweise bei einem Kauf oder Ausfüllen einer Umfrage, sollen hierbei wie bei einem App sein.

Aus Sicht des Marketings hat Web-Design die alleinige Funktion sogenannte calls to action zu schaffen. Dies sind die Reaktionen des Besuchers, die die Conversions steigern. Eine Conversion kann ein Klick auf einen bestimmten Button sein, das sich registrieren für einen Newsletter zum Beispiel, oder der Kauf eines Produktes.

Unkonventionelle Stile

Web-Design fordert heraus, neue unkonventionelle Ideen durchzusetzen, welche Standardstile revolutionieren.

Erinnerst du dich, dass wir von dem Scrollen unter und oberhalb des sogenannten Folds sprachen? Neues Webdesign macht löst sich vom traditionellen Scrollen. Es wird von Seite zu Seite wie in einem Buch geblättert oder durch das Schieben oder Swipe auf die nächste Seite gelangt. Nicht von oben nach unten, sondern seitwärts oder quer verläuft die Navigation und optische Orientierung.

Diagonales Web-Design ist ein Trend welcher diagonale Linien und Formen im Hintergrund verwendet, um den Besucher auf ein festgelegtes Ziel, wie einen Button, zu führen.

Wir haben dir die Prinzipien des Web-Designs zusammengefasst, denen du folgen und auf deiner Website anwenden kannst. Welchen Trend des Web-Designs folgst du?