Wir kennen Katzen meistens aus der heimischen Wohnung, doch Katzen sind auch wilde Tiere, die in der Natur leben. Ihre Lebensräume sind zwar stark eingeschränkt, wenn sie jedoch in die Natur zurückkehren, bedeutet das eine Renaturierung und Verbesserung der Biodiversität. Es fördert die Artenvielfalt und trägt viel zur Klimastabilität bei. Der BUND begleitet diese Prozesse und bietet auf seiner Website wichtige Hintergrundinformationen zu diesem Thema.
Das Projekt
PROJEKT
PROJEKT
Der BUND (Bund für Umwelt und Naturschutz Deutschland e. V.) wurde 1975 in Marktheidenfeld gegründet. Er setzt sich für Natur- und Umweltschutz ein und wird von mehr als 674000 Menschen unterstützt. Etwa 2000 ehrenamtliche Gruppen engagieren sich deutschlandweit für ökologische Landwirtschaft, Klimaschutz und den Schutz bedrohter Arten. Der BUND finanziert sich durch Mitgliedsbeiträge und Spenden und ist unabhängig von Politik und Wirtschaft.
Mit interaktiven Illustrationen ist es möglich, Technik und Kreativität zu verbinden; der BUND suchte nach einer Digitalagentur, die genau diese spezifische Symbiose bietet. Die Illustration bekamen wir dieses Mal direkt vom Kunden. Unser Animationsstudio sollte passende Mikroanimationen auf der Illustration ausführen und im professionellen Webdesign galt es, klickbare Punkte zu setzen, um im Ergebnis einen einladenden Gamification-Effekt zu erzielen.
Das Konzept
KONZEPT
KONZEPT
Um die zehn Punkte auf der Illustration als Klick-Animation zu nutzen, animierten wir im Motion Design zunächst einzelne Tiere mit After Effects und schufen Klick-Elemente. Wenn Besucher draufklicken, öffnen sich informative Overlays mit Audio-Option, die auch für die Barrierefreiheit von Bedeutung ist.
Das Ergebnis
Ergebnis
Ergebnis
Für die verspielte interaktive Illustration verwendete unser Full-Stack-Webentwickler funktionsstarkes JavaScript, mit dem er eine Image-Map entwickelte. Die Punkte platzierte er auf einer Achse im Backend, womit die anklickbaren Punkte nun im Frontend sichtbar und nutzbar wurden.
Großes Bild und kleiner Viewport? – Eines der Probleme, die unser Full-Stack-Designer löste, war die Darstellung der Illustration auf einem Smartphone oder Tablet. Als Ganzes wäre sie auf dem Bildschirm viel zu klein. Aus diesem Grund entschieden wir uns, sie heranzuzoomen und mit mehreren Ebenen zu arbeiten. Diese verschieben sich nahtlos gegeneinander, ohne die Usability zu beeinträchtigen, und führen die Besucher zum nächsten Klick.
Das Fazit
FAZIT
FAZIT
Naturschutzverbände und Umweltorganisationen benötigen viel Ausdauer, Kreativität und Witz, um im Konzert der Mächtigen ihren Platz zu behaupten. Wir unterstützen den BUND ebenso wie viele andere gemeinnützige Organisationen. Das hängt mit unserem Bedürfnis nach Gerechtigkeit zusammen und dem Ziel, die Welt jeden Tag ein wenig besser zu machen. Für den BUND gelang es uns, statische in interaktive Illustrationen zu verwandeln, die nicht nur sehenswert sind, sondern nützliches Wissen vermitteln.
Keine Lust mehr auf statische Grafiken und Bilder? – Wir pushen deine Projekte mit interaktiven Illustrationen!
Tel.: +49 30 40045775
