Sketch mi Adobe Xd mi? Büyük kapışma!

Sektörü yakından takip eden arayüz (UI) tasarımcılarının da bildiği üzere pazarda Sketch ile Adobe Experience Design (Adobe Xd) arasında son zamanlarda hararetli bir kapışma yaşanıyor!

Peki Türkiye’de bu duruma nasıl bakılıyor? Veya bakılıyor mu?

Ne yazık ki biz Türkler bir şeyin ilkini her zaman ölümüne seviyor ve adeta avukatı kesiliyoruz. Aynı şeyi Sketch için de yapıyoruz. Fakat haklı sayılabiliriz.

Sketch yeni sayılabilecek bir uygulamayken kemikleşmeye başlamış bir hayran kitlesi oluşturmaya hızla devam ediyor. Ve bunu yalnızca basitleştirilmiş arayüzüyle yapıyor.

Adobe Xd ise Sketch’e göre çok daha yeni, hatta şu an beta aşamasında olan bir uygulama. Fakat beta sürümünde bile Sketch’i alaşağı eden pek çok özelliği mevcut. Bu hararetli yarıştan kim birinci çıkacak, hadi vakit kaybetmeden incelemeye başlayalım!

Uygulama savaşlarına bir yenisi daha eklendi!

Daha birkaç sene öncesine kadar Sketch ile Adobe Photoshop (bazen de Adobe Illustrator ile) karşılaştırmalar yapılır ve hiçbir zaman verimli bir sonuca -göreceli olarak- ulaşılamazdı. Bu tartışmalara şimdi bir de Adobe Xd dahil oldu ve anlamsız Sketch ile Photoshop karşılaştırmaları nihayet sona erdi.

Nihayet sona erdi çünkü Photoshop aslında bir fotoğraf düzenleme uygulaması olmasına rağmen Sketch’in tek rakibiydi. Adobe daha sonralarda (özellikle CC sürümleriyle birlikte) kullanıcı arayüzü geliştiricilerini mutlu etmek ve kazanmak adına Photoshop için bu alanda pek çok özellik sunmaya başladı.

Çalışma yüzeyi (artboard), daha iyi çıktı alma özellikleri (advenced export), akıllı kılavuzlar gibi pek çok özellik Photoshop’a Sketch’le olan rekabeti sayesinde eklenmiş oldu. Tüm bunlarla birlikte halihazırda zaten büyük bir uygulama olan Photoshop daha fazla şişmeye başladı.

Photoshop’un asıl amacından uzaklaşmaya başlaması ve gereğinden fazla özellik bulundurması çok sayfalı işlerde arayüz tasarımcılarının kabusu haline geliyor ve Photoshop bir noktadan sonra tıkanmaya başlıyordu. Aynı şey işi yalnızca fotoğraf düzenlemek olan Photoshop kullanıcıları için de geçerliydi. Kullanmadıkları onlarca özellik yüzünden iş akışları yavaşlıyordu.

Sevgili Adobe mühendisleri de bu durumun farkına varıp Adobe Experience Design adında yepyeni bir uygulamayla karşımıza çıktılar.

Kuşkusuz, Adobe Xd’yi açtığınızda fark edeceğiniz ilk şey, (Photoshop’la karşılaştırıldığında) çok yalın bir arayüze sahip olduğudur. Adobe Xd, kullanıcı arayüzü tasarımına odaklandığı için resim düzenleme araçlarının hiçbirisini bulamazsınız; bu nedenle, uygulamanın arayüzü diğer Adobe uygulamalarıyla karşılaştırıldığında çok daha az seçenek sunmaktadır. Adobe Xd, fotoğraf rötuşlama veya arka plan temizleme işlemlerini yapabileceğiniz bir uygulama değildir.

Sketch’e geçiş yapmak istemeyen Adobe hayranları (veya Windows kullandığı için mecbur olanlar) için Adobe Xd bulunmaz bir nimet. Aksi taktirde Photoshop’a muhtaç kalındığını düşünecek olursak…

Peki her iki araç arasında seçim yapabilme şansı olan bir macOS kullanıcısı olsaydınız işler değişir miydi? Sketch ve Xd’nin birbirlerine çok benzediğini ve hatta neredeyse aynı denilebilecek bir arayüz tasarımına sahip olduğunu biliyor musunuz?

Görünmeyen Arayüzler: Akıllı Kılavuzlar ve Klavye Kısayolları

Sketch’de çok sevdiğim bir özellik olan görünmeyen arayüzler aslında Adobe Xd uygulamasında da mevcut. Görünmeyen arayüzler belirli görevleri gerçekleştirmek için bir arayüzle etkileşim kurmadan (yani tıklamadan) gerçekleştirilen işlemlere verilen bir addır, çünkü eylemler otomatiktir ya da o eylemi yapmak için basit klavye kısayolları bulunur.

Bir katmana %50 saydamlık mı vermek istiyorsunuz? Yalnızca klavyeden “5” tuşuna basmanız yeterli. Bir katmanı 20 piksel kenar boşluğuyla hizalamanız mı gerekiyor? Endişelenmenize gerek yok, otomatik olarak görünen Akıllı Kılavuzlar size ne kadar yakın olduğunuzu bildirir.

Yeniden Kullanılabilir Bileşenler (Semboller)

Her iki uygulama da şimdiye kadar eşit derecede etkileyiciydi, ancak gerçek savaş, daha büyük özelliklere gelindiğinde başlıyor.

Önce Sembollere bir göz atalım.

Semboller, yeniden kullanılabilir tasarım ögeleridir/bileşenleridir.

“Sembol” kelimesi kafanızı karıştırmasın burada simge veya işaret anlamında kullanılmıyor; yeniden kullanılabilen tasarım bileşenlerine sembol deniliyor.

Öncelikle bir sembol oluşturulur. Ardından tasarımınızın farklı yerlerinde oluşturduğunuz bu ana sembolün kopyasını kullanmış olursunuz. Kafanız mı karıştı? Şöyle açıklayayım:

Yani bir buton tasarlayıp bu butonu sembol olarak kaydettiğinizde aynı proje içerisindeki başka sayfalarda yeniden aynı butonu tasarlamanıza gerek kalmaz. İlk tasarladığınız ve sembol olarak kaydettiğiniz butonu arayüz tasarımının farklı sayfalarına çağırarak kolayca kullanabilirsiniz.

Sembollerin çalışma yüzeyine eklenmesi çok basittir! Sürükle ve bırak!

Sketch’de Sembol Kullanımı
Adobe Xd’de Sembol Kullanımı

Peki oluşturduğunuz sembolün başka bir örneği farklı görünmesi gerektiğinde ne olur? Yani bir header yaptınız ve içerisinde arka planı gri olan ana gezinme başlıklarının bulunduğu butonlar var. İletişim sayfasındayken İletişim butonun yeşil olmasını istiyorsunuz. Bunu sembolleri kullanarak nasıl yaparsınız?

Endişelenmeyin; Sketch, sembollerin içerisine farklı durumlarını gösteren biçimlerini yerleştirmenize izin verir. Basitçe sembolleriniz için farklı durumları ayrı bir sembol olarak tasarlar ve hangi durumlarda hangisinin kullanılacağını seçersiniz. Buna iç içe geçmiş semboller denir.

Adobe Xd’de henüz (bu yazıyı 29 Temmuz 2017'de yazıyorum) iç içe geçmiş semboller bulunmuyor, ancak gelecekte iç içe geçmiş sembollerin Adobe Xd’de de kullanılabilir hale gelmesi mümkün. Bu alanda Sketch yarışı kazıyor ancak Adobe Xd de hızla gelişmeye devam ediyor.

Yinelenebilen Bileşenler (Yinelenebilir Izgaralar)

Yinelenebilir Izgaralar (Repeat Grids), Adobe Xd’den başka hiçbir UI tasarım uygulamasının şu anda sunmadığı benzersiz bir özelliktir. Her karoya benzersiz bir içerik eklerken bileşenleri yatay ve dikey olarak yinelemenize (tekrarlamanıza) izin verir. Masaüstünüzden sürüklediğiniz içeriğin (resim ve metin dosyalarının) otomatik olarak eklenmesini ve dağıtılmasını sağlayabilirsiniz.

Örnekleyecek olursak; bir e-ticaret sitesinin ürün listeleme sayfasını tasarlıyorsunuz. Sayfada tek seferde 18 ürün gösterilmesi gerekiyor. Bu 18 ürünü tek tek elinizle eklemek yerine Yinelenebilir Izgaraları kullanarak tek seferde otomatik olarak tasarımınıza ekleyebilirsiniz.

Masaüstünüzdeki bir klasörde 18 farklı ürünün fotoğrafı olduğunu varsayalım, Adobe Xd’de oluşturduğunuz yinelenebilir ızgaranın içine bu 18 fotoğrafın aynı anda hepsini seçip sürükle-bırak tekniğiyle getirdiğinizde tasarımınızdaki 18 ürün kartına sırasıyla fotoğraflar paylaştırılmış olacaktır.

Bir .txt belgesi veya Excell tablosu ile daha ayrıntılı bilgileri (başlık, açıklama veya herhangi bir metin ve görsel) de bu yöntemle otomatik oluşturulan yinelenebilir ızgaranızın içine kolayca ekleyebilirsiniz.

Adobe Xd’de Yinelenebilir Izgaralar

Şimdiye kadar Sketch geliştiricileri, insanların eklenti oluşturmasına izin verdiği halde böyle bir özellik sunmuyor, ancak aynı işlemi gerçekleştirmenize izin verecen Craft Plugin’i yükleyebilirsiniz.

Şahsen, Adobe Xd’de bu özelliğin yerleşik olarak gelmesi gerçeğini çok seviyorum!

Kullanıcı Akışlarının Prototiplenmesi (Yalnızca Adobe Xd’de!)

Kullanıcı akışını prototiplemek Sketch’de yapabileceğiniz bir şey değildir, bu nedenle ‘Sketchciler’, InVision App, Marvell App veya Atomic App (bu arada her biri gayet harika uygulamalar!) gibi başka bir uygulamadan yardım almak zorundalar. Adobe Xd yerleşik olarak tasarım ve prototipleme araçlarını birlikte sunuyor, bu nedenle iş akışınızı tek bir uygulamada halletmek isterseniz Adobe Xd sizin için kullanışlı olabilir.

Adobe Xd’de Kullanıcı Akışlarının Prototiplenmesi

Görselleri Dışarı Aktarma

Görselleri dışarı aktarma her iki uygulamada çok benzer olsa da, bazen yalnızca Sketch’in desteklediği JPG dışarı aktarma özelliğini kullanmak zorunda kalıyorum, ama bu tamamen kişisel bir ihtiyaç…

Her iki uygulama da PDF, PNG ve SVG’yi desteklemektedir.

Sonuç

Photoshop ve Sketch arasındaki rekabetin şiddetli olduğunu düşünüyorsanız, Adobe Xd ile sürpriz yaşıyorsunuz — Adobe Xd ve Sketch arasındaki rekabet kendilerini sürekli iyileştirmeye itiyor; bu da daha iyi ve daha hızlı tasarım yapmak isteyen biz tasarımcılar için müthiş bir haber.

Peki nihai olarak hangisini seçmeliyiz? Adobe Xd mi Sketch mi? Windows kullanıcıları için Adobe Xd açık seçimdir. Fakat macOS kullanıcıları kişisel ihtiyaçlarına göre istediğini seçebilir.

  • Prototipleme araçlarına mı ihtiyacın var? (Adobe Xd’de mevcut!)
  • Semboller için daha fazla esneklik mi? (Sketch burada biraz daha iyi.)
  • Yinelenebilir ızgaralara aşık mı oldun? (Yalnızca Adobe Xd’ye özel!)

Siz bunlardan hangisini hangi sebeple kullanıyorsunuz?