Son yıllarda tasarımcı-yazılımcı arasındaki ilişkiyi kuvvetlendirmek ve tasarımcının hayatını kolaylaştırmak üzerine sürüyle çalışma var. Yıllar önce Sketch 2'nin çıkması ile birlikte başlayan bu hareket, Sketch'in eksik olduğu yerleri kapattığını ve daha iyi olduğunu iddia eden bir sürü yeni tasarım aracıyla devam ediyor. Yine de şimdilik Sketch bu konudaki liderliğini sürdürüyor.


Bu kadar yeni aracın icadının altında tek bir problem yatıyor: Yazılım ürünlerinin geliştirme süresinin uzun olması. Bu süreyi, kaliteyi bozmadan ne kadar kısaltabilirsek o kadar iyi.

Abstract böyle bir araç. Tasarımın fikir aşamasından, yazılıma dönüşmesine kadar tüm süreci yönetmenize yarıyor. Şimdilik sadece Mac ve Sketch ile yapılmış tasarımları Abstract ile yönetebiliyorsunuz. İleride yeni işletim sistemleri ve tasarım araçları da eklenecek.

Tam olarak ne işe yarıyor?

Abstract'in ne olduğunu anlatmadan önce mevcut problemlerden bahsedelim. Tasarım süreci başı ve sonu net şekilde belli olan bir süreç değil. Tasarım dosyaları sürekli değişiyor, revizeler geliyor, fikirler deneniyor. Müşteri ile çalışıyorsanız yaptıklarınızı sunuyor, ona göre geribildirim topluyorsunuz. Bunun sonucunda FinalTasarım-2-FINAL-FINAL.sketch gibi dosyalarla karşılaşabiliyorsunuz. Birkaç revizeden sonra artık dosya karmaşası başlıyor. Biz Abstract öncesi dosyalara versiyon ismi veriyorduk ProjeAdı-0.7.2.sketch gibi. 0.9.x sürümlerine gelince tonla değişiklik oluyor haliyle.

Yazılımda böyle bir durum söz konusu değil. Git gibi versiyon kontrol sistemleri mevcut. Git ile hem birden fazla yazılımcı aynı projede rahatça çalışabiliyor, hem de projenin versiyonlar arası geçişlerini kolayca yapabiliyorsunuz.

Abstract ana ekranı

Abstract Nedir?

Abstract'in ana özelliği ve çıkış noktası, Sketch dosyaları üzerinde versiyonlama yapmak ve birden fazla tasarımcının aynı dosya üzerinde çalışmasını sağlamak. Teknik tabirle Sketch dosyalarında git çalıştırmanızı yarayan bir araç. DIğer araçlardan ayrıldığı taraf  her versiyonu ayrı tutmak yerine, sadece değişikliklerin kaydını tutuyor. Bu sayede bilgisayarınızda çok daha az yer kaplıyor.

Mac appini indirdikten sonra, bir proje oluşturmanız gerekiyor. Projeyi oluşturduktan sonra ihtiyacınız olan, o projeye ait bir sketch dosyası. Abstract üzerinden yeni bir tane oluşturabilir, ya da halihazırda bilgisayarınızda duran bir sketch dosyasını ekleyebilirsiniz. Bir projede birden fazla dosya olabileceği gibi, Library olarak kullandığınız dosyaları da ekleyebilirsiniz.

Dosyayı ekledikten sonra Abstract üzerinden açmanız gerekiyor. Kendi klasörünüzde tuttuğunuz dosyayı değil, Abstract'in idare ettiği dosyalar üzerinden tüm geliştirmeleri yapacaksınız.

İlk aşama tamam. Abstract ilk verdiğiniz/oluşturduğunuz dosyayı master branchi olarak belirliyor. Branch nedir diyenler için projenin dalları diyebiliriz. Bir görselle anlatalım:

Master branch'inde tasarımların onaylanmış ve kesinleşmiş hali bulunuyor. Master'daki sketch dosyaları tasarımcılar tarafından güncellenemiyor. Bunun için yeni bir branch (alt dal) açmanız gerek. Diyelim ki ihtiyaçlara yeni bir özellik ya da ekran eklendi. Bunun için alt bir dal açıp bu özelliği orada tasarlamanız gerek. Özellik çok mu büyük? Branch'lerin altında da branch açılabiliyor.

Yeni bir branch açıp Open in Sketch butonuna basarak sketch'in bu dosyayı açmasını sağlıyoruz.

Sketch'te dosya isminde hangi branch olduğu yazıyor.

Bundan sonra normal tasarım sürecine devam ediyoruz. Rahatça dosyayı kaydedebiliriz. Sketch çökse bile dosyalarınız bilgisayarınızın diskinde duruyor. Tasarımda belli bir noktaya geldiğimizde(yeni bir ekran, gereksiz elemanların silinmesi, sembollerin düzeltilmesi, kararı sizde) Abstract'te projeye versiyon ekleme zamanı. Bu işleme commit deniyor. Projenin o zamandaki halini kaydedip işaretliyormuş gibi düşünün. Tasarımların Abstract'te gözükmesi için commit'lemek şart.

Commit işlemi hem Abstract'in Sketch üzerinde çıkardığı butonla, hem de Abstract içinden yapılabiliyor. Butona bastığınızda Abstract'teki en son halinden bu yana ne değişiklikler yapıldığını size listeliyor (artboard eklendi, değişti, semboller eklendi, değişti vs.). Commit'in ne yaptığını özetleyen bir mesaj yazıp işlemi tamamlıyorsunuz. Değişiklikler Abstract'in sunucuları ile de eşleniyor. Yani dosyanızın bir kopyası da sunucularda tutuluyor.

nayn mobil uygulaması için commit mesajlarım

Bundan sonra geçmişteki commitlerin her birine gidip ekranların o zamanki halini görebilirim.

Versiyon tutuyor, başka?

Commit sonrası projedeki diğer insanlar da bu değişiklikleri ve ekranların son hallerini görüntüleyebiliyor, üzerine yorum yazabiliyor. Yorum ekranında dikdörtgenler çizip yorum iliştirebiliyorsunuz, ben bunu yazılımcılara detay vermek için kullanıyorum.

Yorum yazılsın istemiyorsanız, o branchteki işlerin durumunu değiştirebilirsiniz:

Her durumun farklı rengi var.

Ek olarak, ekranların bir önceki hali ile şimdiki hallerini yan yana ya da overlay olarak gösteren bir karşılaştırma ekranı da var.

Yazılımcıların katmanlar arasındaki boşlukları görebileceği, kullanılan fontları, renkleri inceleyebilecekleri bir inspect özelliği de mevcut. Inspect özelliğine bir dizi yenilik geleceğini açıkladılar, beklemedeyiz. Ekip olarak Zeplin kullanıyoruz zira Zeplin'in StyleKit oluşturma özellikleri yazılım ekibini bir hayli hızlandırıyor. Abstract bunu eklediğinde bizim tüm ihtiyaçlarımızı karşılıyor olacak.

Kod çıktısı olarak CSS veriyor sadece, diğerleri de eklenmeli.

Tasarım belli bir olgunluğa ulaştıysa, ekranları bir Collection içine alıp müşteriye sunulacak hale getirebiliyorsunuz. Bunu inVision ve Marvel gibi düşünebilirsiniz, ama sadece ekranların arka arkaya gezilmesi dışında bir özelliği yok.


Branch'te hedeflenen çalışma müşteriye gösterip revizleri tamamladıktan ve nihayet onay alındıktan sonra, o branch'i master branch'ine birleştiriyorsunuz (merge). Master'a eklenen tüm değişiklikler, yazılımcılar tarafından kodlama planına alınıyor. O sırada devam eden diğer tasarım değişiklikleri yazılım ekibinin odak noktasında olmuyor. Bu sayede neyin kodlanıp kodlanmayacağını net bir şekilde biliyoruz.

Tasarım sürecine yazılımcıların erkenden dahil olması projenin geliştirilme hızına pozitif etki ediyor.

Abstract'i sevmemizin bir çok nedeni var. Tasarım sürecine yazılımcıların erkenden dahil olması projenin geliştirilme hızına pozitif etki ediyor. Tasarım sırasında var olan teknik bilgi eksikliğini bu sayede giderebiliyoruz. Bazen görsellerdeki çok ufak değişiklikler yazılım tarafında günler kazandırabiliyor.

Ekranlar üzerinde bıraktığımız detaylı notlar sayesinde yazılımcıların kafasındaki belirsizliği giderebiliyoruz. Aynı şekilde yazılım ekibi de sorularını ekranlar üzerinden iletebiliyor. Proje yönetiminde konular elbette issue olarak açılıyor ancak bazı izahlar da görsel gerektiriyor.

Kapalı kapılar ardında tasarım yapıp bitti dediğimizde uzun ve uğraştırıcı revizyonlar almak yerine, ilerleme kaydettikçe yapılanları sunmak süreci kısaltıyor.

Birden fazla tasarımcı, aynı sketch dosyası üzerinde farklı branchlerde çalışabiliyor. Birleştirme esnasında bütün çalışmalar birbirlerini bozmadan birleşiyor.

Tüm projelerin tasarımları aynı çatı altında toplanıyor. Kim hangi projede ne yapmış, takip edebiliyoruz.

Abstract'i kullanmak için aylık abone olmanız gerekiyor. Fiyatlandırmayı tasarımcı başına yapıyorlar. Tasarımcıların dışınaki herkesi sınırsız ekleyebiliyorsunuz. Starter hesabı aylık 10$/tasarımcı, Business hesabı ise 16.67$/tasarımcı. Biz business hesabındayız, zira yorumlama, not bırakma ve private proje desteği sadece business hesabında var.

İlerleyen aylarda Abstract'in çok gelişeceği malum. Hem ekip içerisinde, hem de proje yönetimi konusunda danışmanlık verdiğim ekiplerde müthiş bir etki yarattı. Biz de kullandığımız projelerde yazılımcı ve tasarımcıların etkinliğini arttırdığını gördük. Kullanmayı düşünen herkese tavsiye ederim.

Eğer bu yazıyı beğendiyseniz aşağıdaki tweet vasıtasıyla paylaşmayı unutmayın :)