Adobe XD ile Kullanıcı Arayüzü Oluşturmanın Püf Noktaları
Dijital dünyada her geçen gün artan rekabet ortamında kullanıcılarla gerçekleştirilen etkileşim oldukça önemlidir. Web, mobil fark etmeksizin her türlü dijital cihazda etkileşim, arayüz olarak adlandırılan etkileyici ekran tasarımları vasıtasıyla gerçekleşir. Tasarımda yazı, renk ve görsel dengesini iyi ayarlamak, özgün ve özenilmiş görünümü yakalamak kullanıcıları çekme noktasında size büyük artılar kazandırmaktadır. Grafik tasarım konusundaki çalışmalarıyla fark yaratan Adobe’nin 2016 yılında erişime açtığı Adobe XD arayüz geliştirmek noktasında başvurulabilecek önemli bir yardımcı konumundadır. Uygulama vasıtasıyla denemeler, taslaklar oluşturup gelişimin her noktası adım adım planlanabilmektedir. Uygulamayı kullanırken izleyeceğiniz hangi küçük, önemli adımlarla pratik şekilde prototipi tamamlayabileceğinizi merak ediyorsanız yanıtını bu yazıda bulabilirsiniz.
Tasarıma İlk Adım
İşe uygulamayı ücretsiz olarak cihazınıza pratik şekilde yükleyerek başlayabilirsiniz. Yüklemeyi tamamladıktan sonra zihninizde canlandırdığınız tasarımın olabilirliği hakkında araştırma yapmak, standart özellikler hakkında bilgi sahibi olmak deneyim sırasında size büyük yarar sağlayacaktır. Yaratma alanına giderek hazır taslaklardan biri seçilerek veya sıfırdan yaratım tercih edilerek çalışmaya başlanabilmektedir. Oluşturmak istediğiniz stili belirledikten sonra renk ve yazı ekleyerek tasarımın ilk hali tamamlanır. Bu noktada web sitesinin veya uygulamanın içeriğiyle uyumlu şekil ve renk seçimi, çeşitlilik arasında kolayca bulunabilmektedir. Binlerce fonttan ve sayısız çeşitlilikte şekil yaratmayı sağlayan vektör çizim araçlarından yararlanabilirsiniz. Tekrarlama özelliğinden yararlanarak yarattığınız ilk şekli alt sayfalar için de kullanarak ilk görünüm desteklenebilir. Ardından uygulamaya dışardan aktardığınız projenizle uyumlu metin ve görselleri tasarıma yerleştirmeye başlayabilirsiniz.
Temel tasarımını gerçekleştirdikten sonra ana sayfada çeşitli değişimleri gerçekleştirmek, Adobe XD sayesinde gerçekleştirmek oldukça pratiktir. Duyarlı yeniden boyutlandırma niteliğiyle sayfaların boyutu zorlanmadan değiştirilebilir. Tasarıma özgünlük, farklılık katmak içinse karışım modları hizmete sunulmaktadır. Ondan yararlanılarak özgün tarzda efektler, farklı boyutlar yaratılabilir. Şekil- zemin ilişkisine bağlı kalarak belli ögeleri öne çıkarmak için nesne ve arka plan bulanıklığı ayarlanabilmektedir. Tercihe göre belli görseller, metinler veya arka plan görünümlerini test etmek bu şekilde mümkündür. Arayüzdeki nesnelere derinlik, katmanlılık etkisi kazandırmak için 3B dönüşümlerden faydalanılabilmektedir. Yapılması gereken tek şey, uygun nesne seçimini yaptıktan sonra özellik denetçisine gidilerek 3B dönüşümleri harekete geçirmektir. Eğer photoshop, ıllustrator, sketch gibi farklı programlara hakimseniz veya onlardan yararlanmak isterseniz programlar üzerinde hazırladığınız dış çalışmaları içe aktarmanız mümkündür. Sayfalar bu özelliklerde zenginleştirildikten sonra ara geçişleri sağlamak için çeşitli komut bileşenlerinden yararlanarak tasarımınız için ilk adımı başarıyla tamamlayabilirsiniz.
Prototipler Ortaya Çıkarma
Ana omurgası oluşturulan düz tasarımı yerinde detaylarla bezeyerek çarpıcı hale getirme protipleme aşamasında gerçekleşir. Daha verimli etkileşim deneyimi yakalamak için canlandırma, ses, hareketli görünüm araçlarını işe koşabilirsiniz. İlk olarak proje dosyanızı açarak uygulama yapacağınız noktaları dikkatle incelemelisiniz. Ardından çapa bağlantıları sayesinde üst kısıma seyahat içerisindeyken tasarımın herhangi bir noktasına ulaşmanızı sağlayacak bağlantılar ekleyebilirsiniz. Bunun yanında otomatik canlandır özelliğiyle tasarım bölümleri arasında küçük etkileşimler sağlanabilmektedir. Sıradan eylem efektleri, kullanıcılara görsel dönüt verme, hafif ilerleme adımlarını tamamlamak bu nitelik sayesinde oldukça pratiktir. Özelliğin öğrenme komutlarını takip ederek küçük ayarlamalarla özgün bir prototip tasarımını ön izleme şansına erişebilirsiniz.
Görsel prototiplemenin yanında etkili ui için ses prototipleme seçeneklerinden de faydalanmak uygulama sayesinde oldukça pratiktir. İşitsellik de tıpkı görsellik gibi etkileşim için olmazsa olmaz unsurlardan biri olarak atlatmaması gereken bir adımdır. Ses komutları ve sese dayanan nitelikler yaratarak etkileşimi üst düzeye çıkarabilirsiniz. Tamamen kendinize has olanı bulabileceğiniz çeşitlilikteki hazır ses efektlerinden yararlanabilir veya içe aktarım yapabilirsiniz. Tasarım arayüzleriyle kullanıcılar arasındaki etkileşim için gerekli olan ses tanıma için teller ve tetikleyicilerden faydalanabilirsiniz. Tüm prototipleme işlemlerini kodlamaya gerek duymaksızın uygulama içerisindeki nitelik çeşitliliğinden yararlanarak gerçekleştirebilirsiniz. Ortaya çıkardığınız prototipleri Windows, MacOS, Android ve iOS gibi çok sayıda mobil ve web işletim sisteminde defalarca kez izleyebilir, test edebilirsiniz.
Prototipleri Paylaşıma Açma
Çalışma arkadaşlarınızla ortak projelerinizde kullanacağız kimi nesne niteliklere bir araya toplamanız tasarımlarınızı en kısa sürede tamamlamaya büyük katkı sağlar. Renk, font, görsel çeşitlilik arasından bileşenler, kitaplıklar oluşturarak amaca uygun verim alabilirsiniz. İlk yapmanız gereken gerekli ölçütü belirleyip nesneleri gruplayarak ortaya bir bileşen çıkarmaktır. Ardından tuval üzerinde küçük dokunuşlarla bileşenleri çoğaltabilir, onlara özgün adlandırmalar yapabilirsiniz. Ortaya çıkan benzer bileşenleri bir araya toplayıp dosyalamak, pratik kullanım için oldukça faydalı olacaktır. Bunun yanında user interface tasarımına veya bileşenlere yorum seçeneği ekleyebilir veya e posta seçeneği sayesinde çalışma arkadaşlarınızın projeye ulaşmasına olanak tanıyabilirsiniz. Uygulama içi kitaplık seçeneklerinden yararlanarak ortaya çıkardığınız bileşenleri bulut hizmetine aktarabilirsiniz.
Bulut hizmetinde çeşitli şifre seçeneklerinden yararlanarak kullanıcı arayüzü tasarımınızı güvende tutabilir, dilediğiniz yer ve zamanda kontrolünü sağlayarak gerekli düzenlemeleri gerçekleştirebilirsiniz. Bunun yanında aynı şekilde uzaktaki çalışma arkadaşlarınızın müdahale etme şansı, hizmet sayesinde mümkündür. Bulut hizmeti dışında çalışmanız için geri dönüşler, düzenlemeler alabileceğiniz farklı seçenekler de uygulamalar arası iş birliği seçenekleri sayesinde olanaklıdır. HTML sayesinde Web’de dışarı aktarma yaygın yollardan biridir. Bunun yanında uygulamayı Microsoft Teams, Slack, Zeplin gibi uyumlu diğer aplikasyonlara bağlayarak ortaya çıkan prototipi sunmak ve onun hakkında geri dönüş almak pratik bir yoldur. Kullanışlı ui prototiplerinde en az çaba ilkesi göz anına alınarak görevleri otomatikleştirmede kullanabileceğiniz 200’den fazla eklenti de uygulamayla uyumlu olarak hizmet vermektedir. Eğer kendinize özgü bir eklenti yaratmaktan yanaysanız hizmet içi araçlar sayesinde bu işlemi gerçekleştirmeniz pratiktir.
