Ella & Oskar – Responsive Webauftritt mit dynamischer Nutzererfahrung

25.08.2023

Über dieses Projekt

Für den Concept Store „Ella & Oskar“ in Grächen habe ich den Webauftritt mit dem indualCMS technisch umgesetzt. Im Fokus standen Animationen zur Aufwertung der Nutzererfahrung, ein vollständig responsives Layout trotz bewusst offenem Designkonzept, sowie die gezielte Optimierung des Titelbildes und der Logo-Darstellung für alle Gerätegrössen und Farbhintergründe.

Projekt ansehen

Animationen für lebendige Interaktion

Gezielte Bewegungen für Bilder und Elemente

Für die Webseite wurden gezielte Animationen auf Bilder, Textcontainer und andere UI-Elemente angewendet. Diese sorgen für ein lebendigeres Nutzergefühl und machen die Seitenstruktur beim Scrollen und Navigieren dynamischer.

Responsives Design trotz freier Struktur

Anpassung an alle Bildschirmgrössen

Das Layout wurde so umgesetzt, dass es sich flexibel an unterschiedliche Viewports anpasst – trotz der offenen, nicht-rasterbasierten Gestaltung. Alle Inhalte, vom Shop bis zum Menü, bleiben funktional und zugänglich auf Mobile, Tablet und Desktop.

Responsives Design trotz freier Struktur

Zugeschnittenes Titelbild für alle Viewports

Shop bleibt immer sichtbar

Das Titelbild wurde so bearbeitet, dass der Shop-Bereich in jeder Bildschirmdimension gut sichtbar bleibt – egal ob mobil im Hochformat oder im Desktop-Modus. Der Bildausschnitt wurde dazu mehrfach getestet und final optimiert.

Zugeschnittenes Titelbild für alle Viewports

Logo-Optimierung für wechselnde Hintergründe

Sichtbarkeit auch auf hellem Untergrund

Damit das Logo auf allen Seiten gut lesbar bleibt – auch auf weissem Hintergrund – wurde es grafisch angepasst und mit Techniken wie Schatten oder invertierter Variante hinterlegt. So bleibt die Lesbarkeit stets erhalten.

CMS-Integration mit indualCMS

Technische Umsetzung im internen System

Die gesamte Seite wurde mit dem indualCMS aufgebaut. Dadurch ist die Pflege der Inhalte modular möglich. Alle Komponenten – vom Bild über Navigation bis zu Animationen – wurden innerhalb dieses Systems umgesetzt und konfiguriert.

Projektabschluss

Technische Learnings aus der Umsetzung

Dieses Projekt erforderte viel Feingefühl im Bereich Responsive Design bei freier visueller Gestaltung. Besonders anspruchsvoll waren die Animationen in Kombination mit responsivem Verhalten sowie die Anpassung der Medien (Logo, Titelbild) für verschiedene Kontraste und Viewports.

Zurück zur Projektübersicht