by julia.steinle -

#2 EXPERIMENT: Artisan Photography in Malta

See the beauty in the “ugly” was my personal mission when I was solo traveling malta. I wanted to capture hidden aesthetics and find uncommon design perspectives on usually overseen objects.

The Experiment

The aim of this design research experiment was simple: To train my eye to recognize beauty in the mundane and challenge conventional ideas of what is considered “aesthetic” or “good design.” Rather than seeking balance, symmetry, or sleek minimalism, I was hunting for texture, irregularity, contradiction—qualities that told a story, or better yet, sparked curiosity.

My tools were: a phone camera, a sketchbook, my Canon R6MII equipped with a 24-105mm f4.0 lens, a Canon G7Xii and open time to walk (a lot) and observe.

Here are the results and learnings of my photo trip, I hope you enjoy:

Learnings of my Solo Photo Trip

1. Beauty Exists in Layers
Peeling posters, exposed bricks, and weathered doors taught me how time becomes a visual designer. These surfaces held traces of multiple eras, multiple hands, all blending into one layered narrative. Beauty, I realized, often lives in the tension between decay and resilience.

2. Function Over Form Can Still Be Beautiful
I became strangely obsessed with utility poles, air conditioning units, and construction scaffolding. These objects prioritize purpose, not polish—yet many had sculptural qualities and unexpected harmonies in proportion or rhythm. Design without trying to be “designed” can be deeply inspiring.

3. Contrast Is a Powerful Communicator
Some of the most compelling images I captured juxtaposed old with new, chaos with control, or bright with dull. These visual contrasts created a kind of friction that demanded attention—and that friction became the focal point of the composition.

4. Context Is Everything
What’s considered ugly in one setting might be beautiful in another. A crumbling wall in an abandoned village felt poetic and romantic; the same wall in a luxury resort might be considered an eyesore. The environment shifts how we perceive design.

5. Slowing Down Sharpens the Eye
Solo travel gave me the gift of stillness. Without distractions, I could truly see what was around me. I learned that “ugly” is often just “unseen.” When you take time to notice, even the most banal surfaces become visually rich.

To be honest, I found it hard to concentrate on the “ugly” when there was so much beauty that surrounded me in Gozo and Malta. I hope my observations spark something in you, too. Whether you’re a designer, photographer, or simply someone curious about the world—try taking a walk with different eyes. You might just fall in love with the “ugly,” too.

More inspiration:

by katharina.peterka -

KI-gestützte B-Roll-Erstellung: Grundlagen und Tools im Überblick

Was ist B-Roll?

In der Videoproduktion bezeichnet B-Roll alle Aufnahmen, die zusätzlich zum Hauptmaterial (A-Roll) verwendet werden. Während A-Roll z. B. ein Interview oder eine Moderation zeigt, bietet die B-Roll ergänzende visuelle Eindrücke: Detailaufnahmen, Landschaften, Arbeitsprozesse oder illustrative Bilder – einfach alles, was das gesagte im A-Roll bildlich unterstützt und verdeutlicht.

B-Roll erfüllt mehrere wichtige Aufgaben:

Visuelle Auflockerung: Monotone Einstellungen werden durch abwechslungsreiche Bilder aufgelockert.

Erzählerische Unterstützung: Komplexe Inhalte können durch Bilder und/oder Illustrationen verständlicher gemacht.

Emotionale Vertiefung: Stimmung und Atmosphäre können gezielt verstärkt werden.

Fehlerüberdeckung: Schnittfehler, inhaltliche Lücken oder typischerweise Versprecher oder Denkpausen können weggeschnitten werden und durch B-Roll kaschiert werden.

Gerade in Social Media, YouTube und Marketingvideos ist B-Roll ein wichtiges Mittel, um die Aufmerksamkeitsspanne der Zuschauer hochzuhalten.

Traditionell bedeutete B-Roll jedoch auch einen erheblichen Produktionsaufwand und/oder Kostenaifwand: Separate Drehs/mehr Drehzeit am Set, um genügend Material zu produzieren, teure Stock-Videolizenzen oder aufwendige Archiv-Recherchen waren oft notwendig. KI-Technologien können hier inzwischen eine praktische und günstige Alternative sein.

KI und B-Roll: Warum der Einsatz sinnvoll ist

Mit Hilfe von KI kann B-Roll automatisch aus Archiven zusammengestellt (z.B. eine Suchanfrage auf ChatGPT), gezielt für bestimmte Themen generiert (durch durch Bild-zu-Video-Modelle) oder sogar komplett neu erstellt werden (z.B. durch Text-zu-Video-Modellen).

Gerade für kleine Teams, Content Creator oder Low-Budget Projekte sind KI-gestützte Lösungen eine Möglichkeit, schneller und günstiger hochwertiges Zusatzmaterial zu produzieren und somit Videos besser zu machen. Vor allem wenn man die Aufmerksamkeitsspanne der Benutzer:innen in Betracht zieht, ist der Einsatz von gut abgestimmten B-Roll von großer Bedeutung.

(Quellen: https://www.yourfilm.com.au/blog/understanding-the-importance-of-b-roll-footage-in-video-production/#:~:text=Think%20of%20b%2Droll%20as,and%20variety%20to%20your%20story.

https://alecfurrier.medium.com/generative-ai-video-generation-technologies-infrastructure-and-future-outlook-ad2e28afae8c

https://filmustage.com/blog/the-future-of-ai-in-video-production-innovations-and-impacts/#:~:text=AI%20in%20video%20editing%20software,inspiring%20stories%20without%20extra%20work. )

Zwei Tools im Überblick

OpusClip

OpusClip ist ein KI-gestütztes Videobearbeitungs-Tool, das sich darauf spezialisiert hat, lange Videoformate automatisch in kurze, social-media-taugliche Clips zu verwandeln. Besonders hervorzuheben ist dabei die Fähigkeit der Plattform, zentrale Aussagen und visuelle Highlights im Ursprungsmaterial eigenständig zu erkennen und daraus eigenständige Kurzvideos zu generieren.

Die Funktionsweise basiert auf einer Kombination von Textanalyse und Bildinterpretation. OpusClip analysiert zum einen die Audiospur des hochgeladenen Videos, identifiziert Schlüsselsätze, besonders betonte Aussagen oder emotional wichtige Momente und schlägt dazu passende Schnittpunkte vor. Zum anderen berücksichtigt das Tool visuelle Anhaltspunkte wie Gestik, Mimik oder Veränderungen im Szenenbild, um passende Start- und Endpunkte für die Clips zu bestimmen.

Für die B-Roll-Erstellung spielt OpusClip insofern eine Rolle, als dass es Übergänge und Zwischenschnitte automatisch verbessern kann. Während der Clip-Erstellung werden Elemente wie Zooms, automatische Bildanpassungen oder Text-Overlays eingesetzt, um die visuelle Dynamik zu erhöhen. In neueren Versionen bietet OpusClip sogar eine direkte Integration von kurzen B-Roll-Sequenzen, etwa Naturaufnahmen oder städtische Szenen, um monotone Passagen aufzulockern.

Die Plattform richtet sich hauptsächlich an Content Creator, Marketer und Unternehmen, die Video-Content schnell für Plattformen wie TikTok, Instagram Reels oder YouTube Shorts aufbereiten wollen. Besonders vorteilhaft ist die enorme Zeitersparnis, da der komplette Analyse-, Schnitt- und teilweise B-Roll-Prozess automatisiert erfolgt. OpusClip ermöglicht außerdem die Anpassung an verschiedene Formate (16:9, 9:16, 1:1), was für Multiplattform-Strategien relevant ist.

Zusammengefasst: OpusClip ist ein leistungsstarkes Tool für schnelles Content-Repurposing. Die KI unterstützt dabei nicht nur beim Kürzen und Strukturieren, sondern kann auch visuelle Auflockerung durch einfache B-Roll-Integration bieten. Der Fokus liegt hier weniger auf hochwertiger individueller B-Roll, sondern auf Effizienz und sofortiger Publikation.

(Quelle: https://youtu.be/4mCU6HtvoAI?si=-Y60nYEQRMxDnviB
https://youtu.be/tVIFWx6KVzU?si=rLSd0Lrv2NE8OcO8 )

HailuoAI

HailuoAI verfolgt einen anderen Ansatz: Die Plattform ist darauf spezialisiert, kurze, eigenständige Videosequenzen zu generieren, die sich hervorragend als B-Roll oder visuelle Ergänzungen eignen. Nutzer geben Themen oder Stichwörter (Prompts) ein, und die KI erstellt daraufhin eigenständig passende Clips, basierend auf vorhandenen Stock-Datenbanken und KI-generierten Animationen.

Im Gegensatz zu klassischen Stock-Plattformen wird das Material bei HailuoAI dynamisch angepasst: Farbe, Stil, Geschwindigkeit und Übergänge können je nach Nutzerwunsch variiert werden. Besonders hervorzuheben ist die Benutzeroberfläche: Nach der Eingabe eines Prompts erhält man eine klare Auflistung aller generierten Videos, inklusive einer übersichtlichen Vorschau. Nutzer können die Clips bewerten, speichern oder weiterverarbeiten. Auch der verwendete Prompt wird transparent angezeigt, was bei der späteren Organisation oder Optimierung hilft.

Ein weiterer Vorteil liegt im zugänglichen Preismodell. Bereits mit einem kostenlosen Konto stehen einem zahlreiche Generierungen zur Verfügung (über ein Credit-System), bevor überhaupt ein Abonnement nötig wird. So lässt sich die Qualität des Tools umfangreich testen, ohne sofortige Verpflichtungen einzugehen.
Technisch gesehen arbeitet HailuoAI hauptsächlich mit synthetischem Footage und stockbasierten Elementen. Die Plattform ist besonders stark im Bereich atmosphärischer B-Roll: Himmel, Berge, Meereslandschaften, urbane Silhouetten oder generische Naturaufnahmen lassen sich sehr schnell und in akzeptabler Qualität erzeugen.

Ein kleiner Nachteil ist, dass nach mehreren Video-Generierungen zeitliche Sperren (Cooldowns) greifen. Manchmal muss man bis zu 20 Minuten warten, bis man neue Clips erstellen kann. Trotzdem bleibt der Prozess insgesamt intuitiv und benutzerfreundlich.

Zusammengefasst: HailuoAI ist ein flexibles Werkzeug für die Erstellung von B-Roll-Sequenzen auf Basis von Themenvorgaben. Im Vergleich zu OpusClip geht es hier weniger um die Bearbeitung von bestehendem Material, sondern um die Neuschaffung von visuellem Content, ideal für atmosphärische Ergänzungen und kreative Gestaltung.

(Quelle: https://youtu.be/CqWulzM-EMw?si=LCYfXD_AWSKGNbKY https://youtu.be/DuRHup2QxtI?si=7AZkooXp5_gotnLH https://hailuoai.video )

by katharina.peterka -

Einsatz von KI zur Erstellung von Visuals für VJing – Erfahrungen beim Generate25 Festival

Für unseren VJing-Einsatz am 23.05.2025 beim Generate25 Festival wollten wir visuell neue Wege gehen. Dabei entschieden wir uns, den Einsatz von KI für die Erstellung unserer Visuals zu testen – genauer gesagt, nutzten wir das Video-KI-Modell Sora von OpenAI. Unser Ziel war es, visuelle Clips zu erzeugen, die sich ästhetisch klar vom Mainstream abheben: rau, kontrastreich, lo-fi.

Erste Versuche – ein rauer Start

Im ersten Schritt versuchten wir, unseren gewünschten Look möglichst offen und flexibel über einen Prompt zu definieren:

„The videos / black & white / very low framerate or image series, random ubahn, city lights, random dancen, Blurry and grainy“

Sora generierte daraufhin zweii Videos. Das erste wirkte zunächst recht vielversprechend und wurde in die erste Auswahl der Clips aufgenommen – später allerdings wieder aussortiert. Das zweite Video zeigte deutliche Schwächen: typisch für KI-Generationen waren hier eigenartige Bewegungsabläufe zu sehen, etwa eine „Person“, die unnatürlich an einem Auto entlanglief, völlig losgelöst von realen Bewegungsmustern.

Anpassung durch Inspo-Upload

Im nächsten Schritt versuchten wir, durch den Upload eines Inspirationsvideos und denselben Prompt bessere Ergebnisse zu erzielen. Auch hier wurden zwei neue Clips erstellt, die jedoch weiterhin stark unter KI-typischen Artefakten litten: Bewegungen wirkten seltsam verzerrt, die Bildkompositionen fehlten an Authentizität.

Um die Richtung zu verändern, passten wir den Prompt an:

„A black and white Video of a night-Life Scene in very low framerate. High contrast, very grainy and shakey with motion blur. You see Teenager dancing thourgh the street.“

Das Ergebnis: Videos, die eher an Kobolde als an tanzende Jugendliche erinnerten. Zusätzlich trat ein Problem bei den Bildformaten auf: Ein weißer und schwarzer Rand machte das Video eher quadratisch (1:1), anstatt das gewünschte 9:16-Format einzuhalten.

weiteren Versuch mit surrealen Motiven:

„A black and white Video of a night-Life Scene in very low framerate. High contrast, very grainy and shakey with motion blur. You see closeup of someone eating a cigarette.“

Selbst nach mehrmaligen Anpassung des Prompts entstand kein zufriedenstellendes Ergebnis. Auffällig war hier, dass trotz „starkem Remix“-Befehl die hochgeladene Inspiration nahezu 1:1 nachgebaut wurde, statt neue kreative Varianten zu schaffen. Auch die erhoffte surreale Stimmuug kam nicht so intensiv rüber wie gewünscht.

“A close-up shot of a person slowly eating a cigarette. The footage is extremely high contrast, very grainy, with intense motion blur and camera shake. Shot in a gritty, lo-fi style reminiscent of vintage handheld film cameras. Harsh lighting flickers subtly as the person chews. The cigarette ash crumbles with every bite. The camera moves erratically, creating a surreal and uncomfortable mood. No sound.”

Richtungswechsel – Fokussierung auf Overlays

Da die Clip-Erstellung mit menschlichen Motiven nicht die gewünschte Qualität brachte, wechselten wir den Ansatz: Wir setzten auf die Erstellung von Overlays für die Visuals.

Inspiration war ein fortlaufender Code, ähnlich wie in typischen Hacker-Szenen. Der Prompt lautete:

„full screen, black background, white random numbers, looks like a code generator, numbers move in waves vom right to left out of the screen, endless flow“

Das Ergebnis: Drei solide Videos, die wir anschließend weiter optimierten. Mit einem angepassten Prompt (“write the code from left to right, like real written code”) schufen wir eine Version, die visuell noch näher an echten Programmcodes wirkte. Diese Overlays funktionierten im finalen VJ-Set hervorragend.

Der Prompt wurde angepasst und dieses Video erstellt, ebenfalls ein Videos, das es in die finale Auswahl schaffte:

„full screen, black background, white random numbers, looks like a code generator, numbers move in waves from right to left out of the screen, endless flow, write the code from left to right, like real written code”

Fazit:

Unser Einsatz von KI-Tools für die Erstellung von VJ-Visuals war eine spannende, aber auch lehrreiche Reise. vor allem wenn komplexe menschliche Bewegungen oder choreografierte Szenen gewünscht sind, gestaltet sich das Ganze noch recht schwierig.

Für Bewegtbilder mit Personen bleibt die KI weiterhin herausfordernd. Besonders auffällig waren dabei eigenartige Bewegungsabläufe und generelle Inkonsistenzen im physischen Verhalten von Figuren. Details wie realistische Tanzbewegungen, natürliche Interaktionen mit der Umgebung oder korrekte Anatomie stellten das Modell vor große Probleme. Auch das Einhalten von spezifischen Bildformaten oder der bewusste künstlerische Einsatz von Unschärfe, Körnung und Kamerawacklern gelang nur begrenzt.

Deutlich besser funktionierte die KI jedoch bei abstrakten oder sich wiederholenden Mustern, wie bei unseren Overlay-Experimenten. Hier konnten wir schnell ästhetisch ansprechende Ergebnisse erzielen, die unsere Shows bereicherten. Besonders angenehm: Die KI konnte hier auf Basis simpler Inputs visuelle Strukturen generieren, die sich in der Live-Performance sehr gut in den Fluss der Musik einfügen ließen.

Zusammengefasst:

  • Für reine Clips mit menschlichen Darstellungen ist der Einsatz von KI derzeit eher noch experimentell und fehleranfällig.
  • Für Overlays, Loops und abstrakte Visuals bietet KI bereits jetzt ein extrem starkes Toolset, das kreative Prozesse enorm beschleunigen und bereichern kann.

Für das künftige Projekte bleibt der Plan, reales Footage durch KI-Footage zu ersetzten und herauszufinden, wie gut dieses aufgenommen wird. Hier ist der Zugang, dass „Ausgangsmaterial“ aus den bestehenden Videos hochzuladen und KI eine idente Kopie erstellen zu lassen.

by noah.bonevie -

AI for Storyboard Creation

In my past blog posts, I discussed a lot of theoretical aspects of the treatment writing process. With that knowledge, I started taking a more hands-on approach. I tried to watch every YouTube video I could find on the topic and stumbled across the channel of Nur Niaz, a commercial director from Bangkok, Thailand, who has worked with major brands. His videos significantly helped me improve my treatment skills.

I applied his tips to my latest treatment, which I wrote for my Carhartt WIP Spec project. After receiving feedback from several people, I felt I had genuinely improved compared to my previous treatments. I also used ChatGPT to help me rephrase my sentences, and it effectively maintained the core of my ideas while refining the spelling and grammar for better flow. This further enhanced my treatment.

The idea is to send the treatment to the marketing team of Carhartt WIP and see if we can get some money or cloths to shoot the video. Therefor, In the next steps I will work out a clear storyboard. I will put different softwares, like previs ai, mid journey or Stable diffusion, in action and see which results I can generate and if it makes sense to use ai tools or if it’s more efficient to hire a storyboard artist. 

First Try with Stable Diffusion 

Quick Overview – Stable Diffusion is a text-to-image diffusion model developed by Stability AI in collaboration with researchers at LMU Munich and other partners. It generates images from textual descriptions using deep learning, particularly a latent diffusion model (LDM). Unlike earlier models, Stable Diffusion runs efficiently on consumer GPUs and allows users to create high-quality images by describing them in natural language.

Key Features:

  • Open-source and accessible.
  • Creates high-resolution, detailed images from prompts.
  • Works via “latent space” (compressed representation of images) for efficiency.
  • Supports various applications like art, concept design, photorealism, and more.
  • Can be fine-tuned or extended with custom models (e.g., for specific styles or subjects).

Since I am pretty lazy, I told Chat GPT what I want to generate and asked to give me a prompt which I can then use in stable diffusion. The prompts looked good and I had different options to choose from 

Input to Chat GPT – hello please give me prompts for stable diffusion. I want to create a picture of a person sitting in a football like press conference. dim lights with a lot os microphones in front of him. The person should be brown skinned and and a short buzzzcut. Dressed in streetwear

Result – 

Photorealistic Style Prompt:

A brown-skinned man with a short buzzcut sitting at a football-style press conference table, dim lighting, dramatic shadows, many microphones in front of him, wearing stylish streetwear (hoodie, sneakers, chains), serious expression, blurred background with press logos, cinematic lighting –realistic –v 5 –ar 16:9 –style photographic

Cinematic / Moody Style Prompt:

A dramatic football press conference scene, brown-skinned man with buzzcut, sitting at a table under dim lights, surrounded by microphones, urban streetwear outfit, intense atmosphere, moody lighting, gritty texture, cinematic look –ar 16:9 –style cinematic –v 5

Illustration / Stylized Version:

Illustration of a press conference setting, brown-skinned man with short buzzcut, lots of microphones in front of him, wearing streetwear (oversized hoodie, gold chain), sitting under moody, low lighting, stylized background with blurred sports logos –style illustration –ar 16:9 –v 5

The given Result of stable diffusion almost nailed my initial idea for the frame.   

It shows the correct mood and core idea of the Frame. Of course it’s not the shot how It would be in the final image but for reference it works pretty well. 

With the second frame I had more issues. I had a certain picture in my head on how I want the Frame to look like and the generated pictures didn’t give me the result I wanted. 

Input to Chat GPT – 3 people standing infront of a fence at the local basketball court and watching others play. should be a frontal shot medium wide. also dressed in streetwear

Cinematic Urban Style Prompt:
Three friends in stylish streetwear facing the camera, standing in front of a fence at a neighborhood basketball court, players in the background in motion, medium wide frontal shot, soft natural lighting, urban summer vibe, detailed street textures –ar 16:9 –style cinematic –v 5

The result wasn’t really pleasing to me and I tried different prompts and also changed them myself but nothing seemed to work. Out of frustration I asked Chat GPT to generate the pictures and I was suprised by the result. 

Since the concept is still at the beginning, it makes no sense to invest time in prompting each scene when some things will still change. The next steps will be sketching the storyboard by hand using simple stick figure drawings, and once that’s finalized, prompting the images could be an idea

by alina.huft -

04_ A Little excursion – Light Art Museum Budapest  

During my stay in Budapest, I visited the Light Art Museum. I just wanted to see some different stuff and get inspired, and that is also what happened. The museum was packed with installations all around light, movement, and space. Some of them were a bit trippy and overwhelming, and some made me think differently about how to approach a project.  

One of the first installations that totally pulled me in was “Immensia” by Kati Katona. It’s this full-on 360° projection that fills the whole room and makes you feel like you’re stepping into an infinite, constantly shifting space. Shapes, colors, dimensions, and everything change. What I found super interesting was how simple the animations actually were, but because the entire room was part of it, the experience felt bigger and intense for the viewer. I realized that it’s way more powerful when the viewer gets fully wrapped into the visuals instead of just watching them from a distance.

Another piece that stayed with me was “Oh Lord” by Guillaume Marmin. It’s a project that is based on real data and images of the sun, some of them even from the 1930s, and it’s animated into this flowing, almost hypnotic video installation that uses music to make you feel even more immersed. I loved how he took something scientific and made it feel so alive. For my own project, it thought about using textures and natural movements to make my visuals feel more grounded and emotional.

Yasuhiro Chida’s installation “Analemma” was a completely different experience, but just as inspiring. His work was really delicate and the one that impressed me the most. He stretched tiny points of light through a massive grid of strings within a dark room. While you were walking through the installation, the little light spots moved. Sometimes it felt like they were racing past you, sometimes like they were standing still. What stuck with me here was how perspective changes everything. The setup itself seemed to take a lot of work, but the way the light moved was quite simple, and the feeling it created was super complex. It made me realize that I don’t need to overcomplicate things within a project; sometimes it’s about doing less but doing it right.

The final piece that I found really fascinating was “Onirica” by FUSE*. It’s based on thousands of dreams that people volunteered to describe, and then turned into flowing visual worlds through AI. Watching the dreams melt into each other without clear beginnings or endings felt weirdly emotional as you were part of a told dream story. I loved how they managed to translate something as intangible as dreams into something you can actually see and experience. It showed me that using personal or collective stories could give my own project a deeper meaning, instead of just focusing on visuals for the sake of it.

Overall, the Light Art Museum visit turned out to be way more helpful and inspiring than I expected. It gave me a lot of new ideas and inspiration on what kind of different projects can be done while “only” using the light as a source.  I’m thinking a lot more now about using organic movements, playing with perspective, and keeping transitions as fluid as possible. 

by julia.hechtl -

Sustainable Microdecisions – Reducing Waste in UI Design

Introduction

Sustainable design is often associated with big-picture strategies, green hosting, carbon-efficient code, or minimalistic interfaces. However, small decisions at the UI level can also contribute meaningfully to lowering environmental impact. In this entry, I will test how minor visual and structural choices, such as omitting unnecessary elements or optimizing screen content, can reduce energy consumption and improve clarity.

The Power of Microefficiency

UI designers often overlook the cumulative cost of “small” visual choices. But these design patterns appear thousands of times across devices. Think about a simple time display on a phone:

Do we need to show “09:00” or is “9:00” sufficient?

Real-World Examples

  1. Typography in Clocks & Timers
    • Removing leading zeroes (e.g. 09 → 9) can reduce pixel rendering, especially with high-resolution custom fonts.
    • On OLED screens, fewer illuminated pixels = lower energy use (Jedlicka, 2009).
  2. Battery & Network Icons
    • Using low-complexity vector icons vs. bitmap sprites saves data and rendering effort.
    • Minimal animation or refresh frequency can reduce processor load (Dougherty, 2008).
  3. Compact UI Layouts
    • Removing redundant visual elements (shadows, gradients, unnecessary labels) lowers energy load, especially in dark mode (Birkeland, 2002).
  4. Reduced Decimal Precision
    • Showing “Battery: 75%” is clearer and less data-heavy than “75.23%” without functional loss.

Exercise: Sustainable UI Redesign

Step 1 – Choosing a Device Interface

For this practical exploration, I selected a common element of mobile design: the status bar. This small UI component is constantly visible, yet often contains visual elements that add unnecessary weight, visually and digitally. The goal: Test how simplifying the UI can contribute to sustainable design with minimal effort.

Step 2 – Identifying “Unnecessary Visuals”

Typical status bars often include:

  • Leading zeros (e.g., 09:00)
  • AM/PM indicators (in regions using 12-hour format)
  • Custom fonts loaded via the web (adds bandwidth)
  • Visual effects such as shadows or gradients
  • Colorful icons that increase rendering effort

Each of these elements, while small, can be optimized or removed entirely for a more efficient interface, especially when used at scale.

Step 3 – Redesign

Original Status Bar – Typical Implementation

This version mimics the kind of default or overly styled component you’d find in many apps or UI libraries.

Optimized Version – Sustainable Redesign

This version simplifies everything: uses a system font, removes styling effects, omits redundant time formatting, and uses CSS masking for icons.

Step 4 – Test

The redesign showed a noticeable reduction in DOM size, eliminated external font loading, and improved rendering simplicity. While the savings are small in isolation, this practice scales meaningfully across larger design systems or global apps.

Conclusion

Good design doesn’t need to shout. By paying attention to microelements, we not only create cleaner interfaces but also reduce environmental impact in subtle yet scalable ways. Sustainable design isn’t always about grand gestures, it’s often in the details.

by dominik.bluemel -

02.04: Exkurs. Audioreaktivität in After Effects

Wie bereits im letzten BlogPost gezeigt habe ich in den letzten Wochen an Versuchen mit Gradients gearbeitet. Auch wenn es eigentlich nicht Teil des angestrebten Kurses ist, habe ich daraufhin viel Zeit damit verbracht diese Gradients in After Effects auf Sound und Musik hin reagieren zu lassen. Deshalb wollte ich es mir nicht nehmen lassen meine Erkenntnisse auch hier schriftlich festzuhalten. Skills sind Skills.

Im Grunde geht es in diesem Blogpost um dasselbe Projekt wie im letzten, nur nun eben audioreaktiv. Die angewandte Methode funktioniert aber natürlich gleichsam auf allen möglichen Shape Layern, nicht nur auf meinen Gradients.

Schritt 1: Audio Loopen

Um eine saubere Basis für die weiteren Schritte zu haben, empfiehlt es sich einen Loop des Audios zu machen. Das funktioniert meiner Meinung nach direkt beim Import bzw. bei den Importeinstellungen am besten. Diese findet man mit Rechtsklick auf das Audio, jedoch nicht unten in den Compositions sondern nur oben im Projektmenü. Unter “Interpret Footage” und “Main” kann man ganz unten dann die Häufigkeit einstellen mit der das Material geloopt werden soll. Damit muss man das Audio nicht mehrfach einfügen, verschieben oder irgendwie anders pfuschen.

Schritt 2: Keyframes aus dem Beat erzeugen

Zieht man sich diesen Audioloop dann in die Timeline, könnte man natürlich manuell auf Beats oder andere Änderungen Keyframes setzen und die Werte verändern, dies geht aber auch automatisch. Über Rechtsklick “Keyframe-Assistant” und “Convert Audio to Keyframes” macht After Effects nämlich genau das von selbst. Ehrlicherweise habe ich auch nach diversen Versuchen mit verschiedenen Tracks noch immer keine Ahnung auf welcher Basis After Effects das berechnet und wie diese Keyframes zustande kommen…. unterm Strich funktionierts aber und AE erstellt einem auf einer eigenen Layer drei Channels mit drei Slidern und Keyframes für jeden einzelnen Frame mit (meiner Meinung nach) zufälligen Werten, die aber bestimmt irgendwie mit Lautstärke oder ähnlichem der Musik zusammenhängen. Diese drei Slider werden nachfolgend dann verwendet um die Shapes reaktiv zu machen.

Schritt 3: Verbinden der Keyframes mit anderen Werten

In meinen Beispielen nehmen die Slider für jeden Frame einen Wert irgendwo zwischen 0 und ungefähr 60 an. In der Theorie kann man nun einfach seine Shape nehmen und den Wert seiner Wahl (z.B. scale) über das Pickwhip-Tool an den Slider linken und schon verändert sich die Größe des Objekts mit dem Beat. So einfach das klingt ist es aber leider nur selten, da die Werte-Range (wir erinnern uns 0-60) im Beispiel der Größe einfach viel zu starke Sprünge macht und das Shape so in einem Frame 0% groß ist und im nächsten vielleicht gleich 60. Daher muss man sich hier mit Expressions behelfen. Auch ist nicht immer die Größe der sinnvollste Wert, um ihn an das Audio zu linken. Daher hier meine Erfahrungen:

Welche Werte man am besten linken kann

Im Grunde bietet sich natürlich der scale am besten für die Verbindung zum Audio an, da auch wirklich jedes Objekt diesen besitzt. Neben dem scale der ganzen Layer kann hierbei zum Beispiel auch nur die Größe des Repeater Effekts (in meinem Fall) oder eines anderen Generators. Neben der Scale bieten sich aber auch einige andere Eigenschaften gut an. In meinen Tests hat zum Beispiel alles was eine “Evolution” Einstellung hat immer sehr gut mit dieser funktioniert. Sinnvoll kann aber auch ein eigener Effekt sein den man nur zu diesem Zwecke verwendet. In meinen Fällen hat da zum Beispiel “Color Balance HLS” sehr gut funktioniert um kleine Farbverschiebungen auf den Takt der Musik möglich zu machen. Hat man beispielsweise über der gesamten Compostion eine Adjustment Layer mit Effekten, kann es auch gut funktionieren diese Effekte an den Slider zu koppeln. Die Möglichkeiten sind aber natürlich grenzenlos.

Wie man sinnvolle Ergebnisse erhält

Um das oben geschilderte Problem (dass die automatisch generierten Werte der Keyframes für die verlinkte Eigenschaft einfach zu extrem sind, oder einfach keinen Sinn ergeben) muss man kreativ werden. Ich habe, um beim scale zu bleiben, meist mit einer Art Basis gearbeitet. Statt also den Scale direkt an die einzelnen Keyframes zu linken und damit extreme Schwankungen zwischen den einzelnen Frames zu haben, habe ich in den Expressions mit verschiedenen Varianten gespielt. Oft bestand die Expression dann aus der Basis (z.B. 60% scale) plus die Werte aus dem Slider. Diese habe ich dann häufig noch durch fünf oder zehn geteilt, einfach um die Auswirkungen des Sliders etwas abzuschwächen.

Fazit

Audioreaktive Animationen in After Effects sind tatsächlich leichter als gedacht. Jedoch gibt es oft keine schnelle Lösung und man muss einfach verschiedene Werte mit verschiedenen Expressions durchprobieren bis man etwas visuell ansprechendes erhält.

by magdalena.ackerl -

Was bisher geschah…

Die lieben Studienkolleg:innen, Leser:innen und vorallem Roman fragen sich wahrscheinlich:
„Das ist ja schön und gut mit der Recherche – aber was ist seitdem eigentlich passiert?“
Und das ist eine gute Frage, denn von Animationen, Videos und Beispielen fehlt hier JEDE SPUR?!

Ich habe mich, wie so oft, in der Themenfindung verloren. Deshalb sammelt dieser Blogpost genau diese Gedanken und Überlegungen. Denn WENN man schon die Chance hat, all seine Zeit und Energie in ein Passion Project zu stecken, dann soll es ja auch etwas hermachen.

Optionen, Optionen, Optionen

Stand der Dinge und Hard Facts:
Grundsätzlich sind die Rahmenbedingungen recht locker. Gesucht wird: ein cooles Unternehmen (mit bestehendem Design – oder auch nicht), das genug Möglichkeiten bietet, um ein Rundum-Paket an Motion zu entwickeln.
Bestenfalls findet meine Motion Identity dann sogar eine echte Anwendung!

Doch es gab die eine oder andere Hürde in der Recherche:

– Ein Spec-Project:
Eine große, coole Brand, der ich ein neues Motion Design verpasse.
Die Chance auf tatsächliche Anwendung ist gering, aber: Es gibt viel Material und einen guten Rahmen.

– Ein Kundenprojekt von ZERO zu Branding + Motion:
Das wäre vermutlich der Dream-Come-True. Allerdings würde ein komplettes Branding plus Motion den Rahmen des Projekts fast sprengen – und Kund:innen samt deren Visionen sind nicht immer easy. Besonders dann nicht, wenn es die erste Motion Identity ist, die man entwickelt.
Alles zeitlich, qualitativ und portfolio-tauglich unter einen Hut zu bringen, ist… anspruchsvoll.

– Ein halbgroßes, lokales Unternehmen mit bestehendem Design:
Ein schöner Rahmen zur Orientierung, ein lokales Business, die Chance auf echte Verwendung…
Too good to be true? Naja… ja.
Denn z. B. das Schauspielhaus oder andere Unternehmen und Festivals werden bereits von großen Agenturen betreut – und sich ungefragt in die Corporate-Identity-Guidelines dieser Agenturen einzumischen, ist vermutlich nicht die beste Ausgangslage für eine Zukunft in der Grazer Designwelt.

Tja. Was jetzt?
Mit all den großen Hoffnungen auf tatsächliche Anwendung und freies Herumexperimentieren ist es NOCH schwerer, eine Entscheidung zu treffen.

Aber: Da ist ein Licht am Ende des Tunnels!

Plan A, Plan B, Plan C, Plan X

Plan A

Wie ein Engel ist Chrissi plötzlich im Kurs erschienen – und ihre Botschaft war erlösend! (Oder so.)

Sie entwirft das Design (inkl. Plakat etc.) für das diesjährige Grazer Impro Fest!
🔗 https://schaumbad.mur.at/event/gif-grazer-impro-fest/

Jedes Jahr erstrahlt dieses nämlich in einem neuen Look! Und passend zu Improvisation und Kunst ist das Design auch kreativ, offen und experimentierfreudig.

Was ist das genau?

„GIF – Grazer Impro Fest
Ende August verwandelt sich das Schaumbad – Freies Atelierhaus Graz in ein utopisches Ressort der Sonderklasse und zelebriert das erste Grazer Impro Fest.
Neun Tage lang checken inter-/nationale Künstler:innen und Kollektive – und alle anderen Experimentierfreudigen – zum gemeinsamen Improvisieren ein.
Und das natürlich all inclusive: Es wird gesungen und getönt, Instrumente gebaut und musiziert, gekocht und vernetzt, performt – und nach den theoretischen und strukturellen Voraussetzungen des perfekten Impro-Flows gesucht.
Ein Angebot für Körper, Geist und Seele – mitten in der postindustriellen Naturbrache: Ist doch alles nur improvisiert.”

Also wenn einem bei DIESER Beschreibung nicht schon die Bewegungsmuster entgegenfliegen, dannnn weiß ich auch nicht ;).
Das wäre also die Idealvorstellung – denn auch die Deadlines scheinen gut zum Kurs zu passen.
Und mit etwas Glück findet das Design tatsächlich Anwendung!

Was kann schiefgehen?
Das Ganze steht und fällt natürlich mit dem Design von Chrissi.
Da sie in und mit dem Festival arbeitet, hat sie selbstverständlich Vorrang. Hier wird nicht gedrängt oder gestresst. Sollte sich das Design aber erst zu spät entwickeln (denn es muss ja stehen, bevor Motion einfließen kann), brauche ich einen guten Plan B.

Plan B

Alles zurück auf NULLLL – naja, nicht ganz.

Sollte Plan A scheitern, würde ich Kontakt mit dem Theater im Bahnhof, dem Kristallwerk und Rotor aufnehmen und anfragen, ob sie mit einem Branding + (oder auch nur) einer Motion Identity etwas anfangen könnten.

Hier würde dann zwar ein ganzer Brandingprozess stattfinden müssen – aber es wäre auch eine coole und spannende Möglichkeit, evtl. sogar gemeinsam mit Studienkolleg:innen einen solchen Auftrag zu bearbeiten.

Plan C

Angenommen keines der Theater oder Galerien ist überzeugt oder geeignet für das Projekt…
Juhu – freie Themenwahl?

Vielleicht zurück zu bekannten Marken oder Startups:
New Balance, Nike, SAYE Sneakers, Pangaia…

Oder zu anderen Kulturinstitutionen in Graz, meiner Heimat Salzburg oder irgendwo dazwischen…

Oder wir gehen zurück in die Recherche und suchen deutsche/österreichische/Grazer Startups und Businesses, die unterstützenswert sind!
Ausschnitte einer unvollständigen Liste wären z. B.:
Holy Pit, Sonible, SpawnX, yahyastudio, klekks.com, habitus-art, beherzt, …

Plan X

Oder: Man entwickelt wirklich etwas für die FH…
¯\_(ツ)_/¯

Bis dahin

In der Zwischenzeit habe ich fleißig weiterrecherchiert – vielleicht ergibt sich ja auch eine Kooperation in der Zukunft?

Je nachdem wie sich die kommenden Wochen gestalten (also wie sich der Zeitplan für’s Impro Festival entwickelt) würde ich ev. eine Brand und deren Motion Identity genauer analysieren, denn so hab ich bisher immer viel gelernt… oder mich mit verschiedenen Ansätzen für Motion Identitys spielen – also kleine Snippets an Motion (sei es eine Logo Animation oder Overlays für Social Media) entwerfen, die zu Brands passen 🙂

Ich habe außerdem eine kleine Anfrage an Moodley gesendet, um eventuell die Chance zu bekommen, mit ihnen noch einmal intensiv über Motion Identity zu sprechen – mal schauen, ob und wann da eine Antwort eintrudelt!


*Zuhilfenahme von ChatGPT: Die KI wurde zur Übersetzung, Korrektur und Formulierungshilfe von Texten verwendet. Alle Inhalte wurden anschließend eigenständig ausgewertet, überarbeitet und in den hier präsentierten Beitrag integriert.

by magdalena.ackerl -

Ein Ausflug zum Thema Timing, Geschwindigkeit (Easing), Frequenz und Co.


Wie im vorhergehenden Post angeschnitten, widmet sich dieser Blogpost dem Thema Timing, Easing und Frequenz, denn dazu hab ich einiges an Infos gefunden.
Da ich selbst oft am richtigen Timing scheitere und „ein Gefühl dafür bekommen“ kein wirklich guter Tipp ist, teile ich hier meine unvollständige aber trotzdem hilfreiche Sammlung an Infos zum Thema!


1. Timing & Geschwindigkeit – Das unsichtbare Rückgrat jeder Bewegung

Timing ist einer der sensibelsten Faktoren im Motion Design. Selbst bei identischen Animationen können Unterschiede von Millisekunden die Wirkung komplett verändern – ob etwas zackig, elegant oder schleppend wirkt, entscheidet das Timing.
Da ist natürlich viel „Gefühlssache“ und Übung – und ich hab erkannt dass ich durchaus noch einiges nachbessern muss in diesem Sektor – aber ein paar Faustregeln sind mir in der Recherche untergekommen.

Faustregeln:

  • UI/UX Motion >> 200–500ms für Mikrointeraktionen (z. B. Hover, Tap)
  • „Brand-Driven Motion“ >> 500–1200ms für Logoanimationen, Transitions
  • Cinematic Motion >> bis zu 3000ms für Storytelling-Elemente

Wichtig:

Eine Bewegung sollte nicht schneller sein als die menschliche Wahrnehmung – aber auch nicht zu langsam, da dies als „träge“ oder „veraltet“ empfunden wird.

Pro-Tipp: Teste Bewegungen nicht nur im Designprogramm, sondern in realer Interaktion. Die gefühlte Zeit unterscheidet sich massiv vom “Designgefühl”.
(Vgl. IBM o.D.)

Ein paar weitere Dinge, die man schon zu Beginn des Prozesses bedenken soll:

  • Ein- und Ausblendedauer: Wie schnell erscheinen Dinge? Ploppen sie direkt rein oder kommen sie langsam, fast filmisch?
  • Gestaffelte Animation: Mehrere Elemente nacheinander erscheinen zu lassen, schafft Fokus und Orientierung.
  • Anticipation & Delay: Eine Mini-Verzögerung vor einer Aktion lässt Animationen viel natürlicher wirken. Stichwort: Spannung aufbauen!

Das Ziel ist, dass sich alles „richtig“ anfühlt – nicht zu hektisch, nicht zu langsam, sondern im Takt der Marke (vgl. Gleave, Dawncreative 2024).


2. Easing – Die Kunst der Beschleunigung

Jaja, das Easing. Bei jeder Animation geht’s um Geschwindigkeit: Wie schnell startet und stoppt ein Objekt? Genau das regeln sogenannte Easing-Funktionen.

Easing beschreibt, wie sich Bewegung innerhalb eines Zeitraums verändert.
Easing erzeugt Emotion, Natürlichkeit oder Präzision. JETZT ist es – nach all den Projekten – endlich soweit und ich beschäftige mich WIRKLICH mit Easings – bisher habe ich mich da wohl eher durchgeschummelt, aber es gibt doch einiges zu wissen!

Gängige Easing-Kurven:

  • linear (mechanisch, neutral)
  • ease-in (sanfter Start, beschleunigt)
  • ease-out (schneller Start, sanftes Ende)
  • ease-in-out (beides kombiniert)
  • bounce (verspielt, lebendig)
  • elastic (organisch, eigenwillig)


Und es gibt SO VIEL MEHR, wie man beispielsweise hier schön aufgelistet findet:
https://easings.net/ 


Ein paar Anwendungsempfehlung:

  • Branding: ease-in-out für Eleganz
  • UX-Motion: ease-out für natürliches Ankommen
  • Error States: bounce oder shake für Aufmerksamkeit
  • Playful Brands: elastic curves für Charaktertiefe

(Vgl. Material Design o.D.)

Das WIE in Aftereffects

Ein kleiner Exkursion zu Graphs in Aftereffects

Value Graph
Der Value Graph zeigt den Wert der Eigenschaft über die Zeit – zum Beispiel die Y-Position eines Objekts. Er eignet sich besonders gut, wenn man genaue Kontrolle über die Pfadkurven und deren Form haben will.

Tipp: Oft fragt man sich: “Warum kann ich im Value Graph nichts anfassen?” Das passiert oft wenn man mit der Position arbeitet, denn ohne separate Dimensionen bleibt dieser Graph gesperrt für direkte Bearbeitung. Damit du den Value Graph überhaupt bearbeiten kannst, musst du bei Positionsanimationen “Separate Dimensions” aktivieren. Erst dann kannst du X- und Y-Werte getrennt steuern und im Graph Editor bearbeiten.

Tipp 2: Mit gedrückter Alt- oder Option-Taste kannst du die Handles der Keyframes noch besser kontrollieren (Stichwort: Convert Vertex Tool). So lassen sich Kurven präzise und feinfühlig formen – ähnlich wie Vektorpfade in Illustrator.

Speed Graph
Der Speed Graph hingegen zeigt die Geschwindigkeit über die Zeit. Er ist besonders hilfreich, wenn du wissen willst, wie schnell oder langsam sich ein Objekt bewegt – unabhängig vom genauen Wert der Bewegung.


Wann welchen Graph verwenden?

  • Value Graph ist super für Bewegungen, bei denen du den Pfad genau kontrollieren willst, z. B. bei einem Bounce.
  • Speed Graph eignet sich besser für Bewegungen mit gleichmäßigen Abläufen oder komplexen Abläufen wie z. B. eine Acht (∞-Bewegung), da diese im Value Graph schwer zu bearbeiten ist.

Manchmal gibt After Effects dir nur den Speed Graph – das hängt von der Art der Keyframes und der Eigenschaft ab.

Ich finde, dass es mit dem Wertediagramm einfacher ist, starke/aggresive Kurven zu erstellen. Auch ist es manchmal einfacher “Bounces” zu erzeugen, bei denen der Wert beispielsweise den Wert des End-Keyframes überschreitet (Overshoot, also 0-100 % Skalierung geht auf 110 %, bevor er auf 100 geht, ohne dass ein zusätzlicher Keyframe hinzugefügt werden muss).
Also, wenn ich mehr Kontrolle brauche, verwende ich das Geschwindigkeitsdiagramm, und wenn ich noch mehr Kontrolle brauche, verwende ich das Wertediagramm. 

Aber ich denke, es ist eine Frage der Bewegung und Präferenz. Manchmal macht das Geschwindigkeitsdiagramm seltsame Dinge, dann lässt es sich auch im Wertediagramm beheben. Manchmal müssen Sie im Wertediagramm die Dimensionen trennen, was ein zusätzlicher Schritt ist, den ich nicht machen möchte, wenn ich es nicht muss und da benutze ich das Speeddiagramm

ALSOOO

  • Easy Ease ist nur der Einstieg – für professionelle Bewegungen brauchst du das Verständnis beider Graphen.
  • Bounce-, Overshoot- und Custom-Easings werden erst durch den Graph Editor so richtig lebendig.
  • Jede Animation ist anders – manchmal funktioniert der Speed Graph besser, manchmal der Value Graph. Es gibt keine allgemeingültige Regel – aber ein gutes Gespür entwickelt sich durch Übung.

(Vgl. Material Design o.D.)


3. Frequenz & Rhythmus – Die emotionale Kadenz

Frequenz bezeichnet, wie oft sich Bewegungen innerhalb eines Brand Systems wiederholen oder aktiv sind. Rhythmus ist das zeitliche Zusammenspiel einzelner Animationen.

Zum Beispiel: Eine „High-Energy-Brand“ kann 25 kleine Bewegungen pro Minute zeigen – eine Slow-Brand wiederum nur 5. Die „Bewegungshäufigkeit“ ist ein unterschätzter Bestandteil der Motion Identity.

STILLE & PAUSEN: Man soll auch bewusste Pausen („Motion Silence“) als stilistisches Mittel nutzen – wie Weißraum im Grafik Design ;). Sie schaffen Kontrast und steigern den Effekt der nächsten Bewegung.

  • Animationssequenzen in zeitlichen Intervallen
  • Synchronisation mit Audio
  • „Bewegungsstille“ bewusst einsetzen (Ruhephasen)


(Vgl. Koto 2025)

ZUSATZ: Technische Tipps


Pro-Tipps & Hidden Tricks aus der Praxis

  • Verwende „Overshoot“ (leichte Überdehnung der Bewegung), um Dynamik zu erzeugen
  • Baue kleine imperfekte Bewegungen ein – z. B. leichtes Zittern, Fluktuationen → wirkt menschlicher
  • Definiere Motion Tokens – vordefinierte Animationsbausteine für das gesamte Designsystem
  • Achte auf den „Motion Character Arc“ – auch eine Bewegung braucht Dramaturgie
  • Nutze Motion als Storytelling Device, nicht nur als Dekoration
  • Setze Bewegungen bewusst asymmetrisch – das erzeugt Spannung
  • Verwende „Motion Echoing“ – Bewegungen spiegeln sich in anderen UI-Elementen (Kohärenz)

Shortcuts und Tipps die in meiner Recherche erwähnt wurden

Shortcuts in After Effects, die du lieben wirst:

  • U → Zeigt alle Keyframes eines Layers
  • UU (Doppelklick U) → Zeigt alle geänderten Eigenschaften
  • Shift + F9 → Easy Ease (statt Rechtsklick)
  • Option + [ / Option + ] → Schneidet den Layer an der aktuellen Zeitmarke ein/aus
  • Option + Drag Keyframe → Proportional Keyframe Timing anpassen
  • Cmd/Ctrl + Option+ Shift + H → Toggle Graph Editor direkt (Zeitsparer!)

Extra Tipps:

  • Custom Controls über Sliders & Expressions
    Gerade für wiederverwendbare Templates oder Toolkits hilfreich – so kannst du ganze Bewegungsabläufe per Slider steuern. Einmal Mehraufwand und dann immer Zeitsparen
  • Graph Editor Presets speichern
    Viele wissen nicht, dass man im Flow-Plugin oder via Expressions seine liebsten Motion-Kurven speichern und wiederverwenden kann – spart Zeit bei Serienproduktionen.
  • Arbeite mit Motion Sketching (analog oder digital)
    Einfach Bewegungen zuerst per Linien oder Scribbles aufzeichnen, um „emotionale Energieverläufe“ zu testen – bevor du in After Effects loslegst. Macht Storytelling in Motion verständlicher.
  • Nutze den AE-Preview mit Ton!
    Viele testen Animationen ohne Sound – aber Motion mit Audio zu überprüfen, offenbart oft ganz neue Rhythmusprobleme oder -stärken.


Quellen:

  • KOTO 2025
    KOTO (18.02.2025): Reel talk: the power of branded motion design. In: offbrandkoto, https://offbrandkoto.substack.com/p/reel-talk-the-power-of-branded-motion (zuletzt aufgerufen am 16.03.2025)
  • Never Sit Still o.D.
    Never Sit Still (o.D.): Motion Branding. In: Never Sit Still, https://neversitstill.com/motion-branding(zuletzt aufgerufen am 16.03.2025)


*Zuhilfenahme von ChatGPT: Die KI wurde zur Übersetzung, Korrektur und Formulierungshilfe von Texten verwendet. Alle Inhalte wurden anschließend eigenständig ausgewertet, überarbeitet und in den hier präsentierten Beitrag integriert.

by magdalena.ackerl -

Motion Design und Motion Identity in der Praxis

Was man wirklich wissen muss, wenn’s gut werden soll – bzw. Magdas “Lesen-vorm Loslegen”-Notiz

Klar – Je öfter man Motion Identity liest und sagt, desto mehr klingt es wie ein Buzzword aus der Agenturwelt. Aber: Bewegung ist nicht nur Deko oder Spielerei – sie kann Stimmung transportieren, Marken wiedererkennbar machen und sogar den Flow in komplexen Anwendungen verbessern – das wissen wir bereits!

Nur: Damit das funktioniert, muss man ein paar Dinge beachten. Nicht nur technisch, sondern auch strategisch! Es ist die Sprache einer Marke – aber in Bewegung und damit diese Sprache funktioniert, braucht’s aber mehr als nur „von A nach B“. Es geht um wie, wann, warum – und das ist ein ganzer Werkzeugkasten für sich, wie man im Entstehungsprozess einer Motion Identity erkennt.

In Blogpost 1 & 2 habe ich mich damit beschäftigt, was eine Motion Identity ist und wie sich die Entwicklung davon gestaltet.

Bei der Recherche bin ich auf einige Infos, Themen und Tipps gestoßen, die irgendwie nicht ganz zum Rest der Info gepasst haben oder die Struktur der Blogposts gesprengt hätten.

Diese Details, Tipps, Methoden und Co. beziehen sich auf Animation, Motion und eben auch auf Motion Identities und in diesem folgenden Blogpost möchte ich all diese Dinge sammeln und zusammenfassen!


1. Motion Behavior – Die Persönlichkeit in Bewegung

Was es durch Analyse und Recherche zu Beginn des Prozesses zu definieren gilt, ist die Persönlichkeit der Marke, denn davon kann die Persönlichkeit der Bewegung abgeleitet werden. Diese Definition basiert oft während dem Branding oder der Positionierung der Marke.

Motion Behavior:
Bewegung kann – genau wie Farbe, Typo oder Sprache – den Charakter einer Marke verkörpern. Man spricht hier von Motion Behavior, also dem „Verhalten“ einer Animation. Wie sich Elemente bewegen (schnell, langsam, weich, direkt…), sagt nämlich viel über die Marke aus.

Diese Definitionen können anfangs noch recht simpel und rudimentär sein, bilden aber die Ausgangsbasis für alle weiteren Gedanken zum Thema Bewegung.

Simple Beispiele:

Linear & direkt: wirkt professionell, zielgerichtet (vgl. DixonBaxi o.D.)

Elastisch & bouncey: fühlt sich jung, lebendig, sympathisch an (vgl. DixonBaxi o.D.)

Fließend & smooth: strahlt Ruhe, Eleganz und Seriosität aus (vgl. DixonBaxi o.D.)

Das kann man weiter ausführen und mit deutlichen Begriffen wie „Fast Rise“, „Gentle Float“, „Aggressive Impact“ immer genauer definieren. Im Laufe des Prozesses kann man sie dann nutzen wie Farbpaletten oder Typosysteme.

Man entscheidet sich für einen Stil – und bleibt dann dabei. Denn wenn der Button bouncey hüpft, aber das Logo seriös und steif reinfadet, fühlt sich das seltsam inkonsistent an (vgl. DixonBaxi o.D.).


2. Kultur & Kontext – Bewegung ist nicht universell

Immer wichtig: Kultur und Kontext!

Was bei uns dynamisch wirkt, kann in anderen Kulturen aggressiv oder unhöflich rüberkommen. Beispielsweise schnelle Pop-In-Animationen werden in asiatischen Kontexten oft als hektisch empfunden oder langsame Animationen können in sehr „effizienzgetriebenen“ Märkten als nervig gelten.

Deshalb ist es wichtig den Kontext zu checken! Und sich fragen: Für wen ist das? Und wie fühlt sich Bewegung dort an? 


3. Motion-Hierarchien – Nicht alles darf gleich laut schreien

In einer Animation oder in einem komplexen Interface bewegen sich oft viele Dinge gleichzeitig. Deshalb ist es wichtig, eine Bewegungshierarchie zu etablieren. Sonst wird’s schnell unübersichtlich und überfordernd.

  • Primäre Animationen: Große, auffällige Bewegungen – z. B. das Logo, Haupttransitions, Hero-Sections
  • Sekundäre Animationen: Dezente Microinteractions – z. B. Hover-States, kleine Icons, Tooltips

Das Ziel ist immer: Die Aufmerksamkeit gezielt lenken, nicht alles gleichzeitig betonen. Und ganz wichtig: Man kann auch einfach mal nix animieren – bewusst eingesetzte Ruhe ist ein mächtiges Gestaltungselement.

Hier sind auch Aspekte wie das Timing, Easing und die Frequenz/Rythmus ein wichtiges Thema – darauf gehe ich im nächsten Beitrag genauer ein!


4. Motion-Driven Layout Thinking

Ein häufiger Fehler im Motion Design ist, dass erst statisch gelayoutet und dann animiert wird. Dabei erwische auch ich mich, mit meinem Grafik-Design-Hintergrund, immer wieder. Besser ist es, gleich Layout in Motion denken!

Prinzipien:

  • Bewegungsflüsse definieren Layout-Hierarchien
  • Motion Grid als strukturierendes Prinzip überlegen
  • Navigation durch die Animation/Applikation = Choreografie
  • Statische Layouts als Zustandsabbildungen verstehen, nicht als Endzustand

(Vgl. Koto 2025)


5. Typografie in Motion

Text in Bewegung ist mehr als nur das Einblenden von Headlines. Typografische Animation kann ein starkes semantisches Element sein.
Die Klassiker kommen dabei relativ oft vor:

  • Letter-by-letter Reveal (Dramatik)
  • Kerning-Animationen (Brand-Eigenheiten betonen)
  • Morphing zwischen Schriftgrößen/-gewichten
  • Vertical Slide (modular, systemisch)
  • Typo als Maskierungsfläche

WICHTIG dabei:

  • Lesbarkeit > Effekt
  • Branding-Prinzipien gelten auch hier (z. B. Gewichtung, Hierarchie)
  • Typo-Easing = subtiler als Grafik-Easing

(Vgl. IBM o.D.)

Weiterer Tipp: Verwende rhythmisches Typo-Timing als inhaltliche Unterstützung – z. B. bei Storytelling-Formaten oder Key Messages. (Vgl. IBM o.D.)


6. Interaction Motion – UX trifft Branding

Interaction Motion bewegt sich zwischen Designästhetik und Nutzerführung. Ziel ist nicht nur Funktionalität, sondern emotionales Feedback.

Wichtige Motion Patterns die es zu Designern gilt:

  • Feedback Loops (Button-States, Checkmarks)
  • Progressive Disclosure (step-by-step UI)
  • Loading Indicators mit Markensprache
  • Scroll-bezogene Bewegungen (Parallax, Reveal)

(Vgl. Material Design o.D.)

Wichtig:

UX Motion muss barrierefrei und optional sein (z. B. systemseitige „Reduce Motion“-Einstellungen beachten!). (Vgl. Material Design o.D.)

Animierte States sollten Markencharakter tragen – selbst ein Ladebalken kann eine Personality ausstrahlen. (Vgl. IBM o.D.)




7. Sounddesign & Motion – Synchronisierung statt Zusatz

Wenn Sound erlaubt ist (z. B. in Videos, Reels, Ads), sollte er kein Nachgedanke sein, sondern integraler Bestandteil der Motion Identity, denn fast jede Bewegung braucht Sound!

Richtlinien:

  • Synchronität!
  • Audio-Markers für Betonung von Bewegungsakzenten
  • Soundfeedback als UX-Element (z. B. Confirm-Sound)

Pro-Tipp: Eine eigene kleine Audio-Library mit typischen Sounds kann viel bewirken – so wie Brand Fonts oder Farben. (Vgl. Never Sit Still o.D.)


8. Feedback, Tests, Iterationen – Motion ist nie fertig

Auch ein gutes Motion System lebt davon, dass es getestet und verbessert wird.

  • A/B-Tests mit verschiedenen Bewegungsstilen
  • Usability-Tests auf verschiedenen Geräten
  • Ladezeiten & Performance checken
  • Feedback von realen Nutzer:innen einholen

Motion ist ein bisschen wie Musikproduktion: Man kann ewig feilen – aber irgendwann muss man’s auch veröffentlichen. (Vgl. IBM o.D.)


Qualitätssicherung und Performance:
Technische Umsetzung ist ein essenzieller Teil – zu viele Bewegungen führen zu Performanceproblemen. Wichtig also:

  • Optimierung der Frame-Rate (mind. 30fps)
  • Renderbudget pro Frame definieren
  • Testing in Low-End Devices & Browsern

(Vgl. IBM o.D.)

🙂

Motion ist nicht nur ein bisschen Eye-Candy. Es geht um Haltung, Erzählweise, User Experience – und darum, wie eine Marke „fühlbar“ wird.

Motion Design ist weit mehr als nur bewegte Grafik. Es ist ein Zusammenspiel aus Timing, Systematik, Psychologie, Emotion und Technik! Wer die feinen Mechanismen – von Easing über Rhythmus bis Interaktion – versteht und anwenden kann, schafft Markenerlebnisse.

Denn wenn Bewegung konsequent und sinnvoll eingesetzt wird – mit Gefühl für Timing, Kontext, Zielgruppe und Technik – dann entsteht eine Motion Identity, die nicht nur animiert, sondern erzählt, berührt und bleibt.

(vgl. DixonBaxi o.D.; Never Sit Still o.D.; Gleave, Dawncreative 2024)

Quellen:

  • KOTO 2025
    KOTO (18.02.2025): Reel talk: the power of branded motion design. In: offbrandkoto, https://offbrandkoto.substack.com/p/reel-talk-the-power-of-branded-motion (zuletzt aufgerufen am 16.03.2025)
  • Never Sit Still o.D.
    Never Sit Still (o.D.): Motion Branding. In: Never Sit Still, https://neversitstill.com/motion-branding(zuletzt aufgerufen am 16.03.2025)


*Zuhilfenahme von ChatGPT: Die KI wurde zur Übersetzung, Korrektur und Formulierungshilfe von Texten verwendet. Alle Inhalte wurden anschließend eigenständig ausgewertet, überarbeitet und in den hier präsentierten Beitrag integriert.