Unsere Leistungen

Webdesign

Webseiten, Landingpages und Online Shops

SEO

Werde auf Google & Co. gefunden

Online Shops

Verkaufe online und erziele mehr Umsatz

Marketing

Mache dein Unternehmen sichtbar

Werbeanzeigen

auf Google, Meta, LinkedIn und mehr

UX/UI Design

Layout deiner App oder deine Saas-Projekts

Bildbearbeitung

Hole das Maximum aus deinen Bildern

Corporate Identity

Aufbau deiner Marken-Identität

Logodesign

Egal ob es das Erste oder ein neues wird

Satz & Layout

Satz von Büchern & Magazinen

eBooks & Reports

Satz von digitalen Büchern

Printdesign

Flyer, Broschüren, Visitenkarten und mehr

Illustrationen

Kreation von Grafiken

Mehr von uns

Termin buchen

Buche einen Termin bei uns

Unverbindlich & komplett kostenlos.
Besprich dein Projekt mit uns und lass dich von uns beraten.

Animierte Logos als Preloader für die Webseiten der Klinik St. Elisabeth

Ladezeiten reduzieren und dem Kunden einen angenehmen Übergang zur Startseite ermöglichen

Im Rahmen des Grafikabos für Patient21 wurden wir beauftragt, individuelle Landingpages für eine Reihe von medizinischen Praxen zu erstellen. Ein zentrales Element dieses Projekts war die Entwicklung und Animation der Logos jeder Praxis, um einen starken ersten Eindruck zu schaffen und die Markenidentität effektiv zu kommunizieren.

Die Gestaltung der Animation erfolgte durch die Animation der Logos mit Adobe Animate. Wir zerlegten jedes Logo in Einzelframes, um eine Animation zu kreieren, die den Effekt einer „Schreibbewegung“ simuliert. Diese ansprechende und kreative Herangehensweise führte zu einer dynamischen Darstellung, die die Besucher unmittelbar beim Betreten der Landingpage in den Bann zieht.

Der Preloader hat die Funktion, die Ladezeit der Webseite effektiv zu reduzieren und dem Kunden direkt und subtil die Firmensprache zu kommunizieren. 

Animierte Preloader für Hausärztliches Zentrum in Heidelberg

Projekt Übersicht

Branche des Kunden: Krankenhaus

Projekt-Bereich: Digital Design

Kunde seit: 2023

Projekt-Tags: Grafikabo | Klinik | Logoanimation

Unsere Leistung

  • Animation der Logos mit Adobe Animate
  • Integration der GIF-Dateien auf den Webseiten mit Divi Pixel
  • Optimierung der Geschwindigkeit und Ladezeiten

Kunden Stimme

Einfach wieder genial! Die Animationen kommen auf den Webseiten mega gut an und zeigt direkt das sich der Kunde auf der richtigen Webseite befindet.

Projektablauf

Animation
Export
Integration

Animation der Preloader

Für die Gestaltung des Preloaders auf der Webseite haben wir das Logo mit Adobe Animate bearbeitet, um eine einzigartige Animation zu erstellen. Wir teilten das Logo in einzelne Frames auf, wodurch die Animation die Illusion erweckt, als würde das Logo in einer fließenden, handschriftlichen Bewegung entstehen. Diese kreative Herangehensweise verleiht der Seite ein dynamisches Element und fesselt die Aufmerksamkeit der Nutzer, während sie auf das Laden der Inhalte warten.

Adobe Animate gibt die Möglichkeit, schnell und effektiv diese Logos zu bearbeiten. 

Export als *.gif – Datei

Nachdem wir die Animation des Logos in Adobe Animate fertiggestellt hatten, haben wir den nächsten Schritt unternommen, um es als GIF-Datei zu exportieren. Dieser Prozess beinhaltete die Anpassung der Einstellungen für die optimale Balance zwischen Bildqualität und Dateigröße, um sicherzustellen, dass das GIF schnell lädt, ohne die Ladezeit der Webseite negativ zu beeinflussen. Wir wählten eine Frame-Rate, die die Flüssigkeit der Animation beibehält, während sie gleichzeitig auf die Anforderungen der Webperformance abgestimmt ist. Das resultierende animierte GIF wurde dann in den Preloader der Webseite integriert, um den Besuchern eine visuell ansprechende Erfahrung zu bieten, während sie auf den vollständigen Seitenaufbau warten.

Upload in WordPress mit Divi Pixel

Anschließend haben wir das exportierte GIF in das Tool Divi Pixel hochgeladen, um es als Preloader für die Webseite zu implementieren. Divi Pixel bietet eine benutzerfreundliche Oberfläche, die es uns ermöglichte, das GIF problemlos zu integrieren und feinabzustimmen. Besondere Aufmerksamkeit widmeten wir der Anpassung der Abspielgeschwindigkeit, um sicherzustellen, dass die Animation harmonisch und ansprechend für die Webseitenbesucher erscheint. Durch sorgfältige Tests und Anpassungen konnten wir die optimale Geschwindigkeit ermitteln, die die Aufmerksamkeit der Nutzer auf sich zieht, ohne dabei aufdringlich zu wirken.

Animierte Logos als Preloader für die Webseiten der Klinik St. Elisabeth
Animierte Logos als Preloader für die Webseiten der Klinik St. Elisabeth
Animierte Logos als Preloader für die Webseiten der Klinik St. Elisabeth
Animierte Logos als Preloader für die Webseiten der Klinik St. Elisabeth

Was genau ist ein Preloader und welche Funktion hat er?

Ein Preloader zeigt eine Animation über den gesamten Bildschirm an, solange die Webseite im Hintergrund geladen wird. Diese Animation verschwindet erst, wenn alle Webseitenelemente geladen sind und der Nutzer die Seite vollständig nutzen kann. Oft dauert dies nur einen Augenblick, bevor das Ladelement die Sicht auf die Webseite freigibt. Auch wenn ein Preloader das Laden der Seite nicht beschleunigt, verhindert er dennoch das Auftreten von unerwünschten visuellen Störungen während des Ladeprozesses.

Einfache Formen von solchen Animationen umfassen rotierende Symbole oder Fortschrittsbalken, die signalisieren, dass die Webseite noch im Aufbau ist. Diese können leicht mit HTML und CSS erstellt werden, ohne dass zusätzliche Bilder oder Videos durch spezielle Software erforderlich sind.

Noch ansprechender sind allerdings diese Lade-Animationen, die in einem einzigartigen Design gestaltet sind. Diese werden typischerweise als GIF oder Video mit Hilfe von fortgeschrittenen Grafik- und Videobearbeitungsprogrammen erstellt.

Stefan Munz Profilbild
Du möchtest dein Projekt mit uns angehen?

Buche jetzt deinen Termin mit dem
Bad Wolf Team

Lass uns über dein Projekt sprechen und wie wir dich optimal betreuen können!

R

100% kostenlos und unverbindlich

R

Erfahre wie wir arbeiten

R

Lerne unser Team persönlich kennen

R

Wir besprechen in einem 30 Minuten Termin dein Projekt

Animierte Logos als Preloader für die Webseiten der Klinik St. Elisabeth