Animiertes Design.

Haben Sie die großartigen Animationen auf den Global Forest Watch-Themenseiten gesehen? Wir möchten Ihnen mitteilen, wie und warum wir sie hergestellt haben. Es war ein Prozess, der Kunst, Wissenschaft und Technologie zu einem faszinierenden Einstiegspunkt für die Datenexploration zusammenführte.

Den Weg zum Wissen öffnen.

Waldverlust ist ein komplexes Thema. Der Versuch, alles auf einmal zu verstehen, kann überwältigend sein. Um den erstmaligen Besuchern der Global Forest Watch-Website mehr über die Entwaldung zu erfahren und sie auf dem Weg zu einer unabhängigen Datenermittlung anzuleiten, wollten wir eine Einführung entwerfen, die nicht nur gut aussieht, sondern wissenschaftlich verankert ist und auf jedem Gerät angezeigt werden kann.

Animation ist eine großartige Möglichkeit, um Menschen in neue oder komplexe Themen einzuführen, da die bewegten Bilder ansprechender und einprägsamer sind als die stillen. Es gibt jedoch ein paar Dinge, die Sie beachten müssen, wenn Sie darüber nachdenken, es zu verwenden. Ich bat Estefanía Casal, die Designerin der Animationen, mir mehr über den Prozess zu erzählen.

Legen Sie Ihre Ziele fest.

Als Estefanía anfing, ihre Animationen zu entwerfen, hatte sie drei Dinge im Sinn.

  1. Einfachheit. Die Animationen müssen ein Einstiegspunkt für Leute sein, die keine Forstfachleute sind.
    1. Repräsentant: Die Animationen müssen mehr als nur hübsch sein, sie müssen eine getreue Repräsentation der Themen sein.
    2. Leistung: Die Animationen müssen auf jedem Gerät angezeigt und verwendet werden können, unabhängig von Verarbeitungsleistung oder Bandbreite.
    3. Einfachheit.

      Gutes Design sollte eine Person von den Daten oder Erkenntnissen, die Sie mit ihnen teilen möchten, ansprechen, nicht ablenken. In diesem Sinne entschied Estefanía, dass der Stil ihrer Entwürfe sowohl den minimalistischen Stil als auch die getreue Darstellung der Realität in Einklang bringen musste. Nach einigen Recherchen und Gesprächen mit ihren Designerkollegen entschied sie sich für die Verwendung der isometrischen Projektion, einer Methode zur visuellen Darstellung dreidimensionaler Objekte in zwei Dimensionen. Mit diesem Ansatz könnte Estefanía den Animationen Tiefe verleihen und die dargestellten Szenarien realistischer erscheinen lassen.

      Mit der isometrischen Projektion können Sie 3D-Objekte in 2D darstellen.

      Um dem Global Forest Watch-Team am World Resources Institute zu zeigen, was sie vorhatte, teilte Estefanía ihnen einige Skizzen mit, die sie auf ihrem iPad erstellt hatte. Obwohl grundlegend, haben diese vorläufigen Entwürfe einige großartige Rückmeldungen ausgelöst, die sich auf die Konstruktion der beweglichen Teile auswirkten. Wenn Sie frühzeitig Feedback erhalten, können Sie auf lange Sicht viel Zeit sparen, da das Anpassen einer Skizze einfacher ist als das Ändern einer mehrschichtigen Animation.

      Estefanias Originalskizzen, mit denen sie ihre Ideen teilte und Feedback erhielt.

      Vertreter.

      Auch wenn ihre Animationen einen minimalistischen Stil haben, hat Estefanía bei der Auswahl der Elemente, die in den einzelnen Elementen enthalten sein sollen, dennoch sorgfältig vorgegangen. Alles in der Animation muss einen Zweck haben. Wenn es für die Geschichte, die erzählt wird, nicht wesentlich ist, wird es nicht einbezogen. Zum Beispiel machen Wolken eine Zeichnung vielleicht schöner, aber wenn sie nicht Teil der Erzählung sind, werden sie von Estefanía nicht hinzugefügt.

      Bei der Entscheidung, welche Art von Wald in jeder ihrer Animationen dargestellt werden soll, sprach Estefanía mit Ben und Enrique, zwei unserer Wissenschaftler. Sie zeigten ihre Bilder von Regenwäldern, Mangroven und Plantagen und erklärten, was passiert, wenn Wälder für die Landwirtschaft oder Stadterweiterung gerodet werden. Mit diesen Informationen könnte sie die dramatischen Veränderungen skizzieren, die bei der Entwaldung auftreten, und ein paar kleine Details hinzufügen, die ihren Animationen Charakter verleihen, wie z. B. eine tropische rote Blume oder Stützpfeilerwurzeln.

      Die rote Blume in dieser Szene ist eine Anspielung auf echte Blumen im Regenwald.

      Einer von Estefanias Lieblingsmomenten des Projekts war es, einen Baumstamm in den Fluss fallen zu lassen. Die Leute hatten ihr erzählt, dass die Animationen sie an Videospiele erinnerten, die normalerweise sehr ansprechend sind, und sie baute auf dieser Idee auf. Als Estefanía den Fall des Baumes sah, bemerkte sie, dass sie ihr Ziel erreicht hatte und fand einen interessanten Weg, um den Waldverlust zu visualisieren.

      Estefanía wollte, dass ihre Illustrationen ein Videospielcharakter haben.

      Die in den Animationen verwendeten Farben sind nicht nur repräsentativ für die realen Ereignisse, die bei Waldverlust auftreten, sondern spiegeln auch die Marke Global Forest Watch wider. Die Grüns passen zur Farbpalette der Marke und fügen sich nahtlos in das Erscheinungsbild der Plattform ein. Es ist eine subtile Berührung, die wesentlich dazu beiträgt, eine Marke zu stärken und eine schönere Erfahrung zu schaffen.

      Performance.

      Die Ästhetik sollte eine gute Benutzeroberfläche nicht beeinträchtigen. Daher sind Animationen nur dann gut, wenn die Benutzer sie anzeigen können, ohne dass ihre Telefone abstürzen oder die Fans ihres Laptops in den Schnellgang geraten. Um den besten Ansatz zu finden, sprach Estefanía mit Ed, einem unserer Entwickler.

      Animationen können in einer Vielzahl von Formaten auf dem Bildschirm platziert werden, aber aufgrund der Komplexität der Animationen und der Anzahl der bewegten Bilder (Knoten), die ein Video oder ein GIF verwenden, wäre dies sehr groß. Wir wollten auch in der Lage sein, reibungslos zwischen den einzelnen Animationen für ein bestimmtes Thema zu wechseln. Dies bedeutet, dass wir alle vier Animationen gleichzeitig laden müssen. Am Ende würden Sie 100 MB Bilddateien für jedes Thema anfordern. Dies ist unrealistisch, wenn Sie möchten, dass die Benutzer ein reibungsloses Erlebnis haben, das nicht abstürzt.

      Was ist die Lösung? Eine beliebte Methode für Animationen ist die Verwendung von skalierbaren Vektorgrafiken (SVGs) zum dynamischen Zeichnen auf dem Bildschirm. Anstatt ein schweres Bild zu laden, können Sie stattdessen das Bild zeichnen. Mit einem Plugin namens BodyMovin für Adobe After Effects können Sie die SVG-Datei in eine JSON-Datei exportieren, die Verweise zum Zeichnen der Animation enthält. Das Beste ist, dass Sie als Designer diesen Schritt selbst ausführen können und sich nicht darauf verlassen müssen, dass ein Entwickler dies für Sie erledigt.

      Ed verwendete dann eine nette Bibliothek von Airbnb namens Lottie, um den JSON zu nehmen und dynamisch geloopte SVGs zu rendern. Normalerweise wird diese Methode für einfache Animationen verwendet, z. B. zum Verschieben von Symbolen oder Logos. In unserem Fall mussten wir jedoch manchmal Millionen komplexer Knoten mit hoher Detailgenauigkeit verschieben. Estefanía musste die Komplexität der Animationen reduzieren, damit Lottie nicht nervös wurde. Ein weiterer Grund, Wolken nicht einzuschließen, wenn sie für die Geschichte nicht wesentlich sind.

      Jeder Teil der sich bewegenden pfeilartigen Formen (die CO2 darstellen) ist ein Element, das bewegt werden muss. Wenn Sie zu viele hinzufügen, wird Ihre Animation unruhig.

      Der resultierende JSON-Code war 50 KB groß und im Vergleich zu einem Video winzig. Dies ermöglichte uns eine sehr helle Seite mit vollständiger Kontrolle darüber, wo wir die Animationen zeigen. Sie können den Code auf unserem GitHub überprüfen, wenn Sie daran interessiert sind, selbst so etwas zu tun.

      Es braucht ein Team, um eine Animation zu machen.

      Alles, was Sie auf Ihrem Bildschirm sehen, ist das Ergebnis der Zusammenarbeit. Auch diesen Blog liest du gerade. Wenn Sie verschiedene Fähigkeiten zusammenbringen und als ein Team zusammenarbeiten, können Sie die besten Erfahrungen für Menschen machen, die mehr über unsere Welt erfahren möchten.

      Wir bei Vizzuality erweitern den Mix aus Designern, Forschern und Entwicklern um Wissenschaftler, um sicherzustellen, dass die Daten das Design bestimmen. Wenn wir Menschen mit unseren Designs inspirieren und Neugierde wecken können, schaffen wir die Möglichkeit, dass jemand mithilfe von Global Forest Watch-Daten Entscheidungen trifft, die gut für unseren Planeten sind.