Flexible Darstellung

Eine flexible Illustration ist eine Illustration, die sich in Abhängigkeit vom Browser, in dem das Bild angezeigt wird, transformiert und neu zusammensetzt.

Warum eine flexible Illustration machen:

  • Es kann eine dynamische Erfahrung beim Betrachten der Abbildung in verschiedenen Browsergrößen erstellen
    • Handyfreundlich: Konsistente Interaktion zwischen Desktop und Handy.
    • Bei der Erstellung einer flexiblen Illustration gelten weiterhin die Prinzipien des Designs wie Farbe, Wiederholung, Form und Raum. In dieser Demonstration werde ich mich auf die Kriterien einer flexiblen Illustration konzentrieren: Identität und Rhythmus in der Komposition. Diese Richtlinien unter Einbeziehung der Gestaltungsprinzipien sind der Schlüssel für eine erfolgreiche, flexible Illustration.

      Das Beispiel, das ich verwenden werde, stammt von einer App namens The Broken Radio Puzzle, die ein flexibles Bild bietet, wenn sie auf einem Handy angezeigt wird. Schauen Sie sich die App an, spielen Sie mit dem Browser und sehen Sie zu, wie er sich in einem mobilfreundlichen Zustand neu zusammensetzt!

      https://vimeo.com/user98599319/review/336657825/e7f4d78ac0

      Ein paar Dinge zu beachten, bevor ich anfange:

      • Broken Radio Puzzle, das ich entworfen habe, ist ein interaktives Puzzle, bei dem Benutzer die Sequenz richtig lösen müssen, um das Radio zu reparieren.
      • Die Illustration, die ich benutze, ist nicht statisch
        • Was ich spreche, sind nur Richtlinien und keine festen Regeln.
        • Identität

          Das Design muss dem Benutzer mitteilen, dass alles, was sich in etwas verwandelt, sofort als dieselbe Abbildung erkannt werden muss. Der gesamte Stil, die Farbe, die Form und die erkennbaren Merkmale müssen im transformierten Zustand beibehalten werden.

          (Denken Sie an einen Führerschein, der ein Foto, ein Geschlecht, eine Größe, eine Unterschrift usw. enthält. Dies sind Parameter zur Identifizierung der Person. Wenn eine dieser Beschreibungen nicht übereinstimmt, ist sie nicht mehr dieselbe Person.)

          Wir können den Stil der Illustration nicht drastisch ändern, da sich dadurch die Identität des Bildes ändert. Sobald sich die Identität ändert, handelt es sich um zwei völlig unterschiedliche Abbildungen und nicht um eine flexible Einzelabbildung.

          Einige Schlüsselaspekte einer Illustration zur Wahrung der Identität:

          • Farbpalette
          • Strichstärke
            • Gestalten
            • Textur
            • Platz
            • die Ausführung des Illustrators (Der Signaturstil des Illustrators / Designers)
            • Rhythmus in der Komposition

              Die Art und Weise, wie ein Benutzer die Abbildung liest, sollte dem gleichen Ablauf und Rhythmus wie im Originalzustand folgen. Wenn in der Abbildung eine Sequenz von links nach rechts angezeigt wird, sollte der Fluss in einer vertikalen Komposition von oben nach unten angezeigt werden. Dies ist besonders bei Abbildungen wichtig, die Interaktivität mit dem Benutzer erfordern.

              Nebenbemerkung: Abhängig davon, wie es sich letztendlich im transformierten Zustand zusammensetzt, können sich Rhythmus und Fluss ändern. Beispielsweise erfordert ein quadratisches Bild normalerweise eine zentrierte Komposition und weist möglicherweise nicht dieselbe Hierarchie wie eine vertikale oder horizontale Komposition auf.

              In diesem Radiobeispiel muss der Benutzer mit den Schaltern interagieren, um das Puzzle zu vervollständigen. Beachten Sie, wie ich die Schalter genau so gruppiert habe, wie sie im Ausgangszustand gruppiert waren. Wenn diese Schalter anders angeordnet wären, würde dies den Ablauf der Sequenzen verändern und den Benutzer möglicherweise verwirren, wenn er dieses Spiel sowohl auf dem Desktop als auch auf dem Handy spielen würde.

              Mobile Version des Broken Radio-Puzzles im Anfangsmenü- und im Startstatus

              Abschließende Gedanken

              Flexible Illustrationen sind eine großartige Möglichkeit, Bildern auf dem Weg vom Desktop zum Mobilgerät dynamisch ein einzigartiges Benutzererlebnis zu verleihen. Es kann manchmal schwierig sein, aber gleichzeitig Spaß zu machen, eine Illustration auf derselben Webseite in verschiedene Kompositionen umzuwandeln. Diese Richtlinien zum Erstellen flexibler Illustrationen sind eine großartige Möglichkeit, Designer dazu zu bringen, mit der Erstellung von Illustrationen zu beginnen. Bei jeder Art von Kunst liegt es jedoch in der Natur der Künstler, die Regeln zu verstehen und zu brechen, um etwas wirklich Einzigartiges zu schaffen. Verwenden Sie diese Richtlinien nur als Richtlinien, aber nicht als gebundenes Regelwerk. Erforschen Sie die verschiedenen Abstraktionen von Illustrationen und spielen Sie mit verschiedenen Medienabfragen.