Mobil uygulama tasarımı, kodlamadan önce her ekranın ne gösterdiğini, kullanıcının nereye dokunup nereye gittiğini çizmektir. Kısa cevap: önce kullanıcı akışını kâğıda dök, sonra süssüz çizimlerle (wireframe) ekranları kur, ardından Figma'da gerçek görünümü ve tıklanabilir prototipi hazırla, telefonda dene ve ancak o zaman geliştirmeye geç.
Bu sıra, en pahalı hatayı önler: yapılmış bir ekranı sonradan baştan yazmak.
Uygulama tasarımı nasıl yapılır: 6 adım
- Hedef ve ana görev: Uygulama tek cümleyle ne yapıyor? Kullanıcı ilk açışta hangi işi bitirmek istiyor?
- Kullanıcı akışı: Açılıştan ana görevin tamamlanmasına kadar adımları sırala. Kaç dokunuşta bitiyor?
- Wireframe: Renk ve süs olmadan, sadece yerleşim: hangi ekranda hangi bilgi ve buton var.
- Görsel tasarım (UI): Renk, yazı tipi, ikon, boşluk. Marka kimliğine uygun, tutarlı bir stil.
- Prototip: Ekranları birbirine bağla; tıklanabilir hâlini telefonunda dene.
- Geri bildirim ve düzeltme: Gerçek bir kullanıcıya göster, takıldığı yeri not et, düzelt.
UI ve UX farkı: arayüz mü, deneyim mi?
UX (kullanıcı deneyimi) uygulamanın nasıl çalıştığı ve akıldaki sırayla ilgilidir: kayıt kaç adımda bitiyor, aradığını bulabiliyor mu? UI (arayüz) ise görünüm: butonlar, renkler, yazılar. İyi bir UI UX tasarım ikisini birden gözetir. Güzel görünen ama kayıt olmayı üç ekran uzatan bir uygulama, sade ama net bir uygulamaya genelde yenilir.
Figma uygulama tasarımı: neden herkes onu kullanıyor?
Figma, tarayıcıda çalışan ortak tasarım aracı. Müşteri, tasarımcı ve geliştirici aynı dosyada yorum yapabiliyor. Figma uygulama tasarımında işine yarayan özellikler:
- Bileşenler: Bir buton stilini bir kez tanımlayıp her yerde kullanırsın; değiştirince hepsi güncellenir.
- Prototip modu: Ekranlar arası geçişi bağlayıp telefonda gerçek uygulama gibi denersin.
- Yorumlar: "Bu butonu büyüt" gibi notlar doğrudan ekranın üstüne yazılır; e-posta zincirinde kaybolmaz.
- Geliştirici modu: Ölçüler, renk kodları ve yazı boyutları koda aktarılmaya hazır görünür.
Figma tek seçenek değil (Sketch, Adobe XD alternatifi araçlar da var) ama sektörde fiilî standart gibi kullanılıyor.
Uygulama arayüzü tasarımında temel ilkeler
- Bir ekran, bir amaç. Ekranda üç farklı iş yaptırmaya çalışırsan kullanıcı hiçbirini yapmaz.
- Başparmak bölgesi: Ana butonlar ekranın alt yarısında, tek elle ulaşılır yerde olmalı.
- Dokunma hedefi: Butonlar parmakla rahat basılacak kadar büyük olmalı. Apple ve Google tasarım kılavuzları bunun için minimum ölçüler verir; resmî kılavuzlara bak.
- Okunabilirlik: Yeterli kontrast ve okunur yazı boyutu. Karanlık mod destekleyeceksen iki temayı baştan düşün.
- Platform alışkanlıkları: iPhone ve Android kullanıcıları geri dönme, menü gibi davranışlara farklı alışkın. Tek kod tabanıyla çalışsan bile bunlara saygı göster.
- Boş ve hata durumları: "Henüz kayıt yok" ekranını, internet yokken görülecek mesajı da tasarla. Çoğu proje bunları unutur.
Tasarım aşamasında sık yapılan hatalar
| Hata | Sonucu | Çözüm |
|---|---|---|
| Akışı çizmeden ekran çizmek | Sonradan eksik ekran çıkar | Önce akış, sonra ekran |
| Her şeyi ilk sürüme koymak | Takvim ve maliyet şişer | İlk sürümde yalnızca ana görev; ayrıntı için MVP yaklaşımı |
| Sadece masaüstünde bakmak | Telefonda yazılar küçük kalır | Prototipi gerçek telefonda dene |
| Onay almadan koda geçmek | Çift iş | Tasarım yazılı onaydan sonra kodlansın |
Tasarımı kim yapmalı?
Kendin yapabilirsin, ama bir uygulamanın ilk izlenimi tasarımdır; kayıt ve satın alma kararı çoğunlukla ekranlara bakıp verilir. Yaptıracaksan tasarımın projeye dahil olup olmadığını, kaç revizyon hakkı olduğunu ve onay verilmeden kodlamaya geçilip geçilmeyeceğini teklifte yazılı gör. Tasarımın büyük süreçteki yeri için mobil uygulama geliştirme süreci yazısına göz at.
Tasarıma başlamadan önce hazırlanacaklar
Figma'yı açmadan önce kâğıt üzerinde şu soruları cevapla. Cevapların net olduğu bir proje, tasarımcıyla ya da ekiple çok daha hızlı ilerler:
- Kullanıcı kim? Yaşı, telefonla ilişkisi, uygulamayı hangi anda açacağı (işyerinde ayakta mı, akşam evde mi).
- Benzer uygulamalar: Rakipleri ve ilham aldığın uygulamaları indir. Neyi sevdin, neyi karmaşık buldun, not al.
- Zorunlu ekranlar: Giriş, kayıt, ana ekran, ayarlar, profil gibi neredeyse her uygulamada olan ekranları listele; sonra yalnızca senin ürünün sunduğu ekranları ekle.
- Marka malzemesi: Logo, renkler, yazı tipi varsa topla. Yoksa tasarım ekibinden bir stil önerisi iste.
- İçerik: Ekranlarda görünecek gerçek metinler ve örnek veriler. "Lorem ipsum" ile yapılan tasarım, gerçek içerikle sıklıkla bozulur.
Prototipi kimlere göstermelisin?
Üç kişi bile fark yaratır. Uygulamayı hiç bilmeyen birine prototipi ver ve ona ne yapması gerektiğini söyleme; yalnızca "şu işi yapmayı dene" de. Takıldığı, yanlış yere dokunduğu ya da duraksadığı her an, düzeltilecek bir tasarım sorusudur. Bu küçük deneme, kodlamadan sonra bulunacak aynı sorunlardan çok daha ucuza gelir. Tasarımı onaylamadan önce son kontrol olarak her ekranın bir amacı, her butonun bir sonucu olup olmadığına bak: dokunulduğunda hiçbir yere gitmeyen buton, prototipte fark edilmeyen ama yayında göze batan eksiklerin başında gelir.
Tasarım teslimi neleri içermeli?
Tasarım aşaması bittiğinde elinde şunlar olmalı: tüm ekranların son hâli, tıklanabilir prototip, renk ve yazı tipi rehberi, ikon ve görsel dosyaları ve geliştiriciye aktarılabilir tasarım dosyası. Bu çıktılar sende kalırsa, geliştirmeyi ileride başka bir ekibe vermen de mümkün olur. Dosyaların kime ait olduğunu da teklifte yazılı gör.
Sık sorulan sorular
Uygulama tasarımı için kod bilmem gerekir mi?
Hayır. Figma gibi araçlar kod gerektirmez. Kodlama bilgisi gerekmeden ekranları ve akışı çizebilirsin.
Wireframe ile prototip aynı şey mi?
Hayır. Wireframe yalnızca yerleşimi gösteren sade çizimdir; prototip ekranları birbirine bağlayıp tıklanabilir hâle getirir.
Tasarım ne kadar sürer?
Ekran sayısına ve revizyon turuna bağlı. Küçük bir uygulama için birkaç hafta, kapsamlı bir üyelik ve ödeme akışı için daha uzun bir süre düşünmek gerekir; kesin süre kapsam netleşince belirlenir.
Hazır şablonla tasarım yapılır mı?
Evet, başlangıç için olur. Ancak şablonlar genelde kendi iş akışına tam uymaz; marka kimliğin ve akışın özelleşmesi gerekir.
OdenaVerse'te tasarım adımı süreçte ayrı bir durak: ekranları sen onaylamadan koda geçilmiyor. Kendi uygulamamız Dövme Sanatçısı Defteri'nde de önce ekranları çizip sahadaki kullanıcıyla denedik. Fikrin hazırsa yazılım hizmetimizi incele ya da bize yaz.