Bunu baştan net söylemek lazım.

İyi bir mobil uygulama arayüzü; kullanıcının ne yapmak istediğini, hangi sırayla ilerleyeceğini, nerede zorlanacağını ve sistemin ona nasıl cevap vereceğini düşünür.

Yani iş sadece UI değil.

UX, product design, içerik, teknik sınırlar ve gerçek cihaz davranışı da işin içindedir.

Önce problemi anlamak gerekir

Mobil ekran tasarımına direkt Figma açarak başlamak çoğu zaman acele olur.

Önce ürünün ne çözdüğünü anlamak gerekir.

Kullanıcı kim?

Bu uygulamayı neden açıyor?

En önemli aksiyon ne?

Kullanıcı hangi noktada karar veriyor?

Başarılı kullanım ne demek?

Bu sorular net değilse tasarım güzel görünse bile ürün tarafında zayıf kalabilir.

Ben bu yüzden mobil uygulama arayüz tasarımına başlamadan önce kısa bir problem notu çıkarmayı severim.

Kullanıcı akışını çıkarmadan ekran çizme

Mobil uygulama arayüzü ekran ekran değil, akış akış düşünülmeli.

Mesela kayıt akışı, ödeme akışı, onboarding akışı, arama akışı veya profil düzenleme akışı.

Kullanıcı bir ekrandan diğerine neden geçiyor?

Geri dönerse ne oluyor?

Hata alırsa ne görüyor?

İşlem başarılı olursa nereye gidiyor?

Bu soruların cevabı yoksa ekranlar birbirinden kopuk olur.

İyi mobil tasarımda her ekran bir sonraki adımı hazırlar.

Wireframe ile başlamak daha sağlıklı

Wireframe, tasarımın iskeletidir.

Renk, gölge, ikon ve görsel detaylara girmeden önce ekranın mantığını kurarsın.

Bu aşamada amaç güzel görünmek değil, doğru yerleşimi bulmaktır.

Başlık nerede?

Ana aksiyon nerede?

Form alanları hangi sırada?

Liste nasıl akıyor?

Boş ekran ne söylüyor?

Wireframe bu soruları hızlı cevaplar.

Yeni başlayan tasarımcılar bazen direkt final UI’a geçiyor.

Bu da sonradan çok revizyon doğuruyor.

Component mantığını erken kur

Mobil uygulama arayüz tasarımında component sistemi çok önemlidir.

Button, input, card, tab bar, header, list item, modal, toast, empty state ve error state gibi parçalar erken düşünülmeli.

Çünkü ürün büyüdükçe her ekranı elle toparlamak zorlaşır.

Componentler tutarlı olursa tasarım daha hızlı büyür.

Geliştirici tarafı da daha rahat ilerler.

Bu noktada design system düşüncesi lüks değil, temel ihtiyaçtır.

Bu konuyu daha geniş okumak için Design Systems for Beginners yazısına bakabilirsin.

Mobil ekran boyutlarını kontrol et

Mobil uygulama arayüz tasarımı tek bir ekran boyutunda bitmez.

Figma’da tasarım güzel görünebilir ama küçük ekranda bozulabilir.

Keyboard açıldığında buton kaybolabilir.

Safe area dikkate alınmadığında alt aksiyon home indicator alanına fazla yaklaşabilir.

Bu yüzden en az şu üç kontrolü yapmak iyi olur:

• Küçük telefon ekranı
• Standart modern telefon ekranı
• Büyük telefon veya tablet ekranı

Güncel ölçüler için Mobil Arayüz Tasarımı Ekran Boyutları Nedir?, iPhone özelinde ise iPhone Ekran Boyutları yazılarına bakabilirsin.

State tasarımlarını atlama

Mobil uygulama arayüzünde sadece ideal ekranı tasarlamak yetmez.

Gerçek üründe her zaman ideal durum yaşanmaz.

Veri gelmeyebilir.

İnternet yavaş olabilir.

Kullanıcı yanlış bilgi girebilir.

İşlem başarıyla tamamlanabilir.

Bu yüzden şu state’ler düşünülmeli:

• Loading state
• Empty state
• Error state
• Success state
• Disabled state
• Validation state

Bunlar küçük detay gibi görünür ama ürün kalitesini ciddi etkiler.

Bu konu için UI/UX Tasarımda Empty State ve Error State Neden Önemli? yazısı iyi tamamlayıcı olur.

İçerik de arayüzün parçasıdır

Mobil uygulama arayüzünde metinler çok önemlidir.

Buton metni, hata mesajı, boş ekran açıklaması, onboarding cümlesi ve form label’ları tasarımın parçasıdır.

“Devam” mı yazmalı?

“Kaydet” mi?

“Hesap oluştur” mu?

Bu küçük kararlar kullanıcı davranışını etkiler.

Bu yüzden arayüz tasarımı yaparken metinleri sonradan doldurulacak alan gibi görmemek lazım.

Metin, kullanıcıyı yönlendiren en önemli UI parçalarından biridir.

Prototype ile akışı test et

Mobil uygulama arayüz tasarımında prototype sadece sunum için yapılmaz.

Akışın çalışıp çalışmadığını görmek için yapılır.

Kullanıcı ilk ekrandan hedefe rahat gidebiliyor mu?

Geri dönüş mantıklı mı?

Modal kapanınca kullanıcı nerede kalıyor?

Hata mesajı akışı kesiyor mu?

Prototype bu soruları erkenden yakalar.

Bu yüzden final UI’dan önce basit bir prototype bile çok iş görür.

Handoff sadece ekran teslim etmek değildir

Geliştiriciye sadece Figma linki vermek çoğu zaman yetmez.

İyi handoff, ekranın davranışını da anlatır.

Hangi alan scroll olur?

Buton sticky mi kalır?

Liste boşsa ne gösterilir?

Keyboard açılınca form nasıl davranır?

Hata mesajı nerede çıkar?

Bu notlar ürün geliştirme sürecini çok rahatlatır.

Mobil arayüz tasarımında iyi tasarımcı, sadece ekrana değil uygulanabilirliğe de bakar.

AI bu süreçte nasıl yardımcı olur?

AI mobil uygulama arayüz tasarımında iyi bir yardımcı olabilir.

Akış alternatifi çıkarabilir.

Boş state metni yazabilir.

Error state senaryosu üretebilir.

Component listesi toparlayabilir.

Handoff notlarını düzenleyebilir.

Ama yine aynı şeyi söyleyeceğim.

AI’a iyi sonuç aldırmak için hazırlığın iyi olmalı.

Problem, kullanıcı, hedef, ekran listesi ve component mantığı net değilse AI sadece hızlı ama dağınık fikir üretir.

AI destekli tasarım mantığını Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısında ayrıca anlattım.

Kısa mobil uygulama arayüz tasarım checklist

• Problem net mi?
• Kullanıcı tipi belli mi?
• Ana akış çıkarıldı mı?
• Wireframe ile iskelet kuruldu mu?
• Component listesi hazır mı?
• Safe area kontrol edildi mi?
• Küçük ve büyük ekran testi yapıldı mı?
• Empty, error, loading ve success state tasarlandı mı?
• Metinler kullanıcıyı yönlendiriyor mu?
• Handoff notları geliştirici için yeterli mi?

Benim düşüncem

Mobil uygulama arayüz tasarımı, güzel ekran üretme işi değildir.

Güzel ekran bunun sadece görünen kısmı.

Asıl iş, kullanıcının işini daha kolay yapmasını sağlayan sistemi kurmak.

Akış doğru değilse UI parlatmak yetmez.

Component mantığı yoksa ürün büyüdükçe tasarım dağılır.

Ekran boyutları düşünülmediyse gerçek cihazda problem çıkar.

Bu yüzden mobil uygulama arayüz tasarımında iyi başlangıç şudur:

Önce problemi ve akışı anla, sonra ekranı güzelleştir.

Bence tasarımcıyı güçlü yapan şey de tam olarak bu sırayı doğru kurabilmesi.

Daha temel arayüz tanımı için Arayüz Tasarımı Nedir?, mobil UI tarafındaki ana konu için Mobil Arayüz Tasarımı Nedir? yazılarını okuyabilirsin.

Kaynak Sinyalleri

• Nielsen Norman Group – 10 Usability Heuristics for User Interface Design
• Nielsen Norman Group – Journey Mapping 101
• Figma Learn – Guide to Components in Figma
• Apple Human Interface Guidelines – Layout
• Material Design – Interaction States

The post Mobil Uygulama Arayüz Tasarımı Nasıl Yapılır? first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Ama burada dikkatli olmak lazım.

Bu konu sadece “hangi iPhone kaç piksel?” sorusu değil.

Gerçek tasarım tarafında daha önemli sorular var.

Hangi ölçüyle Figma frame açacağım?

Safe area nerede başlıyor?

Dynamic Island içeriği etkiler mi?

Küçük iPhone ekranında buton aşağıda kalır mı?

Büyük iPhone ekranında içerik fazla dağılır mı?

Bu yüzden iPhone ekran boyutlarını sadece cihaz listesi olarak değil, mobil arayüz tasarımı kararı olarak düşünmek daha doğru.

iPhone ekran boyutları neden tasarımcı için önemli?

iPhone tarafında fiziksel piksel, point ve scale kavramları birlikte düşünülür.

Bir cihazın piksel çözünürlüğü yüksek olabilir ama tasarım yaparken çoğu zaman point ölçüsüyle çalışırsın.

Mesela Apple Human Interface Guidelines içinde iPhone modelleri point ve pixel değerleriyle listelenir.

Bu bilgi tasarımcı için şunu sağlar:

• Doğru Figma frame seçimi
• Safe area kontrolü
• Küçük ekran testi
• Büyük ekran testi
• Geliştiriciyle daha net iletişim
• Responsive mobil UI kararları

Yani ekran boyutu bilgisi tek başına teknik değil, tasarım kalitesiyle doğrudan ilgili.

Güncel iPhone ekran ölçüleri

Güncel iPhone modellerinde sık kullanılan ölçüler kabaca şöyle düşünülebilir:

Burada her cihazı tek tek ezberlemek gerekmiyor.

Benim için daha pratik olan, üç farklı kontrol noktası seçmek:

• Küçük ekran: 375 x 667 veya 375 x 812 pt
• Standart modern ekran: 390 x 844 veya 393 x 852 pt
• Büyük ekran: 430 x 932 veya 440 x 956 pt

Bu üç kontrol çoğu mobil UI problemini erken gösterir.

Point ve pixel farkı neden önemli?

Yeni başlayanlar bazen pixel ölçüsüne fazla takılıyor.

iPhone ekranı 1179 x 2556 piksel diye Figma’da direkt o ölçüyle çalışmaya gerek yok.

iOS tasarım tarafında point ölçüsü daha anlamlıdır.

Çünkü geliştirici tarafında layout çoğu zaman point üzerinden düşünülür.

Scale değeri ise bu point değerinin fiziksel piksele nasıl çevrildiğini anlatır.

Basit düşünelim:

Sen tasarımcı olarak kullanılabilir alanı, spacing’i, safe area’yı ve component davranışını doğru kurmaya odaklanmalısın.

Pixel yoğunluğu cihaz tarafından yönetilir.

Safe area iPhone UI tasarımında neden kritik?

iPhone ekranında her alan rahat kullanılabilir alan değildir.

Üstte Dynamic Island veya notch alanı olabilir.

Altta home indicator alanı vardır.

Kenarlar yuvarlatılmıştır.

Bu yüzden tasarımda safe area dikkate alınmalı.

Özellikle şu alanlarda safe area hatası çok görünür:

• Header ve navigation alanı
• Alt sabit butonlar
• Tab bar
• Full screen modal
• Video veya görsel ağırlıklı ekranlar
• Form ekranlarında keyboard davranışı

Figma’da ekran güzel görünüyor diye gerçek cihazda da iyi çalışacak diye düşünmemek lazım.

Safe area bu yüzden mobil arayüz tasarımının temel kontrol noktalarından biri.

Dynamic Island tasarımı etkiler mi?

Evet, bazı ekranlarda etkiler.

Dynamic Island her ekranı komple değiştirmez ama üst alanı ve gerçek kullanılabilir bölgeyi düşünmeni sağlar.

Özellikle tam ekran deneyimler, medya ekranları, harita, kamera, takip ekranları ve canlı aktivite benzeri durumlarda bu alan daha önemli hale gelir.

Normal liste veya form ekranlarında ise daha çok safe area rehberine sadık kalmak yeterli olabilir.

Yine de tasarımcı olarak üst alanı rastgele doldurmamak gerekir.

Küçük iPhone ekranında neyi test etmelisin?

Küçük ekran testi çok değerlidir.

Çünkü tasarımın gerçek dayanıklılığını gösterir.

Küçük ekranda şu problemler hızlı ortaya çıkar:

• Buton aşağıda kaybolur
• Form alanları keyboard altında kalır
• Başlık çok uzun görünür
• Kartlar fazla sıkışır
• Liste öğeleri okunmaz hale gelir
• Boşluklar fazla lüks kalır

Bu yüzden sadece büyük modern iPhone frame’i ile tasarım yapmak risklidir.

Özellikle onboarding, ödeme, kayıt ve form ekranlarını küçük iPhone ölçüsünde kontrol etmek iyi alışkanlık.

Büyük iPhone ekranında neyi test etmelisin?

Büyük ekran da ayrı problem çıkarır.

Küçük ekranda sıkışan tasarım, büyük ekranda fazla boş görünebilir.

Özellikle tek kartlı ekranlar, boş state tasarımları ve kısa formlar büyük ekranda zayıf kalabilir.

Büyük iPhone ekranında şunlara bakarım:

• İçerik fazla yukarıda mı kalıyor?
• Ana aksiyon parmak erişimi için doğru yerde mi?
• Kartlar gereksiz büyüyor mu?
• Form alanları çok uzun mu görünüyor?
• Alt navigation rahat mı?

Yani büyük ekran sadece daha fazla alan demek değil.

Daha iyi yerleşim kararı demek.

iPhone ekran boyutları ve responsive mobil UI

Responsive düşünmek sadece web sitesi için değil.

Mobil uygulamada da farklı iPhone ölçülerine göre arayüzün davranışı düşünülmeli.

Bir ekran küçük iPhone’da tek kolon ve scroll çalışabilir.

Daha büyük iPhone’da görsel alan biraz genişleyebilir.

Tab bar sabit kalabilir.

Alt buton safe area içinde korunabilir.

Burada amaç her cihaz için ayrı ekran çizmek değil.

Arayüzün farklı ölçülerde bozulmadan çalışacağını göstermektir.

Bu konuya daha geniş yer verdiğim Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın yazısı da işine yarayabilir.

Figma’da hangi iPhone frame ile çalışmalı?

Tek doğru cevap yok.

Ben genelde standart modern iPhone ölçüsünü ana çalışma alanı olarak seçmeyi mantıklı buluyorum.

Mesela 393 x 852 pt veya 390 x 844 pt iyi başlangıç olabilir.

Ama sadece bu frame ile bırakmam.

Mutlaka küçük ve büyük ekran kontrolü yaparım.

Çünkü bir tasarımın iyi olması için tek bir frame’de güzel görünmesi yetmez.

Farklı iPhone ekran boyutlarında anlamını koruması gerekir.

Benim kısa iPhone UI kontrol listem

• Standart iPhone frame’de tasarım net mi?
• Küçük iPhone ekranında içerik taşıyor mu?
• Büyük iPhone ekranında boşluklar dengeli mi?
• Safe area dikkate alındı mı?
• Dynamic Island / notch alanı problem yaratıyor mu?
• Home indicator alanına buton fazla yakın mı?
• Keyboard açılınca form bozuluyor mu?
• Uzun metinler test edildi mi?
• Tab bar ve navigation erişilebilir mi?
• Geliştiriciye point ölçüsü ve davranış notu verildi mi?

Benim düşüncem

iPhone ekran boyutları listesini bilmek faydalı.

Ama tasarımcı için asıl değer, bu ölçüleri tasarım kararına çevirmek.

Küçük ekran bize sıkışmayı gösterir.

Büyük ekran bize boşluk yönetimini gösterir.

Safe area bize gerçek kullanılabilir alanı gösterir.

Point ölçüsü ise geliştiriciyle aynı dili konuşmamızı sağlar.

Bu yüzden iPhone UI tasarımı yaparken sadece en popüler cihazı açıp çalışmak yeterli değil.

En az üç ölçüde kontrol yapmak daha sağlıklı.

Mobil arayüz tasarımı temelini daha geniş okumak istersen Mobil Arayüz Tasarımı Nedir?, daha genel arayüz mantığı için de Arayüz Tasarımı Nedir? yazılarına bakabilirsin.

Kaynak Sinyalleri

• Apple Human Interface Guidelines – Layout
• Apple – iPhone 16 Technical Specifications
• Apple Support – iPhone 16e Technical Specifications
• Apple Support – iPhone 15 Technical Specifications
• Apple Human Interface Guidelines

The post iPhone Ekran Boyutları: UI/UX Tasarımcılar İçin Güncel Liste first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Şu iPad kaç piksel, şu Android tablet kaç inç, şu cihazın çözünürlüğü ne?

Bunlar tabii ki lazım.

Ama UI/UX tasarımcı için asıl mesele sadece cihaz ölçüsü bilmek değil.

Asıl mesele, tablet ekranında arayüzün nasıl davranacağını doğru düşünmek.

Çünkü tablet, telefon gibi tek kolon davranmak zorunda değil.

Aynı zamanda desktop gibi sınırsız alan da vermiyor.

Bu yüzden tablet arayüz tasarımı, mobil ve desktop arasında ayrı düşünülmesi gereken bir alan.

Tablet ekran boyutları neden önemli?

Tablet ekran boyutları, özellikle mobil uygulama ve responsive ürün tasarımında önemli.

Çünkü tablet ekranında genellikle daha fazla yatay alan vardır.

Bu alanı doğru kullanırsan ürün daha rahat çalışır.

Yanlış kullanırsan ekran ya çok boş kalır ya da telefon tasarımının büyütülmüş hali gibi görünür.

Ben tablet tasarımında şu sorulara bakmayı seviyorum:

• Bu ekran tek kolon mu kalmalı?
• İki panel layout daha doğru olur mu?
• Liste ve detay aynı anda gösterilebilir mi?
• Navigation bottom bar mı kalmalı, nav rail mi olmalı?
• Kartlar kaç kolona bölünmeli?
• Form alanları fazla uzuyor mu?
• Landscape ve portrait davranışı farklı mı olmalı?

Bu sorular cihaz listesinden daha değerlidir.

Güncel iPad ekran boyutları

iPad tarafında güncel yaygın ölçüler şöyle düşünülebilir:

Burada önemli bir not var.

UI tasarım yaparken sadece fiziksel piksele takılmak doğru değil.

Figma’da çalışırken point, viewport, scale ve safe area gibi kavramları da düşünmek gerekir.

Yani “cihaz 2752 x 2064 piksel” bilgisi tek başına tasarım kararını vermez.

Android tabletlerde breakpoint mantığı

Android tarafında cihaz çeşitliliği daha fazla.

Bu yüzden tek tek model ezberlemek yerine window size class mantığı daha sağlıklı.

Android Developers dokümanında genişlik sınıfları kabaca şöyle ayrılıyor:

• Compact: 600dp altı, daha çok telefon portrait
• Medium: 600dp – 839dp, küçük tablet veya büyük foldable alanı
• Expanded: 840dp – 1199dp, tablet landscape ve geniş ekranlar
• Large: 1200dp – 1599dp, büyük tablet veya desktop benzeri alan
• Extra large: 1600dp ve üstü, desktop / çok geniş ekran

Bence tasarımcı için bu yaklaşım çok daha kullanışlı.

Çünkü kullanıcı tableti portrait kullanabilir.

Landscape kullanabilir.

Split screen açabilir.

Foldable cihazda pencere boyutu değişebilir.

Yani önemli olan cihaz adı değil, uygulamanın elindeki gerçek alan.

Tablet tasarımında tek kolon her zaman doğru değil

Telefon ekranlarında tek kolon çoğu zaman doğal çalışır.

Ama tablet ekranında aynı yapıyı büyütüp ortaya koymak bazen zayıf görünür.

Özellikle şu ekranlarda iki panel düşünmek faydalı olabilir:

• Mesajlaşma uygulamaları
• E-posta uygulamaları
• CRM ve dashboard ekranları
• Ayarlar ekranları
• Dosya veya içerik yönetimi
• Liste ve detay ilişkisi olan ürünler

Mesela solda liste, sağda detay göstermek tablet için çok doğal bir davranış olabilir.

Telefonda bu iki ekran ayrı ayrı açılır.

Tablette ise aynı anda gösterilebilir.

Bu yüzden tablet UI tasarımında “daha büyük telefon” gibi düşünmek yerine “daha fazla bağlam gösterebilen ekran” gibi düşünmek daha doğru.

Portrait ve landscape ayrı kontrol edilmeli

Tablet tasarımında portrait ve landscape davranışı önemlidir.

Portrait kullanımda ekran daha dar hissedilebilir.

Landscape kullanımda ise yatay alan ciddi şekilde artar.

Bu fark navigation kararını bile değiştirebilir.

Portrait modda bottom tab bar iyi çalışırken, landscape modda nav rail daha mantıklı olabilir.

Portrait modda tek kolon kalan bir ekran, landscape modda liste + detay yapısına dönebilir.

Bu yüzden sadece bir tablet frame çizip bırakmak yeterli değil.

En azından portrait ve landscape kontrolü yapılmalı.

Tablet UI tasarımında spacing ve grid

Tablet ekranlarında boşluk kullanımı çok hassas.

Telefon tasarımındaki spacing değerlerini aynen büyütürsen ekran fazla seyrek kalabilir.

Desktop spacing mantığını aynen getirirsen de dokunmatik kullanım zayıflayabilir.

Ben tablet tasarımında şu dengeyi ararım:

• Dokunma alanları rahat kalmalı
• İçerik gereksiz uzamamalı
• Formlar çok geniş olmamalı
• Kartlar kontrollü kolonlara ayrılmalı
• Okuma alanı fazla satır uzunluğuna kaçmamalı

Bu konuda daha genel responsive mantık için Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın yazısı iyi tamamlayıcı olur.

Tablet için hangi ekranları mutlaka test ederim?

Bir mobil uygulamanın tablet davranışını kontrol ederken her ekranı aynı detayda incelemek gerekmeyebilir.

Ama bazı ekranları kesinlikle kontrol ederim:

• Home veya dashboard ekranı
• Liste ekranı
• Liste detay ekranı
• Form ekranı
• Onboarding ekranı
• Ayarlar ekranı
• Empty state ve error state
• Modal, bottom sheet veya popup davranışı

Bu ekranlar tablet tarafında problem çıkarma ihtimali yüksek alanlardır.

Özellikle form ve detay ekranlarında genişlik fazla büyüdüğünde okunabilirlik bozulabilir.

Tablet ekran boyutları SEO için değil, ürün kalitesi için önemli

Bu konuyu özellikle tasarımcı gözüyle ele almak istiyorum.

Tablet ekran boyutları sadece Google’da aranan bir teknik bilgi değil.

Gerçek ürün kalitesini etkileyen bir tasarım konusu.

Kullanıcı tabletiyle ürünü açtığında uygulama büyük ekrana uyum sağlamıyorsa amatör hissedebilir.

Telefon ekranının büyütülmüş hali gibi duran bir tablet arayüzü, ürünün algısını düşürebilir.

Bu yüzden tablet tasarımı, özellikle SaaS, dashboard, eğitim, sağlık, finans ve üretkenlik uygulamalarında önemlidir.

Benim kısa tablet tasarım kontrol listem

• Portrait ve landscape kontrol edildi mi?
• 600dp, 840dp ve 1200dp kırılımları düşünüldü mü?
• Tek kolon mu, iki panel mi daha doğru?
• Navigation bottom bar, nav rail veya side menu olarak değişmeli mi?
• Liste ve detay aynı anda gösterilebilir mi?
• Form genişliği okunabilir kalıyor mu?
• Kart gridleri fazla dağılmadan çalışıyor mu?
• Safe area ve system bar alanları hesaba katıldı mı?
• Boş, hata ve loading state tablet için de tasarlandı mı?

Bu liste çoğu projede hızlı kontrol sağlar.

Benim düşüncem

Tablet ekran boyutları ezberlenecek bir liste değil.

Tablet tasarımında asıl konu, ekran büyüdüğünde arayüzün nasıl daha akıllı davranacağıdır.

Telefon tasarımını büyütmek yerine, tablet ekranında kullanıcıya daha fazla bağlam göstermek gerekir.

Bazen bu iki panel olur.

Bazen daha iyi grid olur.

Bazen daha sakin bir form düzeni olur.

Bazen de sadece boşluğu doğru yönetmek olur.

İyi tablet UI tasarım, cihaz ölçüsünü bilmekle başlar ama orada bitmez.

Gerçek iş, o ölçüyü ürün kararına çevirebilmektir.

Mobil arayüz tasarımı tarafındaki temel mantık için Mobil Arayüz Tasarımı Nedir? ve daha genel arayüz mantığı için Arayüz Tasarımı Nedir? yazılarını da okuyabilirsin.

Kaynak Sinyalleri

• Apple – iPad Pro Technical Specifications
• Apple – iPad Air Technical Specifications
• Apple – iPad 11-inch Technical Specifications
• Apple – iPad mini Technical Specifications
• Android Developers – Window Size Classes
• Android Developers – Canonical Layouts

The post Tablet Ekran Boyutları: UI Tasarımcılar İçin Güncel Ölçü Rehberi first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Arayüz tasarımı denince çoğu kişinin aklına ilk olarak güzel görünen ekranlar geliyor.

Renkler, butonlar, ikonlar, kartlar, menüler.

Bunlar tabii ki işin içinde var.

Ama bence arayüz tasarımını sadece görsel düzen gibi düşünmek eksik kalıyor.

Arayüz, kullanıcının dijital ürünle konuştuğu yerdir.

Kullanıcı bir butona basar, sistem cevap verir.

Kullanıcı bir form doldurur, sistem onu yönlendirir.

Kullanıcı hata yapar, arayüz ona ne olduğunu anlatır.

Bu yüzden arayüz tasarımı sadece ekranda ne göründüğü değil, kullanıcının neyi nasıl anlayacağı ve nasıl hareket edeceğidir.

Arayüz tasarımı nedir?

Arayüz tasarımı, bir dijital ürünün kullanıcı ile temas ettiği katmanı tasarlama işidir.

Bu bir mobil uygulama olabilir.

Bir web sitesi olabilir.

Bir SaaS paneli, dashboard, ödeme ekranı, üyelik formu veya ayarlar sayfası olabilir.

Arayüz tasarımında amaç şudur:

Kullanıcı ürünü açtığında ne yapacağını anlamalı, doğru yere kolay gitmeli, hata yaptığında kaybolmamalı ve işlem sonunda ne olduğunu net görmelidir.

Yani arayüz tasarımı, görsel tasarım ile kullanım mantığının birleştiği yerdir.

UI tasarımı ile arayüz tasarımı aynı şey mi?

Günlük kullanımda çoğu zaman aynı anlamda kullanılıyor.

UI, yani User Interface, kullanıcı arayüzü demektir.

Butonlar, input alanları, menüler, ikonlar, listeler, kartlar, tab bar, modal, dropdown gibi parçalar UI tarafına girer.

Fakat iyi UI sadece bu parçaları güzel dizmek değildir.

İyi UI şu sorulara cevap verir:

• Bu buton burada ne işe yarıyor?
• Kullanıcı bu alanı görünce ne anlayacak?
• Bu bilgi şu anda gerekli mi?
• Hata mesajı yeterince açık mı?
• Bir sonraki adım belli mi?
• Aynı component farklı yerde aynı davranıyor mu?

Bunlar çözülmeden sadece güzel görünen bir ekran yapmak, gerçek ürün tarafında zayıf kalabilir.

UX tasarımı burada nereye giriyor?

UX, yani kullanıcı deneyimi, arayüzün daha geniş tarafıdır.

UI ekranda gördüğün ve dokunduğun katmansa, UX o ekranın kullanıcının hayatında nasıl çalıştığıdır.

Mesela bir ödeme ekranı düşünelim.

Kart alanları güzel olabilir.

Buton rengi iyi olabilir.

Tipografi temiz olabilir.

Ama kullanıcı neden hata aldığını anlamıyorsa, ödeme sonrası ne olacağını bilmiyorsa veya gereksiz adımlarla uğraşıyorsa UX tarafında problem vardır.

Bu yüzden arayüz tasarımı yaparken sadece ekran değil, akış da düşünülmeli.

Kullanıcı nereden geldi?

Ne yapmak istiyor?

Hangi bilgiyi bekliyor?

Nerede duraksar?

Nerede hata yapar?

Bu sorular arayüz tasarımını daha güçlü hale getirir.

Mobil arayüz tasarımı neden ayrı düşünülmeli?

Mobil arayüz tasarımı, web arayüzünden farklı bazı gerçeklere sahip.

Ekran daha küçük.

Dokunma alanları önemli.

Keyboard ekranı kapatabiliyor.

Safe area, notch, tab bar, gesture alanları var.

Kullanıcı çoğu zaman hızlı hareket ediyor.

Bu yüzden mobil arayüz tasarımında sadelik daha kritik hale geliyor.

Her şeyi ekrana doldurmak yerine doğru bilgi sırası kurulmalı.

Birincil aksiyon net olmalı.

Butonlar parmakla rahat basılacak şekilde tasarlanmalı.

Form alanları sıkıştırılmamalı.

Boş, hata, yükleniyor ve başarılı durumları ayrıca düşünülmeli.

Bu konuya yakın olarak daha önce Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın yazısında ekran boyutları ve responsive mantığını anlatmıştım.

Arayüz tasarımında component mantığı neden önemli?

İyi bir arayüz tek tek ekranlardan oluşmaz.

İyi bir arayüz, tekrar kullanılabilir kararların birleşimidir.

Buton nasıl davranır?

Input hata alınca nasıl görünür?

Liste boşsa ne gösterilir?

Kart içindeki görsel oranı ne olur?

Primary ve secondary aksiyonlar nasıl ayrılır?

Bu kararlar sistemli olursa ürün büyüdükçe arayüz dağılmaz.

Burada design system mantığı devreye giriyor.

Figma tarafında component, style ve library yapıları bu yüzden önemli.

Çünkü arayüz tasarımı artık sadece bir ekran çizmek değil, tekrar edilebilir bir sistem kurmak.

Bu konuda daha temel bir başlangıç için Design Systems for Beginners yazısına da bakılabilir.

Arayüz tasarımında en sık yapılan hatalar

Benim gördüğüm en yaygın hata, arayüzü sadece estetik taraftan ele almak.

Güzel renk, güzel kart, güzel icon tek başına yetmiyor.

Arayüz kullanıcıyı yönlendirmiyorsa işini yapmıyor demektir.

Diğer sık hatalar şunlar:

• Her şeyi aynı anda göstermek
• Birincil aksiyonu net yapmamak
• Hata mesajlarını geçiştirmek
• Boş ekranları tasarlamamak
• Mobil ekran boyutlarını test etmemek
• Componentleri tutarsız kullanmak
• Metinleri tasarımın parçası gibi düşünmemek
• Kullanıcı araştırması yapmadan ekran üretmek

Özellikle kullanıcı araştırması konusu arayüz tasarımını çok etkiler.

Çünkü kullanıcıyı anlamadan çizilen ekran, çoğu zaman tasarımcının kendi varsayımı olur.

Bu konu için UI/UX Tasarımda Kullanıcı Araştırması Yapmadan Ekran Tasarlamak Neden Riskli? yazısı iyi tamamlayıcı olur.

Arayüz örneklerine nasıl bakmak gerekir?

Arayüz örneklerine bakmak faydalı.

Ama sadece “güzel mi?” diye bakarsan çok şey kaçırırsın.

Ben arayüz örneklerine bakarken şunlara dikkat etmeyi daha doğru buluyorum:

• Bilgi sırası nasıl kurulmuş?
• Kullanıcı ilk neyi görüyor?
• Ana aksiyon nerede?
• İkincil aksiyonlar nasıl sakinleştirilmiş?
• Hata ve boş durum düşünülmüş mü?
• Mobilde dokunma alanları rahat mı?
• Aynı componentler tutarlı mı?
• Metinler kullanıcıyı yönlendiriyor mu?

Bu şekilde bakınca arayüz örnekleri sadece ilham panosu olmaktan çıkar.

Gerçek bir öğrenme aracına dönüşür.

AI arayüz tasarımını nasıl değiştiriyor?

AI artık arayüz tasarımında ciddi bir yardımcı.

Ekran taslağı çıkarabilir.

Alternatif akış önerebilir.

Form metinlerini sadeleştirebilir.

Empty state ve error state fikirleri verebilir.

Design system için component listesi hazırlatılabilir.

Ama burada kritik nokta şu:

AI’a sadece “bana güzel bir ekran yap” demek yeterli değil.

İyi sonuç için iyi hazırlık gerekir.

Ürünün amacı, kullanıcı tipi, akış, içerik önceliği, component mantığı ve sınırlar net olmalı.

Yoksa AI hızlı ekran üretir ama o ekran gerçek üründe çalışmayabilir.

Bu yüzden AI çağında arayüz tasarımcısının değeri bitmiyor.

Bence daha da artıyor.

Çünkü iyi tasarımcı artık sadece ekran çizen kişi değil, AI’ın doğru yönde çalışmasını sağlayan karar verici kişi oluyor.

Bu çizgide Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısını da okuyabilirsin.

İyi arayüz tasarımı için kısa kontrol listesi

Bir arayüz tasarımını değerlendirirken ben basit bir kontrol listesiyle ilerlemeyi seviyorum.

• Kullanıcı bu ekranda ne yapacağını hemen anlıyor mu?
• Başlık ve açıklama yeterince net mi?
• Ana aksiyon görsel olarak ayrışıyor mu?
• Gereksiz bilgi var mı?
• Boş, hata, yükleniyor ve başarı durumları düşünülmüş mü?
• Mobilde dokunma alanları rahat mı?
• Farklı ekran boyutlarında yapı bozuluyor mu?
• Componentler tutarlı mı?
• Metinler kullanıcıya yardım ediyor mu?
• Bu ekran ürünün asıl amacına hizmet ediyor mu?

Bu soruların cevabı netse arayüz büyük ihtimalle daha sağlamdır.

Net değilse, sorun sadece görselde değil; karar yapısında olabilir.

Benim düşüncem

Arayüz tasarımı benim için güzel ekran üretmekten daha fazlası.

Arayüz, ürünün kullanıcıyla konuşma biçimi.

Bu konuşma net, sakin ve tutarlı olursa kullanıcı ürüne daha kolay güvenir.

Bu konuşma karışık olursa en güzel görsel stil bile ürünü kurtarmayabilir.

Özellikle mobil arayüz tasarımı, UI/UX ve product design tarafında çalışan biri için bu bakış çok önemli.

Çünkü gerçek dünyada tasarladığımız şey sadece bir ekran değil.

Bir akış, bir karar sistemi, bir davranış ve bir deneyim tasarlıyoruz.

O yüzden iyi arayüz tasarımı şuradan başlıyor:

Kullanıcı neyi anlamalı, neyi yapmalı ve sistem ona nasıl cevap vermeli?

Bu soruya doğru cevap verdiğinde görsel tasarım zaten daha anlamlı hale geliyor.

UI/UX ve product design üzerine diğer yazılar için UI/UX, Product Design ve Technology kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Nielsen Norman Group – 10 Usability Heuristics for User Interface Design
• Nielsen Norman Group – The Definition of User Experience
• Figma Learn – Guide to Components in Figma
• Figma – Components, Styles, and Shared Library Best Practices
• Material Design – Interaction States

The post Arayüz Tasarımı Nedir? UI/UX ve Mobil Uygulama Tasarımı Açısından Basit Anlatım first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

iPhone küçük, iPhone büyük, Android başka, tablet başka.

Bir de işin içine safe area, notch, navigation bar, tab bar, keyboard, landscape, responsive ve adaptive gibi kavramlar girince konu daha zor görünmeye başlıyor.

Ama bence burada panik yapmaya gerek yok.

Mobil app UI tasarımında amaç her cihazı tek tek ezberlemek değildir.

Asıl amaç, arayüzün farklı ekranlarda nasıl davranacağını doğru düşünmektir.

Bu mantık oturduğunda ekran boyutları korkutucu olmaktan çıkar.

Her cihaz için ayrı tasarım yapmak zorunda değilsin

Yeni başlayanlarda en sık gördüğüm düşünce şu:

“Her telefon boyutu için ayrı ekran mı çizeceğim?”

Hayır.

Tabii bazı kritik ekranları farklı boyutlarda kontrol etmek gerekir.

Ama her cihaz için baştan ayrı tasarım yapmak doğru yöntem değil.

Mobil UI tasarımda temel yaklaşım şudur:

• İçerik nasıl büyür?
• Alan daralınca ne olur?
• Buton nerede kalır?
• Liste uzayınca nasıl davranır?
• Keyboard açılınca form bozulur mu?
• Tablet ekranda aynı yapı çok boş kalır mı?

Bunları düşünürsen tek tek cihaz kovalamak yerine sistemli ilerlersin.

Responsive sadece web sitesi için değil

Responsive denince çoğu kişinin aklına web tasarım geliyor.

Ama mobil app tarafında da benzer bir düşünme biçimi var.

Ekranın genişliği, yüksekliği, güvenli alanları ve kullanılan componentler tasarım kararını etkiler.

Bir kart yapısı küçük telefonda tek kolon olabilir.

Daha geniş bir ekranda iki kolon gibi çalışabilir.

Bir bottom sheet küçük ekranda daha dikkatli kullanılmalı.

Tablet tarafında ise aynı içerik split view ya da daha geniş layout ile daha rahat sunulabilir.

Yani responsive düşünmek sadece “ekran küçülünce küçült” demek değildir.

İçeriğin önceliğini ve davranışını yeniden düşünmektir.

Adaptive design mantığını erken öğren

Responsive ve adaptive kavramları bazen karışıyor.

Basit düşünelim.

Responsive tasarım, arayüzün alana göre esnemesidir.

Adaptive design ise farklı ekran bağlamlarına göre layout kararının değişmesidir.

Mesela telefonda alt menü kullanırken tablette yan menü kullanmak adaptive bir yaklaşımdır.

Mobilde tek kolon, tablette iki panel göstermek de buna örnek olabilir.

Google tarafında Material Design bu konuyu breakpoint ve window size class mantığıyla ele alıyor.

Apple tarafında da Human Interface Guidelines içinde layout, safe area ve platform davranışları önemli yer tutuyor.

Yeni başlayan bir tasarımcı için bu belgeleri ezberlemek gerekmiyor.

Ama mantığını bilmek çok iş görür.

Xcode ve Android Studio burada neden önemli?

Bir UI/UX tasarımcı doğrudan kod yazmak zorunda olmayabilir.

Ama mobil app tasarlıyorsa geliştirici araçlarının nasıl düşündüğünü biraz anlamalı.

Mesela Xcode içinde SwiftUI Preview ile farklı cihazlarda ekranın nasıl göründüğü kontrol edilebilir.

Android Studio ve Jetpack Compose tarafında da preview ve farklı ekran sınıflarıyla layout kontrolü yapılabilir.

Bu tasarımcı için şu anlama gelir:

Sen Figma’da sadece güzel bir ekran çizmezsin.

Geliştirici o ekranı farklı cihazlarda yaşatmak zorunda kalır.

Bu yüzden tasarım kararın kod tarafında nasıl davranacak, bunu biraz düşünmen gerekir.

Button fixed mi kalacak?

Liste scroll olacak mı?

Header yüksekliği sabit mi?

Image alanı oranla mı büyüyecek?

Form alanı keyboard altında kalacak mı?

Bunları tasarım aşamasında düşünmek geliştiriciyle iletişimi çok rahatlatır.

Figma’da sadece tek frame çizip bırakma

Figma’da mobil app UI tasarlarken tek bir popüler ekran boyutu seçip bütün işi orada bitirmek zayıf kalabilir.

Ben olsam en az üç kontrol yapardım:

• Küçük telefon ekranı
• Orta / standart telefon ekranı
• Büyük telefon veya tablet benzeri geniş ekran

Bu üç kontrol sana çoğu problemi gösterir.

Metin taşıyor mu?

Buton aşağıda kayboluyor mu?

Card alanları fazla mı sıkışıyor?

Liste öğeleri okunuyor mu?

Boşluklar küçük ekranda fazla mı lüks kalıyor?

Büyük ekranda içerik çok mu dağınık duruyor?

Bunları erken fark etmek sonradan düzeltmekten daha kolaydır.

Güncel ekran ölçüleri için daha önce yazdığım Mobil Arayüz Tasarımı Ekran Boyutları Nedir? yazısına bakabilirsin.

Safe area konusu küçük ama önemlidir

Mobil arayüz tasarımında safe area çok önemli.

Çünkü ekranın her alanı rahat kullanılabilir alan değildir.

Üstte kamera alanı olabilir.

Altta home indicator olabilir.

Sistem gesture alanları olabilir.

Keyboard açıldığında içerik yukarı taşınmak zorunda kalabilir.

Yeni başlayanlar bazen butonu ekranın en altına fazla yaklaştırıyor.

Ya da header içeriğini üstteki sistem alanına çok yakın bırakıyor.

Bu küçük detaylar gerçek cihazda kötü hissettirir.

Figma’da güzel görünen bir ekran, cihazda rahatsız çalışabilir.

Bu yüzden mobil UI tasarımda safe area rehberlerini açık kullanmak iyi alışkanlık.

Component mantığı ekran boyutlarını kolaylaştırır

Farklı ekran boyutlarıyla çalışmayı kolaylaştıran şeylerden biri component mantığıdır.

Buton, card, input, tab bar, navigation, list item gibi parçalar sistemli kurulursa farklı ekranlarda davranış daha kontrollü olur.

Mesela bir kart componentinin minimum genişliği, iç boşluğu, görsel oranı ve metin davranışı belliyse tasarım daha rahat ölçeklenir.

Her şeyi elle yerleştirirsen küçük bir ekran değişikliğinde bütün yapı bozulur.

Bu yüzden mobil app UI tasarlarken design system düşüncesi lüks değil, iş kolaylaştıran bir temel.

Bu konu için Design Systems for Beginners yazısı iyi bir başlangıç olabilir.

Junior tasarımcılar nerede hata yapıyor?

Yeni başlayanlarda gördüğüm birkaç tipik hata var.

Birincisi, sadece en güzel görünen cihaz boyutunda çalışmak.

İkincisi, uzun metinleri hiç test etmemek.

Üçüncüsü, keyboard açılınca ne olacağını düşünmemek.

Dördüncüsü, empty state ve error state gibi gerçek ürün durumlarını atlamak.

Beşincisi, geliştiriciye sadece final ekran görseli verip davranışı açıklamamak.

Oysa iyi mobil UI tasarımda ekranın davranışı da anlatılmalı.

Şu alan scroll olur.

Bu buton sticky kalır.

Bu görsel oranını korur.

Bu liste boşsa empty state görünür.

Bu hata durumunda input mesaj gösterir.

Bunları yazmak ve göstermek seni daha profesyonel gösterir.

Responsive mobil UI için basit kontrol listesi

Bir mobil app ekranını teslim etmeden önce şu liste işe yarar:

• Küçük ekranda içerik okunuyor mu?
• Büyük ekranda layout fazla boş kalıyor mu?
• Safe area dikkate alındı mı?
• Keyboard açılınca form alanları görünür kalıyor mu?
• Uzun metinler taşmadan çalışıyor mu?
• Butonlar dokunulabilir boyutta mı?
• Liste, kart ve görsel alanları esneyebiliyor mu?
• Empty state ve error state tasarlandı mı?
• Tablet veya geniş ekran davranışı düşünüldü mü?
• Geliştiriciye davranış notları verildi mi?

Bu listeyi alışkanlık haline getirmek, farklı ekran boyutları korkusunu bayağı azaltır.

AI burada nasıl yardımcı olabilir?

AI bu konuda da yardımcı olabilir.

Mesela bir ekran için farklı responsive senaryoları sorabilirsin.

Küçük ekranda hangi alanlar öncelikli olmalı diye fikir alabilirsin.

Form akışında keyboard davranışı için kontrol listesi çıkarabilirsin.

Geliştiriciye vereceğin handoff notlarını toparlatabilirsin.

Ama AI’a sadece “bu ekranı responsive yap” demek yeterli değil.

Önce sen ekranın mantığını bilmelisin.

Hangi alan sabit, hangi alan esnek, hangi alan scroll, hangi alan gizlenebilir?

Bu kararlar sende net değilse AI da karışık sonuç verir.

AI destekli UI/UX konusunda Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısı da bu düşünceye yakın bir yerden ilerliyor.

Benim düşüncem

Mobil UI tasarımda farklı ekran boyutları göz korkutmamalı.

Çünkü mesele cihaz ezberlemek değil.

Mesele layout mantığını anlamak.

Safe area’yı bilmek.

Componentleri sistemli kurmak.

Responsive ve adaptive davranışı düşünmek.

Ve tasarımın geliştirici tarafında nasıl hayata geçeceğini biraz anlamak.

Xcode, Android Studio, preview araçları ve platform rehberleri tasarımcı için yabancı dünyalar gibi görünmemeli.

Hepsini kod seviyesinde bilmek zorunda değilsin.

Ama bu araçların neden farklı ekranları kontrol ettiğini anlarsan daha doğru UI kararları verirsin.

Bence junior tasarımcı için güzel hedef şu:

Tek bir güzel ekran değil, farklı ekranlarda bozulmadan çalışan bir arayüz düşünmek.

Gerçek mobil UI tasarım burada başlıyor.

UI/UX ve product design tarafında daha fazla içerik için UI/UX, Product Design ve Technology kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Apple Human Interface Guidelines – Layout
• Apple Human Interface Guidelines – Designing for iOS
• Material Design 3 – Layout
• Material Design 3 – Breakpoints
• Android Developers – Adaptive Layout with Material Design

The post Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

That is the first mistake.

A mobile screen, a tablet screen, and a desktop screen do not need the same layout with different sizes.

They need the same product idea, but with different layout decisions.

So when I think about responsive design, I do not start with “how can I scale this screen?”

I start with a better question:

What should stay, what should move, and what should change at this screen size?

Screen size is not the full story

Screen size matters, but it is not enough by itself.

Device resolution, browser viewport, safe areas, navigation bars, zoom level, keyboard, and operating system UI can all change the real space you have.

This is why I do not design only for one device size.

A single iPhone artboard can be a good starting point. But it should not be the whole responsive strategy.

I wrote a separate practical guide about mobile sizes here: Mobile Screen Sizes for UI Design.

The Turkish version is here too: Mobil Arayüz Tasarımı Ekran Boyutları Nedir?.

Think in ranges, not only devices

Designers often ask for exact sizes.

Which iPhone size?

Which iPad size?

Which desktop width?

These are useful questions, but responsive design works better with ranges.

For example, you can think like this:

• Mobile: narrow layout, one column, touch-first actions
• Tablet: more horizontal space, possible split layout, still touch-first
• Desktop: wider canvas, multi-column layout, mouse and keyboard support

This helps you avoid designing one fixed screen and hoping it works everywhere.

Mobile: focus and priority

Mobile UI design is about focus.

There is not much room.

So every section needs a reason to be there.

On mobile, I usually ask:

• What is the main user action?
• What content must be visible first?
• Can this card become simpler?
• Does the user need this secondary information now?
• Is the touch target large enough?

Mobile is not the place to show everything.

It is the place to show the right thing first.

Tablet: do not treat it like a large phone

Tablet design is often ignored.

Many products simply stretch the mobile layout.

This usually feels weak.

A tablet has more space than a phone, but it is still touch-based. This makes it different from desktop.

On tablet, you can use:

• Two-column layouts
• Side panels
• Master-detail patterns
• Larger cards
• More visible navigation
• More comfortable reading areas

But you should not fill every empty area just because space exists.

Tablet UI needs balance.

Desktop: more space can create more noise

Desktop gives you more room.

But more room does not automatically make the design better.

It can also create more noise.

On desktop, designers often add too many panels, too many cards, too many filters, and too many secondary actions.

The layout becomes powerful but hard to scan.

For desktop UI, I usually think about:

• Clear grid structure
• Readable content width
• Useful sidebars
• Good table behavior
• Hover and focus states
• Keyboard-friendly flows

Desktop should use space with purpose.

Common breakpoint thinking

You do not need to memorize every breakpoint.

But you should understand the logic.

A simple responsive system can start like this:

• Small mobile: around 320-375 px wide
• Modern mobile: around 390-430 px wide
• Tablet portrait: around 744-834 px wide
• Tablet landscape / small desktop: around 1024-1194 px wide
• Desktop: 1280 px and above

These are not strict laws.

They are starting points for design checks.

The real goal is to see where your layout breaks.

Cards should not only stretch

Cards are one of the first things that break in responsive design.

A card that works well on mobile may look too wide on desktop.

A desktop card grid may become too dense on mobile.

So cards need responsive rules.

For example:

• Mobile: one card per row
• Tablet: two cards per row
• Desktop: three or four cards per row
• Large desktop: keep max width instead of stretching forever

The important thing is not the number.

The important thing is readability.

Navigation changes with screen size

Navigation is another big responsive decision.

Mobile may need a bottom tab bar, hamburger menu, or simple top action.

Tablet can sometimes support side navigation.

Desktop can use sidebar, top navigation, or both, depending on the product.

Do not force the same navigation everywhere.

The navigation should match the screen, the task, and the product depth.

Touch targets matter more than visual size

On mobile and tablet, the user touches the screen.

This changes the design.

A button can look fine visually but still be hard to tap.

Small icons, dense table rows, tiny close buttons, and tight filter chips can create friction.

Responsive design should check interaction size, not only visual layout.

This is one reason tablet design deserves more attention.

Content priority is the real responsive work

The hardest part of responsive design is not resizing components.

The hardest part is deciding content priority.

What should stay visible on mobile?

What can move into a secondary screen?

What should become a collapsed section?

What should turn into a tab, drawer, or filter panel?

Responsive design is full of these product decisions.

This is also why a good design system helps. I wrote about that here: Design Systems for Beginners.

My practical responsive checklist

Before I call a UI responsive, I like to check these:

• Does the layout work on narrow mobile?
• Does the main action stay clear?
• Are touch targets comfortable?
• Does tablet use space better than mobile?
• Does desktop avoid becoming too noisy?
• Do cards have max width or grid rules?
• Does navigation change when needed?
• Are empty, loading, and error states considered?
• Does the component system support these sizes?

This checklist is simple, but it catches many problems early.

Final note

Responsive UI design is not a technical afterthought.

It is part of product design.

A good responsive layout understands the device, but it also understands the user task.

Mobile needs focus.

Tablet needs balance.

Desktop needs structure.

If you design with that mindset, screen sizes become less scary.

They become design constraints you can work with.

For more related posts, check my UI/UX, Product Design, Technology, Tools, and Growth categories.

Source Signals

• Material Design – Window Size Classes
• Apple Human Interface Guidelines – Layout
• Android Developers – Window Size Classes
• MDN – Responsive Design
• web.dev – Learn Responsive Design
• Nielsen Norman Group – Responsive Web Design

The post Responsive UI Design: Mobile, Tablet and Desktop Screen Sizes Designers Should Know first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

But it is not the same field many people imagine from the outside.

If you want to study graphic design today, you should not think only about posters, logos, or learning design software.

Those things are still important.

But the creative industry now expects more from designers.

A designer may work on brand identity, social media content, websites, mobile apps, product interfaces, presentations, motion content, design systems, or AI-assisted visual workflows.

So the real question is not only:

Should I study graphic design?

The better question is:

What kind of designer do I want to become after learning the basics?

Graphic design is not only one path anymore

Graphic design used to be easier to describe.

Print design, posters, magazines, brochures, packaging, logos, and brand identity were the main examples.

These areas still exist.

Good typography, layout, color, and visual hierarchy still matter a lot.

But today, a graphic design student can move into many different paths:

• Brand identity design
• Social media and content design
• Website design
• Mobile app UI design
• UX design
• Product design
• Motion design
• Packaging design
• Editorial design
• AI-assisted creative production

This is good news.

It means the field is wider.

But it also means students need to be more intentional.

University gives the foundation, but the portfolio opens the door

A design degree can give you a strong foundation.

You can learn typography, composition, color, visual culture, art history, printing, layout, and design thinking.

These are not small things.

They train your eye.

But the industry will also ask a very simple question:

What did you make?

Your portfolio becomes very important.

Not only because it shows your final visuals, but because it shows your taste, your thinking, your effort, and your direction.

If you are a student, do not wait until graduation to build a portfolio.

Start early.

Small projects are enough in the beginning.

A brand identity concept, a poster series, a mobile app flow, a landing page, a packaging idea, or a social campaign can all become portfolio material.

Software skills are useful, but they are not the whole job

Photoshop, Illustrator, InDesign, Figma, After Effects, Blender, or other tools can help you create work faster.

But knowing software is not the same as being a good designer.

Tools change.

Design judgment stays.

A strong designer should understand:

• Visual hierarchy
• Typography
• Spacing
• Color contrast
• Composition
• Audience and context
• Clear communication
• Why a design decision makes sense

Anyone can learn where a button is in a program.

But not everyone can decide what the design needs.

That is where your value grows.

UI/UX and product design are strong opportunities

For graphic design students, UI/UX and product design can be very good career directions.

Graphic design gives you visual discipline.

UI/UX adds user flow, usability, product thinking, and interaction.

This combination can be powerful.

If you are interested in digital products, you can learn how to design:

• Mobile app screens
• Website interfaces
• SaaS dashboards
• Onboarding flows
• Forms and checkout flows
• Design systems
• Prototypes and user flows

But UI/UX is not only making screens look modern.

You need to understand the user problem, the flow, the states, the errors, and the goal of the product.

I wrote a beginner-friendly Turkish guide about this topic here: UX Tasarıma Yeni Başlayanlar İçin Basit Bir Yol Haritası.

I also wrote about why Figma alone is not enough here: UI/UX Tasarımcı Olmak İçin Figma Bilmek Yeterli mi?.

AI tools will change the workflow, not remove the need for taste

AI tools are now part of the creative industry.

They can help with moodboards, image ideas, copy, layout exploration, presentation drafts, quick UI ideas, and visual production.

Some students may feel afraid of this.

Will AI replace designers?

I do not think this is the useful question.

The better question is:

Can you use AI with good taste and clear direction?

AI can create options.

But you still need to choose, edit, guide, and judge.

A weak designer may produce more weak work with AI.

A strong designer can use AI to move faster.

So students should not ignore AI tools.

But they should not give all creative decisions to AI either.

Use AI as a helper, not as your brain.

The portfolio should show more than final visuals

A common student mistake is showing only beautiful final images.

Final visuals are important.

But a strong portfolio also shows thinking.

Try to explain:

• What was the problem?
• Who was the audience?
• What was your role?
• What did you try first?
• What changed during the process?
• Why did you make the final decision?

This matters even more if you want to move into UI/UX or product design.

People want to see how you think, not only what you exported.

I wrote more about this here: UI/UX Portfolio Mistakes Junior Designers Should Avoid.

Do not try to become every type of designer at once

Graphic design students often want to try everything.

This is normal.

Branding, posters, packaging, social media, UI, motion, 3D, illustration, AI tools.

Exploring is good.

But after some time, focus becomes important.

You may choose a direction like:

• I want to focus on brand identity.
• I want to move into UI/UX and digital products.
• I want to become strong in motion and content design.
• I want to work on packaging and editorial design.
• I want to design SaaS dashboards and product systems.

This does not limit you.

It makes your portfolio clearer.

It also helps people understand where you can bring value.

I wrote about specialization here: UI/UX Kariyerinde Bir Alanda Uzmanlaşmak.

What the industry may expect from you

The creative industry can be exciting, but it is not always easy.

You may need to handle feedback, revisions, deadlines, client expectations, trends, presentations, and new tools.

You may also need to explain your decisions.

This is very important.

Design is not only making something look good.

Design is also communication.

You should learn how to say:

This is why I used this layout.

This is why the button is here.

This is why this typography works better.

This is why this flow is easier for the user.

When you can explain your design, you become more professional.

What I would do as a student

If I were starting graphic design today, I would do this:

1. Take typography and composition seriously.
2. Build a small portfolio from the first year.
3. Learn the main design tools, but do not worship tools.
4. Study good work and write why it works.
5. Try UI/UX, branding, motion, and content design early.
6. Pick one direction to go deeper after exploring.
7. Learn how AI tools can support the workflow.
8. Share work regularly on a personal site or portfolio platform.
9. Learn to present design decisions clearly.

This is not a magic plan.

But it is a strong start.

My takeaway

Studying graphic design can still be a very good decision.

But students should enter the field with open eyes.

The modern designer is not only a software user.

The modern designer thinks about visuals, users, products, content, tools, and systems.

If you study graphic design, learn the fundamentals seriously.

Build your portfolio early.

Explore different paths.

Use AI tools wisely.

Then choose a direction and go deeper.

That is how graphic design education can become a real career advantage.

If you are interested in more career-focused design posts, you can check my UI/UX, Product Design, Growth, Technology, and AI categories.

Source Signals

• U.S. Bureau of Labor Statistics – Graphic Designers Occupational Outlook
• World Economic Forum – The Future of Jobs Report 2025
• Nielsen Norman Group – The Definition of User Experience
• Interaction Design Foundation – UX Design
• Figma – Design Systems 101

The post What to Expect If You Study Graphic Design Today first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Bu bölüm sadece güzel afiş yapmak, logo çizmek ya da program öğrenmek değildir.

Grafik tasarım hâlâ çok değerli bir alan. Ama sektör artık eski sektör değil.

Bugün tasarımcıdan sadece görsel üretmesi beklenmiyor. Düşünmesi, sistem kurması, dijital ürünü anlaması, içerik dünyasını takip etmesi, yapay zeka araçlarını doğru kullanması ve kendini iyi anlatması bekleniyor.

O yüzden grafik tasarım tercih edecek biri bu bölüme girerken sadece okul derslerini değil, sektörün nereye gittiğini de görmeli.

Grafik tasarım artık tek bir meslek gibi düşünülmemeli

Eskiden grafik tasarım denince daha çok basılı işler akla gelirdi.

Afiş, broşür, katalog, ambalaj, logo, kurumsal kimlik.

Bunlar hâlâ var. Hatta iyi yapan için hâlâ değerli.

Ama bugün grafik tasarım eğitimi alan biri çok farklı alanlara da yönelebilir:

• Marka kimliği tasarımı
• Sosyal medya ve içerik tasarımı
• Web site tasarımı
• Mobil uygulama arayüz tasarımı
• UI/UX tasarımı
• Product design
• Motion design
• Ambalaj tasarımı
• Yayın tasarımı
• AI destekli görsel üretim

Yani bölüm sana bir temel verir. Ama sektör içinde hangi yöne gideceğini senin üretimin, merakın ve portfolio çalışmaların belirler.

Okul sana temel verir, sektör senden pratik ister

Üniversite çok kıymetli olabilir.

Tipografi, kompozisyon, renk, görsel algı, sanat tarihi, baskı teknikleri, temel tasarım gibi konular tasarım gözünü geliştirir.

Ama sektör sadece okul notuna bakmaz.

Sektör şuna bakar:

Ne ürettin?

Nasıl düşündün?

Bir problemi nasıl çözdün?

Portfolio içinde ne gösteriyorsun?

Bu yüzden grafik tasarım okurken sadece ödev yapmak yetmez.

Kendi küçük projelerini üretmen gerekir.

Bir marka kimliği denemesi, bir mobil uygulama akışı, bir sosyal medya kampanyası, bir landing page, bir ambalaj projesi ya da bir poster serisi olabilir.

Önemli olan düzenli üretmek.

Sadece program bilmek yetmez

Photoshop, Illustrator, InDesign, Figma, After Effects, Blender ya da başka araçlar.

Hepsi önemli olabilir.

Ama sadece program bilmek seni iyi tasarımcı yapmaz.

Program kullanmak işin teknik tarafıdır.

Asıl değer şurada:

• Görsel hiyerarşi kurabiliyor musun?
• Tipografiyi doğru kullanabiliyor musun?
• Boşluk ve dengeyi hissedebiliyor musun?
• Problemi anlayabiliyor musun?
• İyi referans okuyabiliyor musun?
• Tasarım kararını anlatabiliyor musun?

Bugün araç öğrenmek kolaylaştı. Ama iyi karar vermek hâlâ zor.

Bu yüzden araçları öğren ama kendini sadece araçlarla tanımlama.

UI/UX ve dijital ürün tarafı büyük fırsat

Grafik tasarım okuyan biri için UI/UX tarafı bence çok ciddi bir fırsat.

Çünkü grafik tasarım eğitimi sana görsel algı, tipografi, renk, denge ve kompozisyon tarafında güçlü bir temel verebilir.

Bu temeli dijital ürün tarafıyla birleştirirsen web, mobil uygulama, SaaS, dashboard ve product design alanlarına geçebilirsin.

Tabii burada sadece güzel ekran yapmak yetmez.

Kullanıcı akışı, wireframe, prototip, tasarım sistemi, responsive yapı ve kullanılabilirlik gibi konuları da öğrenmek gerekir.

UX tarafına yeni başlayanlar için daha önce şunu yazmıştım: UX Tasarıma Yeni Başlayanlar İçin Basit Bir Yol Haritası.

Figma konusunda da şuna bakabilirsin: UI/UX Tasarımcı Olmak İçin Figma Bilmek Yeterli mi?.

Yapay zeka tasarımcıyı bitirmiyor ama beklentiyi değiştiriyor

Bugün yapay zeka araçları tasarım alanına çok hızlı girdi.

Görsel üretim, sunum hazırlama, moodboard oluşturma, metin yazma, fikir geliştirme, arayüz taslağı çıkarma gibi birçok iş hızlandı.

Bu bazı gençleri korkutuyor.

Acaba tasarımcıya ihtiyaç kalmayacak mı?

Bence mesele bu değil.

Yapay zeka kötü tasarımcıyı daha görünür yapar. İyi düşünen tasarımcıyı ise daha hızlı hale getirir.

Çünkü AI sana çıktı verebilir. Ama hangi çıktının doğru olduğunu, hangi fikrin markaya uygun olduğunu, hangi arayüzün kullanıcıya daha iyi hizmet ettiğini yine insan seçer.

Bu yüzden genç tasarımcıların AI araçlarından kaçmasına gerek yok. Ama her şeyi AI’a bırakması da doğru değil.

AI kullan, ama tasarım kararını sen ver.

Portfolio okuldan daha çok konuşur

Grafik tasarım öğrencisi için portfolio çok önemlidir.

Diploma elbette değerli. Ama iş görüşmesinde portfolio daha çok konuşur.

Portfolio içinde sadece final görsel göstermek de yeterli değil.

Özellikle dijital tasarım, UI/UX veya product design tarafına gideceksen düşünce sürecini göstermen gerekir.

Problem neydi?

Kim için tasarladın?

Hangi kararı neden aldın?

İlk fikir neydi?

Sonra neyi değiştirdin?

Ne öğrendin?

Bunlar önemli.

Portfolio hatalarıyla ilgili İngilizce bir yazı yazmıştım: UI/UX Portfolio Mistakes Junior Designers Should Avoid.

Her alanı biraz yapmak yerine bir yöne ağırlık vermek daha iyi olabilir

Grafik tasarım okurken her şeye ilgi duyman çok normal.

Logo, afiş, ambalaj, sosyal medya, UI, motion, 3D.

Ama bir noktadan sonra dağılmamak gerekiyor.

Kariyer için bir alanı biraz daha öne almak faydalı olur.

Mesela şunu diyebilirsin:

• Ben marka kimliği tarafında derinleşmek istiyorum.
• Ben mobil uygulama ve UI/UX tarafına yönelmek istiyorum.
• Ben motion ve sosyal medya içerikleri tarafında güçlenmek istiyorum.
• Ben ambalaj ve yayın tasarımı tarafında ilerlemek istiyorum.

Bu seni daraltmaz.

Tam tersine daha net gösterir.

Bu konuyu ayrıca UI/UX Kariyerinde Bir Alanda Uzmanlaşmak yazısında daha detaylı anlatmıştım.

Sektörde seni bekleyen gerçekler

Bu alan keyifli ama kolay değil.

Bunu baştan bilmek iyi.

Sektörde seni şunlar bekleyebilir:

• Revize almak
• Kısa teslim süreleri
• Müşteri veya ekip beklentileri
• Trendleri takip etme baskısı
• Portfolio güncelleme ihtiyacı
• Yeni araçları öğrenme zorunluluğu
• Kendini anlatma ve sunum yapma ihtiyacı

Bunlar korkutmak için değil.

Gerçekçi olmak için.

Tasarım sadece bilgisayar başında üretmek değildir. İletişim, sabır, araştırma ve kendini geliştirme işidir.

Üniversiteye başlarken ne yapmalı?

Grafik tasarım tercih edecek biri için benim kısa önerim şu olur:

1. Okulun verdiği temeli ciddiye al.
2. Tipografi ve kompozisyonu hafife alma.
3. Her dönem portfolioya girecek en az bir güçlü iş üret.
4. Sadece ödev değil, kişisel proje de yap.
5. UI/UX, motion veya marka gibi bir alanı yakından dene.
6. İyi tasarımları sadece beğenme, neden iyi olduklarını analiz et.
7. AI araçlarını öğren ama tasarım kararını onlara bırakma.
8. LinkedIn, Behance, Dribbble gibi alanlarda üretimini düzenli göster.

Bunları yapan biri okul bittiğinde daha hazır olur.

Çünkü mezun olurken elinde sadece diploma değil, anlatılabilir işler olur.

Son söz

Grafik tasarım tercih etmek isteyen genç arkadaşlara şunu söylemek isterim:

Bu bölüm hâlâ değerli.

Ama artık sadece klasik grafik tasarım gözüyle düşünmemek gerekiyor.

Dijital ürünler, UI/UX, marka, içerik, motion, AI araçları ve kullanıcı deneyimi tasarımın parçası haline geldi.

Bu alanda ilerlemek istiyorsan sadece program öğrenme.

Gözünü geliştir.

Bol üret.

Portfolio hazırla.

Bir alan seçip derinleş.

Ve en önemlisi, yaptığın tasarımın neden öyle olduğunu anlatmayı öğren.

Bence sektörde farkı yaratan şey biraz da bu.

Yeni mezun ve kariyer tarafını daha geniş okumak istersen Yeni Mezunlar İçin UI/UX Kariyer Rehberi yazısı da işine yarayabilir.

Diğer yazılar için UI/UX, Product Design, Growth ve Technology kategorilerine bakabilirsin.

Kaynak Sinyalleri

• YÖK Atlas – Üniversite tercih ve program bilgileri
• U.S. Bureau of Labor Statistics – Graphic Designers Occupational Outlook
• World Economic Forum – The Future of Jobs Report 2025
• Nielsen Norman Group – The Definition of User Experience
• Interaction Design Foundation – UX Design

The post Grafik Tasarım Tercih Edecek Gençleri Sektörde Neler Bekliyor? first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Some tools help you create screens. Some tools help you build a working prototype. Some tools are better for website structure, content, or frontend code.

So I do not think there is one perfect AI design tool.

The better question is this:

What do you need right now?

Do you need an idea, a wireframe, a UI direction, a landing page, a component, or a working MVP?

This is my practical bookmark list for 2026.

Before the list

AI does not replace product thinking.

I like using AI tools, but I do not expect them to understand the full product context by default.

The designer still needs to define the user, the flow, the design system, the content, and the final decision.

I wrote about this before in AI Design Needs Human Prep, Not Just Prompts. Good preparation makes AI useful.

1. Claude / Claude Artifacts

Claude is useful for product thinking, content, small interface experiments, and quick HTML prototypes.

Some people call this “Claude Design” because they use Claude to create UI ideas and simple product demos.

For me, Claude is not a full design tool. It is more like a very fast thinking partner.

Best for: early concepts, landing page drafts, copy, product flows, quick prototypes.

2. Figma Make

Figma Make is one of the most important tools to watch because it lives close to the Figma workflow.

It can help designers generate interface ideas, prototypes, and app-like experiences from prompts.

This matters because the AI workflow is not outside the design tool. It is getting closer to the design file.

Best for: UI exploration, prototype ideas, product experiments inside the Figma ecosystem.

3. Uizard

Uizard is a practical tool for text-to-UI, wireframes, and screenshot-to-design workflows.

It can be useful for beginners or teams that need quick visual directions before moving deeper into design.

Best for: fast wireframes, simple app screens, low-to-mid fidelity prototypes.

4. UXMagic

UXMagic focuses on turning text, sketches, or screenshots into UI design output.

This type of tool is interesting because it tries to shorten the path between an idea and a Figma-ready direction.

But the output still needs review. AI can create a screen, but the designer must check consistency and usability.

Best for: fast UI drafts, sketch-to-screen ideas, visual exploration.

5. Galileo AI and Google Stitch

Galileo AI and Google Stitch are interesting for prompt-based screen and flow generation.

These tools are useful when you want to see possible interface directions quickly.

I would not use them as the final design decision. I would use them to open the design space.

Best for: screen ideas, app flow options, early UI directions.

6. v0 by Vercel

v0 is strong for generating UI components and frontend code.

If you work close to React, Next.js, or component-based product teams, v0 can be very useful.

It is not only about visual design. It is about making interface ideas closer to real implementation.

Best for: components, frontend UI, React/Next.js product ideas.

7. Lovable

Lovable is more than a screen generator. It is closer to an AI app builder.

You can use it to create MVPs, internal tools, or product ideas that need to become more real than a static mockup.

Best for: MVPs, app ideas, internal tools, product validation.

8. Bolt.new

Bolt.new is useful when you want to build and edit an app in the browser.

For UI/UX designers, it may feel more technical than classic design tools.

But I think that is also the value. Product designers should understand how design decisions move toward implementation.

Best for: working prototypes, frontend experiments, app building.

9. Replit Agent

Replit AI is useful for building and testing small app ideas.

I see it more as a tool after the design direction is clear.

If you want to move from concept to a testable product, tools like this become helpful.

Best for: small web apps, prototypes, testable product ideas.

10. Base44

Base44 is another AI app builder to watch.

It can help with MVP-style products and internal tools where the goal is not only a screen, but a usable app flow.

Best for: AI-built apps, internal tools, simple SaaS ideas.

11. Relume

Relume is one of the best tools for website planning.

It can help with sitemap, wireframe, and landing page structure.

For web design, this is very important. A good page is not only about visual style. The structure matters first.

Best for: sitemaps, wireframes, landing page structure, content sections.

12. Framer AI

Framer AI is useful for quickly creating website directions and publishing-ready pages.

It is good for portfolios, landing pages, product pages, and quick web experiments.

But like every AI design tool, the first output should be edited. Typography, spacing, responsive behavior, and content need human review.

Best for: landing pages, portfolio pages, website concepts.

13. Webflow AI

Webflow AI is important for designers and teams already using Webflow.

It can help with site building, content, layout, and workflow inside a more professional website production environment.

Best for: websites, CMS projects, landing pages, production workflows.

14. Canva AI

Canva AI is not a UI/UX design tool in the strict meaning.

But designers often need more than screens. We need decks, social posts, campaign visuals, and quick branded assets.

That is where Canva AI can be useful as a side tool.

Best for: presentations, social visuals, branded content, quick marketing assets.

15. Figma AI and plugins

Figma AI and the Figma plugin ecosystem are still very important because many designers live inside Figma every day.

AI can help with naming, content, visual exploration, prototyping, component work, and small workflow improvements.

I also built ShotSender, a free Figma plugin, because I believe small tools can remove friction from a designer’s workflow.

Best for: daily design workflow, plugins, components, prototyping, small automation.

How I group these tools

To make this list easier, I group the tools like this:

• Idea and flow: Claude, Relume, Figma Make
• UI generation: Figma Make, Uizard, UXMagic, Galileo, Stitch
• Frontend and MVP: v0, Lovable, Bolt, Replit, Base44
• Website building: Framer, Webflow, Relume
• Visual content: Canva AI

This makes the decision easier.

Do not ask “which AI tool is the best?”

Ask what part of the design process you need help with.

My takeaway

AI tools for UI/UX design can save time.

But speed is not enough.

A designer still needs to prepare the product idea, understand the user, define the flow, build the design system, and judge the final output.

If you use these tools with structure, they can be very powerful.

If you use them without structure, they can create more cleanup work.

You can also read the Turkish version of this topic here: UI/UX Tasarım İçin AI Araçları: 2026 Bookmark Listesi.

For more related posts, check my AI, UI/UX, Tools, Product Design, and Technology categories.

Sources

• Claude
• Figma Make
• Figma AI
• Uizard
• UXMagic
• Galileo AI
• Google Stitch
• v0 by Vercel
• Lovable
• Bolt.new
• Replit AI
• Base44
• Relume
• Framer AI
• Webflow AI
• Canva AI

The post AI Tools for UI/UX Design: Websites Designers Should Bookmark in 2026 first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

This sounds like a small detail, but it changes the whole design process.

If the screen size is wrong, spacing, grid, typography, and preview tests can feel wrong too.

So this post is a practical mobile screen size guide for UI/UX designers. Not a perfect technical document. More like a useful reference when you start a Figma, Sketch, Framer, or product design file.

Screen size and viewport are not the same thing

One important thing first.

The official device resolution and the design viewport are not always the same.

For example, Apple or Samsung can list a very high physical display resolution. But in UI design tools, we usually work with a scaled viewport size.

That is why you may see an iPhone with a physical resolution like 2556×1179, but design files commonly use something like 393×852.

For daily UI work, the viewport value is usually more useful.

My common starting point

For many mobile UI projects, I still like starting around 390×844 px or 393×852 px.

It is a good middle point for modern iPhone design, and it also helps me preview the product on real devices without too much surprise.

But I do not design only for one phone.

The real work is not only choosing one artboard. The real work is building a grid, spacing system, components, and responsive behavior that can survive different screens.

Older but still useful mobile screen sizes

I do not want to delete older devices from this list.

Some products still have users on older phones. Also, old sizes help us understand how mobile UI dimensions changed over time.

Updated mobile screen sizes for 2026

This is the updated part of the guide.

These values are practical viewport or artboard sizes for design work. I use them as starting points, not as strict rules for every project.

Do not design only for one size

A mobile design can start from one artboard, but it should not live only inside one artboard.

When I design a mobile product, I try to check at least three things:

• a smaller mobile width
• a common modern phone size
• a larger phone or tablet-like layout

This is where grid and component logic becomes important.

If the card, button, input, navigation, and spacing rules are weak, changing the screen size will break the design very fast.

Foldable phones need extra thinking

Foldable devices are not only bigger phones.

They can have a cover screen and a main screen. The user can start a task on one screen and continue on another.

For product design, this means we should think about continuity, layout adaptation, and what information should stay visible.

So I do not treat foldable screens as only a nice extra size. They can create different UX decisions.

My practical advice

If you are starting a mobile UI project, pick one clean starting size first.

For example, 393×852 px or 390×844 px can be a good start for many projects.

Then test the same design in smaller and larger sizes.

Do not only scale everything. Check the real layout behavior.

Does the main button still feel reachable? Is the content too dense? Does the navigation still make sense? Are cards too tall? Is the empty state still readable?

These questions are more important than memorizing every device size.

Final note

Mobile screen sizes are useful, but they are only the start.

Good mobile UI design needs grid, spacing, typography, components, states, and real product thinking.

A correct artboard helps you begin. A good system helps the design survive.

You can also read the Turkish version of this topic here: Mobil Arayüz Tasarımı Mobil Ekran Boyutları Nedir?

For more related posts, check my UI/UX, Product Design, Technology, and Tools categories.

Sources

• Apple iPhone 16 technical specifications
• Apple iPhone 16 Pro technical specifications
• Apple iPhone 16e technical specifications
• Apple iPad Pro technical specifications
• Apple iPad Air technical specifications
• Apple iPad mini technical specifications
• Samsung Galaxy S25 Ultra
• Samsung Galaxy Z Fold7
• Samsung Galaxy Z Flip7
• Google Pixel 9 technical specifications

The post Mobile Screen Sizes for UI Design: Updated Viewport Guide first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.