Stand der Trends im Webdesign 2012 Jahresausgabe

Wie Ferris Bueller berühmt sagte: "Das Leben bewegt sich ziemlich schnell. Wenn Sie nicht stehen bleiben und sich hin und wieder umsehen, könnten Sie es verpassen." Lassen Sie uns seinen weisen Rat beherzigen und nehmen Sie sich einen Moment Zeit, um einige Webdesign-Trends zu erkunden, die wir 2011 erlebt haben.

Das Netz ist ein sich ständig veränderndes Biest, voller Mängel und Unvollkommenheit und Experimentieren. - Dan Cederholm

Sich anpassendes Webdesign

Responsive Web Design ist ein bisschen wie ein brillanter, aber überspielter Song. Es scheint, als hätte jeder zu Wort gekommen und Ethan Marcottes Agenda sah noch nie gesünder aus. Es gibt jedoch einen guten Grund dafür. Das Konzept ist einfach, die Motive sind logisch, die Technologie ist unkompliziert und die Ergebnisse sind äußerst zufriedenstellend.

2011 gab es eine Explosion bei der Anzahl der Websites, die als Reaktion darauf aufgebaut wurden, und das Schöne daran ist, dass wir alle an der Entwicklung des Prozesses beteiligt sind. Es ist noch in jungen Jahren, Designer und Entwickler erarbeiten ständig neue Ansätze und wir sind weit davon entfernt, echte Best-Practices zu finden. Sollten wir zuerst für große Bildschirme entwerfen und Medienanfragen verwenden, um unsere Designs für Mobilgeräte elegant abzubauen? Oder sollten wir zuerst für mobile Geräte entwerfen und schrittweise für leistungsfähigere Geräte verbessern? Paul Irish hat einen interessanten Thread auf GitHub gestartet, wenn Sie in die Diskussion eintauchen möchten.

Eine Sache, die RWD beleuchtet hat, ist der Fokus auf den Inhalt. Abgesehen von allen anderen Faktoren ist der Inhalt einer bestimmten Website wichtig. Das Fleisch- und Zwei-Gemüse muss auf jedem Gerät lesbar, zugänglich und deutlich sein. Designer nehmen dies sicherlich auf, wie auf vielen aufstrebenden Websites von 2011 deutlich wird.

Alles in allem, auch wenn Sie ein bisschen müde sind, noch mehr RWD-Tutorials und Artikel zu sehen, bleiben Sie dran. Das Jahr 2012 wird große Entwicklungen in der Art und Weise erkennen, wie wir es angehen.

Rastersysteme

Partner im Verbrechen für das responsive Layout ist das Raster. Im Jahr 2011 haben Fixed-Grid-Frameworks flexible Verbesserungen vorgenommen, ganz zu schweigen von noch mehr Tools, die uns helfen. Alle folgenden Frameworks, Tools und Leitfäden sind auf die heutigen Anforderungen zugeschnitten und bieten Fluidität. Die meisten dieser Websites zeigen auch ein hervorragendes responsives Design, wie die folgenden 1: 1-Miniaturansichten zeigen:


Typografie

Offensichtlich ist Typografie keine Disziplin, die sich 2011 herausgebildet hat, sondern ein Bereich des Webdesigns, der weiter wächst und mehr denn je durch Webfonts und -dienste ermöglicht wird.

Zwei bemerkenswerte Aspekte der Typografie sind die Ästhetik (Web-Fonts ermöglichen es den Designern, sich selbst zu verwöhnen) und das wachsende Verständnis, dass dieser Typ in erster Linie gelesen werden kann. Schriften müssen nicht mikroskopisch sein, um chique zu wirken, und die Betonung auf den Inhalt drängt uns zu einem Netz voller großer und schöner Schrift.


Technologie drängen Art

In Bezug auf die Browserfunktionen (und Versionsnummern!) Wurden im Jahr 2011 große Fortschritte erzielt. Selbst Microsoft gab kürzlich zu, dass automatische Updates für Internet Explorer wahrscheinlich eine gute Idee sind. All dies bedeutet, dass Webdesigner mehr Spielzeuge in Bezug auf HTML und CSS zur Verfügung haben, was verständlicherweise zu technologischer Kreativität führt. Das "weil ich kann" nähern, wenn Sie möchten.


Scrollen, vertikale Erzählungen

Ich kann mir keinen besseren Titel für dieses Stück vorstellen, sorry. Also, worüber rede ich? Vertikales Scrollen.

Es ist eine tägliche Aufgabe für Webdesigner, die Wichtigkeit der Falte herunterzuspielen. Die Falte ist unmöglich zu definieren, was mit der Fülle von Geräten und Auflösungen heutzutage so ist, daher sollte der Inhalt "darüber" nicht die Priorität eines Kunden in einer Designlösung sein.

Wir umarmen das vertikale Scrollen. Der Aufstieg der mobilen Geräte hat die Menschen daran erinnert, dass sie können scrollen und dort ist relevanter Inhalt unterhalb der ersten Pixel einer Webseite. Einige Designer haben dies auf die nächste Stufe gebracht und das Scrollen zu einem wesentlichen Bestandteil des Browsing-Erlebnisses gemacht.

Ein Ansatz besteht in subtilen Parallaxeffekten.

Hinweis: Die untenstehenden Bilder machen den Websites offensichtlich nicht gerecht - schauen Sie sich diese an (und machen Sie Ihr Mausrad fertig ...)

Dann gibt es die Idee, dass einige Inhalte scrollen können bis zu einen bestimmten Punkt. 2011 wurde dieser Effekt umfassend genutzt; Soziale Symbole, Einkaufswagen, Menüleisten, Handlungsaufforderungen usw. dauerhaft im Blick behalten:

Wie wird das erreicht? Oft eine Kombination aus jQuery und CSS-Positionierung. Hier sind nur zwei Ressourcen, um Ihnen zu helfen:

Einige Websites haben das Konzept noch weiterentwickelt und Elemente animiert und Ereignisse aufgerufen, wenn bestimmte vertikale Punkte auf der Seite erreicht werden:

Und dann gibt es Beispiele, die das Scrollen einer Webseite in eine völlig neue Dimension bringen (wirklich, check this out) ...


So wie es 1983 ist

Diagonal ist umständlich, spielt mit der heutigen netzbasierten Umgebung nicht mit, aber aus irgendeinem Grund sind im Laufe des Jahres 2011 überall Schräglinien aufgetaucht Ich werde auch andere visuelle Erinnerungen an diese Zeit finden. ungerade Farbkombinationen, Lichteffekte, Beige und Bronze. Seltsam.

Ich erinnere mich an alte Zeitschriftenanzeigen mit ihren abstrakten diagonalen Linien, Serifen, großen Haaren, Joan Collins und Perlen. Es ist ein Look, der seltsam ansprechend ist…


Modulare Schnittstellen

Responsive Web Design favorisiert wiederum die modulare Herangehensweise an Layouts. Das Verwalten von Bereichen eines Designs in modularen Abschnitten ermöglicht das Umpositionieren von Flüssigkeiten und die klare Trennung von Inhalten. Man könnte argumentieren, dass der Aufstieg der modularen Schnittstellen auf den Einfluss von Apps zurückzuführen ist. Zunehmend veröffentlichen und veröffentlichen wir Webinhalte über externe Apps wie Facebook und Twitter. Die Linien verschwimmen zwischen Desktop-Bildschirmen und Handheld-Geräten.


Holen Sie sich dieses großartige PSD der neuesten Twitter-Benutzeroberfläche vom Smashing Magazine!

Themenwald

Ich habe das Themeforest-Review-Maestro Ivor gefragt, was er im letzten Jahr auf Envatos Nummer 1-Markt gesehen hat. Er beobachtete einige Trendaspekte:

  • Das Portfolio-Layout dominiert immer noch den Markt.
  • Responsive Webdesign und Mobile-Websites sind heiß.
  • Minimal Design ist das ganze Jahr über konstant.

2011 war das Jahr des Minimal Design in ThemeForest - Ivor Padilla

Sie müssen nicht tief in die Themeforest-Archive hineinschauen, um zu sehen, was er bedeutet.


Zu dir hinüber

Ich habe auf keinen Fall jede bedeutende Entwicklung im Webdesign von 2011 behandelt, also machen Sie Ihre Kommentare mit! Welche Trends haben Sie 2011 getroffen? Wo stehen wir im Moment und wo sehen Sie die Dinge??