Buradasın

Adobe X Design ile Mobil Uygulama Prototipi Tasarımı Eğitimi

youtube.com/watch?v=x4jnO_zS3nE

Yapay zekadan makale özeti

Kısa
Ayrıntılı

Bu video, bir eğitmen tarafından sunulan Adobe X Design programı kullanarak mobil uygulama prototipi tasarımı eğitimidir. Eğitmen, adım adım tasarım sürecini göstermektedir.
Video, "Kolay Hesap" adlı bir mobil uygulama prototipinin tasarımı üzerinden ilerlemektedir. İçerikte mobil uygulama ekran boyutlarının seçimi, şablon kullanımı, artboard oluşturma, grid sistemi kullanımı, objelerin hizalanması, renklendirme, yazı düzenleme, katmanlar kullanımı, gruplama ve maskeleme gibi temel tasarım teknikleri anlatılmaktadır.
Eğitimde ayrıca menü tasarımı, para transferi, para işlemleri, cüzdan, yatırım önerileri ve kartlarım gibi farklı butonların nasıl oluşturulacağı, ikon ekleme ve düzenleme gibi konular da ele alınmaktadır. Video, web ve mobil tasarım yapmak isteyenler için temel bir rehber niteliğindedir.

00:01Adobe X Design ile Mobil Uygulama Tasarımı: Önceki videoda Adobe X Design uygulamasının arayüzü gösterilmişti.
Bu videoda Adobe X Design üzerinde basit bir mobil uygulama prototipi tasarlanacak.
Tasarlanacak uygulama "Kolay Hesap" adında olup giriş ekranı ve ana ekranı içerecek.
00:49Mobil Uygulama Ekran Boyutları ve Şablonlar: Adobe X Design'da mobil uygulama ekran boyutlarının olduğu kısma giderek iPhone X, iPhone 12, iPhone 12 Pro gibi boyutlar seçilebilir.
Herhangi bir ekran boyutu için yapılan tasarım diğer boyutlar için de uyarlanabilir.
Artboard aracı ile çalışma alanının arka plan rengi, grid (ızgara) görüntüsü ve farklı telefon, tablet, web, sosyal ağlar ve giyilebilir cihazlar için tasarım yapılabilir.
02:27Artboard Özellikleri ve Arka Plan Tasarımı: Artboardların ismi çift tıklayarak değiştirilebilir.
Arka plan için renk, renk geçişi veya desen oluşturulabilir.
Artboard seçildikten sonra Appearance (Görünüm) kısmında Fill (Dolgu) seçeneği ile arka plan rengi değiştirilebilir.
04:01Dışarıdan Görsel ve Çizim Ekleme: Dışarıdan bir çizim veya görsel eklemek için File menüsünden Import seçeneği kullanılır.
Eklenen görselin boyutları özellik penceresinde genişlik ve yükseklik değerleri değiştirilebilir veya köşelerinden çekiştirerek boyutlandırılabilir.
Görselin hizalama seçenekleri kullanılarak yatayda veya dikeyde ortalama yapılabilir.
06:11Ana Ekran Tasarımı: Ana ekran için yeni bir artboard oluşturulabilir veya mevcut artboard kopyalanabilir.
Ana ekranda hamburger menü ikonu içeren yuvarlak buton, bildirim ikonu ve profil görseli gösteren dairesel alan bulunur.
Daire aracı ile daire çizilebilir, Shift tuşu kullanılarak tam daire elde edilebilir.
08:20Renk Geçişleri ve Hizalama: Arka planda açık turuncudan beyaza doğru bir degrade geçiş bulunabilir.
Artboard seçildikten sonra Appearance kısmında Fill seçeneği ile doğrusal (linear gradient) veya dairesel (radial gradient) renk geçişi verilebilir.
Objelerin soldan ve yukarıdan uzaklıkları özellik penceresinde X ve Y değerleri kullanılarak değiştirilebilir.
11:15Adobe XD'de Layout Grid Kullanımı: Web ve mobil uygulama tasarımlarında öğelerin eşit konumlandırılması ve aralarındaki boşlukların eşit dağılması için Adobe XD'de layout grid özelliği kullanılır.
Görünüm menüsünden "Show Layout Grid" seçeneği işaretlenerek ekran üzerinde eşit bölmeler ve aralarındaki eşit boşluklar görüntülenebilir.
Grid sütunsal yapılar sayesinde nesneler kolayca konumlandırılabilir ve çalışma alanına yakınlaşma/uzaklaşma işlemleri yapılabilir.
13:08Tasarım Araçları ve Objelerin Düzenlenmesi: Tasarım sırasında menü ikonu gibi öğeler eklenebilir ve büyüteç aracı ile yakınlaşma/uzaklaşma yapılabilir.
Alt tuşuna basılı tutarak büyüteç aracı uzaklaştırma aracı olarak kullanılabilir ve objeler köşesinden çekiştirilerek boyutlandırılabilir.
Objeleri konumlandırırken kenarlarında pembe çizgiler ve sayılar çıkarak objenin diğer objelere veya kenarlara olan uzaklığı gösterilir.
15:03Çoklu Objelerin Hizalanması ve Grid Kullanımı: Birden fazla objeyi seçmek için shift tuşuna basarak birden fazla obje seçilebilir.
Özellik penceresinden hem yatayda hem dikeyde ortala seçeneği ile objeler hizalanabilir.
Kılavuz grid (sütunlu yapı) turkuaz rengi olduğu için objelerin gerçek renkleri görmeyebilir, bu durumda View menüsünden "Hide Layout Grid" seçeneği ile gizlenebilir.
16:04Bildirim İkonu ve Metin Ekleme: Bildirim ikonu gibi öğeler File menüsünden import edilerek eklenebilir ve boyutlandırılabilir.
Farklı bir objenin üzerinden renk almak için damlalık aracı kullanılabilir.
Metin ekleme için text aracı kullanılarak yazı oluşturulabilir ve font özellikleri özellik penceresinden değiştirilebilir.
18:55Yazı Düzenleme ve Katmanlar: Yazı kalınlığını italik, medium veya bold gibi değerlerle değiştirebilir, font boyutunu ayarlayabilir ve dolgu rengini beyaz olarak seçebilirsiniz.
Uygulamanın sol tarafında Photoshop'taki katmanlar gibi çalışan bir yapı bulunur, görünmüyorsa araç çubuğunun altında bulunan katmanlar butonuna tıklayarak görünür yapabilirsiniz.
Birden fazla objeyi seçip Command+G veya Ctrl+G ile gruplayabilir, gruplama işlemi katmanlar menüsündeki kalabalıkları azaltır ve objeleri toplu şekilde taşıyabilirsiniz.
21:04Maskeleme Tekniği: Profil resmi dairesel bir alanın içerisine sınırlandırılmış olarak görünür, bu Photoshop'ta da görülen maskeleme tekniğidir.
Maskeleme için önce daire aracı ile 48x48 piksel boyutunda bir daire çizip, View menüsünden Show Layout Grid'i açarak objelerin yerlerini ayarlayabilirsiniz.
File menüsünden import diyerek profil photo görselini çağırıp, dairenin üzerini kaplayacak boyuta boyutlandırabilirsiniz.
22:47Objelerin Sırasını Değiştirme: Maskeleme yapabilmek için dairenin yukarıda, maskelenecek öğenin ise aşağıda olması gerekir.
Objelerin sırasını değiştirmek için sağ click yapıp Sand Backward, Sand To Back, Bring Forward veya Bring To Front seçeneklerini kullanabilirsiniz.
Seçili objeyi sürükleyerek istediğiniz sıraya koyabilir veya Shift tuşuyla tıklayarak birden fazla objeyi seçebilirsiniz.
24:01Maskeleme İşlemi: Maskeleme için hem maske olarak kullanacağınız daireyi hem de görseli seçip, sağ click yapıp Mask with Shape seçeneğini kullanabilirsiniz.
Mask with Shape işlemi, üstteki objenin şeklini (daire, yıldız vb.) alttaki objeyi (fotoğraf) bu kalıpta maskeleyerek korur.
Tasarımın alt kısmında profil görselinin altında turuncu bir daire veya çizgi bulunur, bunu yapmak için daha büyük bir daire çizip, dolgu rengini menüdeki turuncu olarak ayarlayabilirsiniz.
26:31Yazı Alanı Oluşturma: Hoş geldiniz ve Mert Güneşi yazan yazı alanı için Text aracı kullanılır.
Yazı boyutunu ve rengini ayarlayabilir, menüdeki turuncu rengi seçmek için fil menüsünün karşısındaki damlalığa tıklayabilirsiniz.
Yazı hizalama için hizalama seçeneklerini kullanabilir veya akıllı çizgiler yardımıyla kenara hizalayabilirsiniz.
27:42Yazı Düzenleme ve Konumlandırma: Menü ile "Hoş geldiniz" yazısı arasındaki boşluğu 30 piksel olarak ayarlayabilirsiniz.
Yeni bir yazı alanı oluşturup "Mert Güneş" yazısını ekleyebilirsiniz.
Yazı boyutunu 42 piksel, kalınlığını medium olarak ayarlayabilir ve rengini kolay hesaptaki tonlara göre değiştirebilirsiniz.
28:50Yazı Konumlandırma ve Düzenleme: "Hoş geldiniz" yazısını menüden daha uzaklaştırabilir ve "Mert Güneş" yazısını yukarıdaki yazı ile 20 piksel arasında boşluk olacak şekilde konumlandırabilirsiniz.
Yazıların konumlarını ve aralarındaki boşlukları ayarlayarak tasarımın görünümünü düzenleyebilirsiniz.
29:23Arama Alanı Oluşturma: Arama alanı için köşeleri yuvarlatılmış beyaz bir dikdörtgen çizebilirsiniz.
Dikdörtgenin genişlik ve yüksekliğini ayarlayabilir, köşelerindeki yuvarlaklık değerini özellik penceresinde değiştirebilirsiniz.
Dikdörtgenin çizgi rengini ve rengini ayarlayabilirsiniz.
31:04Arama İkonu ve Yazı Ekleme: Dışarıdan bir görsel getirmek için File menüsünden Import seçeneğini kullanabilirsiniz.
Arama ikonunu boyutlandırabilir ve konumlandırabilirsiniz.
"Arama yap" yazısını ekleyebilir, boyutunu 20 piksel olarak ayarlayabilir ve rengini açık gri olarak değiştirebilirsiniz.
32:17Gruplama İşlemi: Yazı, ikon ve arka planı seçerek Ctrl+G (Mac'te Command+G) ile gruplama işlemi yapabilirsiniz.
Gruplanan öğelerin ismini katmanlar menüsünden değiştirebilirsiniz.
32:45Buton Oluşturma: Butonlar için önce dikdörtgen çizimi yapabilirsiniz, Shift tuşuna basarak en ve boyunun aynı oranlarda ilerlemesini sağlayabilirsiniz.
Dikdörtgenin kenarlarını oval yapabilir ve renk tonlarını ayarlayabilirsiniz.
Butonun ortasına daire ekleyebilir, boyutunu ayarlayabilir ve ikonu yerleştirebilirsiniz.
37:25Buton Yazısı ve Gruplama: Dairenin altında "Para İşlemleri" yazısını ekleyebilir, kalınlığını bold yapabilir ve rengini ikonun rengine benzer şekilde ayarlayabilirsiniz.
Buton, daire, arka plan, ikon ve yazı hepsini seçerek Ctrl+G ile gruplama işlemi yapabilirsiniz.
Gruplanan öğelerin ismini "Buton 1" olarak değiştirebilirsiniz.
38:44Adobe XD'de Buton Tasarımı: Diğer butonları yapmak için mevcut butonun kopyasını alarak, arka plan rengini değiştirerek ve ikonunu farklılaştırarak işlem yapılabilir.
Butonun kopyasını almak için ilgili alanın alt tuşuna basılı tutarak sürüklenmesi yeterlidir.
Gridin kapanması için View menüsünden Grid seçeneği kullanılır.
39:24Buton Özelliklerini Değiştirme: Kopyasını alınan grubun ismi değiştirilebilir ve grubun içindeki objeler çift tıklayarak veya grubun üstüne tıklayarak seçilebilir.
Arka plan rengi değiştirilirken Fill rengine tıklanarak istenen yeşil tonu seçilir ve mat görünümü sağlanabilir.
İkon değiştirme için ikona sağ tıklayıp Replace Image seçeneği kullanılır veya ikon silip File menüsünden import edilebilir.
41:09Yazı ve Boyutlandırma İşlemleri: Yazı değiştirme için yazıya çift tıklanır ve istenen metin yazılır.
Yazı ve kutucuk birlikte seçilerek ortalama işlemleri yapılabilir.
Kutular alt tuşuna basarak kopyalanabilir ve araları eşit tutulabilir.
41:49Diğer Butonların Tasarımı: İkinci kutunun arka plan rengi soğuk mavi olarak değiştirilir.
İkinci kutunun ikonu ve yazısı değiştirilerek "Yatırım Önerileri" olarak ayarlanır.
Üçüncü kutunun arka plan rengi pastel kırmızı olarak değiştirilir, ikonu kredi kartı ikonu olarak değiştirilir ve "Kartlarım" yazısı eklenir.
43:40Adobe XD Öğrenme Önerisi: Mobil uygulama veya web sitesi tasarlamak için Adobe XD öğrenmek kolaydır.
Tek yapılması gereken hangi özelliğin nasıl kullanıldığını öğrenmek ve deneyimlemektir.
İzleyicilerden videonun altında bulunan bağlantıdan dosyaları indirerek aynı tasarımı yapmaları veya farklı tasarımlar gerçekleştirerek tecrübe kazanmaları önerilir.

Adobe X Design ile Mobil Uygulama Prototipi Tasarımı Eğitimi

Yapay zekadan makale özeti

Yanıtı değerlendir