Yeni Arayüz Tasarım Aracı: Adobe XD

Son birkaç yıldır UI/UX tasarım konusuna odaklanan yeni dijital ürünler karşımıza çıkıyor. Tasarım alanında Sketch, prototipleme alanında InVision, Marvel gibi daha iyi deneyimler yaratılmasını sağlayan ürünler bunlardan bazıları. Adobe, bu yeni ürünlerin karşısında UI/UX tasarım için Photoshop ve Fireworks’un yetersiz kaldığını fark etmiş olacak ki; 2015'te üzerinde çalıştığını açıkladığı yeni ürününü, 2016 Mart ayında Adobe Experience Design adıyla yayınladı.

İlk yayınlanan sürümü “preview” olduğundan içerisinde çok fazla fonksiyon bulunmasa da “Design — Prototype” sekme isimlerinden Adobe XD’nin hem tasarım hem prototip aracı olarak konumlandığını söyleyebiliriz. Bu sürümü denemek amacıyla şu an çalıştığım firmada ekip olarak bazı projelerde kullanmaya karar verdik. Böylece ilk proje Radyonom’un yeni iOS ve Android uygulamalarının arayüzleri XD ile tasarlanmış oldu. 2016 Kasım ayında Adobe MAX konferasında açıklanan yeni güncellemeyle Adobe XD Beta sürümüne yükseldi ve majör sayılabilecek önemli özellikler gelmiş oldu.

Şimdi son güncellemelerde yer alan özelliklerle birlikte programın arayüzünü inceleyelim:

Karşılama Ekranı

Karşılama ekranında arayüz tasarlayacağımız cihaza göre seçim yapabiliyoruz. Ayrıca XD içerisinde yer alan Apple iOS, Google Material ve Microsoft Windows UI kitlerini de buradan açabiliyoruz. 
Karşılama ekranında sol altta bulunan “Begin Tutorial” bölümünden örnek çalışmayı inceleyebilirsiniz.

XD Arayüzü

Adobe XD son derece sade bir arayüze sahip. Buradaki toollara alışma sürecini atlattıktan sonra, kullanışlı özelliklerini ve kısayollarını keşfedip çok daha hızlı ve verimli çalışmak mümkün.

Üst kısımda yer alan “Design — Prototype” sekmelerinden geçiş yaptığımızda artboardlar aynı yerinde kalıyor, sadece yapabileceğimiz fonksiyonlar değişiyor. “Design” sekmesinde tasarım araçları olan alanlar açılırken; “Prototype” sekmesinde sayfa bağlantı ve geçişlerini ayarlayabileceğimiz, prototiplememizi sağlayan özellikler geliyor.

Toolbar & Sidebar

Toolbarda yer alan araçlar sırasıyla şu şekilde: 
Select
Rectangle
Elipse
Line
Pen
Text
Artboard
Zoom
Symbol Library
Layers
.

Sidebar bölümü yalnızca “design” sekmesindeyken açılan, tasarımla ilgili tüm fonksiyonları ayarlayabileceğimiz bir alan.

Tekrar eden içerik tiplerini XD’nin “Repeat Grid” özelliğiyle tekrar ettirip düzenleyebiliyoruz. İçeriklerin görsellerini ve metinlerini topluca farklılaştırmak da sürükle-bırak yöntemiyle kolay şekilde yapılabiliyor.

“Repeat Grid” içerisinde düzenleme yapmak ( * )

Prototype” sekmesinde tasarımları prototipleyerek sayfa geçişlerini sağlayabiliyorsunuz. Sayfa geçişinin yönü ve efekti de yine buradan ayarlanabiliyor.

“Prototype” bölümünde sayfa geçişlerinin ayarlanması

Prototiplediğimiz tasarımı sağ üst tarafta bulunan “Share Online” bölümünden Creative Cloud’a yükleyerek otomatik link oluşturmasını sağlayabiliyoruz. Bu linki gönderdiğimiz kişilerden feedback almamızı sağlayan, prototip üzerine yorum ekleme özelliği de bulunuyor.

“Share Online”

Export konusuna gelecek olursak; bu konuda da gayet kullanışlı ve basit kaydetme seçenekleri sunulmuş. Export etmek istenilen nesneler SVG, PNG, PDF türlerinde kaydedilebiliyor. Ayrıca iOS seçeneğinden 1x-2x-3x boyutunda, Android seçeneğinden ise ldpi — xxxhdpi aralığındaki boyutlarda kaydedilebiliyor.

Sketch ile Farkları

Aslında ana fonksiyonlarına bakarak Adobe XD ve Sketch birbirine çok yakın uygulamalar diyebiliriz. Sketch, UI/UX tasarım araçları arasında oldukça popüler olmasıyla birlikte birçok eklentiye de sahip. XD ise yeni bir oyuncu olduğu için fark yaratarak yeni kullanıcılar edinme peşinde.

Sketch’ten ayrıştığı en büyük özelliği prototiplemeyi de içerisinde barındırması diyebilirim. Buna ek olarak; eğer mobil uygulama tasarımı yapıyorsanız XD mobil uygulaması sayesinde anlık olarak tasarımları USB bağlantı sayesinde mobil cihazınıza yansıtabiliyorsunuz. Böylece prototiplenen tasarımı clouda yükleyip online bakmak yerine hızlıca uygulama üzerinden görüntüleyebilirsiniz.

Diğer gözlemlediğim bir fark ise; Sketch’te yapılan tasarımı kopyalayıp XD içerisine yapıştırarak aktarmak mümkün, fakat XD’de yapılan tasarımı Sketch’e aktarmak şimdilik mümkün değil.

Experience Design bir Adobe ürünü olduğundan Photoshop ve Illustrator’den kopyalama konusunda da kolaylık sağlıyor. Illustrator da XD gibi vektörel bir program olduğundan, nesnelerin direkt kopyala-yapıştır şeklinde taşınması mümkün. Photoshop’ta ise taşımak istediğimiz gruba sağ tıklayıp “Copy SVG” seçeneğiyle kopyalama işlemi yapabiliyoruz. (Bu özellik yalnızca Photoshop CC sürümünde yer alıyor.)

Experience Design macOS ile çıkış yapsa da Beta güncellemesiyle beraber Windows 10 sürümünü de yayınlamış durumda. Fakat Windows için ilk sürüm olduğundan macOS’taki tüm özellikler şimdilik yer almıyormuş.


Adobe, YouTube kanalında çeşitli UI/UX tasarımcılarının XD ile tanışıp, örnek çalışmalar yaptığı canlı video yayınları gerçekleştirdi. Adobe XD ile ilgili daha detaylı bilgiler için bu 12 videoluk listeye de göz atabilirsiniz.

Son olarak; Adobe Experience Design hem macOS hem de Windows için ücretsiz olarak yayınlanıyor.

Yeni güncellemeler geldikçe deneyimlerimi buradan aktarmaya devam edeceğim.

Görüşmek üzere.