Trends im Webdesign können sich fast so schnell ändern und verblassen, wie sie in Mode kommen. Aber im Jahr 2013 schien eine Handvoll Trends wirklich das Webdesign zu erobern, und es scheint, als würde es bleiben.
Heute werden wir zehn Trends in modernen Webelementen untersuchen und einige großartige Beispiele dafür zeigen - alles von klassischer Typografie und Kreisen bis hin zu kräftigen Farben und praktischen vCards. Noch besser für Sie ist, dass alle unten stehenden Beispiele zum Download zur Verfügung stehen (einige kostenlos, andere bezahlt).
1. Vintage Typografie
Der große, mutige Retro-Stil ist momentan sehr beliebt. Der Stil eignet sich hervorragend für Projekte, bei denen es an starken visuellen Elementen fehlt, oder in Kombination mit scharfen Bildern, indem das Interesse an der Beschriftung geweckt wird.
Dieser Trend gibt es schon seit geraumer Zeit und scheint nie alt zu werden. Was sich ändert, ist die Art und Weise, wie wir das klassische Schriftdesign verwenden.
Derzeit ist Vintage-Typografie meist ein zentraler Punkt in einem minimalistischen Design. Darüber hinaus spielen Designer Vintage-Typ und sehr wenig Farbe, wie beispielsweise Schwarz-Weiß-Paletten oder eine Handvoll gedämpfter Farben. (Vor einigen Jahren war Vintage-Typografie in Verbindung mit kräftigen Farben beliebt.)
Retro typografische Insignien und AbzeichenMit sechs Stilen, die alle mit kostenlosen Schriften arbeiten, war das Erstellen des Vintage-Looks noch nie einfacher. Zu jedem Stil gehört auch ein koordinierendes Hintergrundbild. (5 $)
2. Realistische Effekte
Während die Debatte über die flache Debatte im Gegensatz zum Skeuomorphismus immer noch anhält, befürworten Designer immer noch dreidimensionale, lebensechte Effekte. Von Schatten über erhöhte Ecken bis hin zu Texturen, so wie viele Designer diese Techniken noch anwenden. (Obwohl sich das Gespräch mehr auf die Vorteile des flachen Designs konzentriert.)
Der Schlüssel zu einem guten Satz realistischer Effekte liegt in der Subtilität. Effekte sollten die Realität widerspiegeln. Schatten sollten Lichtmustern im Design folgen, Fasen sollten Textur hinzufügen und Verläufe müssen einen Zweck erfüllen.
Realistische moderne Web-Schatten: Dieses Kit enthält Elemente mit abgehobenen Kanten, Schatten und 3D-Effekten. (6 $)
3. Lebendige Farbe
Flaches Design hat viele sekundäre Trends inspiriert, einschließlich der Verwendung heller Farbpaletten mit mehr Farbtönen als manche Designer es gewohnt sind. Trend sind jetzt super helle, lebendige, satte Farbpaletten für Webdesign und Apps. Anstatt zwei oder drei Farben für den Aufbau auszuwählen, erstellen Designer breite Farbpaletten mit bis zu fünf Farben.
Diese Paletten werden auf zwei Arten verwendet: viel helle Farbe im gesamten Design. Denken Sie jeweils an einen Farbton von Rot, Gelb, Orange, Blau, Grün und Lila, zusätzlich zu Schwarz und Weiß. Oder diese Paletten konzentrieren sich auf Farbtöne einer einzelnen, lebhaften Farbe. Beide Optionen sind besonders beliebt.
Lebhafte Farben strahlen einen Ton aus, auf den Designer achten müssen. Viele Farben wirken leicht und lustig und funktionieren möglicherweise nicht für einige Arten von Projekten. Die kräftige Farbe des monotonen Stils ist stärker abgeschwächt.
uiGo-Farben: Das flache iOS-UI-Kit enthält eine Vielzahl von Elementen im flachen Stil mit viel Farbe. (8 $)
4. Bänder
Farbbänder sind ein Element, das Designer seit langem verwenden. Aber sie scheinen ein Comeback zu sein. Bänder sind besonders bei einseitigen Site-Designs sehr beliebt, und sie sind das ideale Werkzeug für einfache Ansagen - wie "Coming Soon". - oder eine Auszeichnung oder eine Anerkennung zu präsentieren.
80 Premium-Webbänder: Dieses Farbband-Kit enthält Bänder in nahezu jeder Form, Format und Richtung, die Sie sich vorstellen können, mit anpassbaren Farboptionen. (2 $)
5. Flache Icons
Mit dem flachen De-facto-Top-Trend des Jahres 2013 haben die meisten Designer die Chance, es irgendwie zu nutzen. Icons sind aufgrund ihrer Flexibilität eine der beliebtesten Optionen. Ein Designer kann flache Elemente in Kombination mit anderen, weniger flachen Elementen verwenden. Elemente in der gesamten Website-Design, etwas, das immer häufiger wird, wenn flaches Design "fast flaches Design" erweitert.
Neben flachen Symbolen sind flache Knöpfe auch bei Designern beliebt, die einen Hauch von Trend in Projekte integrieren möchten. Sogar Yahoo enthält flache Tasten und Symbole in seinem Website-Rahmen, der nicht von Haus aus flach ist.
Flache Wetter-Icons: Neun einfache und gut gezeichnete Wettersymbole. (3,99 $)
6. Vintage Logos oder Abzeichen
Vintage Logos und Abzeichen spielen mit einer zusätzlichen Styling-Schicht den Vintage-Typ-Trend ab. Abzeichen liegen besonders im Trend, wenn es sich um Websites handelt, die Gamification-Tools und -Effekte verwenden. Diese einfachen Logos sehen nicht nur klassisch aus, sondern lassen sich auf verschiedene Weise einfach erstellen und replizieren. Es dauert nur eine Handvoll schöne Schriftbilder und Grundformen.
Der aktuelle Trend - wie die klassische Typografie - konzentriert sich auf minimale Effekte für diese Abzeichen mit wenig Farbe oder zusätzlichem Styling. Starke Formen und kräftige Schriftzüge sind beliebt.
Vintage Logo Abzeichen Set: Dieses Paket enthält acht verschiedene zweifarbige Logos im Vintage-Stil. Die Vielfalt der enthaltenen Stile bietet viel Flexibilität. (4 $)
7. Karten
Obwohl viele der Website-Karten oder -Kacheln, die wir gerade sehen, nicht unbedingt im flachen Stil gestaltet sind, haben sie sich aus dem flachen U-Bahn-Designkonzept entwickelt.
Diese einfachen Boxen werden auf verschiedene Weise verwendet. Karten oder Kacheln sind auch eine beliebte Technik zum Organisieren von Inhalten in responsiven Designprojekten, da sie sich in verschiedenen Größen gut anordnen und stapeln lassen.
Sobald ein Style entworfen wurde, kann er leicht auf andere Weise verwendet werden. Karten für Kontaktinformationen (fast wie bei einem digitalen Visitenkarten-Look), Karten für Links oder andere Informationen, Karten zum Hervorheben von Portfolios oder Bildern. Der Trend funktioniert, weil er sehr flexibel ist
vCard-Schnittstelle: Fügen Sie Bio-, Arbeits-, Kontaktinformationen und Social Media-Links in einem einfachen Kartenformat hinzu.Dieses Kit ist als PSD- oder CSS-Download erhältlich. (Kostenlos)
8. Kreise
Kreise, Knöpfe und Zifferblätter haben ein echtes Comeback gemacht. Während viele Designer sich in der Vergangenheit von abgerundeten Formen entfernt haben, werden immer mehr Kreise als lustige Methode zum Erstellen von Schaltflächen und anderen Elementen der Benutzeroberfläche verwendet.
Ein Teil der Attraktivität besteht darin, dass sie so aussehen können, als würden sie etwas anfassen, was das Drücken eines Knopfes imitieren soll. Dieses Konzept eignet sich hervorragend für Mobil- und Anwendungsdesign, bei dem Benutzer Elemente berühren oder antippen müssen, um etwas zu ermöglichen. Der Effekt wirkt sich auch auf Desktop-basierte Websites in voller Größe aus.
Einfacher Buy-Button: Ermutigen Sie die Käufer, einen Kauf mit einem bestimmten Kauf-Button zu tätigen. (Kostenlos)
9. Einfache Farbverläufe
Die Entwicklung des flachen Designs zu "fast flach"? hat neuen Schwerpunkt auf einfache Steigungen gelegt. Designer wollen die Veränderung des Farbtons, aber sie wollen sehr subtil sein.
Dieser Effekt funktioniert für Hintergründe, Schaltflächen, Symbole und eine Vielzahl anderer Elemente. Einfache Farbverläufe sind oft nicht aufdringlich und können eine gute Möglichkeit sein, Tiefe zu erzeugen.
CSS-Verlaufssatz: Dieses Kit enthält einfache Farbverläufe in acht gebrauchsfertigen Farben als Ausgangspunkt für größere Elemente oder Symbolsätze. Verfügbar als PSD- oder CSS-Download. (Kostenlos)
10. Schieberegler
Wenn Sie Fotos oder ein Portfolio anzeigen möchten, ist es schwierig, eine Website zu finden, die keinen Schieberegler verwendet. (Sie werden zunehmend auch für Videos beliebt.) Die meisten Schieberegler arbeiten mit einem automatischen Bildlauf, mit dem Benutzer anhalten oder anhalten können und ein großes Anzeigebild sowie kleinere Bilder oder Schaltflächen zum Durchlaufen von Bildern enthalten.
Slider funktionieren mit einer Vielzahl anderer Designstile - der hier vorgestellte Stil hat drei Versionen, die für flache oder skeuomorphe Projekte geeignet sind. Dieses Tool ist eine einfache und effektive Möglichkeit, um eine Menge Arbeit zu präsentieren, während die visuelle Dominanz erhalten bleibt.
Saubere Sliders: Dieses Kit enthält drei Stile für einfach zu verwendende, auffällige Foto-Schieberegler und verwendet kostenlose Schriftarten. (3 $)
Fazit
Das Beobachten von Trends ist eine hervorragende Quelle für Inspiration im Webdesign. Nichts kann die Kreativität anregen wie andere kreative Prozesse in Aktion zu sehen. Welche anderen aufkommenden Trends kennen Sie? Was kommt als nächstes? Teilen Sie Ihre Ideen in den Kommentaren mit.