Mobil Arayüz Tasarımı Mobil Ekran Boyutları Nedir?

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 belirlemek ile 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 sisteminde saklı. Kesinlikle mobil grid sistemlerini de ek olarak araştırmanızı öneririm.

Ben genel olarak mobil arayüz tasarımı yaparken Apple iPhone 13 & 14 ekran çözünürlüğünün orantısı olan 390x844px boyutlarını kullanıyorum. Bu boyutlar ile fiziksel telefonum üzerinden rahatlıkla prototip ön izleme 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, Framer, Penpot 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ı alabilirsiniz.

Yine de örnek olarak Mobil Ekran Boyutları;

Bu şekilde, her cihazın ekran boyutları kolayca karşılaştırılabilir. Umarım işine yarar!