Die Tendenzen und Entwicklungen im Webdesign 2012
Einfach. Klar. Funktional. Benutzerfreundlich. Wertvoll. Mobil. Responsive. Kreativ. Wirtschaftlich.
Die Online-Welt wird sich auch in 2012 weiterentwickeln. Bereits 2011 zum Einsatz gekommene Technologien, wie HTML5, CSS3, jQuery, JavaScript, …, werden zu neuen offenen Webstandards weiterentwickelt und die Weblandschaft dominieren. Als offene Standards tragen dazu bei, die Browser schneller und die Zukunft im Web unabhängiger von proprietären Entwicklungen großer Unternehmen zu machen. Vor allem werden sie Anwendungen im mobilen Web unterstützen und vorantreiben.
Neue technisch-technologische Voraussetzungen bieten die Plattform für Kreativität und Funktionalität der Webanwendungen. Die Inspiration der Designer und kreatives und professionelles Design kommen zum Tragen. Kreativität, Design und Funktionalität werden eine Einheit.
Die Grenzen zwischen Designer und Entwickler verschwimmen. Es reicht nicht mehr, nur schöne Designs zu produzieren, sie müssen auch gute Funktionen bieten.
„user-centered/centric-Design“ wird die Herausforderung in 2012 für erfolgreiche und gewinnbringende Webanwendungen:
- eine klare, selbsterklärende Navigation,
- präzise Text-Präsentation
- Suchfunktionen und
- sichtbar und durchdachte Website-Struktur.
Bilder und Bewegtbilder (Animationen, Videos, Filme) werden mobil, das heißt, sie können mit höherer Qualität bei gleichzeitig geringeren Ressourcenanforderungen dargestellt werden. Möglich machen das die neuen Audio- und Videotag des HTML-5-Standards. Videos und Töne können damit genau wie heute Bilder ohne Umwege einfach in eine Website eingefügt werden. Wenn der Webbrowser das Medienformat unterstützt, kann er die Inhalte ohne Plugin direkt wiedergeben. Funktionalität und Emotionen können als Paar zum Einsatz kommen und damit sehr schlagkräftige Wirkung erzielt werden. Plattformunabhängiges Webdesign wird ein primäres Thema sein. Flexible Layouts lösen feste Layouts ab. Unter dem Begriff Responsive Design werden Layouts entwickelt und Inhalte produziert, die sich automatisiert der Größe und Auflösung des jeweiligen Endgerätes anpassen. Das wird sich auf die Programmierung von bisher proprietären Apps haben.
Trotzdem hat eine Smartphone-Anwendung andere Bedienelemente und Navigationsszenarien als ein Pad oder ein PC und auch beim Responsive Design muss diesen Anforderungen Rechnung getragen werden. Benutzerfreundlichkeit und Barrierefreiheit sind Anforderungen über alle Endgeräte und Oberflächen hinweg.
Die Wirtschaftlichkeit der Webanwendungen von der Erstellung bis zur Pflege und Aktualisierung der Inhalte, ebenfalls für alle Anwendungen, bleiben ein Thema und definieren die Anforderungen an Webpflegetools und CMS-Systeme.
Irgendwie sind all diese Anforderungen nicht neu. Neu sind jedoch die technologischen Möglichkeiten, diese Anforderungen professionell umzusetzen. Wir dürfen gespannt sein auf das neue Webjahr 2012.
Hier zusammenfassend einige hervorzuhebende Webdesign Trends in 2012
1. Responsive Webdesign
Die Websites reagiert automatisch auf Bildschirmgröße, Plattform und Umfeld (z.B. Die Scriptingfähigkeiten des Browsers) des jeweiligen Anwenders. In der Umsetzung bedeutet das eine Mischung von flexiblem Raster und Layouts, Bildern und den intelligenten Einsatz von CSS Media Queries.
2. Fixed-Position Navigation
Beim Scrollen auf einer Website wandert die Navigation einfach mit. So kann jederzeit auf andere Seite gewechselt werden.
3. Mehrspaltige Menüs
Bei Websites mit vielen Menü- und Untermenüpunkten kommen mehrspaltige Menüs zum Einsatz. Die Benutzerfreundlichkeit kann durch diese klare und stringente Navigation gesteigert werden.
4. Neue Formen der Typografie (Custom Font Faces)Eine Umsetzung des vorhandenen CI/CD wird jetzt inklusive der Typografie möglich. @fontface, Typekit und Google Web Fonts sind u.a. Quellen für Schriftarten, die sich für ein individuelles und variantenreiches Schriftdesign im Web nutzen lassen.
5. Runde Elemente und andere Formen sowie abgerundete Ecken
Dieser Webdesign-Trend wird durch CSS3 (Web-Programmierung) möglich, ohne dafür Grafiken nutzen zu müssen.
6. Der Trend zu Vektorgrafiken
(Grafiken und Schriften können in Form von Vektordaten gespeichert werden. Die Kodierung der Daten besteht nicht aus einzelnen Bildpunkten (Pixel), sondern aus mathematisch definierten Kurvenzügen.)
Übergroße Illustrationen werden gerne als Teaser auf Websiten benutzt. HTML5 und CSS3 ermöglichen eine komfortable und ressourcenschonende Umsetzung. In Verbindung mit dem freiem Vektorformat “Scalable Vector Graphics” (SVG) ist sogar noch mehr möglich.
Canvas ist eine Technik, die von Apple entwickelt wurde. Inzwischen ist sie ebenfalls ein Teil des HTML-5-Standards. Canvas-Elemente sind virtuelle Zeichenflächen, auf denen mittels JavaScript Grafiken dargestellt werden können. Damit lassen sich beispielsweise animierte Navigationmenüs, Werbebanner und sogar ganze Browserspiele erstellen. Auch die Darstellung von großen Hintergrundbildern ist kein Problem mehr. Slideshows und Animationen mit jQuery gehören hier ebenfalls dazu.
7. Infografiken
sind nicht für jede Website ein geeignetes Designelement. Geht es aber um die schnelle Vermittlung von Informationen, können sie Sachverhalte viel schneller verdeutlichen als Text, wodurch ihre Bedeutung weiter steigt. Diese Art von Informationseinbindung auf Webseiten hat sich rasend schnell verbreitet.
8. Ribbons (Multifunktionsleisten) und Banner
Schon 2011 war der Retrostil mit Ribbons und Banner sehr beliebt. Dieser Trend wird sich auch noch dieses Jahr weiterziehen.
9. Parallax Scrolling
Der Begriff leitet sich vom griechischen Wort parallaxis ab und bedeutet Veränderung. In Web-Design, ist die Parallaxe-Effekt ein relativ neuer Trend. welcher in letzter Zeit immer öfter genutzt wird. Inhalt und Hintergrund bewegen sich unterschiedlich schnell und schaffen so einen dreidimensionalen Effekt. Durch den Parallax-Effekt oder das Parallax-Scrolling können Perspektiven geschaffen und interessante 3D-Illusionen generiert werden.
10. TouchScreen-Kompatibilität
Neue Smartphones und Pads sind touchable – die Bedienung erfolgt über ein so genanntes Touchscreen. „Touchen“, Ziehen, Zoomen und Anzeigen Ihrer Website in Hoch-und Querformat wird für mobile Websites relevant. Touchscreens brauchen touchable Websites!
11. Vertikales Scrollen statt Paging
Das vertikale Scrollen auf touchable Smartphones und Pads regt durchaus das Nachdenken über andere Scrolling-Formen an. Es könnte sich auch für künftige Websites als Trend herausstellen.
12. 3D-Elemente und Videos
erhalten durch HTML5 vermehrt Einzug in Websites jeder Art. Ein Trend, durch 3D-Techniken mehr Tiefenwahrnehmung auf Websites zu erhalten, ist ersichtlich. Neue Dimension auf der Website unterstreichen z.B. wichtige Informationen, während andere Elemente temporär abgeschwächt werden, um nicht von diesen Informationen abzulenken.
13. QR-Codes
unterstützen die Vermittlung von Webinhalten und -Adressen und einen weiteren Trend, die Near Field Communication
14. Single Page Websites
Hier wird der gesamte Inhalt auf einer einzigen Webseite zur Verfügung gestellt. Der Benutzer erreicht Inhalte entweder durch Scrollen und/oder durch eine Navigation.
15. Social Media Integrationn bzw. Vernetzung
Große Unternehmen haben schon lange nicht mehr nur eine einzigen Webseite. Blogs, Facebook Pages, Apps und meist ein Intranet gehören oft zum Online-Portfolio.
Damit diese Auftritte nicht einzelne Baustellen bleiben, wird es zunehmend wichtig, ganzheitliche Online-Strategien zu entwickeln.
16. «Sozial, lokal, mobil»
Quellen:
1. http://webdesignledger.com/tips/web-design-trends-in-2012
2. http://www.ibrows.ch/blog-read/items/web-trends-2012.html
3. http://www.netzwelt.de/news/80040_2-webstandards-web-ohne-flash-moeglich.html
4. http://t3n.de/news/mega-trends-2012-sagen-experten-354708/
5. http://www.webdesignshock.com/design-trends-for-2011/
6. http://www.gdi.ch/de/news/der-neue-social-ism
Interessante Links:
http://www.lunarlogic.com/blog/2011/09/07/web-design-trends-2012
http://print24.com/de/blog/2011/10/erstaunliche-webdesign-trends-fur-2012-2/
http://www.mergeweb.com/blog/2011/07/13/why-future-web-design-important-your-business
http://www.bestpsdtohtml.com/4-web-design-trends-you-should-adopt-by-2012/
http://blog.hudsonhorizons.com/Article/7-Innovative-Trends-in-Web-Design-for-2012.htm