DANIELA MIESBAUER | ZUHAUSE WAR ICH SCHON
Home > Gestaltungsprinzipien > Animationen
Animationen
Die Seite wird mit Preloader geladen, der zu Beginn eine kleine Animation zeigt, bei der ein Backpacker um die Welt spaziert.
Das soll gleich zu Beginn verdeutlichen, welches Thema den Besucher erwartet.
Allerdings wird dieser Preloader nur beim ersten Laden der Seite angezeigt, damit er nicht durch ständiges Auftauchen störend wirkt. Alle Folgeseiten werden mit unauffälligem Text-Preloader geladen, der den Ladezustand in Prozent anzeigt. Er ist sichtbar, damit der Benutzer sehen kann, wie weit die Seite schon geladen wurde, falls seine Internetverbindung nicht optimal ist.
Navigation und Inhalte werden in Form eines Overlays ausgefahren.
Die Navigation fährt selbständig wieder ein, während der Inhalt-Overlay per Klick individuell aus- und eingeklappt werden kann.
Das Aus- und einfahren der Overlays ist sinnvoll, um Seitenelemente ausblenden zu können, wenn man sie nicht benötigt.
Die Collagenelemente werden über einen Elastic-Tween zeitversetzt geladen. Das unterstützt die Wirkung einer Szene, denn wie auf einer Bühne werden die „Darsteller“ in die Szene gesetzt. Durch den elastischen Tween ist die Webseite immer in Bewegung und lebendig. Ein starres Bild würde nicht zum aktiven Reisen passen. Und um immer wieder ein bisschen Bewegung zu haben, bewegt sich zusätzlich ein Hintergrundelement beim Klick auf die Text-Buttons zum Laden der Texte.
Im Bereich „Ziel“ ist außerdem eine kleine Diashow zu sehen, die die Zielländer zeigt, die dem jeweiligen Typen vorgeschlagen werden.
Konzept Thema Zielgruppe
Navigationsstruktur Seitenstruktur Buttons
Designentwicklung Entwürfe Wireframes
Gestaltungsprinzipen Farbwelt Bildwelt Collagenaufbau Collagenmotive Piktogramme Typografie Animationen