15 Trends für Webdesign im Jahr 2012

Das Jahr 2011 hat bisher einige erstaunliche Änderungen in Design und Internet-Technologie mit sich gebracht. Die Webentwicklung ist zu einem viel glatteren Thema geworden, in das man lernen kann, ganz zu schweigen von den unzähligen Open-Source-Bibliotheken, die zur Rationalisierung des Prozesses nützlich sind. Und doch scheint die globale Design-Community noch lange nicht das Handtuch zu werfen.

Ich möchte 15 Ideen vorstellen, die im letzten Jahr sehr schnell gewachsen sind. Diese Trends umfassen Web- und Grafikdesign-Techniken, die wahrscheinlich 2012 eine große Rolle spielen werden. Wahrscheinlich haben Sie einige davon in vielen Ihrer Lieblingsseiten online gesehen.

Zum Glück werden die Methoden zur Implementierung dieser Funktionen immer verständlicher und der Code wird viel schlanker.

1. Responsive Interface Design

Die durchschnittliche Benutzererfahrung ist möglicherweise der wichtigste Aspekt, der bei der Gestaltung einer Website zu berücksichtigen ist. Sie möchten, dass Seitenelemente schnell auf Tastatur- / Mauseingaben reagieren und sich wie erwartet verhalten. Einige Beispiele können nebenstehende Flyout-Menüs, Dropdown-Felder und Popup-Fenster enthalten.

Mit berühmten JavaScript-Bibliotheken wie MooTools und jQuery ist es jetzt viel einfacher geworden, diese Funktionen zu animieren und vieles mehr. Die meisten modernen Browser unterstützen diesen Code und werden sogar zerbrechlich abgebaut, wenn die Skripts nicht verfügbar sind. Letztendlich möchten Sie, dass sich der Benutzer bei der Interaktion mit einer beliebigen Stelle im Design wohl fühlt.

Ebenso sollten Sie Formulareingaben und Datenprüfung berücksichtigen. Auf vielen Registrierungsseiten erhalten Sie kleine Antworten, während Sie die einzelnen Eingabebereiche durcharbeiten. Sie können die Überprüfung auf gültige E-Mail-Adressen automatisieren, Benutzernamen duplizieren und sogar die Kennworteingaben überprüfen. Dies spart Zeit beim Benutzer und bietet eine praktische Anleitung während des Anmeldeprozesses.

2. Touchscreen-Mobilgeräte

In den letzten Jahren hat sich gezeigt, dass Smartphones auch von Nicht-Tech-Enthusiasten unterstützt werden. Aber erst seit 2011 ist es zu einer Explosion mobiler Websites und mobilspezifischer Vorlagen gekommen.

Die Beliebtheit von iPhone- und iPad-Geräten zusammen mit Android-Handys bedeutet, dass Besucher über Ihre Touch-Befehle vollständig mit Ihren Seiten interagieren können. Dies muss bei jedem Designmodell zu einer realistischen Überlegung werden. Trends im mobilen Webdesign haben gezeigt, dass der Aufbau eines völlig separaten mobilen Themas oft die besten Ergebnisse liefert. Auf diese Weise können Sie alle dynamischen Inhalte in Ihrem Hauptlayout beibehalten, während mobile Benutzer eine abgespeckte Version der Website bereitstellen.

3. Tonnen Freebies!

Wer kann sagen, dass er ehrlich gesagt keine kostenlosen Downloads hat? Webdesigner teilen ihre Inhalte seit Jahren online, aber erst seit kurzem ist dieser Trend bei digitalen Künstlern sehr beliebt. Es gibt ein paar Communitys, die speziell dafür eingerichtet wurden, kostenlose Downloads für Web- und Grafiker anzubieten.

Zwei meiner persönlichen Favoriten sind Download PSD und Designmoo. Beide werden regelmäßig von hochqualifizierten Mitgliedern aktualisiert. Darüber hinaus bietet das Hongkiat Freebies-Archiv viele süße Leckereien zum Auschecken. Bislang war es buchstäblich noch nie so einfach, kostenlose Web-Interfaces, Layouts, Logos, Banner und praktisch alle anderen Arten von PSD / AI-Dateien herunterzuladen!

Einige nette Downloads

Nachfolgend finden Sie nur ein paar coole Werbegeschenke, die Sie von Anfang 2011 aus checken können. Wenn Sie der Meinung sind, dass diese Liste einige großartige Dateien enthält, warten Sie einfach bis 2012!

Mini-Web-UI-Set

Dark Mini Music Player

Schiebe-Tags

Dunkler Foto-Slider

Suchfelder

Login / Anmeldeformular

Login Modal Box

Anmeldeformular reinigen

Preistabellen

Minimale Ladestangen

Attachment-Popup

4. HTML5- und CSS3-Standards

Beide neuen Design-Archetypen haben im Laufe des Jahres 2011 eine stetig wachsende Fangemeinde angehäuft. Semantic Web-Designer haben Jahre darauf gewartet, nur CSS-Designs zu erstellen, die abgerundete Ecken und Schatten darstellen. Darüber hinaus hat das W3C große Fortschritte bei der Unterstützung der beliebtesten Browser erzielt.

Ich kann nur Gutes für die Zukunft der HTML5 / CSS3-Webentwicklung sehen. Frontend-Designer werden auf dem heutigen Gebiet oft übersehen, sie sind jedoch für den gesamten Kompositionsprozess von so großer Bedeutung. Versuchen Sie, sich nicht in ein Set "Label" zu quetschen, basierend auf den Techniken, die Sie täglich kennen und üben. Wir bieten eine Anleitung für Anfänger für die HTML5 / CSS3-Codierung, wenn Sie Nachholbedarf haben.

Wenn Sie sich an diese neuen Standards halten, wird auch die Entwicklung in JavaScript und jQuery wesentlich einfacher. Entwickler haben ihren HTML5 / CSS3-Projektcode bereits online veröffentlicht und geteilt. Wenn sich die Dinge fortsetzen, werden wir sicherlich viel mehr davon im nächsten Jahr bemerken.

5. Bänder und Banner

Obwohl diese Design-Technik nicht genau ist “Neu” es hat bis vor kurzem nie wirklich den Mainstream durchbrochen. Sie haben wahrscheinlich Beispiele für Eckbänder, Banner-Navigationsleisten und Abzeichen für kleine Bänder gesehen. Diese Trends sind wahrscheinlich aufgrund der massiven Anhäufung detaillierter Tutorials explodiert, die Sie alle bei Google finden können.

Webdesigner sind heutzutage kompetenter beim Erstellen eigener Blogs, um Informationen auszutauschen. Jetzt können einfache Techniken einfach zwischen den Designern weitergegeben werden, um die beliebtesten Effekte zu kopieren. Es gibt sogar kostenlose PSDs, die Sie herunterladen können, um sich den Aufwand zu sparen.

6. Premium WordPress Themes

Die letzte Version von WordPress 3.0 enthielt eine Vielzahl lang erwarteter Funktionen wie benutzerdefinierte Post-Typen und einzigartige Artikelbilder. Die tiefgreifendsten Änderungen, die ich gesehen habe, stammen jedoch von WordPress-Entwicklungsshops, die sich auf erstklassige WP-Themen spezialisiert haben.

Nachdem Sie ein solches Design erworben haben, ist der Installationsvorgang einem anderen ähnlich. Es ist jedoch jetzt möglich, benutzerdefinierte Plug-In-Funktionen, untergeordnete Designs, neue Admin-Menüs und eine Reihe weiterer Funktionen direkt aus dem Theme hinzuzufügen. WooThemes, ElegantThemes und Rocket Themes sind nur wenige Marken, die mir vor allem den Rest abheben. Ihre Qualität ist einwandfrei und ich denke, dass ihre Entwickler alles daran setzen, die besten Vorlagen und intuitivsten Admin-Menüs zu erstellen.

Für 2012 kann ich mir nur vorstellen, dass WordPress noch benutzerfreundlicher wird. Dies bedeutet, dass mehr qualitativ hochwertige Themen veröffentlicht werden und dass erstaunlichere Blogs gestartet werden.

7. Online-Zeitschriften

Wenn wir über WordPress-Themen sprechen, sollten wir auch den schnell angenommenen Erfolg von Online-Magazinen ansprechen. Diese Websites unterscheiden sich nicht so sehr von allgemeinen WordPress-Blogs, abgesehen von der allgemeinen Struktur und dem Seitenlayout. Sie können diese größeren Magazine anhand der reinen Präsentation ihrer Homepage und der Sammlung von Autoren erkennen, die für die Website schreiben.

Wenn Zeitschriften online gehen, werden sie für viele Autoren eine Einnahmequelle sein. Zugegeben, ein Thema wie "Webdesign" zielt auf eine kleinere Nische ab als beispielsweise Glücksspiel oder Wirtschaft. Die Tatsache, dass wir mehr Designmagazine online als Print sehen, zeigt, wohin sich die Welt in den kommenden Jahren bewegen wird.

8. Einfache Schlagschatten

Als Facette von CSS3 ist es für Designer jetzt einfacher denn je, einen Schatten auf der gesamten Seite zu implementieren. Box-Text- und Box-Style-Elemente wurden mit entsprechenden Eigenschaften versehen, um klare Schatteneffekte zu erzeugen.

Die Textschatten-Syntax ist sehr einfach zu merken und folgt als Box-Schatten. Da Bilder zum Rendern dieser Effekte nicht mehr erforderlich sind, können Webentwickler sich darauf konzentrieren, diese grundlegenden Ideen weiter auszubauen.

9. Dynamische Typografie

Schriftarten sind ein großer Teil der Sphäre, die die Tradition des Webdesigns umfasst. Die bemerkenswertesten Schriftarten, darunter Arial, Helvetica, Georgia und Trebuchet MS, gibt es bereits seit Jahren. Obwohl sie in Webstandards immer noch ein tiefes Ziel verfolgen, gibt es viele alternative Optionen für die erweiterte Typografie von Webseiten.

Typekit erfordert zum Beispiel nur, dass ein paar Zeilen Code in Ihrem Dokumentkopf enthalten sind. Danach können Sie angeben, welche Schriftartnamen in Ihr CSS eingefügt werden sollen. Das Beste an dieser Technik ist, dass sie hauptsächlich auf JavaScript angewiesen ist, sodass der Endbenutzer nicht die Schriftarten installieren muss.

Eine andere Alternative sind Google Web Fonts, die sich ähnlich wie Typekit verhalten. Ich empfehle interessierten Designern die CSS3 @ font-face-Medienabfrage, da Sie viel mehr Kreativität erhalten. Dieser Code kann zum Importieren von a verwendet werden .ttf oder .otf Schriftdatei von Ihrem Webserver und fügen Sie sie als verwendbare Stylesheet-Schriftart ein! Mit so vielen alternativen Systemen, die zum Erstellen dynamischer Schriftarten verwendet werden, erwarte ich, dass das Innovations- und Designtalent in diesem Bereich im Jahr 2012 stark ansteigt.

10. Diashows für Bildergalerien

Mit der nachfolgenden Popularität von jQuery habe ich immer mehr Bild-Slideshows entdeckt, die in Web-Layouts abgelegt wurden. Galerien sind ideal, um einen schnellen Einblick in den Inhalt der Innenseiten zu erhalten. Dies könnte ein Satz von Portfolioeinträgen, Fotos, Blogbeiträgen mit vorgestellten Bildern, Demo - Screenshots usw. sein.

Wenn Sie die vielen einzigartigen Animationen zum Schieben und Ausblenden in Betracht ziehen, war es noch nie einfacher, eine schnelle Diashow für Ihre Homepage zu erstellen. Ich bin zuversichtlich, dass 2012 diese Trends nicht nur zwischen den Designern steigen werden. Online-Webanwendungen und Softwarefirmen verwenden Diashows als geführte Lernprogramme, um Screenshots und einzigartige Funktionen anzuzeigen.

11. Modale Popup-Boxen

Ich denke, dass modale Boxen noch relativ neu im Internet sind, wenn man bedenkt, dass sie seit Jahren in Desktop-Software und mobilen Apps auftauchen. Der Zweck eines modalen Fensters besteht darin, Boxinhalt (z. B. Benutzerregistrierung oder -anmeldung) oben auf der aktuellen Seite anzubieten, ohne auf eine neue zu laden.

Viele der Open-Source-Bildergalerie-Skripts verwenden einen Typ von Lightbox-Effekt, bei dem der Hintergrund dunkler wird als das Popup-Fenster. Ich mag diese Funktion wirklich immer, wenn ich sie sehe, obwohl sie von vielen noch nicht angenommen wurde. Und obwohl modale Boxen sexy und schlank sind, können sie auch sehr schwer zu programmieren sein und richtig funktionieren.

Um Ideen für Ihre eigenen Websites zu erhalten, besuchen Sie einige der bekannteren Social-News-Sharing-Communities. Reddit und Digg sind die ersten beiden, die mir in den Sinn kommen, da beide Register- / Anmeldemodal-Boxen mit einem typischen Layout enthalten. Darüber hinaus verfügen die UI-Effekte für Google+ über eine beträchtliche Menge modaler Funktionen.

12. Inspirationslisten

Sammlungen von Listenelementen sind seit den ersten Tagen des Webdesigns erschienen. Als wir in das neue Jahrhundert einzogen, begannen die Designer mit HTML geordneten und ungeordneten Listen, um Navigationsmenüs unterzubringen. Heutzutage können und werden Listen jedoch viel mehr verwendet.

In den meisten Blogdesigns finde ich, dass die gesamte Seitenleiste mit Listen geladen ist! Ganz zu schweigen von Designern, die fantastische CSS-Stile für Listen in ihren Artikeleinträgen entwickelt haben. Wir haben Anfang dieses Jahres in einem anderen Beitrag über inspirierende Listenstile berichtet, die Ihnen vielleicht mehr Einblick in die Angelegenheit geben. Mit Blick auf das Jahr 2012 erwarte ich einige wirklich kreative Beispiele, möglicherweise auf dem Niveau von Flowapps benutzerdefiniertem Layout für Aufgaben und Aufgaben.

13. Generierte Bildminiaturen

Im Web-Universum können wir uns darauf einigen, dass der Inhalt König ist. Die meisten Designer stimmen jedoch auch zu, dass eine Seite mit leerem Text schnell langweilig wird. Bilder können diese zusätzliche Würze hinzufügen, wenn Sie wissen, wie Sie sie sanft einstreuen. Eine solche Methode ist die Verwendung dynamischer Miniaturansichten, um Vorschauen für jede Seite oder jeden Artikel bereitzustellen.

Blogs von heute übernehmen weiterhin den Trend zu Bildern. Warum sollten Sie also nicht auch generierte Miniaturansichten in Ihrem Thema anwenden? Diese lenken mich oft auf die Überschrift des Artikels und helfen, eine Seite mit Textlinks aufzuteilen.

Als weiteres Beispiel bietet Dribbble eine vollständige Galerie mit Miniaturansichten für jede Entwurfsaufnahme. In einem solchen Tabellenzeilen-Layout ist es sehr einfach, einen Blick auf jedes Miniaturbild zu werfen und durchzublättern, um das Gesuchte zu finden. Diese Taktik hat die Aufmerksamkeit der gesamten Design-Community auf sich gezogen! Äh, zumindest die Dribbble-Mitglieder bestenfalls. Ich kann nur erwarten, dass 2012 diese Ideen auf der Grundlage solcher Beispiele aus der Vergangenheit weiter ausgebaut werden.

14. Übergroße Symbole

Dieser einzigartige Trend ist teilweise auf die Beliebtheit der Symbolbilder von Mac OS X zurückzuführen. Als Programmierer anfingen, Websites für ihre Mac-Anwendungen zu starten, haben wir allzu oft die enormen Größen gesehen, die beim Branding vertreten sind. Dementsprechend wurde dieser Trend auch von iOS-Entwicklern aufgegriffen und ruht nun bequem in der modernen Designkultur.

Es ist schwer vorhersagbar, wie sich diese Trends auf unserem Weg in das Jahr 2012 anpassen werden. Zum einen können diese Icons klobig sein und mehr Platz beanspruchen als nötig. Wir sind noch nicht einmal in der Nähe eines Mangels an iOS / OSX-Apps und Designer geben immer noch pixelgenaue Ikonenspezifikationen heraus. Ganz zu schweigen davon, dass Webdesigner jetzt übergroße Symbole in fast jedem Branding einer Seite enthalten! Es ist eine gute Möglichkeit, die direkte Aufmerksamkeit Ihrer Besucher zu betonen und Ihrem Unternehmen einen Namen zu geben.

15. Übertriebene Hyperlinks

Anker-Links gehören sicherlich zu den fünf wichtigsten Elementen einer Website. Diese sind seit den 1990er Jahren offensichtlich weit fortgeschritten, und beliebte Designtrends haben nur exponentiell zugenommen. Es scheint, dass wir uns in eine Ära bewegen, in der übertriebenes Design Vorrang hat.

Schauen Sie sich ein paar Link-Beispiele von Patterntap an, um zu sehen, ob irgendwelche Sprünge herausspringen und auffallen. Es gibt so viele unglaubliche Ideen für das Design von Hyperlinks, sowohl für Standard- als auch für Hover-Effekte. CSS3 abgerundete Ecken, Textschatten und benutzerdefinierte Schriftfamilien fügen dem Mix noch mehr großartige Ideen hinzu! Eines meiner Lieblingsbeispiele ist von SimpleBits, bei dem für jeden Blogeintrag eine kurze dynamische Animation verwendet wird.

Fazit

Diese Ideen sind nur einige der beliebtesten Trends, die ich im Laufe des Jahres 2011 erlangt habe. Beim Webdesign geht es immer darum, die Nutzer vorrangig zu fokussieren. Es ist unwahrscheinlich, dass sich diese Philosophien ab 2012 unterscheiden werden, aber wie wir Layouts erstellen und Daten präsentieren, ändert sich immer. Teilen Sie uns Ihre Gedanken oder Fragen im Diskussionsbereich mit.