de.hideout-lastation.com
Webdesign: 20 heißeste Trends, auf die man 2014 achten sollte
Nachdem Sie Stunden auf verschiedenen Websites online verbracht haben, neigen Sie dazu, erkennbare Trends im Design aufzuspüren. Im Laufe der Jahre habe ich über wechselnde Trends geschrieben, insbesondere im Bereich der Website-Layouts und Webapps. Die Weiterentwicklung der W3C-Spezifikationen in Verbindung mit modernen Webbrowsern hat die Tür zu einer neuen Ära des digitalen Designs geöffnet .
In diesem Artikel möchte ich 20 wachsende Trends teilen , von denen ich hoffe, dass sie im Laufe des Jahres 2014 blühen werden . Viele sind bereits in Bewegung, andere beginnen gerade erst zu dämmern. Neue Trends machen Spaß und sehen, wie lange sie bleiben. Wenn Sie im Jahr 2014 auf Websites surfen, halten Sie nach einem dieser UI / UX-Trends Ausschau.
1. Gitter-Layouts
Meine erste Mainstream-Anerkennung des Grid-Designs war auf Pinterest. Social News Feeds waren immer in einer gestrafften Art und Weise wie Twitter oder Tumblr. Heutzutage verstreuen sogar viele Facebook-Seiten Timeline-Updates, um wie ein Raster zu erscheinen.
Dies ist nicht etwas, was Sie in eine alte Website zwingen können. Es muss einen Zweck geben, die Benutzererfahrung steht immer an erster Stelle. In Situationen, die Miniaturansichten oder Textaktualisierungen verwenden, verdichtet das Rasterlayout alles in ein leicht lesbares Format . Alles ist skimmbar und dennoch kohärent und benötigt nicht viel Platz auf der Seite.
Open-Source-JS-Bibliotheken wie Masonry können viel harte Arbeit für Sie erledigen. Nicht viele Websites nutzen diese Funktion, aber diejenigen, die dies tun, sind oft sehr angenehm in den Augen .
2. Crafty Bildbeschriftungen
In der Vergangenheit haben wir einige einzigartige CSS3 Bildunterschrifteneffekte behandelt. Viele Websites verwenden Bildergalerien, um Portfolioelemente, Fotos, Miniaturansichten von Artikeln usw. zu präsentieren. Mithilfe einer Textbeschriftung kann der Besucher mehr Informationen mit dem Bild verbinden . Und mit CSS3 können Sie auf natürliche Browser-Ressourcen ohne JavaScript-Effekte zurückgreifen.
Jede Website sollte ein eigenes Design haben, um dem Leser Vorteile zu bieten. Ein anderes Tutorial, das ich von Codrops genieße, ist die Figurennummerierung mit CSS3. Sie können Titelbeschriftungen erstellen, die automatisch an die Bilder (oder Abbildungen) auf jeder Seite angehängt werden.
3. Erweiterte Formularelemente
Die meisten Frontend-Entwickler sind mit dem Zweck von jQuery vertraut. Es hilft Ihnen , glatteren JavaScript-Code mit weniger Zeilen und weniger Unordnung zu schreiben . Kostenlose Open-Source-jQuery-Plugins haben ihren eigenen Markt erobert - und sie sind derzeit sehr gefragt.
Es gibt eine besondere Begeisterung für jQuery-Form-Plugins, die das Benutzererlebnis verbessern . Diese Effekte können Floating-Labels, Eingabevalidierung, Guided Tooltips, fast alles, was Sie sich vorstellen können. Werfen Sie einen Blick auf die Unheap-Formulargalerie, die Open-Source-jQuery-Plugins katalogisiert, die Sie herunterladen und in neuen Projekten testen können.
4. Tief fokussierte Landing Pages
Ich erinnere mich, als der iOS App Store gestartet wurde und Entwickler ihre nächste großartige Idee veröffentlichten. Einige Jahre im Voraus und wir haben Millionen von Apps für Android + iOS-Geräte. Viele dieser Anwendungen haben sogar eine eigene Companion-Website.
Softwareentwickler kaufen häufig einen Domainnamen und starten eine Website als Marketinginstrument. Diese Idee wurde seitdem erweitert, um mobile Spiele, Open-Source-Skripte, Smartphone-Apps, wirklich jedes digitale Produkt zu kapseln, das Sie sich vorstellen können. Diese Zielseiten sind grundsätzlich wichtig, um potenzielle Kunden dazu zu ermutigen, vor dem Kauf mehr über ein Produkt zu erfahren .
5. HTML5-Videoplayer
Ich erinnere mich noch an 2004, als ich mir grundlegendes ActionScript aneignete, um einen eigenen Video-Player für meine Website zu erstellen. Es dauerte Monate der Arbeit und die beste Lösung für die Wiedergabe war ein FLV-Video. Zum Glück ändern sich die Zeiten schnell mit HTML5-Medien und aufkommenden JavaScript-Bibliotheken.
Flash hat immer noch einen Zweck, wenn es notwendig ist, aber die meisten Webentwickler würden zustimmen, dass die Zukunft des Internetvideos HTML5 ist. Zwei Skripts, die ich sehr empfehlen kann, sind Video.js und MediaElement.js. Die erste ist viel einfacher, aber auch mit grundlegenden Funktionen begrenzt.
Media Element bietet einige Standard-Skins und eine umfangreichere Dokumentation zum Erstellen eigener Player-Designs. Sie können auch versuchen , einen Musik- / Audioplayer mit denselben Codes zu erstellen. Beide Skripte bieten Dokumentation zusammen mit einer API und sie sind beide fantastische Bibliotheken. Denken Sie daran, wenn Sie bei zukünftigen Projekten selbst gehostete Videos benötigen.
6. 3D-Übergangseffekte
Ich habe im Laufe des vergangenen Jahres eine Reihe von kreativen 3D-Animationen auf mehr Websites gefunden. Diese sind häufig in die Seite für animierte Bildergalerien, Navigationsmenüs und Elemente integriert . Die 3D-Effekte können mit jQuery erstellt werden, obwohl CSS3 aufholt.
Natürlich werden die Animationen nicht in allen Browsern vollständig unterstützt, und Designer sollten vorsichtig sein, zu viele Animationen auf einer Seite zu verwenden. Aber wenn Sie neue Dinge ausprobieren möchten, empfehlen wir Ihnen, das Web nach 3D-animierten Codebeispielen zu durchsuchen.
7. Flache Designelemente
Wie kann ich Webdesign-Trends diskutieren, ohne die verbreitete Verwendung von flachen UI- Elementen zu erwähnen ? Mit CSS3 konnten Designer viel flachere Schaltflächen erstellen, indem sie natürliche Boxschatten, Textschatten oder abgerundete Ecken verwendeten. Dieses flache UI-Muster wurde in Formulareingaben und sogar Navigationsmenüs umgewandelt.
Aber ich glaube, dass wir in naher Zukunft mehr erwarten können. Flache Icon-Sets und GUI-Kits wurden auf Dutzenden von Websites kostenlos veröffentlicht. In meiner Anleitung zum Flat Web Design finden Sie eine Vielzahl kostenloser PSD / AI Grafiken. Metro-Stil Layouts sind auch in Popularität von Microsoft Windows-Betriebssystem und Windows Mobile Phone gewachsen.
8. Persönliche Porträts
Einfache Portfolio-Websites sind oft meine Favoriten. Sie möchten ein wenig über sich selbst erzählen, wo Sie waren, und Ihre Arbeitsproben präsentieren. Aber um die Leute wirklich interessiert zu halten , müssen Sie eine menschliche Verbindung eingehen. Eine der besten Möglichkeiten, dies zu erreichen, wäre ein Foto von sich selbst irgendwo auf der Seite.
Andrea Mann verwendet ein Foto, das einen Großteil der Homepage einkapselt. Dies fügt sich auch in den dunkleren Hintergrund ein und ist in B & W-Nuancen eingefärbt. Es sieht fantastisch aus, obwohl Sie keine großen Hintergrundporträts auf Ihrer Website verwenden müssen. Schon ein kleines Foto in Ihrer Homepage oder auf Ihrer Seite bietet Besuchern einen Einblick in Ihre Person.
9. SVG Bilder und Symbole
Vektorbasierte Grafiken sind nicht um Pixel, sondern um Linien und Koordinaten aufgebaut. Individuelle Formen werden durch mathematische Gleichungen organisiert und dies ermöglicht Ihnen, Vektoren auf jede Größe zu strecken. SVG-Bilder sind wie Vektoren in dem Sinne, dass sie leicht ohne viel Qualitätsverlust manipuliert werden können.
Das größte Problem ist die Unterstützung dieser Bilder in allen Webbrowsern. Viele Menschen verwenden immer noch ältere Versionen von Internet Explorer und andere ältere Titel. Es ist ein riesiger Trend, der das Internet in den kommenden Jahren fegen wird (wenn nicht schon).
Wenn Sie wirklich anfangen möchten, kann ich Codepen empfehlen, eine offene Community-gesteuerte IDE für Entwickler, um ihre Arbeit online zu teilen. Sie würden über die Qualität überrascht sein. Snap.svg ist eine JavaScript-Bibliothek, die der Unterstützung mehrerer Browser mit natürlichen SVG-Bildern gewidmet ist. Das ist ein ziemlich detailliertes Thema, aber wenn Sie neugierig sind, lohnt es sich, etwas genauer zu betrachten.
10. Eindeutige Webkopie
Eine der coolsten neuen Funktionen in der Webentwicklung ist die @ font-face-Deklaration. Sie können Schriftartdateien importieren, die lokal oder extern auf einem anderen Server gehostet werden. Diese Schriftarten sind in CSS definiert und Sie können sie in Schriftfamilieneigenschaften schreiben, um Ihren Webseitentext zu formatieren.
Dies umfasst nun auch fontbasierte Icons, bei denen flexible Icons auf der Seite als Text dargestellt werden. Diese Icons sind nicht so gut gestaltet im Vergleich zu echten Grafiken, die eine Vielzahl von verschiedenen Farben enthalten können. Die Möglichkeit, jede Schriftart auf der Seite anzupassen, ist jedoch eine leistungsstarke Technik, mit der Sie Ihre Website von der Masse abheben können.
11. Lazy-Loading Animationen
Als ich eines Tages ThemeForest durchstöberte, stieß ich auf viele WordPress-Themes, bei denen Übergangseffekte auf Elemente angewendet wurden, aber sie animierten nur, wenn man sie in die Ansicht scrollte. Diese Elemente verhalten sich ähnlich wie Lazy-Loading-Bilder, außer dass sie bereits auf der Seite geladen und nicht sichtbar sind.
Durch die Verwendung von JavaScript ist es einfach festzustellen, wann das / die Element (e) angezeigt werden. Verwenden Sie dann CSS3-Übergänge oder JavaScript, um zu animieren.
Wenn Sie auf der Seite von Chart.js nach unten blättern, werden Inhaltsblöcke angezeigt, und die Bilder beginnen langsam zu verschwinden. Dieser Trend spart wahrscheinlich keine Bandbreite, es sei denn, Sie warten absichtlich, um den Inhalt zu laden. Es geht mehr um Seitenästhetik und bietet eine schlichte Benutzeroberfläche für Ihre Besucher.
12. Angepasste Bildergalerien
Durch die zunehmende Integration von JavaScript und CSS konnten Entwickler außergewöhnliche neue Projekte erstellen. Bildergalerien sind ein Trend, der seit Jahrzehnten existiert. Für das Jahr 2014 erwarten wir vielleicht noch größere Lösungen für dynamische Karussells und Leuchtkästen.
Um ein kleines Beispiel zu geben, werfen Sie einen Blick auf dieses neue Gallerie-Tutorial zu Codrops, das einen elastischen Drag-Effekt verwendet, um zwischen Fotos zu wechseln . Dies ist etwas experimentell, aber Sie können sehen, wie Entwickler bereit sind, die Grenzen zu verschieben und zu sehen, was möglich ist.
Wenn Sie dieses Konzept mögen, warum nicht einen Blick auf einige jQuery-Galerie-Plugins werfen? Dies wäre eine schnellere Strategie, um mit dem Lernen zu beginnen und im Laufe der Zeit können Sie sogar Ihr eigenes Galerie-Plugin erstellen.
13. Mega-Navigation Menüs
In den letzten Jahren wurden alle Arten von neuen phantastischen Navigationen getestet und übernommen. Das mobile responsive Web ist ein großes Stück dazu, zusammen mit den HTML5 / CSS3-Spezifikationen. Ich habe einen kleinen, aber wachsenden Trend von Mega-Navigationsmenüs bemerkt, die sich erweitern, um große Blöcke von Inhalten und Links zu halten .
Diese sind am häufigsten auf Websites zu finden, die viele einzigartige Inhalte in großen Mengen veröffentlichen. Online-Magazine oder Web-Foren kommen mir sofort in den Sinn. Es nimmt zwar etwas Platz auf der Seite ein, bietet aber auch eine breitere Auswahl für die Navigation Ihrer Website.
Ich stolperte über einen Artikel über Smashing Magazine, in dem es um Navigationsmenüs für Mega-Sites ging. Die Konzepte sind ähnlich und die bereitgestellten Beispiele können ein guter Ausgangspunkt für jeden sein, der sich für diesen Trend interessiert.
14. Suchleisten erweitern
Rückblickend bin ich mir nicht ganz sicher, wann dieses Konzept an Fahrt gewann. Aber es gibt eine wachsende Popularität für den Aufbau halb-versteckter oder erweiterter Suchleisten in Ihrem Layout. Der Benutzer klickt auf ein Lupensymbol oder klickt auf das Formular selbst und erweitert es dann weiter, um mehr Text einzugeben.
Codrops hat ein hervorragendes Tutorial zu diesem Thema geschrieben und es ist ein toller Beitrag für jeden Entwickler. In erster Linie wird das ausgeblendete Suchfeld verwendet, um Platz auf der Seite zu sparen . Sie können das Formular sogar ganz oben verbergen und es wie ein Navigationsmenü nach oben / unten bewegen. Diese Technik ist bei Responsive-Layouts bekannt, aber auch größere und umfangreichere Designs enthalten diese anpassungsfähigen Suchfelder.
15. Ausgewählte Detaillisten
Kürzlich habe ich ein Design-Showcase mit detaillierten Listen von Details zusammengestellt, die auf Homepages von Webseiten zu finden sind. Dies sind listenorientierte Details, die Informationen über ein Unternehmen oder ein Produkt erläutern. Oft sind die Details mit einigen Symbolen verbunden, um die Punkte auf prägnantere Weise zu veranschaulichen.
Ich habe bemerkt, dass diese Detaillisten für viele Homepages zu einem festen Bestandteil geworden sind. Eine Sammlung von Informationen über ein Produkt oder eine Dienstleistung bietet den Besuchern einen Grund, sich festzuhalten. Es gibt einen Einblick, was Sie Ihren Kunden bieten und wie alles funktioniert . Symbole sind wie Zuckerguss, um die Aufmerksamkeit der Leute beim schnellen Scrollen zu gewinnen.
16. Mobile-First-Design
Ein Buch namens Mobile First von Luke Wroblewski hat mir diese Idee vor einiger Zeit gegeben. Beim Surfen auf einer Website ist es nicht einfach zu unterscheiden, wie der Entwurfsprozess funktioniert hat. Aber die Idee ist, zuerst nachzubilden, wie Ihre Website als responsives Layout auf mobilen Bildschirmen aussehen sollte. Beseitigen Sie alle überschüssigen Flusen und behalten Sie nur das Nötigste.
Von diesem Standpunkt aus ist es viel einfacher, Ihr Design auf größere Bildschirme zu skalieren . Die Navigationsmenüs werden breiter, der Inhalt wird zusammen mit einer möglichen Seitenleiste verlängert. Mobile-First-Design räumt dem mobilen Erlebnis eine höhere Priorität ein, das dann eine Basis für das gesamte Layout wird. Ich liebe das Konzept, und ich hoffe, dass Designer versuchen, dies zu implementieren, um zu sehen, wie es den Workflow und das Endergebnis beeinflussen kann.
17. HTML5 Leinwand
Es gibt eine Menge über das Element Canvas zu sagen, und es ist durchaus ein Thema des Studiums. Mit JavaScript können Spiele oder Zeichnungsanwendungen direkt in HTML5 erstellt werden. Ich habe sogar das Canvas-Element gesehen, das zum Sammeln von Signaturen mit der Maus verwendet wurde .
Das obige Beispiel stammt von einem einfachen Codepen-Eintrag. Jemand hat einen glänzenden Ladekreis auf Dribbble platziert und dieser Stift ist eine Replikation, bei der das Canvas-Element verwendet wird. Ein anderes Beispiel ist dieser kleine horizontale Ladebalken, der auf HTML5-Canvas und JavaScript basiert. Die Möglichkeiten wachsen schnell und persönlich. Ich bin gespannt, wie die Leinwand in 2-3 Jahren aussehen wird.
18. Pixel Sprites & Browserspiele
Ähnlich wie klassische Videoplayer wurden Browserspiele früher ausschließlich in Adobe Flash produziert. Aber JavaScript hat in der Community Fuß gefasst und viele Entwickler geben gerne Open-Source-Codes für diese Art von Projekten frei.
Vor einiger Zeit schrieb ich einen Artikel über pixelzentrierte Websites, die auch Animationen verwenden könnten. Diese Designs sind nicht üblich, aber sie erregen Ihre Aufmerksamkeit. Es braucht viel Designtalent, um solch exquisite Pixelgrafiken zu erstellen. Das Erstellen eines eigenen Browser-Sprite-Spiels wäre eine noch größere Herausforderung.
Eine der besten Ressourcen für den Einstieg finden Sie in HTML5 Game Engine. Die Website listet viele kostenlose JavaScript-Bibliotheken zum Erstellen eigener Browserspiele auf. Es gibt eine Menge zu lernen über den Prozess, aber glücklicherweise können Sie Hunderte von Tutorials online in Google finden.
19. Schnelle Benutzerregistrierung
Es gibt eine zunehmende Anzahl von brandneuen Startups und Web-Anwendungen, die eine Benutzerregistrierung ermöglichen. Tatsächlich müssen Sie sich bei vielen Diensten anmelden, bevor Sie die Website nutzen können. Lange, detaillierte Anmeldeformulare sind in dieser schnelllebigen Welt äußerst abschreckend.
Versuchen Sie, alle Anmeldeformulare schnell und auf den Punkt zu bringen . Viele neuere Webapps enthalten das Anmeldeformular direkt auf ihrer Homepage, um so viele Besucher wie möglich zu erfassen. Dies geschieht, wenn ein neuer Besucher neugierig auf Ihr Produkt ist, das Formular nur 2-4 Felder enthält und sich dafür entscheidet. Sie sind vielleicht schockiert darüber, wie gut diese Strategie für die Erfassung neuer Benutzer funktioniert.
20. CSS3 Animierte Keyframes
Seit dem frühen Jahrtausend ist JavaScript die erste Wahl für Browser-Animationen. Erst kürzlich wurde CSS3 in den Mainstream übernommen, wo Entwickler ihre eigenen Animationseffekte mit @keyframe erstellen können.
Es gibt eine andere Möglichkeit zur Animation mit der Übergangseigenschaft, obwohl diese nur einen Status für die Animation hat, während sich Keyframes ähnlich wie Adobe Flash verhalten. Sie legen einen Rahmenprozentwert von 0% - 100% fest und definieren Eigenschaften, die sich im Laufe der Zeit ändern . Die neueste CSS3-Spezifikation bietet genügend Werkzeuge, um Elemente in praktisch jedem beliebigen Stil zu animieren.
Schließen
Kleinere Schnittstellenkonzepte denken nicht an jeden Tag. Aber es sind diese kleineren Akzente, die das Leben in ein cleveres Website-Layout bringen. Ich hoffe, dieser Artikel kann eine Handvoll Designtrends beleuchten, die wir in zukünftigen Projekten auffallen werden. Auch wenn Sie Ideen für 2014 Design-Trends haben, die ich vielleicht vergessen habe, fühlen Sie sich frei, mit uns in den Kommentaren unten zu teilen.
Erstellen Sie minimalistische Responsive Layouts mit Mini.css
Ein Frontend-Framework sollte leicht und einfach zu verwenden sein . Bootstrap ist das beliebteste, obwohl es auch eines der schwersten ist. Und in einer Welt mit vielen Alternativen zu Bootstrap kann es schwierig sein, einen zu finden, den du magst.Mini.css ist ein neueres Framework und macht seinem Namen alle Ehre
Erhalten Sie die Farbschemas, die von den Fotos mit ColorPalettes.net erzeugt werden
Pro-Fotografie hat die besten Farben, da sie direkt aus dem Leben gezogen werden. Aber das Farbschema eines Fotos lässt sich nicht ohne weiteres in eine Oberfläche übertragen .Hier hilft ColorPalettes.net . Es ist eine kostenlose Farbressource, die Paletten basierend auf Archivbildern organisiert . J
