Die Entwicklung des Webdesigns

Grüße von Joofy´s Redaktionsteam

Hi & Wilkommen auf unserem Blog

wir freuen uns sehr, dass Du auf den Blog für Performance Marketing aufmerksam geworden bist.
Du möchtest dein Unternehen jetzt auch digital angemessen präsentieren und durch die vielfältigen Möglichkeiten des Performance Marketings profitieren?

Dann bist Du hier genau richtig! Wir vermitteln dir in unserem Blog interessantes und mehrwertstiftendes Wissen über alles rund um das Thema des digitalen Performance Marketing.

In der vergleichsweise kurzen Zeit seit seiner Erfindung hat sich das Internet zu der weltweit wichtigsten Interaktionsplattform entwickelt. Besonders für Unternehmen ist die eigene Darstellung im Internet enorm wichtig, um zwischen der immer größer werdenden Konkurrenz bestehen zu können. Neben langjährigen Erfahrungen bedarf es dabei vor allem kreativer Ideen und neuer technischer Möglichkeiten, um sich auch langfristig erfolgreich im Internet positionieren zu können. 
In diesem Journal blicken wir daher zurück auf die kurze, aber dennoch sehr ereignisreiche Geschichte des Webdesigns. Von den Anfängen des Internets mit seiner zweckmäßigen Gestaltung, über die verschiedenen Phasen des Wandels bis hin zu den aktuellen Trends. Außerdem zeigen wir Dir Tipps und Tricks, wie Du deine Website noch ansprechender gestaltest, um fit für die Zukunft zu sein. 

Webdesign: Von den Anfängen bis in die Moderne (1990 vs 2021)

Ob im Büro, auf dem Weg in die Stadt oder an einem freien Abend zuhause: Computer, Laptops und Smartphones sind aus unserem Alltag nicht mehr wegzudenken. Vor allem das Internet, mit seinen nahezu unendlichen Nutzungsmöglichkeiten, ist heutzutage wichtiger und beliebter als jemals zuvor. (extra hervorheben. Als eine Art Zitat) Dabei haben sich in den vergangenen Jahren nicht nur die Möglichkeiten, wie wir das Internet nutzen können, verändert. Auch die Websites selbst haben oft nur noch wenig mit den einfachen Internetauftritten zu tun, wie es sie zu Beginn der Digitalisierung gab. Denn mit dem immer schneller voranschreitenden technischen Fortschritt und den immer höheren Ansprüchen der Nutzer, veränderte sich auch die Gestaltung der Websites.

1990-2000: Einfache Seiten, viele Farben

Bestanden viele Websites zu Beginn des „Internetzeitalters“ noch aus reinen Ansammlungen von einfachen Texten, kamen mit der Zeit immer mehr Elemente dazu, um sich aus der Masse der Internetseiten hervorzuheben und die Websites ansprechender zu gestalten. Neben Bildern und Grafiken erfreuten sich in den späten 1990er Jahren vor allem grelle Banner und blinkende Schaltflächen großer Beliebtheit unter den Website-Betreibern, auch wenn dies die Seiten oft unübersichtlich erscheinen ließ.

 

2000-2010: Der Nutzer im Zentrum des Webdesigns

Mit der Zeit sammelten jedoch sowohl Nutzer als auch Betreiber immer mehr Erfahrungen im Internet. In der Folge entwickelten sich erste Standards, wie eine Website am besten zu gestalten ist. Die Zeit der unformatierten Texte und der leuchtenden Buttons neigte sich dem Ende zu. Stattdessen rückte von dort an die Benutzerfreundlichkeit immer mehr in den Fokus der Webdesigner. Anstatt den Besucher mit vielen Ablenkungen zu überfordern, sollte sich die Website nun möglichst einfach und angenehm bedienen lassen. Dabei setzten sich erneut bereits bewährte Gestaltungsmuster durch, beispielsweise eine bestimmte Anordnung von Menüs, Suchleisten und Navigationselementen.

Die Webseite von ebay (2000): Bilder ließen sich oft nicht richtig anzeigen & Bunte Elemente quer über die Seite verteilt
Die Webseite von ebay (2018): Wenige, geordnete Elemente & hochauflösende Bilder sorgen für Übersichtlichkeit

2010-2021: Das Beste aus beiden Welten

Trotz der wachsenden Bedeutung von Nutzerfreundlichkeit spielt auch heutzutage das Erwecken von Interesse und Aufmerksamkeit immer noch eine entscheidende Rolle im Bereich des Webdesigns. Durch den technischen Fortschritt stehen den Designern dabei deutlich mehr Möglichkeiten zur Verfügung als noch vor einigen Jahren. So lassen sich Webseiten, etwa durch den Einsatz hochauflösender Bilder, Videos und Animationen, deutlich ansprechender und zugleich nutzerfreundlicher gestalten, was sowohl den Besuchern, als auch den Betreibern zugutekommt.

Was zeichnet gutes Webdesign aus

Ebenso wie sich die Anwendungsmöglichkeiten des Internets mit der Zeit verändert haben, so sind auch die Ansprüche der Nutzer an die jeweiligen Webseiten immer weiter gestiegen. Eine Webseite soll heute nichtmehr lediglich die gesuchten Informationen bieten, sondern diese möglichst ansprechend darstellen. Der Besucher erwartet zudem eine optimale Bedienbarkeit und Übersichtlichkeit der Website und somit ein insgesamt positives Nutzererlebnis. ein insgesamt positives NutzererlebnisGleichzeitig wird es für die Betreiber der Webseiten immer wichtiger, ihr Webdesign so gut wie möglich auf ihre Zielgruppe abzustimmen, um sich auf diese Weise einen Vorteil gegenüber der Konkurrenz zu erzielen.

 

Die Website der Bäckerei Thiele wurde von den Webdesignern von Joofy erstellt

Gutes Webdesign?!

Genau dafür sind wir bekannt!

 

Wie sich Webseiten ansprechender Gestalten lassen:

Dabei stehen ihnen dank des technischen Fortschritts der letzten Jahrzehnte nahezu endlose Möglichkeiten zur Verfügung, um sich mit modernem Webdesign von der Konkurrenz abzusetzen und dabei sämtliche Bereiche der Website ansprechend zu gestalten.

Im Fokus des modernen Webdesigns stehen dabei zum einen optische Aspekte, wie beispielsweise:

  • Die Verwendung passender, optisch ansprechender Fotos und Grafiken
  • Die nutzerfreundliche Auslegung von verschiedenen Funktionen und Elemente (Videos, Kontaktmöglichkeiten, etc.)
  • informative interessante/unterhaltsame Texte, um die Zielgruppe bestmöglich anzusprechen

Die technische Seite modernen Webdesigns

Neben diesen optischen Gestaltungsmöglichkeiten spielen jedoch auch verschiedene technische Gesichtspunkte eine große Rolle, wenn es um modernes und erfolgreiches Webdesign geht. Besonders wichtig sind in diesem Zusammenhang

  • Responsives Webdesign bzw. die Optimierung für mobile Endgeräte
  • Kurze Ladezeiten für die Website oder einzelne Elemente
  • Schutz der Nutzer und ihrer Daten durch eine hohe Website-Sicherheit

Denn nur wenn die technischen Voraussetzungen stimmen, kann der Besucher die Website optimal nutzen und somit ein optimales Nutzererlebnis sichergestellt werden.

“Eine der wohl bedeutsamsten Veränderungen der letzten Jahre im Bereich des Webdesigns ist die Optimierung für mobile Endgeräte beziehungsweise das so genannte responsive Design.”

Responsive Webdesign vs. “Desktopbasiertes” Webdesign

Weshalb responsives Webdesign so wichtig ist

Denn anders als zu Beginn des Internet-Zeitalters werden Webseiten heutzutage in den meisten Fällen von Smartphones oder Tablets aus aufgerufen. Damit eine Webseite auch auf diesen Geräten problemlos angezeigt und genutzt werden kann, bedarf es jedoch einiger tiefgreifender Anpassungen.

Unkomplizierte Bedienung der Website

Im Vergleich zu dem lange Zeit üblichen desktopbasierten Design liegt der Fokus dabei vor Allem auf einer Vereinfachung und Verschlankung des gesamten Website-Layouts. So wird die Anzahl der Schaltflächen auf das wesentliche reduziert und die verbliebenen Flächen werden vergrößert, um die Bedienung zu erleichtern. Auch die Darstellung von Texten, Grafiken und Bildern ist den meist kleineren Bildschirmen mobiler Geräte anzupassen.

Anpassung an die moderne Zeit

Zudem fließen bei responsivem Webdesign auch die vielfältigen Darstellungsformen der unterschiedlichen mobilen Geräte in die Website-Gestaltung mit ein.
Der Grund dafür ist, dass die Bildschirme „klassischer“ Desktop-Computer, unabhängig von dem jeweiligen Hersteller und Modell, in vielen Fällen eine ähnliche Größe aufwiesen. Im Gegensatz dazu unterscheiden sich die Displaygrößen von Smartphones und Tablets deutlich stärker, zumal diese Geräte sowohl im Hoch- als auch im Querformat genutzt werden. Daher kann es zu erheblichen Unterschieden in der Darstellung „klassischer“ Websites kommen. Durch den Einsatz von responsivem Webdesign passt sich die Darstellung optimal an die Größe des jeweiligen Bildschirmes an, so dass die Website von jedem Besucher stets einfach und problemlos genutzt werden kann.

So steigerst du die Usability deiner Website

Ein weit verbreiteter Irrglaube ist, dass es im Webdesign nur darum geht, Texte einzufügen und die Seite mit Bildern, Firmenlogos und vielen verschiedenen Farben, optisch ansprechend zu gestalten. Zwar ist es selbstverständlich wichtig, dass eine Webseite möglichst gut aussieht, schließlich dient sie dem Betreiber zur eigenen Darstellung im Unternehmen. Dennoch gibt es auch einen weiteren, wichtigen Bereich, der nicht unterschätzt werden darf: Die Usability.

“Die Usability oder auch Nutzerfreundlichkeit beschreibt, wie gut sich Nutzer auf der Webseite zurechtfinden und wie einfach und funktional diese zu bedienen ist.”

Um eine Webseite so nutzerfreundlich wie möglich zu gestalten, gibt es eine Vielzahl an Möglichkeiten, die auf die Anpassung verschiedener Aspekte des Webdesigns abzielen.

Die richtigen Inhalte

Wie bereits erwähnt, spielt die Auswahl und Gestaltung von Texten und Bildern eine wichtige Rolle bei der Steigerung der Usability. Denn nur wenn sowohl der Inhalt als auch die Formulierung der Texte auf die jeweilige Zielgruppe abgestimmt sind, können die Nutzer sie auch entsprechend verwenden.
Zudem sollten die verwendeten Bilder den Text ergänzen, ohne den Nutzer dabei zu verwirren oder zu überfordern.

Klare Struktur, eindeutige Darstellung

Um Nutzern den Umgang mit der Website so einfach wie möglich zu gestalten, sollte die Seite vor allem über eine klar erkennbare Struktur verfügen. Dies betrifft zum einen die Aufteilung in einzelne Unterseiten, beispielsweise nach Themengebieten oder Leistungen. Zum anderen sollte auch die Struktur jeder einzelnen Seite gut durchdacht sein. Neben der sinnvollen Anordnung von Bildern, Texten und anderen Elementen, ist auch hier eine Einteilung der Seite in einzelne Bereiche, etwa durch den Einsatz von (Unter-)Überschriften durchaus sinnvoll, um die Nutzerfreundlichkeit zu verbessern. Die jeweilige Struktur sollte dabei in allen Unterseiten gleichbleibend gestaltet sein.

Intuitive Navigation

Zu guter Letzt sollte die Webseite über eine einfache und übersichtliche Navigation verfügen, damit die Besucher möglichst schnell zu den gesuchten Inhalten gelangen.
Auch bei der Position des Navigationsmenüs kann es sinnvoll sein, auf bereits bekannte Muster zurückzugreifen.

  • Wichtigste Funktionen werden horizontal im oberen Teil der Webseite angezeigt
  • Auflistung der einzelnen Unterseiten vertikal am linken Bildschirmrand

Wichtig ist es auch darauf zu achten, dass sich verschiedenen Unterseiten zwar in dem Menü wiederfinden sollten, jedoch wirkt eine zu kleinteilige Auflistung einzelner Themen schnell unübersichtlich und erschwert den Besuchern die Orientierung.

Klassische Navigation vs. Burger-Menüs

Neben dieser Form sind in den vergangenen Jahren vor allem die so genannten Burger-Menüs immer beliebter geworden. Dabei verbirgt sich das Menü hinter einem Symbol mit drei übereinander angeordneten, horizontalen Strichen. Durch Anklicken des Symbols öffnet sich eine klassisch aufgebaute Navigationsübersicht. Im Gegensatz zu den fest auf der Webseite verankerten Menüs beanspruchen Burger Menüs weniger Bildschirmfläche, die somit zur Darstellung der eigentlichen Inhalte zur Verfügung steht. Allerdings können Burger Menüs die Navigation für Nutzer erschweren, die mit dieser Art der Navigation nicht vertraut sind.

Moderne Gestaltung dank technischen Fortschritts: Startseiten-Slider und Hero-Bilder:

Durch die immer vielfältigeren Möglichkeiten, die der technische Fortschritt der letzten Jahre mit sich brachte, kamen im Bereich des Webdesigns immer wieder neue Ideen zur Umgestaltung von Websites auf. Dabei steht häufig eine bessere Nutzerfreundlichkeit und Bedienbarkeit im Vordergrund, allerdings spielt auch die einzigartige und individuelle Gestaltung eine wichtigere Rolle.

Das Prinzip hinter den Hero-Shots

Ein sehr beliebtes Gestaltungselement ist dabei der so genannte Hero Shot. Dabei handelt es sich um ein möglichst ausdrucksstarkes Bild, welches das jeweilige Thema der Website oder das dahinterstehende Unternehmen bestmöglich darstellt. Durch ihre großflächige und prominente Positionierung im oberen Bereich der Webseite sind Hero-Shots das erste, was nach dem Aufruf der Website angezeigt wird und erzeugen auf diese Weise viel Aufmerksamkeit bei den Besuchern. Gleichzeitig kann durch die Auswahl des Hero Shots versucht werden, bei den Besuchern eine bestimmte Emotion hervorzurufen, um sie ansprechbarer für das dargestellte Thema zu machen.

Einzelnes Bild oder Startseiten-Slider

Neben den Hero-Shots werden häufig auch Startseiten-Slider verwendet, bei denen mehrere Bilder nacheinander gezeigt werden können, um die entsprechende Aufmerksamkeit zu generieren und zum Beispiel die verschiedenen Bereiche eines Unternehmens darzustellen. 

Die praktische Umsetzung

In der Praxis sind die Effekte von Hero-Shots und Startseiten-Slidern jedoch häufig geringer als man es erwarten würde. Denn viele Nutzer ignorieren diese Bilder regelmäßig, da sie für die Nutzung der Seite irrelevant sind und meist keine wichtigen Informationen enthalten. Bei Slidern findet zudem meist nur das erste Bild Beachtung bei den Nutzern, da sie ein bestimmtes Ziel auf der Website verfolgen und ihre Zeit nicht mit der Betrachtung der weiteren Slides verbringen möchten.

Erfolgreiche Gestaltung von Hero-Shots und Slidern

Aus diesem Grund empfiehlt es sich, für Hero Shots und Slider auf Bilder zurückzugreifen, die nicht nur schön anzusehen sind und die eigene Seite von der Konkurrenz abgrenzen sollen. Stattdessen sollten die verwendeten Bilder einerseits einen direkten Bezug zum eigenen Angebot aufweisen und dem Nutzer zum anderen einen gewissen Mehrwert bieten. Möglichkeiten, durch Shots und Slider einen Mehrwert zu generieren sind zum Beispiel:

  • Kombination der einzelnen Bilder mit speziellen, nützlichen Informationen
  • Verlinkung der Bilder mit den entsprechenden Unterseiten
    Durch Anklicken des jeweiligen Shots gelangt der Besucher direkt zu dem für ihn interessanten Bereich

Wir arbeiten für Dich!

Wir freuen uns sehr, dass du dich für diesen Blogpost interessierst. Wenn du wir dich bei deinen digitalen Projekten unterstützen können, zögere bitte nicht, dich bei uns zu melden. 

Vier Webdesigner aus dem Agenturteam von Joofy

Aktuelle Trends im Webdesign

Zusätzlich zu den bisher gezeigten, längerfristigen Entwicklungen gibt es von Jahr zu Jahr immer wieder neue Trends im Webdesign, die das bisher Bekannte ersetzten oder durch neue Ideen und Elemente erweitern. Da die Gestaltungsmöglichkeiten dabei nahezu unbegrenzt sind, haben wir im Folgenden die 10 aktuell wichtigsten Trends kurz zusammengefasst:

  1. Farbverläufe und Gradienten
    Wurden bisher meist einheitliche Farbtöne in klar definierten Bereichen der Website eingesetzt, so setzen Webdesigner inzwischen immer häufiger auf fließende Farbverläufe, bei denen sich sowohl die Farbtöne als auch die Intensität der Farben immer wieder verändert. Zudem sind diese Farbverläufe nicht mehr an bestimmte Bereiche gebunden, sondern erstrecken sich oft ohne klare Begrenzungen über die gesamten Webseiten, vor allem, wenn sie als Hintergrund verwendet werden. Dadurch wirken Farbverläufe zum einen natürlicher als einheitliche farbige Elemente. Zum anderen lässt sich durch die Gestaltung von Farbverläufen eine gewisse Tiefe oder auch Dynamik in das Erscheinungsbild der Webseite bringen, um mehr Aufmerksamkeit bei den Besuchern zu wecken.
  2. Angenehme Farben
    Neben der Einführung von Farbverläufen spielt im Jahr 2021 auch die grundsätzliche Auswahl der richtigen Farben eine entscheidende Rolle. Denn schon seit längerem lässt sich beobachten, dass die Menschen immer mehr Zeit vor dem Computer oder Smartphone verbringen. Damit geht auch eine stärkere Belastung der Augen einher, die langfristig zu Überanstrengung und Schmerzen führen kann. Um dieser Entwicklung entgegenzuwirken, setzten immer Webdesigner auf eine augenschonendere Gestaltung der Websites. Als effektives Mittel hat sich dabei der Wechsel von grellen oder weißen Hintergründen zu angenehmeren Farbtönen erwiesen. Diese sind angenehmen zu betrachten und sorgen gleichzeitig für ein individuelleres Erscheinungsbild der eigenen Website.
  3. Dark Mode
    Eine weitere Möglichkeit, die Belastung für die Besucher zu verringern ist die Integration eines so genannten Dark-Modes. Dabei wird das klassische Farbschema von schwarzer Schrift auf weißem Grund umgekehrt. Durch den dunklen Hintergrund kann die Helligkeit des Bildschirmes reduziert beziehungsweise an die jeweiligen Lichtverhältnisse angeglichen werden. Als positiver Nebeneffekt senkt die geringere Helligkeit den Stromverbrauch der Endgeräte der Nutzer, was besonders in Zeiten des Klimawandels durchaus sinnvoll ist. Viele Webbrowser bieten einen solchen Dark-Mode bereits an, dieser wird jedoch nur selten von den Nutzern aktiviert. Da die Integration in das Website-Design jedoch vergleichsweise einfach ist, erfreut sich der Dark-Mode inzwischen wachsender Beliebtheit unter Webdesignern.
  4. Neumorphismus
    Dieser Trend besteht im Kern vor allem aus der Gestaltung von minimalistischen und aufgeräumten WebsitesEinzelne Elemente heben sich nur leicht durch angedeutete Schatten von der generell weich gezeichneten Oberfläche ab. Auf diese Weise sollen Schaltflächen und andere Website-Bestandteile eine angenehme, plastische Wirkung erhalten. Damit hebt sich der Neumorphismus von anderen Gestaltungsformen ab, die sich durch klare Linien und Kanten und das flache Design von Schaltflächen auszeichnen.
  5. Parallax-Animation
    Auch der Einsatz von Parallax-Animationen verfolgt das Ziel, sich von den herkömmlichen, Flachen Designs abzugrenzen, indem er die Website in Vorder- und Hintergrund einteilt. Dabei bewegen sich Animationen und Elemente im Vordergrund der Website schneller als im Hintergrund, wodurch der Eindruck von räumlicher Tiefe entsteht. Dieser Effekt, in Kombination mit den eigentlichen Animationen kann genutzt werden, um das Interesse und die Aufmerksamkeit des Besuchers zu erhöhen.
  6. Animation
    Durch die immer besseren technischen Möglichkeiten, sowohl auf Seiten der Webdesigner, als auch auf Seiten der Nutzer finden auch Animationen immer mehr Anklang im Bereich der Website-Gestaltung. Von einfachen Animationen und GIFs bis hin zu komplexen Animierten Videos sind der Kreativität dabei keine Grenzen gesetzt. Dabei bringen Animationen nicht nur deutlich mehr Dynamik in den Internetauftritt. Denn zusätzlich können sie dazu dienen, den Besucher emotional deutlich stärker in ein bestimmtes Thema einzubeziehen, als dies mit einfachen Texten und Bildern möglich wäre.
  7. Scroll-Transformationen
    Um die Aufmerksamkeit des Nutzers über die gesamte Website hinweg aufrecht zu erhalten, wird inzwischen oft auf die so genannten Scroll-Transformationen zurückgegriffen. Anders als etwa bei bestimmten Farbverläufen oder Hintergrundbildern, führt hierbei das durchscrollen der Webseite zu verschiedenen, radikalen Designveränderungen. Diese reichen von einem vollständigen Wechsel der verwendeten Farben, bis hin zur Gestaltung aufwendiger Animationen. Auch eine extreme Änderung des Layouts in einem Teil der Webseite ist bei diesem Trend keine Seltenheit.
  8. Interaktive Fragebögen
    Ein besonders bei Service-Websites und Online-Shops immer häufiger zu findendes Element sind interaktive Fragebögen. Durch einige, oft informell beziehungsweise umgangssprachlich formulierte Fragen, werden die Präferenzen und Ansprüche der potenziellen Kunden ermittelt, um schlussendlich das für sie ideale Angebot präsentieren zu können. Für die Besucher bietet diese Form der Interaktivität mehr Abwechslung und kann ihnen zusätzlich die Navigation zu dem gesuchten Produkt erleichtern.
  9. Interaktive 3D-Elemente
    Eine weitere Möglichkeit, eine abwechslungsreiche und zugleich praktische Nutzererfahrung zu schaffen sind interaktive 3D-Animationen. Auf diese Weise können Besucher sich die Produkte von allen Seiten ansehen und so einen deutlich besseren Eindruck von dem jeweiligen Angebot bekommen. Lange Zeit waren derartige Animationen nur schwer umzusetzen, da die Erstellung von 3D-Elementen mit sehr hohen Kosten verbunden waren und die Leistung vieler Browser und Endgeräte nicht ausreichte, um die Animationen einwandfrei anzuzeigen. Durch die Weiterentwicklung der technischen Möglichkeiten und die Leistungsfähigkeit aktueller Computer und Smartphone gehören die Probleme inzwischen jedoch der Vergangenheit an.
  10. Micro-Interactions
    Der letzte aktuelle Trend dieser Auflistung sind die Micro-Interactions. Dabei werden einzelnen Interaktionen zwischen dem Nutzer und der Internetseite Animationen und Effekte angefügt.  So reagiert ein Button beim Anklicken beispielsweise mit einem Bewegungseffekt, oder führt zu einer Vibration des eigenen Smartphones. Auch wenn diese Effekte eher unauffällig sind, können sie die Nutzererfahrung durchaus lebhafter und damit positiver gestalten.

Aus & für Göttingen

Du möchtest mit uns zusammenarbeiten?

Du hast eine Frage?

wir beantworten gerne all deine Fragen

Egal ob du eine Rückfrage hast, etwas nicht verstehst, du etwas anders siehst oder wir dir bei der Umsetzung deiner Projekte helfen sollen, schreib uns einfach und wir werden uns bei dir melden!