Mobil Uygulama Tasarımı (Android) | Ömer Korkmaz

Mobil Uygulama Tasarımı (Android)

mobil-uygulama-tasarımı

Bu yazımızda mobil uygulama tasarımı süreci ile ilgili temel bilgileri paylaşacağım. Hangi tasarım araçlarını kullanabiliriz, hangi ölçüleri baz almalıyız, tasarımdaki varlıkları (assets) nasıl export ederiz, tasarımcı ve geliştirici arasındaki koordinasyon nasıl sağlanır gibi en temel soruların cevaplarını bulabileceksiniz.

Nasıl Başlamalıyım?

Mobil uygulama tasarımı (mobile native app) için kullanmamız gereken belirli araçlar var. Öncelikle bunlara sahip olmamız gerekiyor.

mobil-uygulama-tasarimi-2

Windows

Windows ‘ta çalışıyorsanız tasarımlarınızı Photoshop CC ile hazırlayabilirsiniz. Photoshop’un güncel versiyonu artboard ile çalışma imkanı sağlıyor ve bu şekilde ekranlar arası daha hızlı hareket edip belirli plug-in ‘ler ile hızlı export alabiliyoruz. Yani ideal bir araç. Ama tek başına yeterli değil. PS ‘de çalıştığımız dosyaları developer’lara PSD olarak aktaramayız. Tasarımı onların kullanabileceği şekilde export almamız gerekiyor. Bunu da Zeplin.io ile yapıyoruz. Plug-in olarak Photoshop CC ile entegre olarak çalışan bu araç tasarımcı – geliştirici arasında gayet iyi bir çözüm. Ücretsiz olarak sadece 1 proje oluşturarak kullanabilirsiniz. Aynı anda daha fazla proje oluşturacaksanız ücretli paketleri incelemelisiniz. Zeplin kullanımı ile ilgili detaylı bilgi almak için yazımızı okuyabilirsiniz.

mobil-uygulama-tasarimi-3

Mac OS

Mac kullanıcısı iseniz yine Photoshop + Zeplin ikilisini kullanabilirsiniz. Bunun haricinde son dönemde popülerliğini arttıran Sketch aracı da UI design için ideal bir çözüm. Sketch içerisinde tasarımlarınızı export etmeniz için Zeplin‘i ya da yine yakın zamanda yükselişe geçen Invision ürünü olan Craft ‘ı incelemenizi önerebilirim. (Inspect)

Hangi Ölçülerde Çalışmalıyım? (Android)

Mobil cihazlarda bir çok farklı çözünürlük mevcut. O yüzden aslında tek ebat yeterli değil. Ancak her ebadı çalışmamız gibi bir şey de söz konusu değil. Zaten az önce bahsettiğimiz Zeplin ‘de tam olarak bu işe yarıyor. Tasarımı bir ebat baz alarak çalışıyoruz. O tasarım içerisindeki tüm görsel objeleri 5 ölçüde de export alıyor. Ancak sorunsuz export için tasarımda kullandığımız tüm objelerin bitmap değil vektörel olması gerekiyor (Shape, SVG, Smart Object)

Android mobil cihaz çözünürlükleri şu şekilde:

mobil-uygulama-tasarimi-4

Biz 360×640 px (mdpi) ölçülerinde çalışmamıza başlayabiliriz. Ancak bu ölçüde icon vs. haricinde bitmap bir image kullanıyorsak bunu smart object olarak tutmalıyız. Örneğin bir splash ekranı tasarladınız, ekranda logonuz var ancak arkasında bir bitmap full image yer alıyor. Bunu zeplin ile export aldığımızda görsel bitmap olduğu için aldığı xxxhdpi versiyonunda görselimiz bozulmuş olacak. Bu yüzden tasarımda yer alan tüm objelerin resize edildiğinde bozulmaması gerektiği gerçeğini unutmamalıyız. Photoshop default olarak 1080×1920 (xxhdpi) açmanızı öneriyor. PC ‘nizde performans olarak sorun yoksa bu ölçüde de başlayabilirsiniz. Tasarımı Sketch’te yapıyorsak zaten çalışmaya başlarken sağdaki panelden ölçümüzü hazır olarak seçiyoruz.

Material Guideline Nedir?

mobil-uygulama-tasarimi-5

Android ‘de mobil uygulamalara baktığımızda  artık çoğunun birbirine yakın bir wireframe’de olduğunu görüyoruz. Bunun tek sorumlusu Google reyis. Biz sizin için her şeyi düşündük test ettik, Amerika’yı yeniden keşfetmenize gerek yok, benim guideline ‘ım zaten global diyerek bize iyilik mi kötülük mü yapıyor henüz kestiremediğim bir lobi. Material lobisi. Artık belirli bir kullanıcı alışkanlığı oluştuğu için material guideline’ından faydalanmanız gerekecek. Ancak tabiki kütüphaneye tamamen bağımlı değiliz. Uygulamamızın fonksiyonlarına göre customize yapıyoruz. Stil, layout, bileşenler, kullanılabilirlik, motion’lar gibi belirli temel taşları öğrenmek için material design guideline’ını baştan sonra bir incelememizde fayda var.

 

Tasarımı Mobil Cihazda Nasıl Görüntülerim?

mobil-uygulama-tasarimi-6

Mobil tasarımınızı özellikle yeni başladıysanız tasarım süreci devam ederken sık sık mobil cihazınızdan görüntüleyerek deneyimlemelisiniz. Buton büyüklükleri, fontlar, renkler istediğiniz gibi mi, kullanılabilir bir tasarım mı yapıyorsunuz, bunu en iyi anlamanın yolu tasarımı mobil cihazınızdan görmek. Bunu yapmanın bir kaç yolu var. Daha önceki yazılarımızda da paylaştığımız invisionapp aracını kullanabilirsiniz. Tasarımınızı png, jpg, psd formatlarından herhangi birisi ile free olarak invision hesabınıza atıp kendinize linki sms olarak iletmeniz yeterli. Görselleri bu şekilde cihazınızdan görebilir, hatta linklendirebilerek hızlı bir prototip oluşturabilirsiniz. Photoshop CC kullanıyorsanız Adobe Preview diye bir uygulama mevcut ancak sadece IOS için. Gerçi çok stabil çalışmadığı yönünde yorumlar var, ben hiç denemedim. Sketch kullanıcıları ise programın içerisinde bulunan mirror özelliğiyle bu işlemi gerçekleştirebilir.

 

Mobil dünya ile ilgili biraz daha detaylı bilgi sahibi olmak isterseniz Mobil Uygulama Dünyasında Temel Kurallar başlıklı yazımızı okuyabilirsiniz.

2 Comments

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sen gerçek misin? * Time limit is exhausted. Please reload CAPTCHA.