Design in Motion with Jitter: From Static to Storytelling

Loodos tasarım ekibi olarak Frink üzerinde çalışırken en çok istediğimiz şeylerden biri, uygulamanın kullanıcıya sadece işlevsel değil aynı zamanda canlı ve keyifli bir his vermesiydi. Statik ikonlar görevlerini yerine getiriyordu ama çoğu zaman fazla donuk kalıyorlardı. Biz de “neden bu ikonları biraz hareketlendirmiyoruz?” diye düşündük. Özellikle birçok sayfada tekrar eden sabit ikonlarımız vardı. Bunları kullanıcıyı rahatsız etmeden, göz yormadan ama yine de küçük bir canlılık katacak şekilde canlandırmak istedik. Böylece uygulamanın genel havasını daha akıcı, enerjik ve modern bir hale getirebilirdik.

İlk akla gelen yöntem After Effects → Lottie süreciydi. Daha önce kullandığımız için biliyorduk ki bu yöntem teknik olarak eforlu, zaman alıcı ve özellikle revizyonlarda yorucu bir süreçti. Oysa bizim amacımız çok daha basitti: hızlıca animasyon üretmek, kolayca revize edebilmek ve çıktıları doğrudan geliştirici ekibe sorunsuz aktarabilmek. Tam da bu noktada Jitter, ihtiyacımız olan çözümü sundu.

Jitter’ın Figma’ya benzeyen kullanıcı dostu arayüzü sayesinde ikonları hareketlendirmek dakikalar içinde mümkün oldu. Animasyonları kısa sürede hazırlayıp Lottie formatında export ederek doğrudan uygulamaya entegre edebildik. Revizyon süreci de oldukça hızlandı; hareketin hızını, easing türünü ya da yönünü değiştirmek için saatler harcamak yerine birkaç tıkla anında yeni çıktılar alabildik. Böylece hem ciddi zaman kazandık hem de eforu minimize ettik. Handoff süreci de çok daha pratik hale geldi çünkü geliştirici ekibe hazır, kullanılabilir dosyalar teslim edebiliyorduk.

Bir diğer önemli nokta ise konsept tasarım sürecinde statik ekranlardan kurtulmak. Normalde interaktif prototipler hazırlayarak bu ihtiyacı karşılamaya çalışıyoruz, ancak bazen bu yeterli olmuyor. Özellikle sunum ve gösterim aşamalarında, müşteriyi etkilemek ve vizyonumuzu doğrudan aktarabilmek için sınırları biraz zorlamak gerekiyor. 3D splash ekranları, hareketli buton geçişleri, intro sayfa oluşumları ve daha fazlası… Burada amaç, fikirleri ve olasılıkları net şekilde gösterebilmek. Bu, her şeyin nihai uygulamaya birebir taşınacağı anlamına gelmiyor elbette.

Unutmamak gerekiyor ki cihaz, platform ve teknik sınırlamalar her zaman göz önünde bulundurulmalı. Müşteri gördüğünü uygulamanın son sürümünde görmek isteyebilir, bu noktada devreye doğru iletişim giriyor. Kullanıcının gerçekten buna ihtiyacı var mı? Cihaz performansı, deneyim ve beklentiler karşılanabiliyor mu? Bu soruların yanıtı, fikirlerin üretimden uygulamaya taşınma biçimini belirliyor.

Kısacası fikirleri durağanlıktan çıkarıp sunumlaştırmak, ihtiyaç ve talepleri doğru şekilde analiz edip yazılım sürecine aktarmak için Jitter biçilmiş kaftan. Zaman, efor ve uyarlanabilirlik açısından en efektif çözüm olduğunu rahatlıkla söyleyebiliriz. Hatta üzerinde çalıştığımız ve burada paylaşamadığımız birçok projede bunu doğrudan uygulamaya koyduk bile.

Sonuç olarak, Jitter sayesinde tasarım ekibi olarak hem yaratıcılığımızı daha özgürce ifade edebiliyor hem de yazılım süreçlerine daha hızlı, verimli ve sorunsuz katkı sağlayabiliyoruz. Bu da yalnızca ekibimizin iş yapış biçimini kolaylaştırmakla kalmıyor, aynı zamanda kullanıcıya çok daha keyifli ve akıcı bir deneyim sunmamızı sağlıyor.

Frink uygulaması hakkında daha fazla bilgiye buradan ulaşabilirsiniz.

🇬🇧 English version

A while ago, a question came to our minds during the design process: “Static icons do their job, but do they really bring life to the screen?” We believed that motion is not just a decorative touch—it’s also a way of telling a small story to the user.

At first, the After Effects → Lottie workflow seemed like the obvious choice. But we knew it would be time-consuming, effort-heavy, and quite painful when it came to revisions. While searching for a faster, more practical tool that would also allow designers to work independently, we discovered Jitter. With its easy-to-learn interface, direct Lottie exports, and quick revision capabilities, motion design soon became a natural part of our daily workflow.

When working on Frink as the Loodos design team, one of our main goals was to make the app feel not only functional but also lively and enjoyable. Static icons were doing their job, but often felt too rigid. That’s when we thought: “Why not add a little motion to them?” Especially since we had recurring static icons across many screens, we wanted to bring them to life in a subtle way—without overwhelming the user, but still adding small bursts of energy. The result was a smoother, more dynamic, and modern overall experience.

The After Effects → Lottie process was once again the first method that came to mind, but as we had experienced before, it demanded significant effort, time, and resources—especially when revisions were needed. Our goal was much simpler: create animations quickly, revise them easily, and hand off ready-to-use files seamlessly to the development team. That’s exactly what Jitter offered us.

Thanks to Jitter’s Figma-like interface, animating icons became a matter of minutes. We could prepare animations and export them directly in Lottie format, ready to integrate into the app. Revision cycles were much faster too: instead of spending hours tweaking motion speed, easing, or direction, we could simply adjust settings with a few clicks and instantly get new outputs. This saved us time, reduced effort dramatically, and made the handoff process smoother since we could deliver developer-ready files without extra steps.

Another important point was moving away from static screens in concept design. Normally, we prepare interactive prototypes to cover this need—but sometimes that isn’t enough. Especially during presentations and client demos, we like to push the boundaries to make our vision more tangible. 3D splash screens, animated button transitions, dynamic intro screens, and more. The purpose here is to demonstrate what’s possible and tell the story vividly. Of course, this doesn’t mean that everything shown will be implemented in the final version of the app.

It’s important to remember that devices, platforms, and technical limitations always play a role. Clients may want to see everything they are shown carried into the final release, but this is where communication becomes crucial. Does the user really need it? Can the device performance and user experience support it? The answers to these questions define how ideas transition from concept to production.

In short, when it comes to turning static ideas into compelling presentations, analyzing needs accurately, and translating them into the development process, Jitter is the perfect fit. It’s the most effective solution we’ve found in terms of speed, effort, and adaptability. In fact, we’ve already applied it directly in many other projects that we can’t publicly share yet.

In conclusion, with Jitter we can not only express our creativity more freely as a design team, but also contribute to development processes faster, more efficiently, and more seamlessly. This doesn’t just make our workflow easier—it also allows us to deliver a smoother, more engaging experience to the end users.

Click here to explore the details of the Frink project.