Alle guten Dinge sind drei
Die Hotel-Webseite von Spieß & Spieß war eines meiner allerersten Projekte. Damals hatte ich gerade mit WordPress begonnen zu arbeiten und dementsprechend waren dann auch die Altlasten, die sich bereits in der WordPress-Webseite angesammelt hatten. Dazwischen gab es einen "Soft-Relaunch" 2015. Also insgesamt war dies nun schon der dritte Relaunch der Webseite.
Hier ein Screenshot von dem damaligen Design:
Das neue Konzept
Quick Info: Das Design habe ich mit meiner damaligen Grafikerin Kerstin Brüller (jetzt selbst Freelancerin) erstellt. Sie ist eine ausgezeichnete Print- und Online-Grafikerin als schau mal auf ihrer Webseite vorbei: tineller.me
Die richtige Typographie ist elementar wichtig
Wir begannen mit der Wahl der Schriften. Wir wollten ein bisschen etwas Boldes gepaart mit einer leichten Font. Für grafische Elemente wie Buttons oder auch Überschriften, wählten wir einen modernen und magazin-ähnlichen Design-Ansatz. Es sollte ein bisschen verspielt wirken, jedoch nicht zu viel.
Micro-Interactions und Iconography
Für mich waren kleine Animationen und Micro-Interactions wichtig, um den Nutzer einzuladen, die verschiedenen Räume und Seiten des Hotels zu entdecken.
Es sollte so ein bisschen der spielerische Charakter gefördert werden, was sich in den kleinen Button-Animationen und auch in den Lade-Animationen der Seiteninhalte wiederfindet.
Diese sind auch einfach im Backend zu wählen, damit auch für neue Seiten flexibel gewählt werden kann, welche Animation nun abspielen soll.
Die Icons waren ebenfalls sehr wichtig. Da die Seite von Gästen aus aller Welt gesehen wird, war es ein bisschen eine Herausforderung, alle Icons zu gestalten, welche wir für die Features der verschiedenen Räume benötigten.
Die Navigation durch die Seite
Auch die generelle Navigation durch die Seite war von extrem hoher Wichtigkeit, da es für den Nutzer möglichst einfach sein sollte, die verschiedenen Raumtypen zu sehen und auch andere Informationen zur Anreise, Zusatzangeboten oder Kontaktmöglichkeiten zu finden.
Dabei war vor allem auch das mobile Navigationskonzept wichtig. Zuerst sollte es jederzeit einfach möglich sein, zu buchen. Dies wurde mit einem Buchen-Link, welcher links oben in der Navigation ist realisiert. Auch ein Anruf sollte einfach möglich sein, was mittels Floating-Button, der in der Nähe des rechten Daumens platziert und daher einfach zum Anwählen ist, umgesetzt.
Auch das Menü ist für Touch-Interfaces optimiert und bietet Untermenüpunkte als horizontal "swipendes" Menü an.
Generell bin ich nach wie vor sehr zufrieden mit der technischen sowie UX-Umsetzung der Navigation auf der Seite.
Schön von vorne - aber auch von hinten
Was mir zudem immer sehr wichtig ist, ist dass die Bedienbarkeit der Webseite auch für den Editor, also den Webseitenadministrator einfach zu bedienen und zu erweitern ist. Als CMS kam MODX zum Einsatz. Dieses ist logisch im Backend aufgebaut und die Eingabe der Zimmer-Features, sowie das eigentliche Content-Management ist auch für Laien einfach zu verstehen.
Eine noch so schöne Webseite kann im Endeffekt dann extrem unpraktisch zu editieren, was dann spätestens bei den ersten notwendigen Änderungen an der Website zu großen Problem führen kann.
Auch die Raumeigenschaften sollten einfach zu warten sein. Die verschiedenen Eigenschaften die der Administrator wählt entscheiden dann, welche Icons, Fotos und Bezeichnungen bei dem jeweiligen Raum angezeigt werden.
Natürlich ist die Seite auch multilingual und auch die Übersetzung funktioniert mittels Plugin in MODX besonders einfach und performant - noch ein Vorteil von MODX vs. WordPress, welches erst durch unzählige Plugins und Optimisierungen eine gute Seitenperformance ermöglicht.
Zeitloses Design bleibt lange modern
Die Seite ist seit Mitte 2017 online und das aktuelle Design zeigt keinerlei Alterserscheinungen. Ganz im Gegenteil - Custom Icons, weiche Schatten und breite Bilder sind heute so modern wie schon lange nicht mehr. Somit bleibt die Seite hoffentlich auch noch die nächsten Jahre modern und zeitgemäß.
