Sind Webdesign-Trends der 2010er Jahre hier, um zu bleiben?

Offenlegung: Ihr Support hilft dabei, die Website am Laufen zu halten! Für einige der auf dieser Seite empfohlenen Dienstleistungen erhalten wir eine Empfehlungsgebühr.


Webdesign-Trends für 2018

In den frühen Tagen des World Wide Web war es für Webmaster im Trend, alle möglichen Effekte zu nutzen: animierte Gifs, blinkender Text und automatisch spielende Midis wetteiferten auf jeder Website, auf der Sie surften, um Aufmerksamkeit.

Während die wilden Grenztage des Internets aufregend und revolutionär waren, waren Trends wie roter Text auf gemusterten Hintergründen nicht gerade augenschonend oder benutzerfreundlich.

Zum Glück haben wir seit der Geburt des Webs einen langen Weg zurückgelegt. Die Technologie, mit der wir online gehen, hat sich seit den Tagen weiterentwickelt, in denen wir kreischende DFÜ-Modems miteinander verbunden haben. Wir drücken die Daumen, dass Sie niemand offline getreten hat, indem Sie das Festnetz abgenommen haben.

Auch Webdesigner mussten sich weiterentwickeln, um mit der sich ändernden Technologie Schritt zu halten. In den letzten Jahrzehnten sind Wellen von Designtrends gekommen und gegangen, um den Fokus auf die Benutzererfahrung zu legen. Designer konzentrieren sich heute mehr denn je auf Minimalismus, Lesbarkeit und Benutzerfreundlichkeit.

Aber während sich die Dinge ständig verbessern, besteht immer die Möglichkeit von falschen Wendungen und Fallstricken auf dem Weg, selbst bei Trends, die Verbesserungen zu sein scheinen. Unendliches Scrollen kann dazu beitragen, mehr Informationen anzuzeigen und den Besucher länger auf der Seite zu halten. Benutzer können es jedoch frustrierend finden, wenn sie versuchen, eine Website-Fußzeile anzuzeigen, die immer wieder wegspringt, wenn mehr Artikel geladen werden.

Die Beliebtheit fester Elemente ist verständlich: Sie möchten wichtige Informationen vor den Augen Ihres Besuchers halten. Es kann jedoch zu Fehlschlägen kommen, wenn diese Freigabeschaltflächen den Seiteninhalt blockieren. Webdesigner sollten mit den Trends Schritt halten, aber auch ihre Kreativität einsetzen, um innovative neue Lösungen für solche Probleme zu finden.

Wenn es um die diesjährigen Trends geht, ist es unmöglich zu sagen, welche Innovationen gewinnen und bleiben werden und über welche wir in 10 oder 20 Jahren lachen werden. Mit dieser Aufschlüsselung der Webdesign-Trends von 2014 können Sie selbst entscheiden, welche Trends es wert sind, fortgesetzt zu werden, und welche zurückgelassen werden sollten.

Web-Design-Trends

Design der Zeit: 2014 Webdesign-Trends

Das Web hat sich seit den frühen 90er Jahren dramatisch weiterentwickelt, als wir verrückte Farben und Schriftarten und automatische Musik im Hintergrund sahen, sobald eine Website geladen wurde. Das heutige Web sieht einen minimalistischeren Ansatz, der allesamt einfach und benutzerfreundlicher gestaltet. Hier ist, was Sie 2014 mehr erwarten können.

Sich anpassendes Design

  • Responsive Design bedeutet, dass sich eine Website automatisch an die Größe des Bildschirms anpasst, auf dem sie angezeigt wird.
    • Dies ist für das Webdesign von entscheidender Bedeutung, da sich die Benutzer von einem herkömmlichen Computerbildschirm entfernen.
      • 90% der amerikanischen Erwachsenen besitzen jetzt ein Handy
      • 58% der amerikanischen Erwachsenen besitzen inzwischen Smartphones
        • 60% der Handybesitzer verwenden ihr Handy, um eine Verbindung zum Internet herzustellen
      • 42% der amerikanischen Erwachsenen besitzen inzwischen Tabletten
  • Responsive Webdesign beinhaltet die Verwendung einer Mischung aus flexiblen:
    • Layouts
      • Alles ist eher proportional als pixelgroß.
    • Bilder
      • Alles wird nach Beziehung und nicht nach Pixel sortiert.
    • CSS-Abfragen
  • Beispiele für responsives Design sind:
    • com
    • com
    • com
  • Erstellen Sie Ihre eigenen Responsive-Vorlagen oder erwerben Sie ein vorhandenes Responsive-Framework.
    • Beispiele beinhalten:
      • Karma
      • Avada
      • Umhüllen
  • Vorteile:
    • Weniger Wartung: Ein Standort anstelle mehrerer zu entwerfender und zu wartender Standorte.
    • Bessere Suchmaschinenoptimierung (SEO): Eine Website bedeutet einen Satz von URLs, wodurch SEO besser verwaltet werden kann.
    • Sie müssen sich keine Sorgen machen, ob Ihre Website mit den Dutzenden neuer Geräte kompatibel ist, die ständig auf den Markt kommen.
  • Nachteile:
    • Die Implementierung kann länger dauern als erwartet.
    • Die Technologie entwickelt sich weiter.
    • Da Bilder nur verkleinert und nicht in der Größe geändert werden, kann dies die Ladezeit der Seite negativ beeinflussen und die Besucher verärgern.

Mehr Scrollen

Im Jahr 2014 werden wir mehr Scrollen sehen, da die Implementierung so einfach ist.

  • Parallaxen-Bildlauf: Ermöglicht es dem Hintergrund der Website, sich mit einer anderen Geschwindigkeit als der Rest der Seite zu bewegen.
    • Beispiel: Nasa Prospect
    • Vorteile:
      • Kann Besucher mit Animation begeistern
      • Direkte Benutzer zum Aufruf der Aktion
      • Ermutigen Sie die Besucher, länger auf der Seite zu bleiben, während sie durch das Ganze scrollen
    • Nachteile:
      • SEO ist ein Hit, da es nur einen Satz von Metainformationen gibt
      • Viele Daten auf einer einzelnen Seite verlangsamen die Ladezeit der Seite, was zu frustrierten Benutzern führen kann
  • Horizontales Scrollen: Scrollt von links nach rechts und nicht von oben nach unten.
    • Beispiel: Earth Hour 2012 der World Wildlife Foundation
    • Vorteile:
      • Ermöglicht Designern, mehr Inhalte auf dem Bildschirm zu speichern.
    • Nachteile:
      • Benutzer erkennen möglicherweise nicht, dass sie zur Seite scrollen müssen, oder möchten möglicherweise nicht zur Seite scrollen, um die volle Erfahrung zu erhalten.
  • Unendliches Scrollen: Lädt den Seiteninhalt, während ein Benutzer einen Bildlauf durchführt
    • Beispiel: Facebook-Newsfeed
    • Vorteile:
      • Schnelleres Surfen
      • Interagiert gut mit Touch-Geräten
      • Inhaltsbelichtung: Durch unendliches Scrollen werden neue und alte Inhalte gleichermaßen verfügbar gemacht, wodurch ältere Inhalte eine längere Haltbarkeit erhalten.
    • Nachteile:
      • Navigation:
        • Benutzer können nicht zu einer bestimmten Sache zurückblättern oder sie mit einem Lesezeichen versehen und müssen erneut von oben beginnen.
        • Durch unendliches Scrollen wird den Benutzern nicht mitgeteilt, wie viele Daten durchsucht werden müssen.
      • Benutzerfokus: Wenn Sie sich von der Schriftrolle entfernen, werden Sie wieder an den Anfang und nicht an den vorherigen Bezugspunkt zurückgesetzt, wodurch es für Benutzer schwieriger wird, sich auf das zu konzentrieren, was sie gerade getan / gelesen haben.

Weniger Text

  • Anstelle von textintensivem Design sehen wir mehr Design, das sich auf Bilder, Symbole und Videos konzentriert.
    • com enthält weniger als 10 Wörter und erfordert, dass Benutzer ein Video ansehen, um zu verstehen, wie die App verwendet wird.
    • com enthält einen kleinen Textabschnitt und einige Wörter in der Navigationsleiste auf seiner Homepage.
    • The-Studio.co.il enthält nur wenige Wörter und Bilder.
  • Vorteile:
    • Anspruchsvolleres Webdesign
  • Nachteile:
    • Es ist schwieriger, Website-Designs 508-konform zu machen
      • 508 Compliance bezieht sich darauf, das Web für Menschen mit Behinderungen konform zu machen, die nicht auf herkömmliche Weise auf das Internet zugreifen können.

Flache Benutzeroberfläche

  • Flat User Interface (UI) bezieht sich auf ein Design, das sich eher auf Funktionalität als auf Stil konzentriert.
    • Elemente sehen eher so aus, wie sie benannt sind.
    • Alles ist ausgelegt für:
      • Klarheit
      • Einfachheit
    • Es bedeutet zu entfernen:
      • Schatten
      • Farbverläufe
      • Abgeschrägte Kanten
      • Reflexionen
  • Wir haben es bereits gesehen in:
    • Windows 8
    • Apple iOS 7
    • WordPress 3.8
  • Flaches Design wirkt gegen skeuomorphes Design.
    • Skeuomorphes Design verwendet visuelle Details, um eine Sache wie etwas anderes aussehen zu lassen.
      • Beispiel: Verwendung von Holzvertäfelungen im Fahrzeuginnenraum
  • Vorteile:
    • Einfache Benutzeroberfläche
    • Die Verwendung von hellen / kräftigen Farben steigert die Stimmung
    • Konzentrieren Sie sich auf großartige Typografie
    • Die Bilder sind scharf und sauber
  • Nachteile:
    • Bedenken hinsichtlich der Benutzerfreundlichkeit: Menschen wissen möglicherweise nicht immer, wo sie klicken oder berühren müssen, um zu interagieren.
    • Farbpaletten können schwierig zu finden sein: Je mehr Farben Sie verwenden, desto schwieriger kann es sein, sie richtig anzupassen.
    • Schwaches Typografie-Design wird leichter zu erkennen.
    • Das Gesamtdesign kann zu einfach aussehen.

Fester Inhalt

  • Dies bezieht sich auf ein Seitenelement, z. B. die Navigationsleiste oder einen Inhaltsabschnitt, der auf der Seite verbleibt, während der Benutzer einen Bildlauf durchführt.
    • ca ermöglicht horizontales Scrollen, während die Navigation in der Seitenleiste beibehalten wird.
    • net verfügt über eine Social-Media-Leiste mit fester Position auf der linken Seite der Website, mit der Benutzer durch Inhalte scrollen können, während die Leiste an Ort und Stelle bleibt.
  • Vorteile:
    • Vorteile der Benutzerfreundlichkeit: Benutzer können viel einfacher finden, wonach sie suchen.
  • Nachteile:
    • Feste Inhalte können Speicherplatz jenseits der Schriftrolle verschwenden.
    • Einige feste Elemente, wie z. B. eine Navigationsleiste, können schwierig in eine mobile Umgebung zu übersetzen sein.

Quellen

  • Fact Sheet zur Mobiltechnologie – pewinternet.org
  • Responsive Web Design: Was es ist und wie man es benutzt – coding.smashingmagazine.com
  • Was ist Responsive Web Design? – smallbiztrends.com
  • 17.389 Website-Vorlagen und -Themen Ab 3 US-Dollar – themeforest.net
  • Die Vor- und Nachteile von Responsive Web Design – business2community.com
  • Was ist Parallax Web Design? – Definitionen, Tipps & Überlegungen – unleashed-technologies.com
  • NASA: Prospect – nasaprospect.com
  • WWF Food Story – Assets.wwf.org.uk
  • Unendliches Scrollen ist nicht für jede Website geeignet – nngroup.com
  • Bis zur Unendlichkeit und weiter! Die Vor- und Nachteile des unendlichen Bildlaufs – inspirationm.com
  • Snapchat – snapchat.com
  • Das Studio – the-studio.co.il
  • Weniger Text mehr Multimedia – Neuer Ansatz im Website-Design – designmodo.com
  • Fundbüro – Mapping-Seite – howto.gov
  • Was ist flaches Design? – gizmodo.com
  • Vor- und Nachteile von Flat Design – designmodo.com
  • 18 zentrale Webdesign-Trends für 2014 – econsultancy.com
  • Behobene Navigationsleisten: Vor- und Nachteile – awwwards.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector