Adobe XD dersi - Deneyim Tasarımı ve Prototip oluşturma

Büyük Adobe XD öğreticimize hoş geldiniz. Bu girişte sizi eğitmeniniz olarak tanıtıyorum.

Kullanıcı Deneyimi (UX) ile Kullanıcı Arayüzü (UI) arasındaki fark nedir? Hangi tür seviye tasarımları vardır ve Adobe XD en iyi şekilde hangi amaçla kullanılır? Cevap burada veriliyor!

İlk kez Adobe XD'yi açtım ve hemen seçebileceğiniz birçok seçenek sunuyor. Bu videoda Adobe XD için küçük bir giriş, programın genel bir açıklaması ve XD'nin Splash ekranına ve işlevlerine bir giriş bulacaksınız.

Artboards (Çizim Alanları) Adobe XD'de farklı çözünürlükler ve cihazlar için kolayca oluşturulabilir. Hangi özelliklerin dikkate alınması gerektiğini bu rehberde öğrenebilirsiniz.

Farklı ızgara ayarları, uns temiz bir şekilde ögelerin ve nesnelerin birbirlerinin yanına düzenlenmesini kolaylaştırır. Bunun için dikdörtgen bir ızgara ve sütunlar için bir sütun bölümü mevcuttur.

Google, Apple ve Microsoft hızlı başlangıç için kullanışlı UI kitleri sunar. Bu hazır artboardlar, farklı platformlar için prototiplerin sonraki tasarımında bize çok yardımcı olur.

Renkler hemen hemen her tasarımda son derece önemli bir rol oynar - bu videoda Adobe XD'de nasıl renk kullanacağını, nasıl aktaracağını ve hazır renk uyumlarını toplamak için hangi pratik kaynakların olduğunu öğreneceksiniz.

Adobe XD'e resimler, dosyalar, metin belgeleri vb. gibi varlıkları içe aktarmak için birçok yöntem bulunmaktadır. Bu videoda bazı yöntemleri göstereceğim. Ancak XD, Adobe'nin Creative Cloud'unun bir parçası olduğu için kütüphanelerle tabii ki son derece rahat ve kolay bir şekilde çalışabilirsiniz.

Yazı tipleri ve tipografi konusu, Adobe XD üzerindeki yolculuğumuzda önemli bir parçadır. Bu videoda, yazı tipleriyle doğru ve verimli bir şekilde nasıl çalışabileceğini öğreneceksin.

Şekiller ya Adobe XD'ye çok kolay bir şekilde aktarılabilir ya da yol aracıyla kendiniz oluşturulabilir. Bir nesne iki kezden fazla kullanılıyorsa, ayrıca varlıklar listesine simge olarak dahil etmek de önerilir.

Tasarım, dışarıdan gelen ilham ve girişimle çok ilgilidir. Bunlar arasında analog çevre ve dijital dünya da bulunmaktadır. Burada sıkça ziyaret ettiğim bazı portalları tanıtıyorum.

Küçük, güzel bir uygulama projesiyle başlayalım. Bu rehber ve önümüzdeki iki video ile bir Onepager oluşturacağız.

Tekrar örüntüsü, Adobe XD'nin en önemli özelliklerinden biridir. Bir kez oluşturulan nesne gruplarını istediğimiz şekilde ölçeklendirmemize ve özelleştirmemize yardımcı olur.

Onepagerin son bölümünde, alt kısma ve referanslar için bir alan oluşturacağız. Burada kullanacağımız uygulamalı SVG dosyalarıyla ve daha fazla tasarım tekniği öğrenerek devam edeceğiz.

Bu ders bize, tek tek artboard'ların nasıl etkileşimli şekilde birbirine bağlanabileceği konusunda bakacağız. İlk aşamada geçiş seçeneklerinin neler olduğu ve prototipte ne tür diğer değişiklikler yapabileceğimiz konusunu ele alacağız.

Her web sitesinin navigasyon için bir çapa noktasına ihtiyacı vardır. Bu videoda sadece başlık alanında ana navigasyonun oluşturulması ve birbiriyle etkileşimli bağlantısının nasıl sağlanacağıyla ilgileneceğiz.

Bu eğitim önceki bölüme dayanarak, oluşturulan masaüstü menüsünün nasıl bir akıllı telefona uyarlandığını gösteriyor. Hamburger simgesi ve menü seçenekleri ilginç animasyonlarla değerlendirilecek.

En iyi görselleştirmeyi sağlayan araçlardan biri de Adobe XD'nin Otomatik Animasyon özelliğidir. Bu örnekte, Otomatik Animasyon işlevinin prensibini her olası senaryo için uyarlamanın nasıl yapıldığını açıklıyorum.

Aşağıdaki videolarda bir online mağaza için prototip oluşturmayı öğreniyoruz. Bu süreçte basit artboardlardan görsel olarak çekici yüksek çözünürlüklü prototipler oluşturma yöntemlerini öğreniyoruz. 1. bölüm 4'ten.

İkinci bölümde detay açıklamalarını görüntüleme, resimler için kaydırıcılar oluşturma ve artboard'ları birbirine bağlama işlerini yapacağız.

Prototipleme için geliştirilmiş Overlay fonksiyonu, bilgilerin doğrudan giriş ve çıkışlarını sağlayarak bize heyecan verici imkânlar sunuyor.

İyi kullanılabilirlik tasarımı, kullanıcıya sistem durumu hakkında sürekli geribildirim sağlar. Bu geribildirimi projenin sonunda güzel bir animasyona dahil edeceğiz.

Adobe XD, prototipleme sürecinde ses komutuyla etkileşimi de destekler. Sözlü komutlar, tarafımızdan tanımlanabilen sistem eylemlerine yol açar. Bu nasıl çalışır, bu öğretici videoda göstereceğim.

Diğer departmanlar ve ilgili kişilerle işbirliği yaparken, proje durumunu anlaşılır bir şekilde açıklamak için sesli yorumlama önemli bir özelliktir.

Bir prototipi sanal bir ortamda test etmek bir şeydir - onu bir cihazda canlı olarak göstermek ise bambaşka bir şeydir. Ve tam da bu, Adobe XD aracılığıyla ya USB üzerinden ya da Creative Cloud bağlantısıyla kolayca çözülebilir. Bunun için App Store'dan Adobe XD uygulamasını kullanıyoruz.

İşbirliği sırasında, proje durumu hakkında diğer departmanlarla iletişim kurmanın kaçınılmaz olduğunu unutmayın. Prototip, Yayınlama işlevi ile paylaşılarak, proje hakkında görsel izlenimler almak isteyen inceleme yapanlar, geliştiriciler ve sipariş verenler için erişilebilir hale getirilebilir. Bu noktada, proje olgunluğa erişene kadar uzman departmanlar arasında düzenleme döngüsü başlar.

Adobe XD, her güncellemeyle gittikçe değişen çok genç bir programdır: Bu videoda, 18. sürümden 19. sürüme geçildiğinde hangi yeniliklerin olduğunu, özelliklerin nasıl kullanıldığını ve hangi durumlarda faydalı olduklarını açıklıyorum. Bu arasında şunlar bulunmaktadır: Semboller yerine bileşenler, Duyarlı Yeniden Boyutlandırma, Yardımcı Çizgiler, Çokgen Aracı, metin biçimlendirme için daha fazla seçenek ve daha fazlası. İyi eğlenceler!