20 Steigende Webdesign-Trends für 2017
Ein weiteres Jahr ist vergangen, und die Designer blicken in die Zukunft. Viele vielversprechende Designtrends werden 2017 voraussichtlich ausbrechen. Letztes Jahr habe ich die Top-Designtrends 2016 behandelt, die wir gesehen haben viele Änderungen seit damals.
Also, für diesen Beitrag habe ich die ausgewählt Top 20 Trends das habe ich gemerkt Zugkraft gewinnen im Jahr 2017. Diese Designtrends kann für jede Website gelten, Halten Sie also nach diesen Techniken Ausschau, während wir uns durch 2017 und darüber hinaus bewegen.
1. “Abgebildet sein in; charakterisiert in” Abzeichen
Startups, Blogs, SaaS-Projekte und sogar kleine Unternehmen nutzen jetzt die “wie in vorgestellt” Abzeichen auf ihren Websites. Diese Abzeichen oft Link zu Artikeln in Mainstream-Blogs wie HuffPo, Forbes, CNN, Fox und andere Nachrichtenagenturen.
Das Ziel ist es eine Website validieren und Vertrauen aufbauen mit neuen Besuchern. Es ist einfacher für jemanden, einer Website zu vertrauen, wenn er sehen kann, dass sie schon war in maßgeblichen Publikationen erwähnt.
In der Tat viele Top-Blogs schätzen die Belichtung, so hilft es wirklich allen Beteiligten. Diese großen Seiten oft veröffentlichen ihre Logos online Sie können aber auch transparente PNGs oder SVGs finden, indem Sie einfach googeln.
Es wird auch empfohlen, dass Sie Link zurück zum Originalartikel Erwähnen Sie Ihre Site. Das beweist das Sie wurden wirklich erwähnt auf der Website, und Sie machen nicht nur Ansprüche geltend.
2. Fettgedruckte All-Caps-Navigationslinks
Ich habe gesehen Dutzende von schlanken Navigationsmenüs Alle setzen auf dasselbe Design. Diese Navelinks variieren in schriftart und größe aber sie normalerweise haben ähnliche Funktionen, sowie:
- Alle Kappen
- Fett gedruckt
- Gleichmäßig verteilt
- In der rechten Ecke ausgerichtet
Die Homepage von Zazzle ist ein gutes Beispiel. Aber du kannst das finden auf vielen Start-Websites weil es ein ist saubere Möglichkeit, Links zu teilen das ist einfach zu lesen und leicht zu durchsuchen.
Ich verbinde diesen Trend meistens mit Unternehmen und Tech-Startups Aber es kann auch auf Blogs vorherrschen.
Notieren Sie sich das nächste Mal, wenn Sie diesen Trend sehen, denn er ist überall. Und ich erwarte, dass es bis 2017 weiter wächst.
3. Blogs im Magazinstil
Das Bloggen war zu Beginn der 2000er Jahre ein solches Nischenkonzept. Wenn Sie 2003 einen Blog geführt haben, wurde dies als niedliches kleines Hobby angesehen. In etwas mehr als einem Jahrzehnt hat sich dieser Trend radikal verändert. Jetzt können Blogs bieten ein Vollzeiteinkommen, und sie fangen an zu sehen eher wie digitale Zeitschriften aus.
Schauen Sie sich das ursprüngliche Design von TechCrunch an, als es 2006 erstmals eingeführt wurde. Sieht aus wie ein generischer WordPress-Blog?
Schauen Sie sich jetzt die aktuelle Homepage von Techcrunch 2017 an:
Es nicht nur sieht aus wie eine zeitschrift, es auch funktioniert wie eine. TechCrunch veröffentlicht jeden Tag Dutzende (wenn nicht gar Hunderte) neuer Beiträge. Sie sind die Nr. 1-Quelle für Startup-Nachrichten.
Die Designtrends im Magazinstil machen einen großen Unterschied. Die Homepage verwendet ein große vorgestellte Geschichte, jeder Beitrag hat ein eigenes Vorschaubild, und die Artikelseiten zentrieren Sie um die Überschrift.
Wenn Sie darüber nachdenken, hat sich TechCrunch nicht viel geändert. Es ist immer noch “nur ein blog”. Aber Es ist wie eine Zeitschrift entworfen und verwaltet, und das macht den Unterschied.
4. Videohintergründe
Autoplaying Sound ist vielleicht der nervigste Trend im Web. Aber überraschend, Video automatisch abspielen (ohne Ton) ist ein schnell wachsender Trend. Sie können dies auf Dutzenden von Geschäftsseiten erkennen, bei denen ein Videohintergrund vorhanden ist übernimmt den gesamten Bildschirm.
Ich mag diese Technik wirklich, wenn sie richtig angewendet wird. Solange die Video bezieht sich auf die Website und behindert nicht den Inhalt, Ich denke, es ist ein cooler Effekt, den Sie in Ihrem Header verwenden können.
5. Geister-Tasten
Wie Minimalismus speist sich weiter Im Webdesign entstehen viele neue Trends. Ein solcher Trend ist der Aufstieg der Geisterknöpfe die keine innere Füllung haben, sondern einen äußeren Rand haben.
Meistens diese Knöpfe Im Gegensatz zu anderen Aufmerksamkeit auf sich ziehen. Sie können dies auf der Homepage von Instantmojo mit der grünen Schaltfläche "Anmelden" sehen direkt daneben gelegen der Ghost-Button, der mit einer Live-Demo verbunden ist.
Andere Websites haben übernommen ein reiner Geist-Designstil zu ihren Knöpfen sitewide. Ein gutes Beispiel dafür ist das neue Bootstrap-Layout.
Ich denke, Geister-Buttons funktionieren auf Websites so Neigung zum Minimalismus. Sie passen zwar nicht für jede Website, aber ihre Nutzung steigt mit jedem Jahr.
6. Modal-Fenster-Opt-Ins
Modale Fenster sind sehr ärgerlich und ich kann mir nicht vorstellen, dass jeder Benutzer es möchte. jedoch Sie erhöhen nachweislich die Anmeldungen, und Vermarkter können Techniken nicht ignorieren, die funktionieren.
Deshalb denke ich, dass modale Opt-In-Fenster dies tun werden klettere weiter im Jahr 2017.
Sie sind nicht meine Lieblingsbeschäftigung, und ich füge sie niemals zu meinen Websites hinzu. Aber wenn das Ziel darin besteht, Anmeldungen zu erhöhen, sind modale Fenster eine todsichere Methode, um die Dinge ins Rollen zu bringen.
Neue Plugins können sogar Zielausstiegsabsicht welche löst einen modal aus wann immer der Benutzer versucht, die Site zu verlassen. Andere Modalitäten erscheinen nach x Sekunden oder sind geöffnet, wenn der Benutzer weit genug nach unten scrollen soll.
Unabhängig davon, wie Modale ausgelöst werden, wie sie entworfen wurden oder wie Sie sich darüber fühlen, ich glaube, sie werden auf lange Sicht zur Verfügung stehen.
7. Illustration und Vektorgrafiken
Mit neuen Vektor-Design-Programmen wie Sketch und Affinity Designer kommt eine neue Welle von Illustratoren ins Netz. Grafikdesign und Schnittstellendesign verschmelzen mit mehr multidisziplinären Designern als je zuvor.
Das heißt, wir werden sehen viel mehr benutzerdefinierte Icons und ganzseitige Illustrationen in naher Zukunft.
Viele Illustratoren sind geübte Künstler. Ich denke, wir werden sehen mehr ganzseitige Hintergründe gemacht mit digitaler Malereisoftware, im Detail wie Konzeptkunst gerendert.
8. Fehler beim Scrollen von Seitenleisten
Die erste Welle des festen Designs konzentrierte sich auf Navigationsleisten. Diese sind allzu häufig, besonders in responsiven Designs, bei denen die feste Navigationsleiste angezeigt wird repliziert das Gefühl einer nativen mobilen Anwendung.
Aber für 2017 erwarte ich ein weiteres klebriges Element-die klebrige Seitenleiste.
In fast jedem großen Blog wird diese klebrige Sidebar verwendet. Es hält den Inhalt im Blick zu allen Zeiten und erhöht die Wahrscheinlichkeit, dass Benutzer dies tun werden mit dem Inhalt der Seitenleiste interagieren.
Plus mit Dutzenden von kostenlosen jQuery-Plugins, die das können replizieren Sie den klebrigen Seitenleisteneffekt. Es ist einfacher als je zuvor, dies auf jeder Website einzurichten.
9. Inhaltsverzeichnis auf der Seite
Eine aktuelle Fallstudie fand das Langform-Inhalt übertrifft Kurzform sowohl in Rankings als auch in der Qualität der Benutzerbindung. Zugegeben, dies ist nicht immer wahr, da einige Anfragen schnell beantwortet werden können.
Aber mit weitaus mehr Langform-Inhalten im Web ist das natürlich zu sehen Weitere Inhaltsverzeichnisse in Artikeln hinzugefügt. Dies wird auf längeren Überprüfungs-Websites oder in Artikeln angezeigt, die in aufgelistete Elemente unterteilt sind.
Das Hinzufügen eines Inhaltsverzeichnisses kann die Benutzererfahrung verbessern und helfen zu brechen Sie die Lesung auf in kleinere Brocken. Inhaltsverzeichnis kann auch verhelfen Sie Ihrer Website zu einem besseren Rang! Wenn Google Ihre Seite für wertvoll hält, können Sie dies tun Sprunglinks erhalten in den Suchergebnissen.
Es kann sein, dass ToCs derzeit recht knapp sind. Ich rechne jedoch damit, dass sich dieser Trend über 2017 und viele Jahre danach aufblühen lässt.
10. Helle farbenfrohe Designs
Ich bin nicht sicher, ob dieser Trend aus dem Minimalismus oder als Reaktion auf das Materialdesign von Google entstanden ist. Aber ich bin auf Dutzende von Websites gestoßen, die diese verwenden helle Pastellfarben gemischt mit anderen kräftigen Farbtönen ein sehr phantasievolles Aussehen zu schaffen.
Die Rentberry-Homepage ist ein hervorragendes Beispiel, das auch verwendet wird Tonnen von Gradienten. Und es hat sogar das vorgenannte “Abgebildet sein in; charakterisiert in” Abzeichen darunter! Zwei Trends auf einer Seite.
Sie werden feststellen, dass die Farben Durchdringen Sie nicht die gesamte Seite, und sie sind mit anderen Weiß- und Grautönen gedämpft.
Ich habe genug davon gesehen lebendige Farbschemata zu glauben, dass sie auf dem Vormarsch sind.
11. Scrollen Sie Animationen
Webdesigner wissen über Scroll-Jacking und wie schrecklich es ist. Das habe ich jedoch nicht mit dem Titel gemeint “Scroll-Animationen”. Ich habe jetzt viele Sites gesehen animieren Sie Inhalte in Sichtweite wenn Sie an einem bestimmten Abschnitt der Seite vorbeirollen.
Dieser Trend ist meistens beschränkt auf Startup-Webseiten und SaaS-Unternehmen die wollen etwas pizzazz in ihrem design.
Ich kann nicht sagen, ob es ein besonders nützlicher Trend ist. Sicherlich packt das Auge aber ich glaube nicht, dass es über die ästhetik hinaus viel bietet. Dennoch scheint sich dieser Trend schnell zu verbreiten, und wann sparsam eingesetzt es kann wirklich ordentlich sein.
12. Einseitige Apps (SPAs)
Einseitige Anwendungen sind Websites rein mit Ajax-Aufrufen gebaut. JavaScript holt Inhalte von einem Server und lädt es dynamisch, so die Seite erfrischt nie.
Häufige Beispiele sind Sites wie Gmail und Facebook. Aber mit mehr JS-Technologie, Ich stelle fest, dass immer mehr SPAs entwickelt wurden. Heck, sogar CodePen könnte als SPA angesehen werden.
Mit leistungsstarken Frontend-Bibliotheken wie React & Aurelia wird es 2017 noch einfacher, ein SPA von Grund auf zu erstellen.
13. Umschaltbare Suchleisten
Früher waren es Suchfelder waren immer im blick irgendwo auf einer Webseite, entweder in der Seitenleiste oder in der Navigation. In letzter Zeit habe ich jedoch viel mehr Suchfelder bemerkt, die erhalten werden standardmäßig ausgeblendet, und muss sein sichtbar gemacht.
Sicher ein praktischer Trend zu Platz sparen auf der Seite solange noch halten Sie die Suchfunktion zugänglich. Wenn Sie nicht sicher sind, wo ein Suchformular in einem neuen Design platziert werden soll, sollten Sie ein Umschaltfeld in Betracht ziehen, das mit einem Lupensymbol in der Navigation verknüpft ist.
14. Adblock-Nachrichten
Das lässt sich nicht bestreiten Die Blockierung von Werbung nimmt zu. Die Frage ist nur, wie Publisher mit diesem Trend umgehen werden. Einige Standorte höflich Fügen Sie den Anzeigenflächen Nachrichten hinzu wie Time.com. Auf Hongkiat werden Sie feststellen interne Anzeigen, um die Lücke zu füllen dieser Link weiter in die Website.
Ein ernsthafter Trend, den ich zunehmen sehe, ist Adblock-Inhaltsblöcke. Dies ist eine Technik zum “Blockieren Sie die Werbeblocker”. Diese Funktion ist in vielen großen Websites wie Business Insider und Forbes bereits vorhanden. Unglücklicherweise schadet dies sowohl dem Nutzer als auch dem Herausgeber, und alles ist auf schlechte Werbetechniken zurückzuführen.
Letztendlich spielt es keine Rolle, wer Sie beschuldigen oder wo Sie in der Debatte über Werbeblocker stehen. Immer mehr Leute installieren Adblock-Plugins, und ich erwarte es mehr Verlage zurückschieben.
15. Reine SVG-Symbole
SVG-Grafiken sind bereits ins Netz eingedrungen, werden aber von Tag zu Tag größer. Und ich habe das Gefühl, dass 2017 sein wird ein riesiges Jahr für SVGs im Internet.
Sie können Tausende von finden Kostenlose SVG-Icon-Sets auf Websites wie Flaticon, wenn Sie wissen, wie man sucht. Aber du kannst es auch kodiert SVGs in HTML, Verwenden Sie dieses Beispiel beispielsweise für CodePen.
Designer haben also eine Möglichkeit, SVGs zu verwenden, und Entwickler haben auch die Möglichkeit, SVGs zu verwenden. Moderne Browser-Unterstützung sieht gut aus auf der ganzen Linie, so gibt es kein Problem mit der Kompatibilität. Alles, was benötigt wird, sind genug Designer erkennen Sie die Macht der SVGs und fange an, sie zu benutzen!
16. Adobe XD
Adobe löschte eine vollständige Beta von Adobe XD 2016, und es ist seitdem schnell gewachsen. Derzeit unterstützt sowohl Mac als auch Windows, und sein in der Testphase bevor sie vollständig ausgerollt werden.
Sie können sich über die Idee eines Programms, das Sketch überholt, verachten, aber Adobe ist aus einem Grund das wichtigste Softwareunternehmen für kreative Arbeit. Plus Sketch ist weiterhin nur für Mac verfügbar, solange es Adobe ist Ich möchte jeden unterstützen.
Ich bin fest davon überzeugt, dass wir im kommenden Jahr noch viel mehr über Adobe XD lesen werden. Es kann die Go-to-Software für werden Entwurf von UI-Modellen-so können wir Photoshop endlich als Werkzeug zur Bearbeitung von Fotos verwenden (wie beabsichtigt).
Mit dem Aufkommen neuer Software kommen Dutzende von Tutorials und kostenlose GUI-Kits auch. In Dribbble finden Sie viele Adobe XD-Werbegeschenke zwei neue, auf XD ausgerichtete Freebie-Sites Designmine und XD Guru.
17. Weitere Hamburger Menüs
Lieben Sie es oder hassen Sie es Hamburger ist hier zu bleiben. Es gibt viele Usability-Studien argumentieren Sie gegen Menüs, die nicht sichtbar sind. Aber mit einem kleinen Bildschirm und nur so vielen Alternativen gibt es momentan keine bessere Alternative.
Hamburger Icons sind langsam erkennbare Symbole werden für Nav-Menüs. So wie ein Lupensymbol impliziert “Suche”, Das Drei-Bar-Hamburger-Icon wird bald gleichbedeutend sein mit “Speisekarte”.
Dies gilt bereits für die meisten technisch versierten Einzelpersonen. Mit jedem Jahr bekommen jedoch mehr Menschen ein Smartphone und surfen im mobilen Internet. Und sie lernen es Verbinden Sie diesen Hamburger mit einem Nav-Menü kein Ende in Sicht.
18. Produktfeaturesymbole
Ich habe in Treehouse über diesen Trend geschrieben, aber in letzter Zeit nicht erwähnt. Und in 2017 geht dieser Trend werde riesig sein. Es ist wahrscheinlich der häufigste Weg zu Produktfunktionen auf einer Homepage freigeben.
Du fängst an eine Liste mit Funktionen erstellen für Ihr Produkt. Das Produkt kann alles von einem SaaS-Programm über ein WordPress-Design bis hin zu einem physischen Objekt sein.
Dann kannst du entweder benutzerdefinierte Symbole entwerfen oder finde ein Icon-Set diese Funktionen darstellen. Es ist am besten zu Vermeiden Sie generische Funktionen sowie “zuverlässig” oder “schnell” weil die meisten Leute dieses Zeug erwarten.
Listen Sie stattdessen Features auf das ist eigentlich wichtig. Wenn es sich um ein erstklassiges WP-Thema handelt, kann es sich um eine Liste handeln, die darauf reagiert, wie viele Widgets dazugehören oder wie das Menü funktioniert.
Diese Funktionssymbole arbeiten wie visuelle helfen jedes Feature verkaufen. Text alleine ist schwer zu konsumieren Visuals sind jedoch viel einfacher auf einen Blick verstehen.
19. Über dem Cave liegende CTAs
Call-to-Actions sind traditionell platziert worden überall auf einer Website. Aber mit Besuchern weniger Zeit für Websites, Es ist wichtig, ein starkes CTA zu haben direkt über der Falte.
Diese Handlungsaufrufe können Schaltflächen, Anmeldeformulare oder andere Eingaben sein Menschen dazu bringen, etwas zu unternehmen So können Sie sich anmelden oder einen Blogbeitrag lesen.
Ich kann Ihnen nicht sagen, wie Sie einen CTA entwerfen oder für Conversions optimieren. Aber ich kann sagen, der Trend scheint diese CTAs zu platzieren über dem Falz und in freier Sicht für alle Besucher zu sehen.
20. Kleinere Inhaltsbereiche
Monitore sind so groß geworden, dass die meisten Websites dies tun müssen eine maximale Breite einstellen. Es ist viel schwieriger, Sätze zu lesen, wenn sie 2000 Pixel breit sind, im Vergleich zu nur 700 Pixel.
Kleinere Inhalte sind einfacher zu konsumieren, und schafft letztlich eine bessere Erfahrung auf inhaltsintensiven Websites.
Ich denke, mehr Designer erkennen das und werden langsam reduzieren Sie die Größe ihrer Inhaltsbereiche. Ich bevorzuge eine maximale Breite von 750px, aber Sie könnten so klein wie 600px oder weniger sein.
Kürzere Absätze mit weniger Sätze und kleinere Inhaltsbereiche wird immer Lesbarkeit erhöhen. Wichtige Publikationen wie die NY Times können mit ihren eigenen strukturellen Richtlinien abweichen. Bei einem einfachen Blog oder einer geschäftlichen Website geht der Trend jedoch in Richtung längere Inhalte mit kleineren Absätzen und Inhaltsbereichen.
Einpacken
Es gibt viele andere Trends, die ich in diesem Beitrag nicht beschreiben konnte, aber ich denke, dass diese 20 am interessantesten sind. Auf dem Weg ins Jahr 2017 sollte klar sein, welche Trends explodieren und welche nicht.
Und wenn Sie andere Ideen oder Vorschläge für kommende Designtrends haben, können Sie unten einen Kommentar hinterlassen.
