10 Website-Trends, die 2015 definiert haben

Was lässt eine Website modern aussehen und was lässt sie veraltet aussehen? Jedes Jahr entscheidet das Überleben der Stärksten darüber, welche Trends funktionieren und welche nicht. Mit dem Ende des Jahres 2015 können wir nun die erfolgreichsten Trends des Jahres 2015 ermitteln, die den Stil des Jahres bestimmen und genügend Kraft zeigen, um in das neue Jahr vorzudringen. Hier sind unsere zehn wichtigsten Designtrends aus dem Jahr 2015.

01. Langes Scrollen

Schatten-Homepage

Shadow (http://shadow.is/) unterstreicht den Trend zum langen Scrollen

Mit mobiles Surfen übersteigt jetzt den Desktop Im Jahr 2015 wurde das Webdesign eher auf kleinere Bildschirme ausgerichtet. Wie viele der Trends auf dieser Liste wurde das lange Scrollen wegen seiner Nützlichkeit im reaktionsschnellen Design beliebt: Kleinere Bildschirme bedeuten längere Bildläufe.



In der Vergangenheit befürchteten Designer, Inhalte unterhalb der Falte zu platzieren, aber Neue Forschungsergebnisse belegen, dass es Benutzern nichts ausmacht, zu scrollen . Heute erkennen Designer und Benutzer den Wert des langen Bildlaufs: mehr kreative Freiheit, verbessertes Storytelling, stärkere Interaktionen und vereinfachte Navigation (wenn die Website klein genug ist).

Diese Vorteile sind jedoch mit Kosten verbunden. negative SEO-Effekte und längere Ladezeiten gehören zu den schlimmsten. Langes Scrollen funktioniert am besten für Websites mit starkem mobilen Datenverkehr oder häufigen Aktualisierungen von Inhalten und ist für Websites mit starken Medien wie Videos weniger effektiv.

Empfohlene Vorgehensweise

  • Benutze einen klebriges Navigationsmenü oder eine Sprung-zu-Abschnitt-Option, um die Navigation zu verbessern. Langes Scrollen und Websites mit nur einer Seite können dazu führen, dass Benutzer desorientiert werden. Setzen Sie daher einen Schutz ein.
  • Zeichnen Sie die spielerischen Aspekte des langen Bildlaufs mit Effekten wie Parallaxe und durch Bildlauf ausgelösten Animationen
  • Vermeiden Sie die negativen SEO-Effekte, indem Sie die darin enthaltenen Hinweise befolgen Moz Artikel .

02. Kartenlayouts

Behance Homepage

Behance (www.behance.net) ist ein gutes Beispiel für ein sauberes Kartenlayout

Ein weiterer praktischer Trend, der von der mobilen Bewegung populär gemacht wurde: Kartenlayouts zeigen eine Fülle von Inhalten auf saubere, organisierte Weise. Dadurch eignen sie sich am besten zum Durchsuchen verschiedener und unterschiedlicher Inhalte, insbesondere zum Verknüpfen mit externen Websites: Benutzer wissen intuitiv, dass sie durch Klicken auf die Karte zum entsprechenden Beitrag gelangen.

Wie in der Anleitung erklärt Webdesign-Trends 2015 und 2016 durch UXPin Karten eignen sich am besten zum Aufteilen von Inhalten in verdauliche Dosen, wobei jede nur die Daten enthält, die ein Benutzer wissen muss:

  • Titel
  • Verlockendes Bild
  • Beschreibung (oder relevante Tags)
  • Systemsteuerung mit Optionen wie Bevorzugen, Kommentieren usw.

Karten funktionieren besonders gut mit reaktionsschnellem Design, da ihre Zeilen und Spalten automatisch neu angeordnet werden können, um sie an unterschiedliche Bildschirmgrößen anzupassen.

Empfohlene Vorgehensweise

Stellen Sie sicher, dass die gesamte Karte anklickbar ist, im Gegensatz zu nur den Bild- oder Textlinks. Das Gesetz von Fitts besagt, dass dies die Interaktion erleichtert.

Kombinieren Sie Karten mit Animationen, insbesondere durch Schwebeflug ausgelöste Effekte. Kleine Extras - Änderungen in der Farbe oder auf der gesamten Vorderseite der Karte oder sogar Dreh- oder Wirbeleffekte - verleihen dem stark strukturierten Format Leben, aber neue und kreative Anwendungen können Ihre Website mit Karten von den vielen anderen abheben.

Der negative Abstand zwischen den Karten, der als 'Dachrinnen' bezeichnet wird, sollte klar definiert sein. Lassen Sie Benutzer die Grenzen nicht erraten.

03. Flaches Design neu interpretiert

Toyota Homepage

Die Toyota-Website (www.toyota-insidedreams.com/dreamcar-collection/) verwendet flaches Design auf andere Weise

Vor Jahren als Skeuomorphismus war (ironischerweise) ein moderner Trend, flaches Design entstand als kontroverse Alternative.

Das flache Design ist heute jedoch weit von seinen Ursprüngen entfernt. Die neue, nuanciertere Iteration des flachen Designs - Ryan Allen nennt es ' Flaches Design 2.0 '- bietet mehr Gelegenheit für Details und gedeiht. Das neue flache Design, das 2015 dominierte, hatte folgende Eigenschaften:

  • Beleuchtung Blendungen und Highlights
  • Farbverlauf und / oder Schlagschatten
  • Größere Werte für die Detaillierung

Alles in allem bleibt das flache Design im Herzen flach.

Die allgemeine Einfachheit und die minimalen Verzierungen haben nichts gebracht. Die fast karikaturistischen Grafiken, die Typografie mit der ersten Lesbarkeit und die verspielten Farben bleiben unverändert und behalten den Stil bei, der auf ein leichtes Verständnis ausgerichtet ist.

Empfohlene Vorgehensweise

  • Geisterknöpfe Mit transparenten Hintergründen, die nur von einem Umriss eingerahmt werden, entstand ein Trend innerhalb eines Trends. Glücklicherweise können Ghost-Buttons auch außerhalb des flachen Designs verwendet werden: Diese Funktionssteuerelemente beeinträchtigen ein prominentes Hintergrundbild nicht und machen sie zu einer beliebten Ergänzung für Heldenbilder.
  • Das Schöne an den einfachen Grafiken von Flat Design ist, dass das Laden ein Kinderspiel ist. Dies funktioniert perfekt für reaktionsschnelles Design.
  • Flaches Design passt gut zu der Minimalismus-Trend (siehe 10). Beide streben nach mehr Verständnis durch Einfachheit und beide halten an „weniger ist mehr“ fest.

04. Leistungsstarke Animationen

Bugaboo Homepage

Bugaboo (http://bit.ly/1HjLPyY) bietet einige coole Animationen

Animationen übernahmen 2015 mehr Aufgaben und Verantwortlichkeiten und gingen über den ästhetischen Wert hinaus, um praktischere Rollen zu übernehmen.

Da Bewegung Aufmerksamkeit erregt, kann Animation die visuelle Hierarchie dessen beeinflussen, was zuerst gesehen wird. Animierte Effekte können bestimmte Elemente gegenüber anderen bewerben und möglicherweise mit traditionelleren Aspekten wie Größe oder Farbe konkurrieren.

Animationen haben auch die Macht, Beziehungen zu zeigen. Stellen Sie sich einen animierten Effekt zum Minimieren eines Fensters vor, bei dem es verkleinert und dann in das Menü fliegt. Diese Animation bestätigt zunächst den Erfolg der Aktion, zeigt dem Benutzer jedoch auch, wo er das Fenster später im Menü anzeigen kann.

Das Fly-In-Menü, wie unten in UXPin mit dem No-Code-Animationseditor als Prototyp dargestellt, demonstriert dieses Prinzip perfekt.

Zumindest hebt die Animation ansonsten langweilige Aktionen hervor. Eine Hover-Animation zeigt, dass ein Link mehr anklickbar ist als ein einfacher Farbwechsel.

Empfohlene Vorgehensweise

  • Web- und App-Animationen können weiterhin Disneys Klassiker verwenden 12 Animationsregeln .
  • Lange Bildlaufformate hängen stark von der Animation ab, um das Erscheinungsbild eines reibungslosen Bildlaufs zu erzielen. Wenn dies gut gemacht wird, erzeugen durch Scrollen ausgelöste Animationen eine immersivere und unterhaltsamere Site.
  • Das Laden von Bildschirmanimationen ist aus gutem Grund ein Grundnahrungsmittel: Sie geben Benutzern eine Schätzung der Zeit und unterhalten sie während des Wartens.
  • Subtile Animationen in einem Hintergrundbild können eine Seite mit Energie versorgen und verhindern, dass sie langweilig wird… solange sie nicht übermäßig sind. Zu viele Hintergrundbewegungen lenken den Benutzer vom Hauptinhalt ab, ganz zu schweigen von längeren Ladezeiten.

05. Faszinierende Fotografie

Mario Frigerio Homepage

Die Website des Hochzeitsfotografen Mario Frigerio (http://www.fotofrigerio.it/en) verwendet großartige Bilder

Mit der Popularität von HD-Bildschirmen im Jahr 2015 widmeten Designer der künstlerischen Qualität von Fotografien mehr Aufmerksamkeit. Immer mehr Websites verlassen sich bei ihrer visuellen Präsentation auf atemberaubende Fotografie anstatt auf digitale Grafiken.

Unter den Fotografie-Trends des Jahres steht das Heldenbild an erster Stelle. Durch das Füllen des gesamten Hintergrunds mit einem einzigen Bild schaffen Websites ein beeindruckendes Erlebnis, das Benutzer schneller anzieht und sie perfekt für Landing- und Anmeldeseiten macht.

Auch bei Heldenbildern gibt es viel Flexibilität. Der Ton und die Nachricht können für jede Site geändert werden, solange das Foto den Zielen entspricht.

Empfohlene Vorgehensweise

  • Während benutzerdefinierte Fotografie oft persönlicher ist, ist Stock-Fotografie eine praktikable Option für Designer, die versuchen, Zeit oder Geld zu sparen. Kombinieren Sie sie für das Beste aus beiden Welten so, dass die benutzerdefinierten Fotos die Stock-Fotos auch benutzerdefiniert erscheinen lassen - zum Beispiel konsistente Themen sowohl durch Custom als auch durch Stock. Versuchen Sie es mit kostenlosen Fotos Unsplash , Pixabay und Pexels .
  • Mit Farbüberlagerungen können Designer die Wahrnehmung eines Bilds anhand der Farbattribute manipulieren. Wenn Sie einem ansonsten düsteren Foto eine gelbe oder orangefarbene Überlagerung geben, wirkt es optimistischer und freundlicher.
  • E-Commerce-Websites haben begonnen, traditionelle Produktbilder durch Fotos des Produkts in ihrer natürlichen Umgebung zu ersetzen. Bereitstellung eines Kontexts darüber, wie es ist, das Produkt tatsächlich zu besitzen nachweislich den Umsatz zu steigern .

06. HD-Hintergründe

Homepage der R / m Design School

Die Website der R / m Design School (http://school.readymag.com/) bietet einen spektakulären HD-Hintergrund

In Zusammenarbeit mit Trends in der Fotografie wurde in diesem Jahr auch die Verwendung von HD-Hintergründen immer beliebter. Mit Immer mehr Menschen besitzen HD-Geräte Es war nur eine Frage der Zeit.

Beispiele für Spezialeffekte in Filmen

Wir sehen HD-Qualität für Videos sowie die oben beschriebenen Heldenbilder. Browser und Internetgeschwindigkeiten können jetzt mehr Videos verarbeiten, und filmische Hintergründe sind in Bezug auf Atmosphäre und emotionale Verbindungen in der Regel effektiver als stagnierende Fotos.

HD ist eine weitere Auflösung von mehr als 200 ppi (dpi), während die Standardauflösung 72 ppi beträgt. Dadurch erscheinen Bilder, die mit Blick auf SD entworfen wurden, auf HD-Geräten blockig oder verschwommen, aber HD-Bilder erscheinen auf SD gut. Das bedeutet, dass Benutzer mit SD-Displays den Unterschied nicht bemerken - aber diejenigen mit HD werden es tun.

Empfohlene Vorgehensweise

Skalare Vektorgrafiken (SVG) übersetzen Bilder mit Linien und Punkten, nicht pixelweise wie Rasterformate (.jpg, .png, .gif). Verwenden Sie sie, wenn Sie können, für neue Grafiken und speichern Sie Rasterformate für reale Bilder und Videos, da sie von Anfang an eine feste Anzahl von Pixeln haben. Deshalb ist es wichtig, die Medien von Anfang an in HD aufzunehmen.

Die Hintergründe der meisten Geräte entsprechen nicht dem üblichen Seitenverhältnis von 1: 1,5 von Kameras. Nehmen Sie daher eine aktive Rolle beim Zuschneiden ein. Andernfalls können Sie nicht steuern, was geschnitten und was gesehen wird.

Lassen Sie nicht zu, dass die überlegenen visuellen Elemente des Hintergrunds die wichtigeren Elemente der Seite überschatten.

07. Mutige Typografie

Google Ideas-Startseite

Google Ideas (www.google.com/ideas/) verwendet fett gedruckte Typografie, um zu zeigen, dass es ernst ist, die Welt zu verändern

Da das Rendern von Schriftarten kein Problem mehr darstellt und neue, kostenlose Schriftarten verfügbar sind, spielt die Typografie im Webdesign zunehmend eine Rolle.

Fettgedruckte Typografie bezieht sich auf Text, der die Aufmerksamkeit auf sich zieht, aber nicht unbedingt wild oder aufwändig ist. In der Tat ist einfache Typografie manchmal die kühnste. Neben flachen und minimalistischen Trends spricht die aktuelle Typografie auch für Einfachheit. Eine serifenlose Schrift in einem dicken Stil setzt eine visuelle Aussage und verbessert gleichzeitig die Lesbarkeit.

Grafikdesigner folgen auf Instagram

Unabhängig von der Schriftart ist die extreme Größe eine der häufigsten Anwendungen der Typografie in diesem Jahr. Dies kann groß oder klein sein - der Trend bringt die Schrift einfach auf die Spitze.

Empfohlene Vorgehensweise

Beginnen Sie mit nur zwei Schriftarten pro Site, um es einfach zu halten. Experimentieren Sie aus Gründen der Abwechslung mit mehr Schriftarten, bleiben Sie jedoch bei derselben Schriftfamilie.

Denken Sie daran, das Hauptziel der Typografie ist Lesbarkeit und Lesbarkeit . Es spielt keine Rolle, wie beeindruckend Ihre Schrift ist, wenn sie nicht verstanden wird.

Bei ausreichender Betonung der visuellen Darstellung kann fett gedruckte Typografie die Rolle eines Bildes auf der Seite übernehmen. Text kann auch eine Augenweide sein, und es ist üblich, Seiten mit schönem Text als zentralen Fokus zu sehen.

08. Beteiligte Interaktivität

Homepage der Beatbox Academy

Die Beatbox Academy (www.beatboxacademy.ca/) ist wunderbar interaktiv

Die Fortschritte von HTML5, CSS, Javascript und jQuery ermöglichen jetzt tiefere Interaktionen, a leistungsstarkes Tool für alle Unternehmen . Die Benutzer sind jetzt stärker involviert, mit mehr visueller Stimulation, stärkerem Inhalt und ansprechenderen Steuerelementen. In diesem Jahr gab es einen Anstieg von:

  • Klickbare / wischbare Elemente
  • Personalisierung (insbesondere Geolokalisierung)
  • Kontrolle über das Aufdecken von Inhalten
  • Video und Animation
  • Bildlaufbasierte Navigation
  • Übergänge und Schleifenfunktionen
  • Mitteilungen

Die Zunahme der Wechselwirkungen bedeutet auch eine Zunahme der Mikrointeraktionen.

Wie in erklärt Webdesign-Trends 2015 & 2016 durch UXPin Mikrointeraktionen sind die Minutien der Interaktivität: ein Klingelton beim Senden einer E-Mail oder eine Animation, um auf eine neue Benachrichtigung aufmerksam zu machen. Das Interaktionsdesign wird nur noch komplizierter, was dies zu einem Trend macht, der sicher noch eine Weile anhält.

Empfohlene Vorgehensweise

Bekannte Signifikanten - wie ein Hamburger-Symbol mit der Bezeichnung 'MENU' zur Übermittlung eines Auszugsmenüs oder eine Wiedergabetaste für ein anklickbares Video - umgehen die Erklärungsfunktionen und erleichtern so die Interaktion.

Beachten Sie das Ziel des Benutzers. Jeder Schritt des Designprozesses sollte optimiert werden, damit der Benutzer seine Ziele schneller erreichen kann. Personas, Benutzerszenarien und Erfahrungskarten, die in erwähnt werden Best Practices für den UX-Designprozess Arbeiten Sie am besten, um Ihre Benutzer und ihre Ziele zu verstehen.

Die Interaktivität eines Produkts ist seine Rolle im Gespräch mit dem Benutzer. Versuchen Sie es, um die Benutzerströme besser zu verstehen Rollenspiel zwischen Benutzer und Benutzeroberfläche , wo tatsächlich eine Person für den zukünftigen Standort spricht.

09. Helle Farben

Spotify: Fand sie Erste Homepage

Spotify: Found them First (https://spotify-foundthemfirst.com/en-US) hebt den aktuellen Trend zu helleren Farben hervor

Wie wir an der Beliebtheit des flachen Designs sehen, ist der allgemeine Trend bei der Grafik fröhlich und optimistischer.

Helle, „fröhliche“ Farben passen zu diesem Ton mit einer unbeschwerten, freundlichen Ausstrahlung und sind heute leichter zugänglich. In der Vergangenheit waren Designer auf beschränkt 216 web-sichere Farben , aber jetzt gibt es Millionen, eine Weiterentwicklung, die mit dem Aufstieg der HD-Bildschirme gut abgestimmt ist.

Helle Farben bieten mehr als nur eine optimistischere Ästhetik. Aufmerksamkeitsstarke Farben verringern die Wahrscheinlichkeit, dass eine Website langweilig erscheint - die natürliche Schwäche des Minimalismus. Bei aktiver Verwendung mit Typografie können Farben auf bestimmte Wörter oder Sätze aufmerksam machen. Darüber hinaus haben Farben eine wertvolle Funktion, um die Benutzerfreundlichkeit zu suggerieren: Denken Sie an Karten, deren Farbe sich ändert, wenn Sie mit der Maus darüber fahren, ein offensichtlicher Indikator für Interaktivität.

Empfohlene Vorgehensweise

  • Jede Farbe löst eine andere Emotion aus. Wählen Sie daher die richtige aus, die zur Persönlichkeit Ihres Produkts passt.
  • Mehr Farben sind nicht immer besser. Monochromatische Schemata verwenden unterschiedliche Schattierungen derselben Farbe, um eine einheitlichere Benutzeroberfläche zu schaffen und eine starke visuelle Aussage zu treffen, wenn sie mit fett gedruckter Typografie kombiniert werden.
  • Die 3 Hauptfarbschemata können den perfekten Kontrast auf Ihrer Website erzeugen.

10. Minimalismus

OMEGA Watches Homepage

Die Website von OMEGA Watches (www.omegawatches.com/) ist wunderschön minimalistisch

Ich werde mit einem weiteren Ergebnis des zunehmenden mobilen Verkehrs enden: Minimalismus, ein Stil, der definiert wird, indem nur die wesentlichen oder minimalen Elemente verwendet werden.

Im obigen Beispiel OMEGA Enthält nur das Notwendige: Spracheinstellungen, erweiterbares Menü und das Logo für die Rückkehr zur Startseite. Dies lenkt die Aufmerksamkeit fast ausschließlich auf das Heldenbild des Produkts.

Optisch verleiht der Minimalismus der Site einen Hauch von Raffinesse, unabhängig vom Genre. Auf einer praktischeren Ebene verkürzt das Reduzieren des Fettes die Ladezeiten, verbessert die Lesbarkeit und schafft Schnittstellen, die so einfach sind, dass sie auf einen Blick verstanden werden können. Weniger Elemente erleichtern auch das reaktionsschnelle Design.

Empfohlene Vorgehensweise

  • Sparen Sie Platz, indem Sie Navigationsmenüs in Slideouts oder Pulldown-Menüs ausblenden.
  • Durch Anwenden unterschiedlicher Symmetriegrade werden die wenigen verbleibenden Elemente wirksamer. Berücksichtigen Sie Asymmetrie, wenn ein einzelnes Element hervorstechen soll, z. B. ein großes Produktbild, das durch einen kleinen Textblock versetzt ist.
  • Angesichts der Betonung des Inhalts funktionieren minimalistische Websites gut mit Heldenbildern und Videohintergründen: Es gibt einfach weniger UI-Elemente, die mit den Grafiken konkurrieren können.

Fazit

Wenn Sie mehr erfahren möchten, lesen Sie den kostenlosen Leitfaden Webdesign-Trends 2015 & 2016 Erarbeitet Techniken, die all diese Trends berücksichtigen, mit noch mehr Best Practices und 100 Online-Ressourcen.

Lesen Sie, warum sie funktionieren und wie sie angewendet werden, und sehen Sie sich die Trends an, die in über 160 handverlesenen Beispielen von Haushaltsseiten wie Google, Apple, Dropbox, Spotify, BMW, Versace, Reebok, Adidas und anderen praktiziert wurden.

Mochte dies? Lese das!