İçeriğe geç

YeniAI ve otomasyon hizmetleri İnceleyin

Roof Digital ana sayfa

Mobil Uygulama Tasarımı ve Prototipi

Geliştirme başlamadan uygulamayı elinizde görün

Uygulama geliştirme, ekranlar netleşmeden başladığında tartışma en pahalı yere, koda taşınır. Her değişiklik takvimi uzatır ve ekip yorulur. Uygulamanın bütün akışlarını ekran ekran tasarlayıp tıklanabilir prototipe çeviriyoruz; ürün kod yazılmadan deneniyor.

Birlikte çalıştığımız markalar

  • Villa Marine
  • Efeler Belediyesi Efeler Pazarı
  • Egesembol
  • Simge Kalıp
  • SMG Plast
  • Gentan
  • İstgen
  • Endutek
  • Kupon Kodları
  • Coldwell Banker
  • Ekmas Egem Opel
  • Altay Spor Kulübü
  • Spormarket
  • Virtual Metric
  • Medical Hair
  • Sir Winston

Mobil Uygulama Tasarımı kimler için?

  • Geliştirme ekibi arayan girişimler

    Fikri olan ama henüz yazılım tarafını kurmamış ekipler. Tasarım ve prototip, teklif almayı ve kapsamı anlatmayı somut hâle getiriyor.

  • Tasarımcısı olmayan yazılım ekipleri

    Geliştirme gücü içeride, arayüz kararları boşta kalan şirketler. Teslim paketi geliştiricinin ölçü sormadan ilerlemesini sağlıyor.

  • Mevcut uygulamasını yenileyenler

    Yayında olan ama kullanıcı şikayeti alan uygulamalar. Önce hangi akışların sorun ürettiğini çıkarıp yenilemeyi oradan başlatıyoruz.

Kapsam ve teslimatlar

  • Kullanıcı senaryoları ve akış haritası

    Uygulamada yapılacak işler senaryo olarak yazılır, ekranlar bu senaryoların üzerine dizilir. Haritayı onaylamadan ekran tasarımına geçmiyoruz.

  • Ekran tasarımları

    Giriş, ana akış, arama, profil, ayarlar ve bildirim ekranları dahil bütün ekranlar gerçek metinle tasarlanır.

  • Durum, hata ve izin ekranları

    Bağlantı yokken, veri boşken, izin reddedildiğinde ve işlem başarısız olduğunda ne görüneceği ayrı ayrı çizilir.

  • Tıklanabilir prototip

    Ekranlar birbirine bağlanır ve gerçek telefonda denenebilir hâle gelir. Prototip hem ekip içi karar hem kullanıcı testi için kullanılır.

  • Geliştirici teslim paketi

    Ölçüler, aralıklar, yazı tipi ve renk değerleri, bileşen adları ve etkileşim notları tek dosyada toplanır.

  • İkon ve görsel varlıklar

    Uygulama ikonu, ekran içi ikon seti ve gereken görseller dışa aktarılmış hâlde verilir.

Tasarımın asıl muhatabı geliştirici

Bir tasarım dosyası ne kadar iyi görünürse görünsün, ekrandaki karşılığı koda dönüştürülebildiği kadar oluyor. Aradaki kaybın sebebi genellikle beceri değil, tasarımın cevap vermediği sorular. Metin beklenenden uzun geldiğinde ne oluyor, cihaz döndüğünde düzen nasıl değişiyor, liste boşken ne görünüyor, bir düğmeye arka arkaya basılırsa ne olması gerekiyor.

Bu soruların cevabını çizim aşamasında veriyoruz. Değerler ekran ekran yazılmıyor; tekrar eden ölçüler ve renkler adlandırılmış bir set olarak veriliyor, böylece geliştirici her ekranda yeniden karar vermek zorunda kalmıyor. Hangi bileşenin nerede tekrar ettiği de işaretleniyor.

Bir başka nokta, tasarımın platformun kendi davranışlarıyla çatışmaması. Sistem yazı boyutunu büyütmüş bir kullanıcıda, klavye açıldığında ya da kenarı yuvarlatılmış bir ekranda düzenin ne yapacağı baştan düşünülmezse uygulama gerçek cihazda tasarımdan farklı duruyor. Bu davranışları dosyada göstermek, geliştiricinin tahmin yürütmesini engelliyor ve teslim sonrası dönüş turlarının çoğunu baştan ortadan kaldırıyor.

Uygulamanın en zor ekranı ilk açılış

Kullanıcının uygulamayı bir daha açıp açmayacağı çoğunlukla ilk oturumda belli oluyor. O oturumda ise elinizde en az şey var: hesap yok, veri yok, alışkanlık yok. Dolu bir ekran düşünülerek tasarlanan arayüz, ilk açılışta boş bir liste ve anlamını yitirmiş bir başlıktan ibaret kalıyor.

Bu yüzden boş durumları sonradan eklenen bir ayrıntı olarak değil, ana tasarımın parçası olarak çiziyoruz. Boş bir ekran ne olduğunu anlatıyor ve tek bir sonraki adım öneriyor. Hesap açmadan denenebilecek bir bölüm varsa, kayıt ekranını en öne koymamak da bu kararın parçası.

İzinler de aynı yerde belirleyici oluyor. Konum, bildirim ve kamera izni uygulamaya girer girmez istendiğinde çoğu kişi reddediyor ve geri dönmek zorlaşıyor. İzni, o iznin işe yaradığı adımda ve neden istendiğini söyleyen bir ekranın ardından sormak, kabul oranını belirgin biçimde değiştiriyor.

Nasıl çalışıyoruz?

  1. Brif ve senaryo yazımı

    Uygulamanın kapsamını ve kullanıcının yapacağı işleri yazıyoruz. Bu metin, sonraki bütün kararların referansı oluyor.

  2. Akış haritası

    Ekranları ve aralarındaki geçişleri tek görselde çıkarıyoruz. Eksik ekranlar genelde burada fark ediliyor.

  3. Anahtar ekranlar ve görsel dil

    En önemli üç dört ekranı tasarlayıp tipografi, renk ve bileşen kararlarını netleştiriyoruz.

  4. Ekranların tamamlanması

    Onaylanan dile göre kalan ekranları, durumlarıyla birlikte tasarlıyoruz.

  5. Prototip, test ve teslim

    Prototipi gerçek telefonda deniyor, bulguları uyguluyor ve paketi geliştirme ekibine teslim ediyoruz.

Kullandığımız araçlar ve platformlar

  • Figma
  • FigJam
  • Maze
  • Figma Dev Mode
  • Lottie

Mobil Uygulama Tasarımı fiyatını neler belirler?

  • Akış ve ekran sayısı

    Uygulamanın kaç işi kapsadığı ve her işin kaç ekrandan oluştuğu kapsamın temelini belirler.

  • Senaryoların netliği

    Ne yapılacağı yazılıysa çalışma doğrudan tasarımla başlar. Belirsizse önce kapsamı oturtmak gerekir ve bu ayrı bir adımdır.

  • Prototip derinliği

    Ana akışın bağlanması ile her ekranın ve her durumun tıklanabilir olması farklı iş yükleridir.

  • Varlık ihtiyacı

    İkon seti, illüstrasyon, animasyon ve mağaza görselleri isteniyorsa bunlar ayrı kalem olarak planlanır.

Sıkça sorulan sorular

Prototip gerçek uygulama gibi mi çalışıyor?

Görünüş ve akış olarak evet, arkasında veri yok. Ekranlar birbirine bağlı olduğu için telefonda gezinebilir, görev verebilir ve tartışabilirsiniz. Gerçek veriyle çalışan bir sürüm geliştirme kapsamına girer.

Tasarımı kaç ekran olarak planlamalıyız?

Ekran sayısını biz senaryolardan çıkarıyoruz. Baştan ekran sayısı belirlemek genelde yanıltıcı oluyor, çünkü aynı ekranın farklı durumları ayrı ekran gibi sayılabiliyor. Akış haritası çıkınca sayı netleşiyor.

Uygulamayı geliştirecek ekibi siz mi buluyorsunuz?

Geliştirme ayrı bir kapsam. Teslim paketi, farklı ekiplerden karşılaştırılabilir teklif almanızı kolaylaştıracak ayrıntıda hazırlanıyor. Geliştirme desteği gerekiyorsa bunu ayrıca konuşuyoruz.

Kullanıcı testini de yapıyor musunuz?

Kapsama eklenirse yapıyoruz. Prototip üzerinde gerçek görevlerle yapılan kısa bir test, en çok yanlış varsayımı erken yakalayan adım. Katılımcı bulmakta yardıma ihtiyacınız varsa bunu baştan planlıyoruz.

Tasarım sonrası değişiklik istersek ne oluyor?

Küçük düzeltmeler teslim sonrası destek kapsamında yapılıyor. Yeni akış ya da yeni ekran ihtiyacı ayrı bir kapsam olarak değerlendiriliyor ve önceden yazılı hâle getiriliyor.

Tablet için de tasarım gerekiyor mu?

Uygulamanın kullanım biçimine bağlı. Tablet ayrı bir düzen ister, telefondaki ekranın büyütülmüş hâli iyi sonuç vermez. Tablet hedefiniz varsa bunu kapsam kararında baştan konuşuyoruz.

Mobil Uygulama Tasarımı için ilk adımı atalım

  1. 1Formu doldurun ya da bizi arayın
  2. 2Bir iş günü içinde ön görüşme planlayalım
  3. 3Size özel yol haritası ve teklif hazırlayalım

Roof asistanı

Teklif almak ister misiniz?Numaranızı bırakın, bir iş günü içinde arayalım.

Yazdıklarınız yalnız bu sohbet için kullanılır, kaydedilmez.

Merhaba. Hizmetlerimiz, çalışma modelimiz ve süreçlerimiz hakkında soru sorabilirsiniz. Cevapları sitedeki sayfalardan alır, kaynak bağlantısını da veririm.