20 heißesten Trends, die das Webdesign 2016 prägen werden

Während die Zeit mit jedem Jahr voranschreitet, zeichnen sich viele neue Designtrends am Horizont ab. Der Bereich des Webdesigns ändert sich ständig mit neuen Tools, Workflows und bewährten Methoden zum Erstellen von verwendbaren Layouts.

Es ist schwer vorherzusagen, welche exakten Trends die größte Aufmerksamkeit auf sich ziehen werden. Die jüngste Geschichte zeigt jedoch ein Muster von Trends, die wie ein Lauffeuer gewachsen sind. Ich habe 20 einzigartige Trends organisiert, die im Laufe des Jahres 2015 an Bedeutung gewonnen haben und voraussichtlich noch lange im Jahr 2016 anhalten werden.

1. Sketch App für UI Design

Sketch ersetzt Photoshop schnell für alle UI-Designaufgaben von Low-Fidelity-Wireframes zu High-Fidelity-Modelle und Icon-Design.

Sketch App ist eine reine Mac-Anwendung, die speziell für Web- und Mobile-Designer entwickelt wurde. Es bietet eine reibungslosere Arbeitsumgebung für die Erstellung von Vektorelementen für jede Benutzeroberfläche, behält jedoch auch viele Funktionen bei, die Sie von Photoshop erwarten, wie Texteffekte und Ebenenstile.

Zwar gibt es keine Hinweise darauf, dass Sketch jemals für Windows veröffentlicht wird, es ist jedoch immer noch eine geschätzte Wahl für OS X-Benutzer. Dank des vereinfachten Arbeitsablaufs und des günstigeren Preises kann sich Adobe für sein Geld entscheiden. Wenn Sketch auch weiterhin das beste Design für die Benutzeroberfläche bietet, wird es sicherlich auch in 2016 und darüber hinaus weiter wachsen.

2. Browser-basierte IDEs

Desktop-IDEs gibt es seit Jahrzehnten mit Optionen, die von Notepad ++ über Xcode bis zu Visual Studio reichen. Eine IDE erleichtert das Schreiben von Code mit Vorschlägen und Syntaxhervorhebung (unter anderem).

Traditionell wurden IDEs jedoch als Desktopanwendungen veröffentlicht. In den letzten Jahren haben wir einen dramatischen Anstieg der browserbasierten Cloud-IDEs erlebt. Diese benötigen keine andere Software als einen Webbrowser, der es Entwicklern ermöglicht, Code von jedem Computer mit Internetzugang aus zu schreiben.

Cloud-IDEs funktionieren mehr wie Webanwendungen, in denen Sie Codeausschnitte für die Freigabe oder den persönlichen Speicher in Ihrem Konto speichern können. CodePen ist eine der beliebtesten IDEs mit Unterstützung für HTML / CSS / JS sowie benutzerdefinierten Vorverarbeitungen wie Jade / Haml und LESS / SCSS.

Mozilla Thimble ist eine weitere IDE für Anfänger, die beim Codieren lernen möchten. Codeply eignet sich auch hervorragend zum Testen spezifischer responsiver Frameworks wie Bootstrap oder Zurb's Foundation, ohne dass Dateien heruntergeladen werden müssen.

3. Freie Sass / SCSS-Mixins

Preprocessoren sind seit Jahren im Trend, haben sich aber erst vor kurzem etabliert, um sich im gesamten Bereich Webdesign / -entwicklung allgegenwärtig zu fühlen. Heutzutage scheint es merkwürdig, Vanille-CSS zu schreiben, wenn Sass / SCSS so viel mehr bieten kann.

Ein Vorteil ist das wachsende Angebot an Sass-Mixin-Bibliotheken. Einfache Mixins sind wie Codeausschnitte oder grundlegende Funktionen zum Generieren von wiederholbarem Code in CSS. Während Sie immer Ihre eigenen schreiben können, waren viele Entwickler so freundlich, kostenlose Mixins online zu veröffentlichen.

Einige Mixins sind in Bibliotheken wie Bourbon enthalten, während andere Standalone-Objekte sein können. Versuchen Sie eine Suche in GitHub nach Sass / SCSS-Mixins, um zu sehen, was Sie finden können.

4. Kartenlayouts

Website-Kartenlayouts wurden vor einigen Jahren von Pinterest erstmals populär gemacht und sind seitdem zu einem Trend für inhaltsintensive Webseiten geworden. Kostenlose Plugins wie jQuery Masonry können verwendet werden, um diesen Layoutstil mit animierten Karten für verschiedene Höhen und Breiten nachzuahmen.

Ein Kartenlayout wird am besten für Seiten verwendet, die viele Daten enthalten, die gescannt werden können. Die Landing Page für Google Now verwendet ein Kartenlayout, um optionale Karten für die Google Now-App anzukündigen.

Sie können sich Kartenlayouts als dynamischere Raster vorstellen, deren Fokus auf der Minimierung des Inhalts auf das Nötigste liegt, um mehr Elemente gemeinsam aufzulisten. Onlinemagazine wie UGSMAG und The Next Web sind beides perfekte Beispiele für Kartenlayouts, mit denen der aktuelle Post-Inhalt präsentiert wird.

5. Benutzerdefinierte Erklärvideos

Große und kleine Unternehmen haben sich dem Trend zu benutzerdefinierten Erklärvideos angenommen. Diese werden häufig mit Animationen erstellt, wie das Beispiel für ein verrücktes Ei. Andere Videos basieren jedoch auf echten Filmen wie Instagram Direct.

Mit einem Erklärvideo soll gezeigt werden, wie ein Produkt oder eine Dienstleistung funktioniert. Besucher können eine Liste von Funktionen überfliegen und haben immer noch keine Ahnung, wie das Produkt funktioniert. Videos klären alles visuell auf und behandeln in wenigen Minuten das Wichtige.

Wenn Sie sich an einem benutzerdefinierten Erklärvideo versuchen möchten, schauen Sie sich diesen Udemy-Kurs an. Es handelt sich hierbei um eine ausführliche Studie, die sich auf Videos zur Gestaltung von Zielseiten konzentriert.

6. Live-Produktvorschauen

Das Design von Zielseiten hat ein unglaubliches Wachstum durch höhere Internetgeschwindigkeiten und Browserfunktionen zur Folge. Ein wichtiger Trend, den ich bemerkt habe, ist das Hinzufügen von Live-Produktvoransichten auf Homepages oder benutzerdefinierten Landing-Pages.

Nehmen Sie zum Beispiel die Produktseite von Slack. Es enthält eine Videotour und Vektorgrafiken für die Slack-Benutzeroberfläche. Diese Produktvorschauen sollen potenziellen Benutzern einen Einblick in die Funktionsweise des Produkts geben.

Webydo ist ein weiteres brillantes Beispiel mit einer Live-Animation, die auf der Homepage abgespielt wird. Auf diese Weise können Besucher Webydo in Aktion sehen, ohne das Produkt manuell zu testen. Für Produktvorschauen müssen Sie sich jedoch nicht immer auf Animationen verlassen. Iconjar zeigt anhand eines einfachen PNG-Screenshots, was das Produkt ist und wie es funktioniert.

7. Automatisierte Task-Läufer

Die Welt der Frontend-Entwicklung hat sich mit einer Handvoll neuer Best Practices für die Erstellung von Websites so sehr verändert. Task Runner / Build-Systeme wie Gulp und Grunt werden viel häufiger für eine Vielzahl von Aufgaben verwendet, für die zuvor ein manueller Aufwand erforderlich war.

Automatisierung ist das Lebenselixier für schnellen Turnaround und Qualitätscode. Maschinen machen keine Fehler. Je mehr Sie mit Sicherheit automatisieren können, desto weniger Probleme haben Sie (theoretisch)..

In diesem Reddit-Beitrag erfahren Sie mehr über die Funktionsweise von Task-Läufern. Diese Tools führen im Wesentlichen JS-Code aus, der Teile Ihres Workflows automatisiert, entweder benutzerdefinierte JS-Dateien oder von anderen erstellte Skripts.

8. Native JS Mobile Apps

Ich bin ein großer Befürworter der Verwendung der richtigen Werkzeuge für den Job. Im Falle der Entwicklung mobiler Apps bedeutet dies Java für Android, Objective-C / Swift für iOS.

Aber nicht jeder möchte eine neue Sprache lernen, nur um eine mobile App zu erstellen. Glücklicherweise wird es einfacher, native Apps mit alternativen Bibliotheken wie NativeScript oder React Native zu erstellen und zu kompilieren.

Die Lücke zum Mobile App-Programmierer verkürzt sich mit der Möglichkeit, mobile Apps über JavaScript zu erstellen. PhoneGap ist eine weitere Option, die auf HTML / CSS / JS-Code basiert.

Während der Erstellungsprozess sehr unterschiedlich ist, entwickelt sich JS schnell zu einer Lösung für Programmierer, die mobile Apps erstellen möchten, ohne eine neue Sprache zu lernen.

9. Collaboration Tools für das Design

Instant Messaging und Gruppenchat gibt es schon seit über einem Jahrzehnt. Diese Ressourcen sind jedoch traditionell auf Klartext angewiesen und verfügen über einige Funktionen zum Anhängen von Dateien.

Ein neuer aufkommender Trend ist die Möglichkeit, Live-Designdokumente in Chat-Anwendungen gemeinsam zu nutzen. Bemerkenswert ist ein Beispiel, bei dem Anmerkungen und Kommentare direkt über einem Dokument angeordnet werden können. Auf diese Weise erhalten Designer die Möglichkeit, ihre Arbeit direkt mit allen Teammitgliedern zu teilen.

Slack ist im Moment die beliebteste Chat-Anwendung, die viele ähnliche Funktionen unterstützt. Die wachsende Slack-Userbase hat es sich zum Ziel gesetzt, Erweiterungen zu schaffen, die die Fähigkeiten von Slack erheblich verbessern und in andere Produkte wie Hangouts, MailChimp und sogar WordPress integriert werden.

10. Responsive Frontend Frameworks

Frontend-Frameworks wie Bootstrap gibt es schon seit Jahren und erweisen sich bei persönlichen und professionellen Projekten als nützlich. Responsive Design hat seinen Weg in Frameworks gefunden und eine Nachfrage nach Frontend-Code anstelle von Backend (Django, Laravel usw.) geschaffen..

Ich denke, wir werden 2016 viel mehr über responsive Frontend-Frameworks und deren Wert in Webprojekten lesen. Viele Entwickler erwarten mit Spannung die Veröffentlichung von Foundation 6 und die Veröffentlichung von Bootstrap 4 in der öffentlichen Version 1.

Andere weniger bekannte Frameworks, die Sie sich ansehen können, sind Gumby und Pure CSS.

11. Größerer Fokus auf UX-Design

Der Bereich User Experience Design wird weiterhin schnell wachsen, da immer mehr Designer und Entwickler darauf aufmerksam werden. Das Design der Benutzeroberfläche ist Teil des UX-Designs, aber es ist nicht das Endziel. Die Benutzeroberfläche ist ein Mittel zum Zweck, und das Ende ist eine fantastische Benutzererfahrung.

Vor fünf Jahren war ich mit UX kaum vertraut, oder wie es beim Interface-Design angewandt wurde. Jetzt haben wir Ressourcen wie UX Stack Exchange und kostenlose UX-Ebooks. Wenn Sie nicht viel über die Benutzererfahrung wissen, ist jetzt die beste Zeit, um zu lernen, wie UX-Prinzipien auf alle Formen digitaler Schnittstellen angewendet werden können.

12. Paketmanager

Digitale Paketmanager sind so schnell gestiegen, dass sie praktisch eine Voraussetzung für die moderne Webentwicklung sind. Lösungen wie Bower und NPM sparen viel Zeit beim Starten neuer Projekte.

Die Beherrschung einer neuen Technologie erfordert Zeit und eine Lernkurve. Wenn es jedoch eine Sache gibt, die jeder Frontend- (oder Backend-) Entwickler wissen sollte, ist dies ein Paketmanager. Sie benötigen einige Kenntnisse der Terminalbefehle, aber wenn Sie sich erst einmal an den Prozess gewöhnt haben, möchten Sie nie mehr zurückkehren.

13. Erweiterte UI-Animationen

CSS3-Übergänge waren nur der Anfang eines langfristigen Trends der Animation im Web. Jetzt gibt es Dutzende CSS- und JavaScript-Bibliotheken, die sich der Animation widmen. Dinge, die ich nie für möglich gehalten habe, sind jetzt verfügbar und kostenlos verfügbar, wenn Sie wissen, wo sie suchen müssen.

Animation ist keine Voraussetzung für gutes Design. Aber es kann ein gutes Design zu einem großartigen Design machen, wenn es richtig verwendet wird.

Behalten Sie ein Auge auf animierte Trends für Schnittstellen und sehen Sie, was Sie von verschiedenen Websites mitnehmen können. Denken Sie daran, dass die Webanimation kein Disney-Film ist und mit Respekt behandelt werden sollte. Verwenden Sie die Animation sanft, um die Oberfläche zu verbessern, ohne zu einem störenden oder ablenkenden Element des Designs zu werden.

14. Designer lernen, Code zu schreiben

Ein Hot-Button-Thema in diesem Jahr war der Fall für Designer, die Code lernen lernen. Einige Designer meinen, es sei nicht ihre Aufgabe, Code zu schreiben, während andere der Meinung sind, dass dies zur Norm wird und angenommen werden sollte.

Ich habe hitzige Diskussionen und faszinierende Beiträge zu diesem Thema gelesen, die nur emotionale Reaktionen hervorzurufen scheinen. Ein gutes Design ist nur ein schönes Bild ohne Code. Um sich auf beide zu konzentrieren, muss der Designer weniger Zeit damit verbringen, das Handwerk zu üben.

Gibt es also eine endgültige Antwort? Einige würden argumentieren, dass sich die Funktionsfähigkeit von Designern für Designer erhöht, die Frontend-Codierung kennen. Was aber, wenn jemand keinen Code schreiben möchte? Lohnt es sich zu lernen, um nur zu konkurrieren??

Ich glaube, die klarste Antwort besteht darin, zu tun, was Sie wollen. Es scheint jedoch, dass dieses Thema für viele Designer immer noch auf dem Tisch liegt, die wahrscheinlich die Diskussion bis 2016 fortsetzen werden.

15. Kostenlose Online-Tools und Webapps

Früher wurden alle Programme vom Desktop aus ausgeführt, egal was Sie tun mussten. Heute bin ich jedoch immer wieder erstaunt, wie viele Webapps online kostenlos zur Verfügung stehen.

Sie finden hier alles, von der URL-Codierung / -Decodierung bis hin zu einem komplett kostenlosen Markdown-Editor. Sogar Google Drive hat Microsoft Office-Produkte in den Browser aufgenommen (wieder völlig kostenlos).

Die derzeitige Rechenleistung und die einheitlichen Standards von Webbrowsern bieten scheinbar unbegrenzte Möglichkeiten. Komplexe Aufgaben wie die Erstellung des Lebenslaufs bei der Bildkomprimierung können direkt über ein Browserfenster ausgeführt werden.

16. Das Wachstum von Webkomponenten

Webkomponenten versuchen, Probleme der Komplexität für Entwickler zu lösen. Die WebComponents-Website bietet großartige Ressourcen und Materialien, um Entwicklern einen Einstieg in dieses Thema zu ermöglichen.

Wenn Sie nicht sicher sind, wie Sie modulare Webkomponenten verstehen, lesen Sie diesen Beitrag, um mehr zu erfahren.

Während Komponenten nicht besonders auf den Mainstream-Status ausgerichtet sind, werden sie von professionellen Entwicklern auf der ganzen Welt diskutiert. Google hat Polymer veröffentlicht, ein Framework, das zum Hinzufügen von Webkomponenten über JS und HTML verwendet wird.

Dies kann in großen Kundenprojekten noch nicht praktikabel sein. Die Technologie ist jedoch verfügbar und mit etwas Übung können Sie die Konzepte problemlos beherrschen. Weitere Informationen und einige Codebeispiele finden Sie in diesem CSS-Tricks-Beitrag zu modularen Webkomponenten.

17. Online-Lernressourcen

Wir alle wissen, dass es jetzt am einfachsten ist, eine Fertigkeit von Ihrem Computer aus zu erlernen. Es scheint, dass der Online-Lernmarkt exponentiell wächst, da jedes Jahr neue Kurse und Websites auftauchen.

Ich bin sicherer als je zuvor, dass das Online-Lernen zunehmen wird. Bekannte Sites wie Treehouse und CodeSchool bieten neben neueren Sites wie Bitfountain und Learn-Verified unglaubliche Kurse an.

Wenn es ein Thema gibt, das Sie lernen möchten, gibt es wahrscheinlich einen Online-Kurs - vor allem, wenn Sie digitale Techniken wie UI-Design oder App-Entwicklung erlernen möchten.

18. Serverseitiges JavaScript

Zwar gab es bisher Optionen für serverseitige JS, aber keine hat so schnell wie Node.js gedrungen. JavaScript-Entwickler haben sich in diese Bibliothek verliebt und sahen zu, wie sie mit anderen Backendsprachen wie Python oder PHP in direkten Wettbewerb trat.

Mit Node können Entwickler Websites in einer einzigen Sprache für Frontend- und Backend-Code erstellen. Und Ressourcen wie Node Package Manager geben Node.js noch mehr Wert.

Soweit ich das beurteilen kann, befindet sich Node immer noch im Aufschwung und wird von Industriefreunden immer beliebter. Unabhängig davon, ob Sie Node lernen möchten oder nicht, es besteht kein Zweifel, dass dieser Trend 2016 weiter an Bedeutung gewinnt.

19. Touch-unterstützte Website-Funktionen

Smartphone-Browser haben immer Touch-Funktionen für alle Websites unterstützt, um die Abwärtskompatibilität zu gewährleisten. In letzter Zeit sind jedoch weitere Plugins und benutzerdefinierte Funktionen auf Websites mit dem Ziel der Handhabung von Touch-Ereignissen aufgefallen.

Plugins wie Photoswipe und Dragend.js sind für das Wischen und Tippen auf Touchscreen-Displays konzipiert. Es scheint, dass Webentwickler nicht nur responsive Websites erstellen, sondern auch Websites, die auf Berührung reagieren.

Wenn Sie herum suchen, finden Sie einige wirklich beeindruckende Funktionen für das Web, die sich ausschließlich auf Berührungsereignisse verlassen.

20. Materialdesign im Web

Die Veröffentlichung von Google Materialdesign war für Android-Designer ein enormer Erfolg. Materialdesign gilt als Designsprache, um die Erstellung von Benutzeroberflächen für Android-Smartphones zu vereinfachen.

Im Laufe der Zeit haben Webdesigner dies zu Herzen genommen und ganze Websites basierend auf der neuen Designsprache von Google erstellt. Es scheint, dass sich der Materialdesign-Trend über mobile Apps hinaus in die Welt des Webdesigns bewegt hat.

Leute, die Material-Websites erstellen möchten, müssen das Rad nicht neu erfinden. Kostenlose Bibliotheken wie Material UI und Materialise bieten benutzerdefinierte Codes für die Strukturierung eines neuen Layouts auf der Grundlage des Materialdesigns.

Schließen

Wenn Sie diese Trends betrachten, sollte klar sein, dass die Web-Community wirklich gemeinsame Anstrengungen unternimmt, um den Aufbau von Websites zu vereinfachen. Wir alle möchten im täglichen Arbeitsablauf Zeit sparen.

Seit der Einführung des Internets haben wir viele Technologien erlebt, die nur durch bessere Alternativen ersetzt wurden. Diese Trends von 2016 drängen auf einheitlichere Designtechniken, die das Erstellen von Websites einfacher und weniger komplex machen.