9 Adımda Sistemli ve Sürdürülebilir Mobil Uygulama Tasarımı
Mobil uygulamalar artık başlı başına bir ürünü ifade ediyor. Gerek ajanslar için gerek freelancerlar için, mobil uygulama tasarımında iyi bir yol haritası hızlıca sonuca götürecektir. En çok da startuplar, mobil uygulama ürününe girişmeden önce tasarım sürecini çok iyi kurgulamalılar. Çünkü startuplarda ürün sürekli yenilir ve gelişir. Bu nedenle tasarım sürecinde sürekli geçmişe dönülür (hipotez çalışmaları gibi). Maddeler halinde kendi yol haritamı paylaşıyorum:
1- Bilgi Toplama
Her şeyden önce bir uygulama tasarlayacağımızda bomboş bir kağıda bomboş bir ekrana boş fikirlerle bakarız (en azından bende öyle oluyor 😄)
Araştırmalar yaparken benzer uygulamalar incelenebilir. Bunun için Pinterest, Behance, Dribbble en bilinen platfomlar. Elbette en az bunlar kadar başarılı siteler olsa da ben ilham almak için en çok bu sitelere göz atıyorum.
Örnek uygulamalara bakarken, onları kopyalamamaya özen gösterin. Sadece ilham almaya çalışıyoruz. Renk, font ve illüstrasyon tercihleri ilham alınabilir. Mesela bir sağlık uygulaması için araştırma yaparken renk seçiminin mavi ve yeşil tonlarda olduğu dikkatinizi çekebilir. Ya da haber uygulamarının font seçiminin her şeyden çok daha önemli olduğunu farketmişsinizdir. Araştırmanızı yaparken bu detaylara odaklanarak notlar alabilirsiniz.
Dönem dönem yeni tasarım konseptleri ortaya çıkıyor. Bu aşamada popüler konspetler kullanmak tehlikeli olsa da bence kesinlikle denenmeli. Çünkü modern bir arayüz güzel bir tasarımın ilk kurallarından (işlevsellikten sonra). Tabii hedef kitlenizi ve hedef kitlenizin de bu modern arayüze uyum sağlayabilmesine dikkat edin.
Onun haricinde uygulama mağazalarından beğendiğiniz ilgili uygulamaları indirmek ve bir süre kullanmak bakış açınızı genişletecektir. Geçen senelerde Mavi News adında bir iOS uygulaması tasarlamıştım. Bunun için bir sürü haber uygulaması indirip yaklaşık 1 hafta boyunca kullandım -UX case study için buraya göz atabilirsiniz- Kesinlikle çok faydası oldu.
2- User Flow
Kullanıcıların izleyeceği yolu ifade eder. Burada aslında uygulamanın tüm ekranlarını belirlenmiş oluyoruz. Kullanıcının gidebileceği tüm yolları belirliyoruz. Bu sayede hangi ekrandan hangi ekrana geçiş yapılacağı belli oluyor.
Bu akışlar gerektiğinde parçalara bölünebilir. Mesela çok özelliği olan uygulamlarda bazı özellikleri parçalara bölmek mantıklı olabilir. Twitter’da bir kullanıcının tweet atma yolculuğu planlanabilir/tasarlanabilir.
Userflow kişisel olarak en çok zorlandığım ve kafa patlattığım nokta. Burada yaptığımız şey: uygulamanın temelini planlamak. Çünkü tam anlamıyla kullanıcı deneyimi tasarlamak bu aşamadan başlıyor.
Userflow için genelde sadece kağıt ve kalem kullanıyorum. Biraz geleneksel bir yöntem. Fakat akış büyüdükçe dijital ortamda da saklayabileceğim bir dosya gerekiyor. İşte bu noktada Overflow, Miro, Whimsical gibi araçlar kullanılabiliyor.
Ben uygulamaları Figma’da tasarlıyorum. Fazla araç kullanmayı da sevmiyorum. Bu yüzden Figma ile entegre çalışan araçları tercih ediyordum. Fakat son zamanlar userflow’u da Figma’yı kullanarak tasarlayabilmek için bir userflow dosyası tasarlamaya giriştim. Ayrıca FigJam özelliği benim tamamen Figma’da kalmamı sağladı.
3- Low Fidelity Wireframe
Hiç bir detay tasarım gerektirmez. Aslında sadece userflowda belirlediğimiz yolu, uygulama sayfalarına aktarmaktan başka bir şey değildir. Bu nedenle akla ilk geldiği şekilde, kafamızdakileri aktarırız. Bu işlem tamamen uygulamaya start verme adımı sayılabilir. Basit gibi görünen fakat önem verilmesi gereken bir adım. Çünkü tüm uygulama bu adımda yaptığımız planlama üzerine inşa edilecek. Yine de korkmayın, değişiklikler olabilir ve olacaktır. Lo-Fi bunun içindir.
Bir de kalem kağıdı tercih edecekler için eskiden üzerinde iPhone blueprint baskıları alırdım. Onun üzerinde tasarım yapardım. Ama dezavantajı: içeriğin ekrana sığmadığı alt kısımları kağıt üstünde gösteremiyordum. Bu yüzden o yöntemi artık kullanmıyorum.
4- Markalama
Artık yavaştan tasarıma girelim. Yukarıdaki adımlar birazcık sıkıcı olabiliyor tahmin edebilirsiniz. Markalama adımı, yaratıcılığımızı göstereceğimiz hem de biraz mola verip rahatlayabileceğimiz bir adım. Logo için yine Pinterest, Behance, Dribbble üçlüsünden yararlanıyorum.
Fakat önereceğim bir yöntem daha var. Markalama her ne kadar araştırma işi olsa da, yaratıcılık ön planda. Ve yaratıcılık birden olabilecek bir şey değil. Bu nedenle sosyal medyalarda, takip ettiğiniz sitelerde, RSS beslemenizde kendinizi tasarım kanallarına maruz bırakın. Onlara maruz kaldıkça ufkunuz açılacak ve daha iyi tasarım yapmaya başlayacaksınız.
Aslında bu aşamada markalama deyince yalnızca logo tasarımı ve uygulma ikonu(uygulama simgesi) akla gelebilir. Fakat uygulama ikonunun da uygulamaya uygun olması gerektiği unutulmadan tasarlanmalıdır. Bir de uygulama ikonu farklı boyutlarda da tasarlanmalıdır. Boyutları Apple burada belirtiyor.
5- Style Guide
Tasarıma tam anlamıyla başladığımız yer. Style guide içinde neler yer alır, style guide nedir sorularını yanıtladığınızı varsayayıyorum. Logo, renkler, tipografi, spacing.. şeklinde uzayıp giden bir liste düşünün. Fakat style guide design systemden farklıdır. (design system için şu siteye göz atmanızı tavsiye ederim)
Basit bilgilerden bahsettikten sonra ben neler yaptığımdan bahsedeyim. Her yeni projeye başladığımda önümde boş bir kanvas görmek açıkçası beni korkutuyor. Bu günlerde her projede bulunması gereken stil rehberinin temel komponentlerini not alıp bir dosyada toplamaya çalışıyorum. Özellikle freelance çalışıyorsanız uyguladığım yöntem sizi oldukça hızlandıracaktır.
Değinmek gereken bir nokta da ikonlar. İkonlar kesinlikle ayrıca bir yazı olacak kadar derin bir konu. İkon setinizi tasarlarken ya da satın alırken ikonların birbiriyle olan uyumuna ve uygulamaya olan uygunluğunu kontrol edin.
Renk seçimiyse markalama ile doğrudan alakalıdır. Eğer zaten logo ve app ikonun tasarımıyla ana renklerinizi belirlemişseniz her şey daha basit. Fakat ara tonlara ihtiyacınız varsa bir kaç site önerebilirim. Yine de uygulamayı farklı renklerle doldurmamaya özen gösterin. İlham alacağınız siteler: Canva Palette Generator, Adobe Palette Generator ve benim favorim Coolors.
Son olarak bu adımda şunu söylemek istiyorum: Özellikle hibrit uyugulama tasarımları özelleştirilmiş tasarımlar barındırır. Burada Google ve Apple’ın yönergelerine dikkat edin. Özelleştirilmiş tasarım yaparken uygulama mağazalarının kabul etmeyeceği tasarımlardan kaçınmalısınız.
6- High Fidelity Wireframe
Lo-fi ile aklımızdakini ve karaladığımız tasarımı netleştirme vakti. Şimdi yine bizi biraz daha yoracak ve beyin fırtınası gerektirecek bir adıma geçtik. Bu adımda da Figma kullanmayı tercih ediyorum. Hi-Fi’da artık ekranlar, final tasarımına çok yakın görünür.
Bu arada, Hi-Fi kullanmayı reddedip direkt olarak UI tasarlamaya geçenler var. Bunun nedeni olarak çok sistemli çalışmanın yaratıcılığı engellediğini düşünüyorlar. Bu görüşe şiddetle karşı çıkmasam da katılmadığımı belirtmeliyim. Ayrıntıların bol olduğu bir wireframede önemli detaylar gözden kaçmaz. İşlevsellik öne çıkar. Aksi halde tasarıma aldanıp işlevselliği göz ardı edebiliriz.
Ben şahsi olarak Hi-Fi ile tasarlamayı tercih ediyorum. Hatta öyle ki ekranlar arası geçiş efektlerini bile bu aşamada belirliyorum. Gerçeğe çok yakın ekranlar görmek müşteri iletişimini de iyileştiriyor.
7- Kullanıcı Arayüzü Tasarımı (UI)
Kısaca Hi-Fi’a style guide uygulamakla başladığım bir aşama: Yaratıcılık. Önceki adımda da bahsettiğim gibi Hi-Fi wireframe gerçeğe çok yakın olduğu için UI tasarım aşaması beni pek yormuyor. İşte Hi-Fi wireframe önemi burada kendini gösteriyor.
Öncelikle komponent olarak ayırdığım elemanların renklerini belirliyorum. Renk seçiminde 60–30–10 kuralını uyguluyorum. Örneğin uygulamada illüstrasyon ve animsayonlar kullanıyorsam onları bu aşamada tamamlıyorum. Hi-fi wireframe’de olabilecek hataları kontrol etmek için komponentlere göz atıyorum. Kontrollerim sonrası tamamen serbest şekilde göze hitap edip etmediğini uzun uzun düşünüyorum. Sonuçta yaptığımız işten memnun olmak isteriz.
8- Prototipleme
Her şey bitti mi? Hayır, aslında yeni başlıyor. Çalışmayan bir uygulamayı çalışıyor gibi göstermeliyiz. Test aşaması desek doğru olmaz ama küçük uygulamalar için teste en yakın aşamadır.
Uygulamada her şeyin planladığımız gibi gidip gitmediğini görmemize yarar. Ayrıca freelancerların, müşterilerine çalışan uygulamanın nasıl görüneceğini gösterebildiği bir fırsattır.
Çok araç kullanmak istemediğimi söylemiştim. Eğer basit bir prototip gerekiyorsa yine Figma’nın prototip özelliğini kullanıyorum. Genel animasyonlar ve geçişler kullanıyorsanız kesinlikle yeterli olacaktır. Fakat yeterli gelmiyorsa Principle, Protopie, Framer gibi prototiplemede daha gelişmiş özellikler barındıran araçlara yönelebilirsiniz.
9- Design Handoff
Zorlu bir sürecin sonuna yaklaştık. Yukarıdaki adımları atlattıktan sonra uygulamanın tasarım kısmı bitiyor. Bu adımları uygulayarak düzenli bir tasarım süreci tamamlamış olduk. Son olarak design handoff süreciyle birlikte geliştiricilerimize tasarımımızı bırakacağız. Design handoff süreci de detaylıca anlatılacak bir konu, o nedenle bu makaleye onu dahil etmedim.
Böylece adım adım bir mobil uygulamayı nasıl tasarladığımı sizlerle paylaştım. Okuduğunuz için teşekkür ederim.
