Der Jänner neigt sich schon fast dem Ende zu, aber wir wagen trotzdem noch einen Blick in die Webdesign-Trends des neuen Jahres.
Wir prognostizieren: 2011 werden die Grenzen zwischen Designer und Entwickler noch wesentlich mehr verschwimmen. Es reicht nicht mehr, nur schöne Designs zu produzieren, sie müssen auch gute Funktionen bieten. Informationsdesign ist schon länger unser Motto, aber mit HTML5 und CSS3 kann man dieses noch mehr in den Vordergrund rücken.
Statt von schönen Photoshopkreationen für einen kurzen Moment geblendet zu sein, sollen die User in ein Umfeld bzw. in eine Story hineingezogen werden, in dem sie kein Bedürfnis verspüren, den „Zurück“-Knopf oder „schliessen“ zu drücken. Dazu gibt es ein paar ausschlaggebende Faktoren, wie die Verwendung von stimmigen Farbschemata, das Erstellen eines intuitiven und interaktivem! Designs, einfache Informationsaufbereitung und schnelle Reaktionszeiten. Kombatibilität steht an erster Stelle. Kein Browser sollte vernachlässigt werden, kein aktueller Flashplayer soll im Weg sein, aber auch keine Einschränkungen auf welchem Device die Webseite aufgerufen wird.
Wenn man es in einem einzigen Wort sagen müsste: Einfachheit.
Das Design muss auf den unterschiedlichsten Endgeräten schnell, sicher und verständlich funktionieren.
Mehr CSS3 und HTML5
2011 wird das endlich Jahr von CSS3 und HTML5. Flash als einzige Programmiersprache für eine animierte oder interaktive Website hat ausgedient, denn viele der neuen Plattformen (nicht nur iPhones) können damit schwerlich bedient werden.
Der Aufschwung von HTML5 bedeutet aber nicht, dass Flash vollständig verschwinden wird – die beiden ergänzen sich eher, als das sie sich aufheben. Für uns ist klar: Speziell eingesetzt, kann Flash durchaus seine Vorteile haben -speziell im Games Bereich – und HTML5 kann noch nicht gänzlich alle Designelemente von Flash gleichwertig nachbauen. Wobei dies nur eine Frage der Zeit ist, wenn man sich folgende Website zu Gemüte führt: http://www.makeuseof.com/tag/html5games-directory-flashfree-browser-based-games/ Hier gibt es ein Directory von reinen HTML Spielen (flash-free!;)
Um einiges mehr als seine Vorgänger kann CSS3 – es macht kurzen Prozess mit Textschatten, Abrundungen bei Blöcken und Bild-Transparenz und ist deshalb eines der wichtigsten Designfortschritte 2011.
Übrigens hat HTML5 vom W3C ein Logo spendiert bekommen 😉
Mobile
Dieses Thema wird 2011 noch wichtiger werden: Das Design muss auf unterschiedlichen Plattformen verwendbar sein. Als Webdesigner reicht es nicht für die mobile Seite, einfach alle komplizierten interaktiven Details wegzulassen – das kann sie recht schnell leer wirken lassen. Allzu sehr sieht man derzeit fertige Moblie-Plugins im Einsatz. Mit CSS3 kann man hier bereits sehr viel mehr erreichen, prinzipiell sollte man aber eine Seite aber von Anfang an so konzipieren, dass sie auch mit Smartphones oder Tablets jederzeit abrufbar und bedienbar ist. Viel mehr noch sollten die Vorteile von Mobile Devices bei Webseiten genützt werden. Stichwort: Geodaten, Touchscreen, QR Codes
Wir haben hier besonders Sencha als Framework im Fokus, denn dieses setzt auf Webstandards und bedient auch Android. http://www.sencha.com/
QR-Codes
Diese Technologie geistert schon länger in den kreativen Köpfen herum, 2011 scheint sie nun endlich aus dem Schatten zu treten. Grund dafür ist natürlich die vermehrte mobile Nutzung von Websiten: Man kann die Codes zum Beispiel verwenden, damit User schnell auf die mobile Version wechseln können. Oder sie einsetzen, um Besucher mit einem speziellen Referral-Code auf der URL mitzutracken. Oder den Code als Gravatar für einen Kommentar auf Blogs etc. nutzen. Marketingideen geben wir hier nicht preis oder nur gegen Kohle 😉
Design für Touch Screens
Nicht zuletzt durch iPhone und iPad sind wir daran gewöhnt, taktil zu arbeiten. Daran muss auch das Design angepasst werden: Statt Links durch darüberstreichen anzuzeigen oder Drop-Down-Menüs einzubauen, muss man sich neue Navigationselemente für den Touch-Screen überlegen.
In diesem Zusammenhang stellt sich natürlich auch die Frage, wie User sich eine Seite ansehen: Auch wenn es für den Standard-Webgebrauch schwierig ist, horizontales Scrollen kann für Touchscreens durchaus Sinn machen – man denke zum Beispiel an bestimmte Magazine im iPad-Format.
Nicht zu vergessen ist in Folge dessen auch die Flexibilität des Layouts: Wenn User in Sekundenschnelle von horizontal auf vertikale Sicht umschalten können, muss das dazugehörige Design flexibel sein. Über Bildschirmauflösung wird dann schon lange nicht mehr geredet.
Vertikales Scrollen statt Paging
Seit Ewigkeiten besteht die Diskussion ob bei langen Inhalten ein Paging sinnvoll ist oder doch lieber lange Designs zum vertikalem Scrollen. Wir haben vor kurzem eine Umfrage dazu getätigt: https://liechtenecker.at/scrollen-vs-klicken/. Hier hat sich herausgestellt, dass die absolute Mehrheit mehr Usability im Scrollen sieht. Denn neue Ladezeiten verzögern den Surf-Flow und die Inhalte erschließen sich nicht gleich auf den ersten Blick. Zusammengefasst: Weil es einfach von der Hand geht und wesentlich komfortabler ist! Ergänzend gehen trendige Screendesigner ganz groß in diese Richtung.
Thumbnail-Design
Dieser Trend hat einmal nichts mit Apple zu tun, sondern mit Google: Wenn man mit der Suchmaschine unterwegs ist, muss man nicht mehr auf den Link klicken, um die Webseite zu sehen – es reicht ein Click auf die Vorschau. Nachdem bereits nahezu jeder Mensch auf der Welt weiß, wie man googelt, sollte man diesen Fehler nicht machen – der erste Eindruck zählt bekanntlich am meisten.
3D Kino
Der 3D-Trend aus dem Kino macht natürlich auch vor dem Webdesign nicht Halt. Technisch ist der Effekt natürlich nicht möglich, aber dennoch kann man sich die Tiefe durch Design-Tricks auf die Seite holen.
Einfache Farbschemata
Wie schon vorher angesprochen: Simplicity is King. Wer jetzt aber bei der Farbgestaltung nur an weiß, schwarz und Grauschattierungen denkt, liegt falsch. Stattdessen sollte man sich mit sogar stärkeren Farben spielen. Wichtig dabei ist, die Farbpalette auf zwei bis drei Farben zu minimieren, sonst wird es zu bunt.(Das ist auch nix Neues natürlich) Am besten schaut es aus, wenn man die Schattierungen dieser zwei Farben von hell bis dunkel gut ausspielt und bestens in Kontrast setzt.
Fotos als Hintergrund
Die Verwendung von großformatigen Fotos oder Bildern als Hintergrund wird 2011 noch weiter ansteigen. Sie sind ein einfacher Weg, um das Interesse und besonders Emotionen des Webseitenbesuchers zu wecken. Aber Achtung: Die Bilder müssen immer kontextbezogen sein, sonst wird es schnell verwirrend. Bzw. gehören die Bilder besonders trickreich eingesetzt (mit Verläufen und Pattern) Am besten man verwendet sanfte und leicht transparente Bilder, die mit dem Inhalt harmonieren und kombiniert diese mit der gesamten Farbpalette der Site.
Illustrationen
Illustrationen waren schon 2010 ein deutlicher Trend, besonders in Headern. Um die User Experience zu steigern, werden diese vermehrt im Kontext verwendet. Maskottchen spielen auch bei Webanwendungen oder Apps eine sehr wichtige Rolle wie man hier sehen kann. http://d-lists.co.uk/2011/01/25/web-design-mascot-showcase/
Typografie
Vorbei sind die Zeiten wo Tahoma, Arial oder Verdana regieren. Man kann durch verschiedene Technologien andere Schriftarten für Headlines oder zum Beispiel Claims einsetzen. Dadurch ist die Verwendung von Schriften auch fürs Design immer mehr in den Vordergrund gerückt.
360 Grad – Social Media Integration und ganzheitliche Strategien
Unternehmen bewegen online sich schon lange nicht mehr nur auf einer einzigen Webseite. Es gibt dort einen Blog, da eine Facebook Page und vielleicht auch ein Intranet. Damit diese Auftritte nicht einzelne Baustellen sind ist es wichtig ganzheitliche Online Strategien zu entwickeln wo jeder dieser Kanäle eine Rolle spielt. Welche Ziele werden verfolgt, Redaktionspläne, welcher Kanal ist die Basis, sind hier die wichtigen Fragen. Ein (roter) Designfaden sollte sich durch alle Kanäle ziehen um die Identifikation zu haben.
Fazit
Man könnte noch ewig darüber weiterschreiben, aber dies wären die wichtigsten Tendenzen die mir eingefallen sind. Wenn euch noch etwas eingefallen ist oder ihr anderer Meinung seid, bin ich natürlich offen und die Kommentare sind es auch.
