Mobil arayüz tasarımı yapmaya başlamadan önce bildiğimiz üzere tasarım editörü uygulaması üzerinden mobil projemize uygun Artboard mobil ekran boyutu belirleyerek başlıyoruz. Bu belirleyeceğimiz mobil ekran boyutları projemize, müşteri/brief içeriğine göre değişkenlik gösterebildiği gibi, developer desteği verecek kişiler ile görüşülerek de kullanılacak mobil cihazlara göre ortak karar verilebilir.
Yani kısacası responsive web arayüz tasarımı yaparken nasıl belirli kesin boyutlar var ve responsive boyutlandırmayı da düşünerek haraket ediyorsak mobil proje içeriğine görede iPhone ya da Samsung vs. cihazlarda bulunan mobil ekran boyutları ile ilerliyoruz. Burada asıl kilit nokta mobil arayüz tasarımı grid sistemidir. Kesinlikle mobil grid sistemlerini de araştırmanızı öneririm.
Ben genel olarak mobil arayüz tasarımı yaparken Apple iPhone 8 Plus ekran çözünürlüğü olan 1920x1080px’in bir orantısı olan 414x736px boyutlarını kullanıyorum. (Orantı olarak demek istediğim 1920x1080px boyutu orantılı şekilde küçültürsek 414x736px boyutuna denk gelmektedir.) Bu boyutlar ile fiziksel telefonum üzerinden rahatlıkla prototip ön izlemesi de alabiliyorum. Böylece mobil arayüz projesini geliştirirken daha sağlıklı bir şekilde ilerlemiş oluyorum.
Mobil arayüz tasarımı yaparken, mobil ekran boyutlarını Sketch, Figma, Adobe XD vs. gibi platformlar üzerinden yeni bir Artboard oluşturma alanından da kolayca mobil ekran çözünürlüklerine ulaşabilirsiniz.
Mobil arayüz tasarımı yaparken kullandığımız tasarım uygulamaları vektör tabanlı (Sketch, Figma, Adobe XD vs.) olduğu için dilediğimiz büyüklükte bozulma olmadan çıktı alabilir, Zeplin gibi developer geliştiricilerin erişebileceği platformlara dosyamızı export edebiliriz.
Yine de örnek olarak Sketch mobil ekran boyutları;
IPHONE
iPhone 8 – 375x667px
iPhone 8 Plus – 414x736px
iPhone SE – 320x568px
iPhone 11 Pro – 375x812px
iPhone 11 – 414x896px
iPhone 11 Pro Max – 414x896px
iPhone 12 Mini – 375x812px
iPhone 12 – 390x844px
iPhone 12 Pro -390x844px
iPhone 12 Pro Max – 428x926px
IPAD
7.9 inç iPad mini – 768x1024px
10.2 inç iPad – 810x1080px
10.5 inç iPad Air – 834x1112px
10.9 inç iPad Air – 840x1180px
11 inç iPad Pro – 834x1194px
12.9 inç iPad Pro -1024x1366px
ANDROID
Android – 360x640px
Pixel 3 – 411x823px
Pixel 3 XL – 411x846px
Pixel 4 – 411x869px
Pixel 4 XL – 411x869px
Galaxy S10 – 360x760px
Galaxy S10+ – 412x869px
Galaxy S10+ – 412x869px
ANDROID TABLET
Nexus 7 – 600x900px
Nexus 9 – 768x1024px
Nexus 10 – 1200x800px