[UX mevs] #5 — Handoff Araçları Sayesinde Yazılım Geliştiricileri ile Barış
#S01E05
Önsöz
Merhaba Ben Çağdaş ve burası TurkNet Design. UX Mevs’in beşinci bölümünde, yazılım geliştiricisi ekiplerle bir arada çalışan her tasarımcının ve tasarım ekibinin çözmesi gereken önemli problemlerden birisi olan çıktıların canlıya alımına doğru giden o görkemli yolda, başına bir şey gelemesi ya da herhangi bir kazaya uğramaması üzerine konuşacağız.
Unutmayın ki çıktıların canlıya alımına kadar olan yolculukta, yazılım ekipleriyle bir arada ve uyumlu çalışmak, bunu yaparken ise doğru metotlar kullanmak hem size hem de canlıya alınan projelerinize +65 XP kazandırır.
Giriş: İnsan Ne ile Yaşar?
Hepimiz dijital ürünlere ilgi duyan; tasarım yapan, yazılım geliştiren, ürün yöneten, iş geliştiren ya da test eden tüzel titanların kolluk kuvvetiyiz. Ve en büyük amacımız T=0 anından itibaren olan bu yolculuğun sorunsuz şekilde gerçekleşmesi ve canlıya alım anına kadar olan bu süreci en iyi şekilde yönetebilmek.
Tam da bu noktada biz tasarımcılar, süreçlerin en başınan itibaren yani henüz fikir aşamasındayken konuya dahil olmalı ve test mühendislerine teslim edene kadar ve birçok farklı paydaş ile doğru biçimde çalışmayı öğrenmeliyiz.
Gelişme: Savaşı Bitirmeye Geldik!
Daha önce Ux Mevs’e konu olan o mükemmele yakın tasarım sisteminiz hazır. Hatta iyi kötü bir çalışma sistemi de (DesignOps.) oluşturdunuz. Nihayet o “pixel-perfect” çıktılarınızı da oluşturdunuz. Her şey plana uygun şekilde yürüyor ve artık çıktılarınızın hayata geçirileceği o heyecanlı dönem başlamak üzere. Tam bu noktada UX Mevs’e uygun biçimde sorularımızı soralım:
- Yazılım geliştiricileriniz ile iletişiminiz nasıl?
- Çıktılarınızı, geliştirilere nasıl teslim ediyorsunuz?
- Geliştirileriniz süreç içerisinde hangi sıklıkta, “revize” yapmanızı gerektirecek şekilde kapınızı çalıyor?
- Geliştiricilerinizle aranızda sözlü ya da yazılı bir standardizasyon sözleşmesi var mı?
- Örneğin ikonlarınızı ya da kullanılacak görselleri nasıl teslim ediyorsunuz?
- Geliştiricilerinizle aranızda köprü olan bir uygulama var mı?
Hemen soruyu cevaplamadan önce, biraz eskilere dönmemiz gerek: Yetişin. Nostalji Treni Kalkmak Üzere! 🚂
“Handoff” adını verdiğimiz ve geliştiricilerle aramızda kocaman bir savaşa dönen bu süreç eski zamanlarda çok problematik bir yapıya sahipti. 😣 UI çıktılarını geliştirdiğiniz hiçbir ürünün piyasada olmadığını düşünün. Ne Figma, ne Sketch, ne Zeplin ne de Invision! Hiçbiri yok! Ve bu kaotik karanlıkta tasarım yapmanız ve paydaşlarınızla, geliştirilebilmesi için paylaşmak zorundasınız.
Özellikle 40 yaş altı genç kardeşlerim, yeni mezun arkadaşlarım, kariyerine dijital ürün tasarımcısı olarak devam etmek isteyen endüstri mezunu dostlarım ve On İki Telli Cennet Kuşları yukarıda söylediğim dünyayı hayal etmekte zorlanabilir ancak gerçekten böyleydi. Yarım yamalak bilgimizle ve yetersiz uygulamalar ile tasarımlar hayata geçiriyor sonra bu tasarımları “slicing” yani kesme dediğimiz bir işleme sokuyorduk. Ve en küçük bir hata da bu işlem tekrar ve tekrar yapılıyordu. Ve sonuç bu oluyordu. 👇
Örneğin yukarıdaki simülasyon içerisinde bir mobil uygulama tasarladığımızı düşünelim ve süreci kısaca özetleyelim:
- Uygulamanın her ekranı tek tek ve lokal biçimde sadece çalışan kişinin bilgisayarında tasarlanırdı.
- Tasarımlar çoğunlukla işi temelde bu tarz çıktılar üretmek olmayan Photoshop üzerinde yapılırdı ve bu gerçekten büyük bir çileydi.
- Duyarlı tasarım yani responsive design dediğimiz dünya hayal gibi bir şeydi.
- Öyle komponent ya da kütüphane sistemi falan bir tercih bile olmaktan uzaktaydı.
- Bu ne kadar titiz çalışırsanız çalışın tutarlılık çok zor yönetilebilir bir konseptti.
- Flat ya da minimal design olguları henüz hayatımızda olmadığı için tasarım dünyasına Skeomorfizm denilen bir kavram hakimdi.
- Tasarımlarınızı hakkıyla yapsanız bile çıktıları geliştiricilere slicing mantığıyla ve asset base vermek zorundaydınız.
- En küçük bir ikonu eğer iOS platform için slice edecekseniz 3x slice etmek zorundaydınız. Android’i söylemiyorum bile. 😁
- Bu da tasarımlarınızı en iyi ihtimalle 3x çalışmanız ya da 3x yapıldığında bozulmayacak şekilde üretmeniz demekti.
Yani çok bilinmeyenli kaotik ve matematiksiz bir dünyada yaşıyor ve çalışıyorduk.
Yukarıda yazdıklarımı kariyerimin ilk dönemlerinde yaptığım (lütfen tarihe bakın 🦖) ve tam olarak yukarıdaki sürece birebir fit eden birkaç ekran görüntüsü ile pekiştirmek isterim.
Burada önemli bir parantez açmak istiyorum. Handoff süreçleri sadece asset tesliminden ibaret değil. Çıktılarınızla ilgili tüm specleri de geliştiricilerinize aktarmak durumundasınız. (boşluklar, boyutlar, kullanım şekilleri, layout kuralları vb.)
“Ne kadar uzun uzadıya anlattın ne gerek vardı” dediğinizi duyar gibiyim. 🤔 Evet öyle oldu belki ama tarihsel süreci anlamak savaşı bitirmek ve konunun ehemmiyetini anlamak için çok önemli. 🦸♀️
Günümüze Geri Dönecek Olursak: Ve nihayetinde sürecin bu şekilde ilerlemesi tasarımcılar ve yazılım geliştiricileri arasında kocaman bir sıcak savaşa sebep olmaktaydı.
Bu savaş son bulmasa da artık “cold war” şeklinde ilerliyor ve paydaşlar olarak birbirimize karşı daha ılımlı, daha bir arada ve bir arada efektif biçimde çalışabilir / çalışmak durumdayız.
Peki nasıl oldu da artık her şey daha yolunda gibi duruyor. Aslında basit. Teknoloji ve üretim süreçleri giderek gelişti ve tüm tasarım dünyası belirli bir disiplin içerisinde yeniden şekillendi. Figma’nın son ve en önemli featurelarından biri olan DEV MODE mesela tam olarak bu sürecin sonucu.
Elbette Handoff için tek seçeneğimiz Figma değil. İşi sadece tasarımcılarla geliştiriciler arasında köprü kurmak olan birçok uygulama var ve birçoğunu en azından duymuş olmanız mümkün.
Bu uygulamaların en popüleri ise Zeplin. (Kurucularının Türk girişimciler olduğunu biliyor muydunuz 🇹🇷) Zeplin, yukarıda bahsettiğim sancılı süreç için çok önemli bir çözüm olarak hayatımıza girdi ve yıllarca en popüler araçlardan birisi olarak hayatını sürdürdü. Elbette bunu becerebilen tek ürün Zeplin değildi. Benzer işleri yapan Sympli ve Avocode en az Zeplin kadar popüler ve kullanışlı ürünler.
Her ne kadar Figma bu uygulamaların üstlendiği design collaboration konseptine kendi yaptığı geliştirmelerle önemli ölçüde ket vursa da burada tercih sebebi işinizin ve şirketinizin yapısına ve en önemlisi de ihtiyacınıza göre değişkenlik gösteren bir konu.
Ve biz TurkNet bünyesinde, bütün handoff süreçlerimizi belirli bir kural seti dahilinde ve fakat en temelde Figma üzerinden yürütüyoruz.
Bu arada Avocode ve Sympli’yi incelemenizi şiddetle tavsiye ederim. 😎
Sonuç: Peki Ya Hangisini Tercih Etmeliyiz?
Aslında bu çok yanlış bir soru. Zira Zeplin, Avocode, Sympli ya da Figma tek başına anlamlı araçlar değiller. Handoff süreçlerinin en önemli ayağı doğru iletişim ve paydaşların bir arada takım olarak çalışabilmeleri.
TurkNet CTO’su Doğan Aydın’ın her zaman belirttiği üzere tasarım, yazılım geliştirme, ürün geliştirme ve yönetim ekipleri bir masayı ayakta tutan 4 bacak ve hiçbirinin eksik olmaması masanın düzgün durması için olmazsa olmaz.
Dolayısıyla yazılım geliştiricilerine çıktılarınızı emanet ederken dikkat etmeniz ve el sıkışmanız gereken önemli noktalar var ve bir liste yapacak olursak bu liste çok uzun olurdu.
- İkonları nasıl teslim edeceğiniz konusunu netleştirmelisiniz. Boyutlar, paddingler, renk ve dahası.
- Görsel kullanımını otomatize ettiniz mi? Aspect Ratio’yu önemsiyor musunuz?
- Mini interactionları nasıl teslim edeceksiniz, hangi teknolojiyi kullanacaksınız.
- Tasarım çıktılarınızın indirilebilir olmayan speclerini geliştirilerinize nasıl aktarmayı planlıyorsunuz?
- Tasarım çıktılarınızın prototipleri olacak mı?
- Tasarımlarınız hayata geçirilmeden önce review oturumları yapıyor musunuz?
- Geliştiricilerinize temel kuralları barındıran bir kit veriyor musunuz?
- …
Bu sorular katlanarak uzatılabilir ve tüm bu soruların cevapları, diğer ihtiyaçları da bir araya getirdiğinizde handoff sürecini hangi araçla yöneteceğinize dair karar vermenizi sağlayacaktır.
Konu yine döndü dolaştı, tasarım ve çalışma sistemine geldi değil mi? 😁 Evet öyle çünkü Ux Mevs içerisinde anlattığımız her şey bir bütünün parçası.
