Tasarım Ölçüleri Oluşturan Araçlar

Web, iOS veya Android ortamları için uygulama arayüzü tasarımı yapan arkadaşlar billirler; Sketch veya Photoshop’ta bir tasarımı tamamlamak, işin bittiği anlamına gelmiyor. Hâlen arayüzde yer alan görsellerin ilgili platforma göre belirli ebatlarda kesilmesi ve tasarımdaki objelerin hangi konumda, hangi ölçülerde ve hangi renklerde olacağı, metinlerin hangi yazıtipinde/yazıtipi boyutunda olacağı gibi bilgileri geliştiriciye ulaştırmamız gerekmekte.

Bunun için ya direkt tasarım dosyasını geliştiriciye ulaştırıp, geliştiricinin o tasarım üzerinden bütün objelerin konumlarını, ebatlarını vs. kendisi ölçmesini bekleyeceksiniz (bu senaryoda geliştiriciniz kullandığınız tasarım uygulamasını biliyor olmalı ve bir hayli sabırlı olmalı :) ya da bu yazının konusu olan ve esas amacı ölçüleri, tasarım hakkında bilgileri çıkarmak olan araçları kullanmanız gerekmekte.

Şimdi gelin hep beraber bu araçları inceleyip kullanımlarına dair detayları öğrenelim.

Zeplin

Bu konudaki yazımda ilk sırada Zeplin‘den bahsetmesem olmazdı. :) Ne de olsa bu araç Türkiye’den çıkan ve San Fransisco’da devam eden başarılı bir proje ve ben beta döneminden beri çok sık olmasa da ara sıra deneme amaçlı kullanmıştım.

Zeplin şu an itibariyle sadece Sketch ile beraber çalışmasına rağmen bildiğim kadarıyla Photoshop desteği ile ilgili çalışmalar hâlen sürüyor ve Photoshop eklentisi beta aşamasında. Photoshop kullanıyorsanız siz de eklentiyi indirip deneyebilirsiniz.

Zeplin kullanırken dikkatimi çeken şey gerek masaüstü uygulaması gerekse web tabanlı uygulamanın bir hayli hızlı çalışır olmasıydı. Yani tasarımınızı açıyorsunuz, klavyeden CMD+E’ye basarak Sketch eklentisini çalıştırıp seçtiğiniz tasarımları Zeplin uygulaması ile hesabınıza yüklüyorsunuz. Daha sonra ister Zeplin masaüstü uygulaması veya isterseniz tarayıcınız üzerinden ölçüleri hızlıca görebiliyorsunuz.

Bunun yanısıra tasarımda yer alan renkleri ve yazıtiplerini toplu halde görebilmek veya geliştiricinize iletebilmek için Zeplin’de yer alan tasarım rehberi (styleguide) özelliğini kullanabilirsiniz. Kalabalık öğeler içeren tasarımlarda bu özellik hayat kurtarıcı olabilir. Aksi halde kafayı yemeniz (özellikle geliştiriciler için) işten bile değil.

Aynı zamanda Zeplin’deki hesabınıza yüklediğiniz tasarımlar üzerinde istediğiniz herhangi bir alana tıklayıp yorumlar veya notlar düşebilirsiniz. Böylece geliştiricinizin “Yok efendim ben görmedim, ben duymadım, ben işitmedim.” gibi bahaneleri duymaktan kaçınabilirsiniz. :)

Zeplin’in dışarı aktarma özelliği sayesinde tasarımcıların bir başka derdine derman oluyor. Yani siz tasarımcı olarak Sketch üzerinden katmanları veya grupları dışarı aktarmak üzere işaretliyorsunuz, geliştiriciniz ihtiyacı olduğunda direkt Zeplin üzerinden kesilen görselleri indirip projeye dahil edebiliyor.

Slack entegrasyonu ile Zeplin’deki hareketleri yani yeni tasarım yüklendiğinde veya tasarımlar üzerinde yorumlar bırakıldığında Slack’deki belirlediğiniz bir kanala bildirim düşebiliyor.

Görebildiğim kadarıyla Zeplin’in tek dezavantajı Windows için şu anda bir desteğinin olmaması. Ama daha önce de belirttiğim gibi yakında Photoshop desteği gelecek ve buna Windows altındaki Photoshop da dahilmiş.

Son olarak Zeplin’in ücretlendirmesi olarak ücretsiz paketi ile tek bir proje, aylık 15$ vererek 3 aktif proje, aylık 25$ vererek 8 proje ve son olarak aylık 100$ karşılığında sınırsız proje şeklinde belirlenmiş. Yıllık ödemelerde de %10 indirim yapıyorlar.

Eğer Mac üzerinde Sketch ile tasarımlarınızı gerçekleştiriyor ve Zeplin’i denemediyseniz mutlaka üye olup kullanmanızı öneririm. Hızlı ve verimli bir takım çalışması için Zeplin adeta biçilmiş kaftan.

Sympli

Sympli ile yakın zamanda tanışmama rağmen içinde barındırdığı özellikler benim çok ama çok hoşuma gitti. Sympli ile Sketch ya da Photoshop üzerinde (buna Windows altındaki Photoshop’ta dahil) hazırladığınız tasarımlarınızı kendi eklentisi sayesinde hızlıca Sympli’ye yükleyebilir, geliştiricinizi veya ekibinizdeki diğer arkadaşınızı davet edip herhangi başka bir uygulama kullanmadan, tarayıcı üzerinde tasarımınızdaki ölçüleri, renkleri, fontları, font boyutlarını inceleyebilirsiniz.

Sympli ile aynı zamanda tasarımınızda dışarı aktarmak üzere belirlediğiniz görselleri direkt vektör (.pdf olarak) ya da Bitmap olarak geliştiriciniz hızlıca indirebilir.

Bunun dışında tasarımınızdaki renk ve fontları topluca gösterebileceğiniz “Brandbook” adında bir özelliği bulunmakta. Bu özellik daha önce Zeplin’de bahsettiğim tasarım rehberi ile birebir aynı. Yani renkleri ve yazıtiplerini işaretliyorsunuz sonrasında geliştiriciniz bütün tasarım rehberini tek bir ekranda görebiliyor.

Ayrıca Zeplin’de olduğu gibi eğer takımınız için Slack kullanıyorsanız Sympli hesabınızı Slack’e entegre edip tasarımlar ile ilgili hareketleri belirlediğiniz Slack kanalına yansıtabilirsiniz.

En önemli ve en hoşunuza gidebilecek özelliği bu paragrafa bıraktım. :) Aşağıdaki videodan da görebileceğiniz üzere XCode eklentisi sayesinde direkt tasarım objelerini XCode’daki “Storyboard” üzerine tasarımdaki konum ve ebatlarla yerleştirebiliyorsunuz. Sizce de müthiş bir özellik değil mi?

Sympli, Android geliştiricileri de es geçmiş değil. Bu eklentinin bir benzerini Android Studio için de yapmışlar ama XCode eklentisindeki gibi birebir özelliklerle çalışıyor mu doğrusu tam emin olamadım. Belki daha önce Sympli’yi Android Studio ile beraber kullanan birisi olursa bu yazıya yorum olarak deneyimini paylaşabilir. Ya da bu konuyla ilgili ekran kaydını izleyebilirsiniz.

Sympli aracının ücretlendirmesine gelecek olursak tek bir proje ücretsiz, 3 aktif proje için aylık 15$, 8 aktif proje için aylık 25$, sınırsız aktif proje için ise aylık 100$ olarak ücretlendirilmekte. Ayrıca yıllık üyeliklerde %10 indirim de sağlıyorlar. Gördüğünüz üzere ücretlendirme Zeplin ile aynı durumda. :)

Sympli hakkında daha fazla bilgi almak isterseniz web sitesine uğrayabilir ya da Sympli’yi denemek isterseniz 1 aktif proje için ücretsiz hesap açabilirsiniz.

Marketch

Marketch, Sketch uygulamasına özgü tasarım ile ilgili ölçü, yazıtipleri, öğeler arası uzaklık vs. gibi bilgileri etkileşimli bir .html dosyası olarak üreten bir Sketch eklentisi.

Marketch’i Sketch Toolbox ile direkt kurabilir ya da Github reposu üzerinden elle indirip kurabilirsiniz.

Marketch’in web sitesinde yer alan demo sayfasından görebileceğiniz üzere oluşturulan .html dosyalarını açtığınızda tasarımınızı görecek ve aynı Zeplin ya da Sympli’deki gibi tasarımdaki öğelerin üzerine tıkladığınızda ölçü bilgilerini görebileceksiniz.

Marketch ile en uygun şekilde çalışabilmeniz için Dropbox gibi bir senkronizasyon uygulaması kullanarak, geliştiricinizi davet edeceğiniz Dropbox altındaki klasöre ölçüleri .html olarak aktarabilirsiniz. Bu sayede ölçülerde yapacağınız herhangi bir güncelleme sonrası bütün bilgiler geliştiricinize kolayca ulaşacaktır.

Eğer Sketch kullanıyor ve ücretsiz bir alternatif arıyorsanız Marketch’i kesinlikle denemenizi öneririm.

Sketch Measure

Measure da yine Sketch uygulamasına özgü bir eklenti ve yukarıda tanıttığım araçların aksine bütün arayüzdeki ölçüleri, renkleri, uzaklıkları, yazıtipleri gibi bilgileri elle çıkarıp geliştiricinize gönderebiliyorsunuz.

Eklentinin kurulumu ve kullanımı çok basit. İster Sketch Toolbox adlı eklenti yönetim uygulaması üzerinden kurabilir veya isterseniz eklentinin Github reposundan indirip elle kurabilirsiniz.

Measure’u verimli kullanabilmek için klavye kısayollarını mutlaka ezberlemeniz gerekiyor. Aksi durumda eklentinin komutlarının çalıştırıldığı menü veya alt menülere habire uygulamak çok zor olacaktır. Klavye kısayolları size zor geliyorsa Github reposunda anlatıldığı gibi tekrar kısayolları yapılandırabilirsiniz.

Bu eklentinin ücretsiz olması bir avantaj ama orta veya daha büyük projelerde baş ağrısı yaşamanız çok olası. Çünkü daha önce de belirttiğim gibi tasarıma ilişkin bilgileri elle oluşturduğunuz için en ufak bir değişiklikte tekrar o bilgileri güncellemeniz ve tekrar geliştiricinize iletmeniz gerekmekte. İnanın bu senaryoyu ben bizzat yaşadım ve gerçekten çok yorucu bir süreç.

Öte yandan Measure eklentisinin geliştiricisi Spec Export adında eli yüzü düzgün yeni bir araç daha geliştirmiş. Hiç denemedim ama eğer düzgün bir şekilde çalışıyorsa ileride üstte tanıtımını yaptığım Marketch yerine kullanılabilir.

Sonuç olarak küçük bir projeniz var ise ve Dropbox üzerinden ölçülere ilişkin dosyaları teslim ederim diyorsanız kullanabilirsiniz. Ama orta veya büyük veyahut farklı platformlar için tasarladığınız projeleriniz var ise Spec Export özelliği kararlı hale gelene kadar bu eklentiden uzak durun.

Bütün bu incelemesini yaptığım araçların yanısıra çok fazla kurcalama şansı bulamadığım Avocode ve Markly App bulunuyor. Dilerseniz bu uygulamalara bir göz atabilirsiniz.

Eğer siz de bu araçlardan herhangi birini kullanıyorsanız bu yazıya yorum olarak tecrübelerinizi aktarabilirsiniz. Aynı zamanda yazıyı faydalı bulduysanız lütfen sosyal medyada paylaşın veya arkadaşlarınıza iletin.

Originally published at blog.fatihturan.com.