Sketch mi, Adobe XD mi yoksa Figma mı? Arayüz Tasarım Araçları Rehberi
Daha önce bu araçlardan birini kullanmış ve daha iyi bir deneyimi diğer programlarda bulabilir miyim diye kendinize soruyor ya da arayüz tasarımına yeni başlıyor olabilirsiniz. En çok tercih edilen arayüz tasarım araçlarının özelliklerini ve tercih sebeplerini sizler için derledik.
Genel hatlarıyla bir arayüz tasarım uygulamasında olması gereken özellikleri bu üç araç da size sağlamakta. Fakat daha önceki tecrübeleriniz ve sizin ihtiyaçlarınıza göre bu uygulamalardan birini seçerek daha verimli bir çalışma sağlayabilirsiniz. Öne çıkan özelliklerini inceleyerek bu üç uygulamaya göz atalım.
1. İşletim Sistemi
Bu üç uygulama arasında desteklediği platform açısından en avantajlı olanı Figma. Web tabanlı bir uygulama olan Figma’yı Windows, Mac, Linux ve hatta herhangi bir modern tarayıcıyı destekleyen bir cihazda kullanmanız mümkün. Uygulamaya tarayıcıdan ulaşabildiğiniz gibi masaüstü uygulaması aracılığıyla da kullanabilirsiniz.
Birden çok işletim sistemini destekleyen bir diğer uygulama ise Adobe XD. Windows veya Mac bilgisayarınız ile Adobe XD uygulamasını yükleyip tasarımlarınız üzerinde çalışabilirsiniz.
Bu konuda en kısıtlı uygulama ise Sketch uygulaması. Sketch sadece MacOS işletim sistemini destekliyor. Bu durum MacOS işletim sistemine sahip bir kullanıcı için sorun teşkil etmezken Windows veya Linux kullanan tasarımcılar için bir sorun. Windows mağazasında .sketch formatında dosyaları çalıştıran uygulamalar mevcut fakat size %100 Sketch özelliklerini ve deneyimini maalesef sunamıyorlar.
2. Uygulama Fiyatları
Ücret konusunda en avantajlı uygulamalar Figma ve Adobe XD. İkisi de kullanıcılardan bir ücret talep etmiyor.
Figma kullanıcıların ücretsiz olarak çalışmasına izin verirken profesyonel ya da şirket için kullanımda aylık olarak 12 dolarlık bir ücret istiyor.
XD ise Creative Cloud üyeliklerinden bağımsız olarak yüklenirken kullanıcılarında herhangi bir ücret talep etmiyor. Tabi Adobe’da gelişmiş özellikler için bir Creative Cloud üyeliğine sahip olmanızı istiyor.
Sketch maalesef ücretsiz bir kullanım sunmamakta. İlk kez Sketch uygulamasını edinmek isteyen kullanıcılar için yıllık 99 dolar talep etmekte ve sonraki her yıllık yenileme için 69 dolar gibi bir ücret almakta.
3. Uygulama Geliştirme Aşaması
Tasarımın tamamlanıp geliştirileceği ekibe teslim edilmesi de önemli bir aşama. Geliştiricilerin süreçlerini daha verimli kullanmaları için uygulamalar Web, Android ve iOS için hazır kodlar sunarak daha hızlı bir şekilde tasarımın özelliklerinin kodlanmasına olanak sağlıyorlar. Bu başlıkta da XD ve Figma kendi uygulamaları ile bu kodlara ulaşma olanağı sağlarken Sketch kendi içinde böyle bir özellik barındırmıyor. Fakat eklentiler aracılığıyla buna ulaşmak mümkün. Tabi bu noktada eklentiyi geliştirenlerin sizden ayrıca bir ücret talep etmesi mümkün olabiliyor.
4. Component ve Styles Oluşturma
Daha önce uygulama tasarımı yapmamış olan kişilerin bu terimler ile karşılaşmamış olma ihtimaline karşın öncelikle bu terimlerin ne anlama geldiğine bakalım.
Component: Uygulamanızda buton, liste, kart gibi kendi içinde aynı özelliklere ve yapılara sahip birden fazla kullanılacak olan bileşenlerin sadece bir kez tasarlanıp farklı noktalarda hızlı bir şekilde çoğaltılarak kullanılması hem tasarımcı hem de geliştirici için önemli bir avantaj. Bunun gibi birden çok kez tekrar edecek olan bileşenler genel olarak component olarak adlandırılır. Component’lerin içeriği; fotoğraf, yazı, renk gibi değişkenlikler gösterebilirken yapı olarak genellikle belirli ortak özellikleri barındırırlar.
Styles: Genel olarak bir uygulamanın içinde kullanılacak olan font ve özellikleri, renk skalası gibi ögelerin hepsi Styles olarak adlandırılır. Uygulama içinde kullanmış olduğunuz tüm renkler, tüm font stilleri toplu bir halde sunularak geliştiricinin istediği takdirde bunları daha hızlı bir şekilde görüntüleyerek önceden kodlayıp, sonrasında hızlı bir şekilde kodlarından çekebilmesi için Styles kısmı önem teşkil etmektedir. Bu saydıklarımız dışında genel olarak uygulamanın kimliğini oluşturan tüm bileşen özellikleri de Styles kısmında yer alabilir.
Bu üç uygulama da Component ve Styles konusunda çözümler sunmaktadır.
Sketch bu tür bir çözüm sunan uygulamalar arasında ilk olmasından ve bu konuda en çok detaya sahip olmasından dolayı öncüdür diyebiliriz.
Figma ise Sketch uygulamasının sahip olduğu yapıya çok benzer bir şekilde Component ve Styles desteği sunmaktadır. Sketch uygulamasında tüm Componentler Symbols adındaki tek bir sayfada toplanıp sadece orada düzenlenebilirken, Figma bunun zorluğunu daha pratik bir şekilde çözmektedir. Figma’da ana component’i istediğiniz yerde oluşturabilirsiniz ve onu kopyalayarak ana component’e bağlı olan bileşenler çıkarabilirsiniz. Ayrıca ana component’i silseniz dahi, ondan oluşturmuş olduğunuz diğer bileşenler aracılığıyla tekrar geri getirme olanağınız mevcut. Yani kısacası Sketch uygulamasındaki mevcut mantık Figma ile daha pratik bir çözüm olarak yorumlanmış diyebiliriz.
Adobe XD, Assets adını verdiği ve benzer mantıkta çalışan bileşen özelliğine sahiptir. Component ve Styles özelliklerini tek bir noktada Colors, Character Styles ve Component olarak birleştirerek benzer bir çözüm sunmaktadır. Bu sayede tüm bileşenleri hem tek bir noktadan görüntüleyebilirsiniz hem de istediğiniz zaman hızlıca kullanabilirsiniz.
5.Prototip Oluşturma
Hazırlamış olduğunuz tasarımın nasıl çalışacağı konusunda fikir vermesi adına sizden prototip hazırlamanız istenebilir ya da siz atladığınız bir nokta olmadığından emin olmak adına kendinize bir prototip hazırlayabilirsiniz. Yazıda bahsi geçen tüm uygulamalar ile prototip oluşturmanız mümkündür. Fakat prototipin gerçeğe en yakın olması adına Adobe XD tercih edilebilir. Micro Interactions adını verdikleri özellik ile istediğiniz tüm ekran geçişlerini sınırlama olmaksızın yapabilmeniz mümkün. Sonrasında oluşturduğunuz prototipi de link oluşturarak paylaşabilirsiniz.
Çok detaylı bir prototipe ihtiyacım yok diyorsanız da Figma ile hızlıca prototip oluşturabilir ve link aracılığı ile paylaşımını yapabilirsiniz.
Sketch prototip oluşturma konusunda çok yeni olsa da daha önceden de farklı uygulamalarda prototip oluşturulmasına izin verdiği için size uygun bir başka araçla dilediğiniz prototipi oluşturmanız mümkün. Bunlardan en bilinenleri Invision ve Framer diyebiliriz. Bu konuda en detaylı prototip oluşturma uygulamalarından biri ise Facebook’un geliştirmiş olduğu Origami isimli araçtır. Uygulamanın faaliyete geçtiğinde edineceği özelliklerin çoğunu bu sayede oluşturabilirsiniz.
6. Aynı Dosya Üzerinde İşbirliği
Bu özelliği tam anlamıyla sadece Figma sunabilmekte. İki veya daha fazla kullanıcı aynı anda, aynı dosya üzerinde değişiklik yapabilir ve birbirini görüntüleyebilir. Ayrıca istedikleri noktalara yorum bırakarak iletişim kurmaları da mümkün. Özellikle büyük ekip ile çalışan şirketler için büyük bir avantaj. Ayrıca dosya alıp gönderme veya drive üzerinden paylaşma ihtiyacını ortadan kaldırdığı için ayrıca verimli olmaktadır.
Adobe XD ya da Sketch henüz böyle bir özellik sunmamakta fakat bunun büyük bir dezavantaj olduğunu düşündükleri bir noktada geliştirme ihtimalleri yüksek.
7. Online mı? Lokal mi?
Bu soruyu tasarımcı olarak kendinize sormanız önemli bir nokta. Çünkü Figma ile çalışmayı tercih ederseniz internete erişiminiz olmadığı noktalarda uygulamayı kullanabilmeniz mümkün değil. Bu bir dezavantaj olduğu kadar avantaj da diyebiliriz. Çünkü tüm dosyalarınıza tek bir hesap üzerinden rahatça erişebiliyorsunuz ve aynı tasarım üzerinde yaptığınız revize ve alternatifleri ayrı ayrı dosya olarak kaydetmenize gerek yok. Figma her dosya için değişiklik geçmişini kaydederek istediğiniz zaman önceki çalışmalarınıza geri dönebilmenize olanak sağlıyor.
İnternet olmadan da çalışmak sizin için önemli bir konuysa Adobe XD ya da Sketch ile çalışmaya devam etmeniz gerekiyor. Bu konuda karşılaşabileceğiniz tek sorun Adobe XD’nin bazen güncellemeleri uygulamayı açmanıza izin vermemesi olabilir. Diyelim ki takım arkadaşlarınızdan biri güncel bir XD sürümü ile dosyayı güncelledi. Bu durumda sizin dosyayı açabilmeniz için mutlaka aynı sürüm veya üzerinde bir sürüm kullanıyor olmanız gerekmektedir. Umarız bir gün XD bu inadından vazgeçer fakat şimdilik buna dikkat etmek gerek.
8. Eklentiler
Üç uygulama da tasarım için gerekli temel bileşenleri sunsa da keşke olsaydı dediğiniz özellikler olabilir. Bu konuda devreye eklentiler kısmı giriyor. Son olarak Figma’nın da eklentileri destekler hale gelmesi ile birlikte tüm uygulamalara eklenti yüklemek mümkün. Bu konuda en kapsamlı desteği alan Sketch olsa da, XD ve Figma neredeyse arayı kapattı. Birbirinden faydalı eklentileri tüm uygulamalar için eklenti mağazalarından edinebilirsiniz.
Bu bahsettiğimiz konular dışında daha farklı özellikler ve deneyimler mevcut. Hala kafanızda soru işaretleri varsa bu üç uygulamayı da indirerek ufak bir proje deneyebilir ve deneyiminize göre karar verebilirsiniz. Burada Sketch uygulamasını öncelikli olarak deneyebilirsiniz çünkü Sketch uygulamasını beğenmemeniz durumunda .sketch uzantılı dosyaları hem Figma hem de XD ile açabilmeniz mümkün. Açtıktan sonra yaptığınız değişiklikleri tekrar sketch dosyası olarak kaydedemeyeceğinizi unutmayın!
Toparlacak olursak bu üç araç arasından bir kazanan seçmemiz doğru olmayacaktır, çünkü beklentilerimiz ve çalışma şeklimiz farklılık gösterebilmektedir. Fakat edindiğimiz çıkarımlara göre şu şekilde bir özet mümkün:
Figma: Takım arkadaşlarınız ile ortak çalışabileceğiniz, sahip olduğunuz herhangi bir işletim sistemini kullanabileceğiniz, temel seviye prototip özelliklerinin size yeterli olduğu bir durum için tercih edilebilir.
Adobe XD: Hem Windows hem de Mac ile çalışabilen, internet ihtiyacı olmadan çalışabileceğiniz, ortalamanın üstünde bir prototip uygulayabileceğiniz, Adobe uygulama ailesinden aşina olduğunuz pratikliği arıyorsanız XD tam size göre.
Sketch: Mac işletim sistemine sahipseniz, detaylı component özelliklerine ihtiyaç duyuyorsanız, Framer ve Origami gibi prototip araçları ile çalışmayı planlıyorsanız, Apple Design ya da Google Material Design kaynaklarını kullanacaksanız arayüz tasarım programlarının öncüsü Sketch ile tasarımlarınızı oluşturabilirsiniz.
Sizin bu konudaki görüşlerinizi ve hangi uygulamayı tercih ettiğinizi yorumlar kısmında bizimle paylaşın. 😎
Yazar: Serkan Mercan— https://www.linkedin.com/in/serkanmercan/
Originally published at http://www.digieggs.com on September 5, 2019.
