Wenn das Web Design nur so vor Charme strotzt

Auf der Suche nach Inspiration komme ich immer wieder bei Websites vorbei, die mich mit einzelnen kleinen Ideen verblüffen. Manchmal aber stoße ich so auf Gesamtkunstwerke, die ich gerne hier ein wenig vorstellen möchte. Das erste Beispiel einer inspirierenden Seite ist die preisgekrönte Seite von Hello Monday.

Vorab: Schaut die Seite unbedingt mal auf dem Desktop an! Hier finden sich Perlen des Interaktionsdesigns, die auf dem Smartphone so leider nicht rüberkommen können.

Visual Design

Die visuelle Gestaltung ist der Inbegriff von Minimalismus und gleichzeitig mit ausreichend Informationen ausgestattet, um den User neugierig zu machen. Dabei kommt es auf die Präsentation an: das, was wichtig ist, bewegt sich und sticht heraus. Eine nette grafische Animation in schwarz-weiß erzählt direkt, worum es auf der Seite geht: um ein Creative Studio. Drumherum wird sehr viel Weißraum gegeben, um den Fokus und die Sogwirkung der Animation zu verstärken. Selbst der beschreibende Text unter der Animation ist animiert und macht alles noch dynamischer und sympathischer. Unter diesem Text findet sich noch ein Scroll-Indikator, der durch flüssig nach unten animierte Punkte den Weg zum Content weist.

Die Seiten sind alle in einem Drittel-Raster gestaltet, wovon der Content oftmals in 2/3-Spalten präsentiert wird und in der ersten Drittelspalte eingeleitet und strukturiert wird. Dadurch entsteht ein Eindruck einer Printpublikation, der sehr clean wirkt und auch sehr übersichtlich ist.

Animationen, die einzigartig sind

Was diese Seite für mich so besonders macht ist der innovative Einsatz von Animationen, die aufgrund der Interaktion entstehen. Viele Elemente reagieren auf den Mauscursor. Es wirkt, als würde der Cursor die Elemente verdrängen, wie ein gleichgepolter Magnet oder Luft in einem Wasserballon. Alles wirkt dadurch sehr organisch, flüssig und lebendig. Dieser Effekt ist beim Menü am rechten Bildschirmrand und an den Bildern des Portfolios zu bestaunen.

Der Cursor verändert sich zu einem Strichmännchen-Gesicht, wenn wir über ein Portfolio-Element länger stehen bleiben. Die Standbilder der Elemente werden beim Hover zudem mit bewegten Animationen ausgetauscht bzw. ergänzt. Die ganze Seite wird in irgendeiner Form ständig bewegt. Wichtig dabei: nicht die ganze Zeit, sondern aufgrund unserer Interaktion wird hier animiert.

Usability & Verständlichkeit

Ganz dezent wird beim Laden der Seite dem Nutzer, nur für eine Sekunde, so etwas wie ein kurzes Tutorial gegeben, wie die Seite funktioniert. Nur für eine Sekunde wird durch die Lade-Animation hier der Tipp gegeben, dass das Menü rechts in der Mitte ist. Die Animation verflüssigt den schwarzen Hintergrund-Blob des Menüs und wischt ihn zunächst über den gesamten Screen. Es lenkt das Auge also zuerst nach rechts und ich weiß als Nutzer sofort: Aha, wenn ich navigieren will, ist das Menü rechts. Sofort im nächsten Moment erscheint die charmante Animation in der Mitte und erklärt, worum es eigentlich geht. Durch den bereits angesprochenen Scroll-Indikator weiß ich als Nutzer auch direkt, dass es nach unten weitergeht.

An den richtigen Stellen wird auf Animationen verzichtet

Auch wenn der Mauscursor zahlreiche Animationen auslöst, bleibt der Text (z.B. bei den Portfolio-Titeln) immer lesbar und verändert sich nicht. Im Gegenteil: beim Hovern über ein Portfolio-Element wird auch noch ein Punkt neben dem Text eingeblendet, wodurch ich noch stärker sehe, worauf ich gerade meinen Fokus gelegt habe.

UI Elemente der Website von Hello Monday werden bei Hover stark animiert
Die Maus verdrängt alle Bildflächen wie ein gleichgepolter Magnet.

Das Menü als Ankerpunkt

Das Menü rechts interagiert ebenfalls mit den anderen Bildern und verdrängt diese mit dem „Magneteffekt“. Dessen schwarzer Hintergrund führt dazu, dass das Menü immer wichtig und präsent bleibt, egal was im Rest des Bildschirms vor sich geht.

UI Elemente auf der Website von Hello Monday interagieren miteinander
Das Menü rechts verdrängt ebenfalls andere Bildelemente.

Es wird auch in der Desktop-Version auf ein Burger-Menü gesetzt. Das ist in diesem Fall äußert gut gelungen, da der Nutzer durch die bereits erwähnten Animationen und kleinen Tutorials schnell an die Hand genommen wird.

 

Beim Klick auf den Burger wird ein Fullscreen-Overlay eingesetzt. Hier werden alle Optionen klar kommuniziert. Auch das Öffnen des Menüs wird, wie bereits anfangs gesehen, flüssig animiert: Die schwarze Masse vergrößert sich und stellt den Inhalt des Menüs dar. Der Button zum Schließen des Menüs wird jetzt in der selben Form in Weiß dargestellt, was verdeutlicht, dass ich so wieder zurück zum „weißen Bereich“, also dem Content-Bereich kommen kann. So wurde auch ein Farbsystem (Schwarz / Weiß) eingeführt, dass die Nutzer zusätzlich verortet.

Technik & Performance

Bei all der Animation funktioniert die Seite erstaunlicherweise performant und lädt sehr schnell. Im Chrome hatte ich tatsächlich kurzzeitig eine höhere PC-Auslastung nur wegen der Website, wahrscheinlich wegen den vielen Animationen, die parallel ablaufen und grafische Prozesse auslösen.

Mobil leider nur als Light-Variante

Auf Tablet und Smartphone verliert die Seite leider vieles ihres Interaktionsdesigns. Das ist auch logisch, da wir auf mobilen Geräten keinen Hover-Zustand verwenden können. Dadurch fallen alle Animationen, die durch den Mauscursor ausgelöst werden, weg.

 

Bestehen bleibt allerdings das sekundenschnelle „Tutorial“, die Animation und die Nutzerführung im ersten Screen. Das funktioniert alles trotzdem sehr gut.

Videos, die beim Hover in der Desktopversion abgespielt wurden, werden mobil einfach zusätzlich ausgegeben. Allerdings nur, wenn ich mich auf die jeweilige Unterseite durchgeklickt habe. Das ist die beste Art, dieses Problem zu lösen und völlig legitim.

 

Eine kleine Kompensation der wegfallenden Animationen wurde dennoch eingebaut: Elemente in den Portfolios werden in der Smartphone-Variante in zwei Spalten ausgegeben und unterschiedlich schnell gescrollt. Dadurch entsteht eine Tiefenwirkung und bietet wieder eine Besonderheit, die man nicht so oft sieht.

 

Weiter beibehalten ist aber die Animation der flüssigen organischen Elemente, die wir vom Menü kennen. Diese werden hier als Seitenübergänge eingesetzt, wodurch es so wirkt, als ob die angeklickte Seite von unten (oder sonst wo) hineingeflossen kommt.

Was können wir für uns mitnehmen?

Vier Punkte können wir von der Website von Hello Monday für unsere eigene Arbeit lernen:

 

Mikrointeraktionen

Durch Animationen, die durch die Interaktion des Nutzers ausgelöst werden, kann eine Sogwirkung entstehen, die neugierig und Lust auf mehr macht.

 

Nutzerführung

Durch Animationen können Nutzer gezielt geführt werden, indem wichtige Elemente auffällig in den Screen hineinbewegt werden oder einfach in bestimmte Richtungen deuten. Zudem helfen starke Kontraste zwischen Content-Bereich (weiß) und Navigationselementen (schwarz) dabei, alle Optionen ständig klar verständlich zu halten.

 

Bewegung, Bewegung, Bewegung

Wir haben 2019 und 2020 immer wieder vom Web Design Trend des Film-Contents gelesen. Da die Ladezeiten ebenfalls enorm wichtig sind, sind solche kleinen Animationen und kleinere Bewegtbild-Inhalte eine ideale Ausführung davon. Sie regen zum Anklicken der jeweiligen Elemente an, machen Spaß anzuschauen und die ganze Seite wirkt dadurch sehr lebendig.

 

Individuelle Illustrationen

Selbst erstellte Illustrationen und deren Animation sind ebenfalls ein großer Design Trend des Jahres 2019 und in diesem Beispiel genial umgesetzt. Ich für meinen Teil kann isometrische Illustrationen oder irgendwelche halbherzigen Strichmännchen nichtmehr sehen, in diesem Beispiel gefällt mir es aber sehr gut, da es mit der flüssigen Darstellung der restlichen Seite sehr gut zusammenpasst und ein rundes Gesamtbild erschafft.

Neueste Artikel
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.