Hangi tasarım araçlarını kullanıyoruz?

Arayüz ve kullanıcı deneyimi tasarlarken Atölye15 ekibi olarak bir çok tasarım aracından faydalanıyoruz. Bunlar kimi zaman işimizi kolaylaştırıyor, kimi zaman ise hayal ettiğimiz tasarımı gerçeğe en yakın halini deneyimleyebilmemize olanak tanıyorlar.

O zaman gelin birlikte bu araçları biraz tanıyalım.

Figma

Bundan bir kaç yıl öncesini soracak olursanız, Sketch tarafının gücünü ve sağladığı imkanları öve öve bitiremezdik ancak Figma son aldığı güncellemeler ile çıtayı bir üst noktaya taşıdı ve bizleri farklı bir topluluk ile buluşturdu.

Peki nedir bu Figma?

Arayüz tasarımlarımızı çizdiğimiz ve bu tasarımları 3. parti yazılımları kullanmadan doğrudan yazılım ekibimiz ile paylaştığımız bir web tabanlı uygulamadır. Masaüstü sürümü olsa da aslında onunda web tabanlı çalıştığını biliyoruz. Çizdiğiniz en ufak bir kare şeklin bile bulut ortamında saklanmasını sağlayan ve projelerimizin her aşamasını yedeklemesiyle bizi mest eden Figma için de bir çok özellik barındırıyor.

Artıları

• Web tabanlı olması sebebiyle otomatik olarak projelerinizi kaydeder ve bulut ortamında yedekleme işlemi gerçekleştirir.
• Yazılım ve tasarım ekipleriyle oldukça uyumlu bir çalışma ortamı sağlar. Proje içinde gezinen herkesin imleçini anlık olarak takip edebilirsiniz.
• Component ve variant özellikleri sayesinde yaptığınız çizimleri modüler hale getirebilir. Aynı yapıları bir çok alanda farklı amaçlar ile kullanmanıza imkan tanır.
• Invision, Zeplin ve Marvel gibi yazılımların temelde sağladığı tüm özellikleri Figma kendi içinde sağlayabilmektedir.
• Basit prototipler hazırlayabilir, projeye erişimi olan herkes spesifik alanlara direk olarak yorumlar ekleyebilir ve sizlere to do halinde revizelerini iletebilirler.
• Auto Layout özelliği ile tüm ekranlarınız için responsive çalışan yapılar inşa edebilirisiniz. (Bu konuda 3. parti eklentiler olmadan kendi içinde hizmet veren öncü uygulamadır.)
• Büyük çaplı projelerde web tabanlı olduğu için oldukça akıcı ve cihazınızın performansına çok bir müdahalede bulunmamaktadır.
• Ücretsiz olarak sunulan çoğu fontlara (Google Fonts gibi) erişim sağlayabilirsiniz.
• Figma topluluğuna ücretsiz bir şekilde eklentinizi ya da çalıştığınız proje dosyalarını paylaşabilirsiniz.
• Neredeyse her ay yeni özellikler tanıtılıyor. Bizde bunları beta aşamasında test etmekten memnuniyet duyuyoruz.

Eksileri

• Web tabanlı çalışan yazılımların cihazlarda kullanabileceği ram limitleri bulunmaktadır. Bu sebeple büyük bir projeyi cihazınıza kaydetmek istemeniz durumunda bellek limitine erişeceği için bazı durumlarda dışa aktarma işlemlerinde sorun yaşayabilirsiniz.
• İnternet bağlantınız olmadığında ya da zayıf olduğu durumlarda erişiminizi kaybedersiniz.
• Bir sebeple Figma alt yapısı hizmet vermemesi ya da yüksek fiyat politikasına geçiş durumunda çalışmış olduğunuz tüm projeleriniz riske girebilir ve maliyet açısından büyük sorunlar yaratabilir.
• Kullanılan resimleri kolay bir şekilde optimize edemezsiniz (aynı projenin bir kopyasını oluşturmanız durumunda bazı görsellerin boyutlarını küçülttüğünü fark ettik.)
• Figma topluluğunda eklenti yayınlamak istemeniz durumunda kalite kontrol yapan Figma ekibinin geri dönüşleri bizim için pek hızlı gerçekleşmedi maalesef.

Principle

Tasarımlarınızı deneyimleyebilmek için kodlanmasını beklemenize gerek yok. Figma ve Sketch ile uyumlu çalışan Principle sizin için harika bir prototipleme aracı. Tüm deneyimi inşa edebileceğiniz gibi müşterilerinize gerçekçi bir demo yapabilir ya da yazılım ekibinize uygulamanın nasıl hissettirmesi gerektiğini anlatabilirsiniz. Böylelikle hem temel düzeyde kullanıcı deneyimlerini ölçebilir, yorumlar alabilir ve animasyonlarınızı oluşturabilirsiniz. Üstelik video kaydı alarak tasarımlarınızı sunumlaştırabilir yayınlayacağınız platformlarda tanıtım malzemesi olarak kullanabilirsiniz.

Artıları

• Figma ve Sketch desteği beklenenden çok daha iyi çalışıyor.
• Oldukça basit bir arayüze sahip olması sebebiyle animasyon hazırlamak diğer programlara göre oldukça basit.
• Sadece arayüz değil belli başlı bir çok animasyon oluşturabilir ve bunları MP4, GIF ve ProRes olarak dışarı aktarabilirsiniz.
• Mobil uygulaması sayesinde prototiplerinizi cihazınıza yükleyebilir ve tasarımlarınızı deneyimleyebilirsiniz.
• İmleç desteği sayesinde video kayıtları sırasında touch, arrow ve hiç biri şeklinde seçim yaparak çıktılarınızın daha anlamlı görünmesini sağlayabilirisiniz.
• Video çıktılarınızı istediğiniz ölçüde ayarlayabilirsiniz böylelikle ilgili platformların taleplerini karşılamak kolaydır.
• Principle projelerinizi web tarafında yedekleyebiliyor ve paylaşabiliyorsunuz.

Eksileri

• Tasarımlarınızda ki katmanların isimlerine göre animasyonlar hazırlandığı için detaylı projelerde çok fazla uğraşmak ve her katman için isimleri düzgün ayarlamak gerekiyor. Bunları bir şekilde component bazlı aktarabiliyor olabilseydik işlerimiz çok daha kolay olurdu diye düşünüyoruz. Ancak ekranlarınızı aktardıktan sonra component yapabilirsiniz. Uğraşmak gerekse de en azından şimdilik bir çözüme sahip.
• Projenizin ekranlarını başta aktardığınız çözünürlüğü daha sonra değiştirmenin imkanı yok. Haliyle 3x olarak eklediğiniz ekranları dışarı aktardığınızda boyutlar beklenenden çok daha büyük oluyor. Bu sebeplede çıktıların boyutları bir hayli büyüyor. Ayrıca bu çıktıları işleyerek daha küçük boyutlara düşürmeninde maalesef her hangi bir yöntemi yok. 3. parti yazılımlara muhtaç kalmanız dışında…
• Video çıktıları için mockup desteği sunabiliyor olmasını gerçekten çok isterdik.

Procreate

iPad’te harika çizimler için Procreate son dönemlerde oldukça popüler. Tabii bu popülaritesini başarılı bir uygulama olmasından kaynaklı. Adobe Illustrator’ü bile geri de bırakmayı başaran Procreate içinde sadece illustrasyon çizmenin dışında basit wireframeler çizebilir hatta alışabilmeniz durumunda UI tasarımlar dahi hazırlayabilirsiniz. Bunun için belli başlı alışkanlar edinmeniz gerekse de, temel olarak bunu yapmanıza engel hiç bir durum olmadığını da söyleyebiliriz.

Artıları

• Bir çok fırça desteğine sahip ve daha fazlasınıda yükleyebilmeniz mümkün.
• Cihazınıza font dosyası atmanız durumunda bu fontları Procreate uygulamasına ekleyebiliyorsunuz.
• Tek bir kez satın almanız yeterli, ömür boyu Procreate sizindir.
• Tuval açtığınız andan itibaren ekran kaydı alarak çiziminizi video haline getirebilir ve dilediğiniz gibi paylaşabilirsiniz.
• Klavye desteğine sahip.
• Resimleri her hangi bir uygulamadan sürükle bırak ile taşıyabilirsiniz.
• PSD, PDF, JPEG, PNG, TIFF, GIF, MP4, HEVC çıktıları alabilirsiniz. Çizimlerinize masaüstünde devam edebiliyor olmak adına PSD ve PDF desteğini çok önemli buluyoruz.

Eksileri

• Procreate Folio tarafını ister istemez Figma Community gibi bekliyorsunuz ancak işleyen düzgün bir sistem yok maalesef. Haliyle aradığınız ekstra fırçaları bulmak düşündüğünüzden biraz daha zor olabiliyor.
• Bulunduğunuz katmanın adını bir şekilde arayüz üzerinde çizim yaparken görüyor olmak iyi olabilirdi. Yeni başlayanlar için çizim yaptığınız katman kimi zaman hatalar yapmanıza sebebiyet verebiliyor.
• Yazı eklemek gibi bazı fonksiyonlar arayüzde daha iyi bir yere konumlandırılabilirdi. Tabii ki bu bir tercih ancak bizim deneyimlerimiz de bu olumsuz bir etki bıraktı diyebiliriz.
• Illustrator, photoshop gibi kullanım amacına göre arayüz değişebilir böylelikle hedef kullanıcı kitlelerine daha iyi hizmet verebilirler diye düşünüyoruz. Çünkü yaptıkları iş diğer uygulamalara göre çok daha iyi. Umarız ileride böyle bir özellik görürüz.

Eva Design System: Deep learning color generator

Arayüz tasarımlarında belirlediğimiz renkler çok büyük önem taşıyor ve bu renklerin bir biriyle uyumunu sağlamak kişiden kişiye açık bir görüş haline gelebiliyor. Eva Colors bu konu da bize çok büyük destek oluyor ve birebir olmasa da başlangıç noktasında renk belirlememizde oldukça etkili.

Artıları

• Birincil renk belirlemeniz durumunda derin öğrenme “Deep learning” alt yapısı sayesinde diğer temel renk kullanımlarını da size hazır hale getiriyor.
• JPEG ve JSON çıktıları verebiliyor.
• Dark ve light modu sayesinde renkleri baz alacağınız moda göre test edebiliyorsunuz. Bu sayede renk seçiminiz kolaylaşıyor.

Eksileri

• Figma ve Sketch gibi programlara ufak bir eklenti desteği ile projelere renk ekleme işlemini hızlandırabilirler diye düşünüyoruz. JSON datası ile bu eklentiyi dilerseniz kendiniz geliştirebilirsiniz ancak bu geliştirmeyi efor olarak düşündüğünüz de yapmak ne kadar mantıklı gelir emin değiliz.
• Bazı ara renklerde derin öğrenme özelliği saçma eşleştirmeler yapabiliyor. Renk seçiminizi finalize etmek için ufakta olsa bir düzenleme gerekiyor.

Marvel

Tasarımlarımız için basit prototipler hazırlamak ve proje yöneticilerimiz için kullanım kolaylığı sebebiyle Figma yerine Marvel kullanmayı tercih ediyoruz. Figma da tasarımcılar olarak kurduğumuz düzene dış müdahalelerin bulunmasını istemediğimiz için Marvel tarafını yönetmek ve müşteri tarafı ile tekrar test ederek paylaşmak düşünüldüğünden çok daha güvenli.

Artıları

• Projelerinizi direk JPG, PNG olarak yükleyebilirsiniz.
• Her hangi bir güncelleme durumunda yükleyeceğiniz dosyanın aynı isimde olması yeterlidir.
• Otomatik olarak tasarımları telefonlara yerleştirebilir ve tasarımlarınıza uygun cihazı seçebilirsiniz.
• Animasyonlar ile geçiş efektleri verebilir ve biraz daha profesyonel deneyim sağlayabilirsiniz.
• Mobil uygulaması ile prototiplerinizi cihazlarınızda test edebilirsiniz.
• Test özelliği sayesinde kullanıcıların hareketlerini inceleyebilir ve bunları kayıtlı videolar halinde tasarımlarınızı büyük kitlelere duyurmadan testler gerçekleştirebilirsiniz.
• Sketch kullanmanız durumunda yazılım ekipleri için temel stil kodlarını görüntüleyebilirsiniz.
• Jira, Youtube, Dropbox gibi bir çok uygulama ile senkronize çalışabilirsiniz.

Eksileri

• Figma desteği vermediği için bir çok özelliklerini aktif olarak kullanamıyoruz. Bu bir eksi olsa da bizim için kısıtlı kullanım proje yöneticilerimiz için basit kullanımı da beraberinde getiriyor.

Adobe Creative Cloud

Programlarından tek tek bahsetmeye gerek yok diye düşünüyoruz. Bir çok konuda zaman zaman ihtiyacımız olan Photoshop, Illustrator gibi yazılımları kullanıyoruz. Ancak çoğu zaman Adobe Fonts tarafı bizim ile çok iyi uyum sağlıyor ve istediğimiz cihazdan bir çok fonta dilediğimiz gibi ulaşıyoruz.

Artıları

• Creative Cloud aboneliği sayesinde tüm Adobe ürünlerine erişebilirsiniz (iPad ürünleri de dahil).
• Alıştığımız, sektörü öğrendiğimiz, standart yazılımları kullanıyor olmak oldukça keyifli.
• Çalışma dosyalarınızı dilediğiniz gibi bulut tarafında yedekleyebilirsiniz.

Eksileri

• Diğer yazılımlara göre artık hantal kaldıkları konusunda sanırız herkes bizimle hem fikirdir.
• Yazılımsal bazı sorunlar sebebiyle Creative Cloud işlemci ve ram tarafında bazı sıkıntılara sebebiyet verebiliyor. Özellikle senkronizasyon sırasında cihazları buzdolabına koysak yeridir. Kesinlikle cihazınızı başlatırken Creative Cloud’un açılmasına izin vermemenizi öneriyoruz.

ve daha fazlası

Tabii ki zaman zaman yeni teknolojileri deneyimlemeyi seviyoruz. Bir çok yazılımda kapalı beta süreçlerinde bulunmayı ve gelişen teknolojilere hızlı adapte olmayı önemsiyoruz. Atöyle15 tasarım ekibi olarak her fırsat bulduğumuz da gerekli ARGE çalışmalarımızı yapıyor ve ekip arkadaşlarımız ile hazırladığımız küçük sunumlarımızı anlatarak paylaşıyoruz.

Bu edindiğimiz deneyimleri de sizlerle zaman zaman paylaşmaya devam ediyor olacağız. Bizi takip etmeye devam edin.