Adobe XD ve Sketch – Hesaplaşma 2020

İki ağır sıklet yarışmacı, en çok tercih edilen tasarım aracı için en üst noktayı yakalamak için savaşmaya devam ediyor: Adobe XD ve Sketch. Hangi araç hepsini yönetecek? Cevap basit değil. Her ikisi de son yıllarda olağanüstü ilerleme kaydettiğinden, özellikler, performans ve kullanım kolaylığı konusunda kapsamlı bir tasarım aracı karşılaştırmasının zamanı geldi.

Sketch, XD'nin çıkışından önce zaten yıllar öndeydi: tam olarak altı. Geniş, özel bir hayran kitlesi vardı, özelliklerle doluydu ve kapsamlı bir eklenti ekosistemi vardı. Ancak Sketch'in bir Aşil topuğu vardı - yalnızca Mac'lerde çalıştı.

2016'da Adobe, sıcaklığı artırdı ve mücadeleye girdi. Sketch'i yalnızca XD'deki benzer özelliklerle eşleştirmekle kalmadılar, Windows'ta da kullanılabilir hale getirdiler. Dünyadaki masaüstü bilgisayarların yaklaşık %78'i Windows üzerinde çalıştığından, bu cesur ve rekabetçi bir hareketti.

Adobe XD, Creative Suite programında önemli bir boşluğu da doldurdu. Fireworks'e altın el sıkışma verildi ve XD tarafından sunulan özellikler Illustrator veya Photoshop gibi diğer uygulamalarda mevcut değildi. XD, Sketch ile aynı hafif, vektör tabanlı tasarım aracı olmakla kalmaz, aynı zamanda Adobe Creative Suite ekosisteminin geri kalanıyla daha iyi bütünleşir.

Bununla birlikte, tasarımcılar arasında, hangi aracın daha iyi olduğu konusunda görüşler hala farklılık göstermektedir. Özellikler her iki araca da hızla eklendiğinden, genellikle birbirini takip eden ve sıklıkla birbirini taklit eden özellikler eklendiğinden, savaş son zamanlarda topyekün bir savaşa dönüştü.

Gelin ve Adobe XD ile Sketch'teki aşağıdaki özellikleri karşılaştıralım:

• Kullanıcı arayüzü
• Sembollerle/Ana Bileşenlerle Çalışmak
• Varlıklar ve Bileşenler Panelleri
• Katmanları ve Bileşenleri Ölçeklendirme
• Öğeleri Çoğaltma ve Dağıtma
• Duyarlı Tasarım Araçları
• Eklentiler
• prototipleme
• Takım İşbirliği
• Geliştirici Aktarımı
• Sürüm Kontrolü ve Paylaşılan Kitaplıklar
• Karanlık Mod

Kullanıcı arayüzü

Sketch ve Adobe XD benzer bir arayüzü paylaşsa da, Sketch'in kullanıcı arayüzü XD'ye göre daha avantajlıdır . Daha çok sağlam, profesyonel bir tasarım aracı gibi hissettirirken, XD, Illustrator ve Photoshop'un inceltilmiş bir kombinasyonu gibi hissettiriyor.

Adobe XD'deki önemli bir rahatsızlık, varlıklar panelini varsayılan olarak açık olarak göstermesidir. Çoğu tasarımcının beklediği şey bu değil. Bir tasarım belgesine başlarken çoğu tasarımcı, varlıkları veya eklentileri değil, katmanlar panelini hemen görmeyi bekler.

➠ Sezgisel arayüzü için Sketch'e +1.

Sembollerle/Ana Bileşenlerle Çalışmak

Yeniden kullanılabilir tasarım kitaplığı “sembolleri” hem Sketch hem de Adobe XD'de mevcuttur (XD'de “ana bileşenler” olarak adlandırılırlar). Bir sembol veya ana bileşen güncellendiğinde, o bileşenin projedeki diğer tüm örnekleri güncellemeyi yansıtır.

Ancak Adobe XD'nin aksine, Sketch'in Akıllı Düzen özelliği, bu tür ana bileşenlerle çalışırken daha güçlüdür. Daha fazla esneklik ve daha hızlı iş akışları sağlar.

Sketch'te, bir bileşene belirli bir düzen atayabilir → bileşeni tuval üzerine sürükleyebiliriz → içeriği özelleştirmek için geçersiz kılmaları kullanabiliriz ve bileşen yeni içeriğine göre yeniden boyutlandırılacaktır.

➠ Sembolleri daha iyi yaptığı için Sketch'e +1.

Varlıklar ve Bileşenler Panelleri

Sketch ve Adobe XD, bazı farklılıklarla benzer varlık/bileşen panellerini paylaşır.

Varlıklar için XD, tasarımcılara "Tümü" dışında yalnızca belirli kategorileri görme seçeneği sunan bir açılır menüye sahiptir. Tasarımcılar ayrıca "Izgara Görünümü" ile "Liste Görünümü" arasında geçiş yapabilir. Bu seçenekler, XD'deki varlıklar panelini önemli ölçüde daha kullanıcı dostu hale getirir. Ayrıca, belirli kategorileri görüntülemek için açılan bir menü, gelecekte daha fazla kategori eklemek için daha fazla esneklik sağlar.

Eskiz daha az esnektir. Proje varlıklarını üç düğmeli segmentli bir kontrol altında görüntüler (semboller, metin stilleri ve renk stilleri için). Sketch ile bileşenler aranabilir ancak kategoriler arasında aranamaz. XD, tüm varlıklardaki tüm bileşenleri arayarak daha iyi arama yapar.

➠ Varlıkları daha iyi yönettiği için Adobe XD'ye +1.

Diğer Kitaplıklardan Ana Bileşenleri Kullanma

Sketch ile tasarımcılar, yerel veya çevrimiçi paylaşılan çok sayıda bağlantılı kitaplıktan çalışma yüzeylerine ana sembolleri hızlı ve kolay bir şekilde ekleyebilir. Adobe XD'de "bağlantılı varlıklar" "XD bulutundan" (bileşenler, renkler ve karakter stilleri) tasarımlara yerleştirilebilir, ancak bu garip iş akışı nedeniyle Adobe XD çok daha az esnektir.

➠ Ana bileşenlerle çalışırken daha iyi UX için Sketch'e +1.

Renk Stillerini Düzenleme

Adobe XD, varlık kitaplığına eklendikten sonra tasarımcıların renk stillerini düzenlemesine ve çalışma yüzeylerinde gerçek zamanlı olarak renk değişimini izlemesine olanak tanır. Sketch'te renkleri global olarak düzenlemek için bir geçici çözüm vardır, ancak Adobe XD kadar sezgisel değildir.

➠ Renk stillerinin daha iyi düzenlenmesi için Adobe XD'ye +1.

Tasarım Sistemi Kurma

Sketch, tasarım sistemleri (simgeler, düğmeler, renk stilleri, metin stilleri vb.) oluştururken bileşenleri organize etmenin harika bir yoluna sahiptir. Bu varlıkları oluştururken ve adlandırırken eğik çizgi '/' kullanılarak, bunlar bileşenler panelinde gruplandırılır ve ekleme menüsünde hiyerarşik olarak düzenlenir. Bileşenleri mantıklı bir şekilde organize etmek için mükemmel bir yöntemdir ve yüzlerce tasarım öğesiyle çalışan tasarımcılar için mantıklıdır.

Adobe XD bu esnekliği sunmaz.

➠ Tasarım varlıklarının kolay yönetimi için Sketch'e +1.

Katmanları ve Bileşenleri Ölçeklendirme

Birden çok bileşen içeren nesneleri ölçekleme, Adobe XD tarafından iyi işlenmez. Genel olarak, Sketch bunu çok daha iyi idare eder. Örneğin, bir sembolü ölçeklerken öğeler arasındaki orantılı boşluğu güzel bir şekilde korur.

Buna ek olarak, Sketch'in, hangi orijinden ölçekleneceğini belirtirken bir grup öğenin yüzdeler veya sayılar kullanılarak ölçeklenebildiği, kullanışlı bir Katmanları Ölçekle özelliği ( Command+K ) vardır. Sketch, seçilen katmanları yeniden boyutlandırırken, kenarlık kalınlığı, gölge boyutu ve yarıçap gibi stil nitelikleri uygun şekilde ölçeklenir.

Sketch'teki bir başka kullanışlı özellik de denetçideki öğeleri sayılara veya yüzdelere göre yeniden boyutlandırma yeteneğidir. Bu, yukarıdaki Katmanları Ölçekle komutundan biraz farklıdır. Yüzdelere veya sayılara aşağıdaki harfleri ekleyerek - c/m, t, b, r —Sketch, seçilen öğeyi o orijinden ölçeklendirir. Örneğin “ %50c ” seçilen öğeyi merkezden %50 ölçekleyecektir.

• c/m: merkezden ölçek
• t: üstten ölçeklendir
• b: alttan ölçek
• r: sağdan ölçekle

Not : "Soldan ölçekle" seçeneği, Sketch'te varsayılan davranış olduğu için gösterilmez.

Sketch'te katman ölçeklemenin nasıl çalıştığını görün →

➠ Öğeleri ölçeklerken daha fazla çok yönlülük ve hassasiyet için Sketch'e +1.

Öğeleri Çoğaltma ve Dağıtma

Adobe XD'deki Tekrar Izgarası , bir grup öğeyi bu nesneleri tekrarlayan bir ızgaraya dönüştüren kullanışlı bir özelliktir. Çoğu tasarımcı, XD'yi keşfederken muhtemelen birkaç kez denedi, ancak tasarımcılar bunu kaç kez kullanacak? Ve ne yazık ki, Tekrar Izgarası katmanlara yapışmaz, bu önemli bir eksikliktir.

Öte yandan Sketch ile, Option tuşunu basılı tutabilir ve çoğaltmak için bir katmanı sürükleyebiliriz (sınırlamak için Shift tuşunu da basılı tutun). Bunu takiben Command+D , öğeyi kopyalar arasında aynı tam boşlukla istediğiniz kadar tekrarlar.

Ayrıca Sketch, Smart Distribute ile tasarım iş akışlarını hızlandırır. Tasarımcılara ızgaralar oluşturma, boşlukları ayarlama ve katmanları yeniden sıralama konusunda daha fazla kontrol sağlar. Smart Distribute'ın yaptığı birçok yararlı küçük şeyin yanı sıra, denetçide sihirli bir "Tidy" düğmesi vardır.

Bir çalışma yüzeyine rastgele birkaç nesne yerleştirdikten sonra, Düzenli düğmesine tıklayabiliriz ve bu onları sihirli bir şekilde ızgara üzerinde eşit olarak dağıtacaktır. Görünen tutamaçları sürükleyerek (grubun üzerine gelindiğinde) veya mutlak hassasiyet için manuel değerler girerek boşlukta ek ayarlamalar yapabiliriz.

Akıllı Dağıtım'a ek olarak ızgaralar, kılavuzlar ve dağıtım konusunda tasarımcılara yardımcı olmak için birkaç Sketch eklentisi oluşturulmuştur. İşte üç:

Katmanları Dağıtma • SketchDistributor • Eşit dağıtılmış Kılavuzlar

➠ Öğeleri daha iyi çoğaltmak ve dağıtmak için Sketch'e +1.

Duyarlı Tasarım Araçları

Hem Adobe XD hem de Sketch, benzer otomatik yanıt özelliklerine sahiptir. Her ikisi de, öğeyi sınırlama kutusunun belirli bir orijine sabitlerken, bir öğenin sabit genişliğinin ve yüksekliğinin manuel olarak kontrol edilmesini sağlar. Adobe XD ayrıca öğelerin ve grupların yeniden boyutlandırılmasını otomatik olarak belirleyen akıllı bir "duyarlı yeniden boyutlandırma" aracına sahiptir, ancak bu mükemmel değildir.

Sketch, Smart Layout adlı akıllı duyarlı bir araca sahiptir. Tasarımcılar duyarlı bileşenler oluşturabilir ve içerikleri ayarlandığında, bileşenler değişikliğe uyum sağlayarak daha fazla esneklik ve daha hızlı iş akışları sağlar.

Akıllı Düzen ile tasarımcılar, metin etiketleri ne kadar uzun olursa olsun, tutarlı kenar boşluklarını ve dolguyu korurken otomatik olarak yeniden boyutlandırılan düğmeler oluşturabilir. Smart Layout, gruplarla da çalışır.

Adobe XD, yakın zamanda bir "duyarlı yeniden boyutlandırma" özelliği uyguladı, ancak yine de Sketch'in gerisinde kalıyor.

➠ Hızlı ve kolay yanıt veren tasarım özellikleri için Sketch'e +1.

Eklentiler

Çok sayıda dijital tasarım aracı arasında Sketch, en sağlam eklenti ekosistemlerinden birine sahiptir. Binlerce eklentiye sahip olmak Sketch'in en çekici özelliklerinden biridir ve geliştiriciler sürekli olarak Sketch'in işlevselliğini artıran yardımcı eklentiler yaparlar.

Adobe XD'nin eklenti koleksiyonu karşılaştırıldığında sönük kalıyor. Aynı geliştirici bir Sketch eklentisinin XD sürümünü oluştursa bile, XD, eklentinin yaygın olarak benimsenmesi için çok yeni. Dahası, birçok yeni XD eklentisi, tasarımcıların onları benimsemesi için yeterli değer katmıyor.

➠ Kapsamlı eklenti ekosistemi için Sketch'e +1.

prototipleme

Auto-animate ile Adobe XD, prototip oluşturma için çıtayı yükseltti. Tasarımcılar, "akıllı" otomatik animasyon özelliğini kullanarak, içeriğin ekranlar arasındaki hareketini görselleştirmek için prototiplerde harika görünen geçişler oluşturabilir. XD, tetikleyicilere yanıt olarak ses efektlerini ve diğer ses dosyalarını çalan yeni bir "eylem" ile prototiplere sesler de ekleyebilir.

Sketch, prototipleme için ekranlar arasında bazı temel silmelere sahiptir, ancak mikro etkileşimlerle aynı akışkanlığı sunmaz. Sketch'in bunları ne zaman ekleyebileceği belli değil. Görünüşe göre odak, Asistanlar gibi diğer değerli özellikleri Sketch'e dahil etmek.

Sketch'in yapımcıları büyük olasılıkla ProtoPie gibi son derece ayrıntılı mikro etkileşimlere sahip prototipler oluşturmak için birçok başka araç olduğunu düşünüyorlar. Güçlüdür ve Sketch, Figma ve Adobe XD'den tasarımları kolayca içe aktarabilir.

Mobil cihazlarda prototipleri önizlemek için uygulamalar sağlama konusunda hem Sketch hem de Adobe XD, baş başadır: Sketch Mirror ve Adobe XD . Uygulamalar, masaüstünde tasarlanan prototipi bir USB kablosu veya wifi aracılığıyla mobil ekrana çeker.

➠ Prototipleri görselleştirmek için otomatik animasyonlu geçişler için Adobe XD'ye +1.

Takım İşbirliği

Her iki araç da ekip işbirliği sunar. Sketch'te, paylaşılan bir bulut çalışma alanı kullanan tasarımcıların fikirlerini paylaşabileceği, Paylaşılan Bulut Kitaplıkları ile senkronize kalabileceği, diğer ekip projelerinin ilerlemesini kontrol edebileceği ve tasarımlar hakkında geri bildirim bırakabileceği, tümü tek bir yerde Sketch for Teams vardır.

Ayrıca, Sketch uygulamasına erişimi olmayan davet edilen paydaşlar ve ortak çalışanlar, tarayıcıdaki tasarımları görüntüleyebilir, inceleyebilir ve bunlara yorum yapabilir. Geliştirici devir işlemi ayrıca Sketch for Teams kullanılarak Sketch'e entegre edilmiştir.

Bu yazı yazılırken, Adobe XD'nin premium sürümü, ekiplerin XD dosyalarını Creative Cloud aracılığıyla diğer tasarımcılarla (çevrimiçi ve çevrimdışı) birlikte düzenlemesine, dosyaları incelenmek üzere paylaşmasına ve geliştiriciler için özellikleri kolayca dağıtmasına olanak tanır. Bu özelliklerin tümü şu anda beta sürümündedir .

➠ Basit ekip işbirliği için Sketch'e +1.

Geliştirici Aktarımı

Tasarımları geliştiricilere teslim etmek çok önemli bir adımdır ve hem Adobe XD hem de Sketch bunu eşit derecede iyi idare eder. Tasarımcılar, projeleri çevrimiçi platformlar aracılığıyla paylaşarak, spesifikasyonlar oluşturabilir ve tasarımları web sitelerine ve uygulamalara dönüştürmelerine yardımcı olmak için geliştiricilerle işbirliği yapabilir.

➠ Geliştirici devri için Adobe XD'ye +1 ve Sketch'e +1 .

Sürüm Kontrolü ve Paylaşılan Kitaplıklar

Aynı proje üzerinde diğer tasarımcılarla çalışırken tasarım dosyası sürümlerini kontrol etmek çok önemlidir. Ayrıca ekip işbirliğini ve tasarım geri bildirimini daha verimli bir şekilde kolaylaştırır. Sketch, yakın zamanda bu özellikleri Sketch for Teams'e entegre etti. Sketch Cloud ile tasarımcılar, dağıtılmış ekiplerde tasarım sistemleriyle çalışmayı kolaylaştıran tasarım dosyalarını ve Kitaplıkları paylaşabilir.

Adobe XD ayrıca Adobe Creative Cloud ile bir bulut dosya sürümü oluşturma sistemine sahiptir. Creative Cloud web sitesi XD dosyalarının sürümlerini tutarken, önceki sürümlere geri dönmek mümkün değildir. Önceki bir sürüme dönmek için tasarımcıların dosyayı Adobe XD'de Creative Cloud web sitesi aracılığıyla açması ve ardından içeriği kopyalayıp geçerli belgeye yapıştırması gerekir. Dosya sürümleri, adlandırılmadığı veya işaretlenmediği sürece 30 gün sonra otomatik olarak silinir. Başka bir deyişle, sorunsuz bir süreç değil.

Sketch gibi, XD de ekiplerin Creative Cloud Libraries kullanarak paylaşılan varlıkları kullanmasını kolaylaştırır. Tasarımcılar bu kitaplıklardan renkleri, karakter stillerini ve grafikleri XD'ye getirebilir.

➠ Bulutta kolay dosya sürümü oluşturma ve paylaşılan Kitaplıklar için Sketch'e +1.

Karanlık Mod

Harika Görünüyor ve Tasarımları Öne Çıkarıyor

Birçok tasarımcı, kreasyonlarını ekranda yansıma ve parlama olmadan görebilmek için loş odalarda çalışmayı tercih ediyor. Karanlık mod kullanıcı arayüzü bu ortama iyi uyum sağlar. Neredeyse tüm renkler için mükemmel kontrast sağlar ve görsel içeriği daha çarpıcı hale getirir.

Karanlık mod sadece harika görünmekle kalmaz, aynı zamanda "dijital göz yorgunluğunu" en aza indirdiği bilinmektedir. Kabul edelim, tasarımcılar günün büyük bir bölümünde ekranlara bakıyorlar. Dijital göz yorgunluğu, milyonlarca insanı etkileyen yaygın bir durumdur. Aşırı bilgisayar kullanımından düzenli olarak parlak ışığa maruz kalmaya kadar her şeyin neden olduğu baş ağrısı, boyun ağrısı, bulanık görme ve yanma/batma gözlerine neden olabilir.

Vurgu ve Vurgu Renkleri

Sketch, Sketch 52'den (Ekim 2018) beri karanlık modu desteklemektedir. Ayrıca macOS Mojave'nin genel Vurgu ve Vurgu renk tercihlerini de destekler. Katmanlar panelinde, Denetçide ve uygulamanın başka yerlerinde vurgulanan seçili seçenekler, sistem tercihleriyle eşleşir.

Karanlık mod, Adobe XD'de, macOS'ta bile mevcut değildir.

➠ Karanlık mod için Sketch'e +1.

Adobe XD vs Sketch Showdown Kazananı… Sketch

Sketch, Adobe XD'ye göre önemli bir farkla tasarım aracı üstünlüğü savaşını kazandı.

Bazı senaryolarda seçim açıktır: Sketch, Windows için kullanılamaz. Adobe Creative Cloud aboneleri için dikkate değer bir avantaj da, XD "başlangıç ​​planının" ücretsiz olarak sunulmasıdır, ancak önemli sınırlamalarla birlikte gelir.

Sketch'in çok yönlülüğü, macOS'teki tasarımcıları XD yerine Sketch'i seçmeye zorlamalı. Arayüzü, eklentileri, işbirliği özellikleri, duyarlı tasarım araçları, yeniden kullanılabilir semboller, paylaşılan kitaplıklar ve diğer kullanışlı özellikleri, Adobe XD'nin özelliklerini geride bırakır.

Tasarım dosyalarını XD'den Sketch'e taşımanın mümkün olmadığını belirtmekte fayda var. XD, Sketch dosyalarını açabildiğinden, Sketch'ten (ve Photoshop veya Illustrator'dan) XD'ye geçiş daha kolaydır. Abstract veya InVision Craft gibi yalnızca Sketch eklentilerini kullanırken bazı sorunlar ortaya çıkabilir, ancak bu biraz temizlikle önlenebilir.

Bazı tasarımcılar, Otomatik canlandırma özelliği nedeniyle Adobe XD'yi sever. Prototiplerin harika görünmesini sağlayan çekici bir özellik. Ancak, tasarımcıların bunun yalnızca bir fantezi özelliği olduğunu akıllarında tutmaları gerekir. Sketch vs XD'nin avantajları göz önüne alındığında, ödünleşmeler buna değmez. Sketch ile sorunsuz çalışan birçok gelişmiş prototip oluşturma aracı mevcuttur.

Savaş henüz bitmedi. Önümüzdeki yıllarda Adobe XD ile Sketch arasında yoğun ve topyekün bir savaş yaşanacak. Sonunda, her iki tasarım aracına daha fazla yetenek eklendiğinden yararlanacak olan tasarımcılardır. Günlük iş hayatlarını çok daha kolaylaştıracak ve bu dört gözle beklenecek bir şey.

Haydi ne düşündüğünü söyle! Lütfen düşüncelerinizi, yorumlarınızı ve geri bildirimlerinizi aşağıya bırakın.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• Hassas Tasarım – Bir Adobe XD İncelemesi
• Çok Modlu Tasarımı Keşfetmek – Bir Adobe XD Eğitimi
• Form ve İşlev - En İyi Tel Çerçeve Araçları Kılavuzu
• Bu En İyi UX Araçları ile İşinizde Ustalaşın
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler