Ein Web Design, das direkt hineinzieht

Ich bin malwieder über eine äußerst gelungene Website gestolpert, über die es eindeutig wert ist zu reden: die Website von Everpost. Eine schöne Nutzerführung, ein buntes visuelles Design und viele Animationen bieten ein geniales Nutzererlebnis.

Visual Design

Wir werden als erstes von einem zentralen Element begrüßt, das uns die buchstäblich die Wartezeit überbrückt und kommuniziert: eine minimalistische Uhr mit den Zeigern in den Corporate Farben des Unternehmens. Diese Uhr begegnet uns weitergehend immer wieder beim Navigieren durch die Website.

Die Überleitung zur Startseite, besser gesagt dem Startscreen, ist nahtlos und sehr angenehm. Wir finden uns in einem 360°-Panorama-Slider wieder, der uns einige (bewegte) Ausschnitte der Videoproduktionen des Unternehmens anteasert.

Farblich sticht die Seite mit einer schrillen lila Hauptfarbe ins Auge, buchstäblich. Da Everpost ihr Logo in einem Verlauf dieser Hauptfarbe getaucht haben, macht das ja auch Sinn. Das Farbschema wird konsequent über die gesamte Seite verwendet und ist stellenweise sehr abenteuerlich, aber ziemlich cool, angewandt worden.

Extra Scroll-Bereich im ersten Screen

Was sofort auffällt, nachdem man dem eigenen Scroll-Instinkt nachgibt: Man scrollt zunächst im Startscreen die Inhalte des 360°-Sliders entlang, währenddessen drei kurze Statements eingeblendet werden, die uns erklären, was das Unternehmen überhaupt macht. Das Ganze ist klar auf den Punkt gebracht und ziemlich gut getextet.

Sobald wir scrollen, läuft die Uhr weiter und zeigt uns stets an, wie weit der Scroll-Bereich dieses ersten Screens noch läuft. Haben wir diesen ersten Bereich durchgescrollt, geht es mit dem normalen Scroll nach unten auf der Startseite weiter.

Großzügige Content-Sections mit teils eigener Navigation

Wenn man weiter runterscrollt, wird einem klar, dass es sich bei der Website um eine One-Page-Lösung handelt. Alle Inhalte, die wir über das Hauptmenü oben erreichen können, führen uns dementsprechend zu den jeweiligen Content-Sections auf der Website. In der mobilen Ansicht verzichtet Everpost darauf, eben diese Sektionen auf der Startseite nochmal in einem Hamburger-Menü zu verstecken, sondern bietet hier nur den Blog an, der in beiden Ansichten eine eigene Seite darstellt. Natürlich darf an der Stelle auch nicht das Ziel der Seite fehlen: ein Button, um bezüglich eines eigenen Projektes Kontakt aufzunehmen. Damit sind sie auch UX-technisch gut beraten, da wir bereits in diesem Artikel erfahren haben, dass versteckte Menüinhalte eher negative Einflüsse auf die Nutzer und deren User Experience haben. Zudem scrollt man mobil sowieso automatisch nach unten.

Eine Sektion hat beim Scrollen nach unten sogar eine in sich geschlossene zusätzliche Navigation. Zur Beschreibung, wie die Abläufe eines Projekts verlaufen, werden diese Arbeitsschritte sehr großzügig als eigene Sektionen dargestellt, die jeweils einen Bereich in einem kleinen Side-Menu links haben. Hierüber können wir direkt zu den jeweiligen Schritten springen, wenn wir wollen. Begleitet werden diese Schritte, und auch so ziemlich alle anderen Sektionen der Website, durch kleine CSS-Animationen, die die Inhalte weitergehend beschreiben. Dadurch bleibt alles spannend und man versteht die Inhalte beim Durchscrollen schneller.

Scroll-Ebenen und Off-Grid

Beim weiteren Scrollen nach unten gibt es zahlreiche Sektionen, die wie ein Portfolio diverse Projekte anteasern und als Videos sichtbar machen. Was dabei auffällt ist, dass hier mit mehreren grafischen Ebenen gearbeitet wird. Hinter dem Video befindet sich ab und zu etwas, z.B. ein Schriftzug, der sich langsamer mitscrollt als die Hauptebene (also das Video). Über allem liegt dann die Schriftebene, wo sich Headlines und Beschreibungstexte finden. Alle Ebenen scrollen unterschiedlich schnell, was gerne mal als Parallax-Effekt bezeichnet wird. Dadurch entsteht der Eindruck von Tiefe und trägt allgemein zu einem schönen Gesamtbild bei.

Durch das parallaxische (das Wort gibt‘s bestimmt) Scrollen ergibt sich automatisch (und das scheint auch definitiv Absicht zu sein) ein Off-Grid-Design für die Schriftebene. Diese ist immer etwas off, also daneben. Das ist einer der vielen Web Design Trends für das Jahr 2020, den wir uns hier bereits näher angeschaut haben. Zugegeben nicht mein Lieblingstrend, aber durch die Scroll-Mechanik bringt sich das Off-Grid-Design hier tatsächlich organisch ein und wirkt nicht so zwanghaft wie in einigen statischen Beispielen. Allerdings folgt weiter unten die Testimonial-Sektion der Website, in der das Off-Grid auch statisch eingesetzt wird.

Usability & Verständlichkeit

In Punkto Design überzeugt die Website von Everpost mit schrillen Farben und sehr großzügiger Typographie. Wie sieht es aber mit der Handhabbarkeit aus?

One-Page-Lösung par Excellence

Ich bin kein Fan von One-Page-Websites, sofern diese zwanghaft wirklich alles auf eine Seite pressen. Everpost verzichtet allerdings darauf, den Blog mit auf die One-Page-Seite aufzunehmen und entschied sich hier definitiv richtig.

Der Clou, warum mir die One-Page-Umsetzung von Everpost sehr gefällt ist, dass er spielerisch funktioniert. Man scrollt automatisch nach unten und wundert sich zunächst, warum sich der 360°-Slider dreht. Die sich bewegende Uhr hilft aber sofort dabei zu verstehen, dass wir bereits scrollen und es gleich auch weitergeht, sobald die Uhr eine volle Umdrehung hinter sich gebracht hat. Sektion für Sektion unterscheidet sich die Gestaltung voneinander und bietet visuelle Anreize dafür, dass man versteht wie der jeweilige Bereich funktioniert. Durch Icons und sogar sektionsabhängige Navigation bleibt der Scroll nach unten spannend und interessant.

Das einzige potenzielle Problem das ich hier sehe ist gleichzeitig ein Punkt, den ich bereits als positiv beschrieben habe: der erste Screen mit dem 360°-Slider. Da sich dieser durch Scrollen horizontal bewegt, kann das einige Nutzer sicher verwirren und irritieren. Auch hierfür stellt die Website aber eine einfache Lösung dar: Die Hauptnavigation lässt uns auf die jeweiligen Sektionen weiterspringen. Falls ich also nicht verstanden habe, dass ich nach dem 360°-Slider weiter nach unten scrollen kann, klicke ich wahrscheinlich auf einen der Punkte im Hauptmenü und komme trotz anfänglicher Irritation weiter.

Technik & Performance

Die Seite läuft trotz der vielen Animationen und Videoeinbindungen sehr flüssig und stabil. Allerdings dauert das erste Laden der Seite etwas länger als bei weniger aufwändigen Seiten. Das ist dennoch noch in einem guten Rahmen und lohnt sich.

Dass die Seite so flüssig läuft, verdankt Everpost auch dem Einsatz von CSS-Animationen anstatt von Minivideos oder ähnlichem. So umschifft man elegant große Dateigrößen der Animationen und bindet sie direkt im Code ein.

Auch mobil ist die Seite ein gut funktionierender Hingucker, der für kleine Geräte ebenso optimiert ist.

Was können wir für uns mitnehmen?

Everpost zeigt uns mit ihrer Website auf, was man aus One-Page-Websites herausholen kann. Diese Punkte können wir von deren Auftritt für unsere Arbeit mitnehmen:

 

Mikrointeraktionen und Minianimationen

Die Seite ist gespickt mit kleinen Animationen, die die textlichen Komponenten visuell aufbereiten und leichter verständlich machen.

 

Individuelle Navigation und Interaktions-Fallbacks

Per Scroll eine horizontale Animation (im 360°-Slider) auszulösen ist etwas Besonderes, ist spannend und macht Lust auf mehr. Allerdings kann das viele Leute auch irritieren, weil man es eben nicht gewohnt ist, zur Seite zu scrollen oder etwas zur Seite zu bewegen. Daher macht ein vertrauter zweiter Weg in jedem Fall Sinn: die schnöde Hauptnavigation.

 

(Malwieder) Bewegung, Bewegung, Bewegung

Wiedermal ein Web Design Trend 2019/20, der sich bewahrheitet hat und uns immer wieder begegnet: Bewegung und Animation. Alles auf der Website von Everpost bewegt sich. Elemente bewegen sich selbst, Sektionen bewegen sich beim Scrollen parallaxisch, der Start-Screen bewegt sich. Man kommt einfach nichtmehr um Bewegtbildanteil im Web herum.

 

Extreme Farbgebung und große Texte

Was mir zunehmend auf vielen Webseiten auffällt ist der Einsatz von sehr großen Schriften und schrillen Farben. Das Beispiel hier schreit einem förmlich ins Gesicht. Die Farben machen die Webseite sehr aufregend und besonders, weil sie auch sehr großflächig und auf mehreren Ebenen gleichzeitig eingesetzt werden, abwechselnd mit Sektionen, die mehr Weißanteil haben.

 

Die großen Schriftgrößen machen auch sehr viel Sinn: man konzentriert sich darauf, die zentralen Aussagen einzubauen und wenig drum herum zu quatschen. Dadurch braucht es nicht viel mehr Platz für viel Text und man liest mittlerweile ja nicht gerne viel. Gleichzeitig wird man als potenzieller Kunde von Everpost auch an die Hand genommen und bekommt ganz minimalistisch den Ablauf der Projekte erklärt. Also beim nächsten Projekt mal nochmal die Texte checken: brauchen wir das alles oder kann noch was weg?

Neueste Artikel
Kommentare

Schreibe einen Kommentar

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