Neugestaltung der Hotel-Webseite

Für das Hotel Spieß & Spieß habe ich mit meinem damaligen Team die Webseite von Grund auf neugestaltet. Wir haben eine neue Typographie, Bild-Sprache und Grafik-Elemente wie Buttons, Icons etc. überlegt, um die Seite modern und frisch zu gestalten.

Kunde
Hotel SPIESS & SPIESS Wien
Leistungen
CI-/CD-Erstellung, Icon-Design, Webdesign, technische Umsetzung, MODX, Wartung
Datum
2017
Bereich
Hotellerie

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 alte Design der Webseite des Hotels.

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
Am Anfang war die Typographie

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.

Ein bisschen Verspieltheit in den grafischen Elementen für Überschriften oder andere Auszeichnungen war uns wichtig.
Auch bei den Buttons versuchten wir ein bisschen Dynamik hineinzubringen. Durch Hover-Animationen sollte der Kunde das Gefühl des Eintretens bekommen.

Micro-Interactions und Iconography

Micro-Interactions machen die Seite interaktiver und überraschen den Nutzer.

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.

Leichte Animationen sorgen beim Scrollen für ein angenehmes Entdeckungsgefühl.

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 sehr eindeutigen Icons vermitteln die Raumanzahl, Fläche, Bettenanzahl und andere speziellen Features des Zimmertyps möglichst logisch und universal.

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.

Das aufgeräumte und moderne Backend von MODX ist in vielen Dingen deutlich flexibler und bedienerfreundlicher als das Backend von WordPress.

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.

Die Eigenschaften der verschiedenen Räume ist einfach im Backend einzeln einzugeben.

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äß.

Weitere Kundenbeispiele

(Noch) keine weiteren Kundeprojekte gefunden.