Eğitilmiş göze sahip, tasarım konusunda deneyimli kişilerle yaptığımız sohbetler sonucunda, en önemli Google kriterlerinden olan Mobil tasarım hakkındaki bilgileri sizlerle paylaşmak istiyoruz.Web tasarımında kullanılan “Kullanıcı Arayüzü Tasarımı” yön değiştirerek, mobil platformlarında daha sık kullanılmaya başladı. Bu durumun en önemli nedeni, insanların cep telefonlarında internette daha fazla vakit geçirmesidir. Dolayısıyla, “Müşteri daima haklıdır” prensibine göre, kullanıcılar neyi beğeniyorsa, tasarım kriterlerini de o belirliyor. Zaten Google firması da bu prensibi benimsemiş ve bu yönde kriterlerini ortaya koymuştur.Umarız, diğer yazılarımızda olduğu gibi bu yazımızda da faydalı bilgileri siz değerli okuyucularımıza aktarmış oluruz. O zaman başlayalım.

Mobil Tasarım Nasıl Yapılır?

İyi bir mobil tasarım nasıl yapılır sorusunun cevabını, 6 madde halinde verebiliriz. İşte o detaylar.

Bilginin Peşinden Koşma ve Araştırma

Nasıl bir tasarım yapacağınıza karar vermek için bilgi edinmelisiniz. Bilgi edinmek için de araştırma yapmalısınız. Belki araştırma süreci biraz uzun sürebilir, ancak verdiğiniz emeğe değecektir.Bilim, bir önceki buluş ve deneylerin üzerine yenilerinin eklenmesiyle ilerler. Tasarımda da durum bu şekildedir. Önce yapılan tasarımları inceleyerek, kendi tarzınızı oluşturabilir ve ortaya daha önce hiç görülmemiş bir çalışma çıkarabilirsiniz.Tasarımda örnek alma, birebir kopyalama değildir. Sizin yapacağınız tasarımdaki eksik olan yönleri bulma ve uygulamaya koyma işlemi için gereklidir ve bu amaçla yapılmalıdır.

Mobil Tasarımda Flowchart Kullanmak

Flowchart kavramı, mobil uygulamalardaki ekranlar arasındaki geçişi ifade eder. Akıcı bir sayfa için gereklidir. Nasıl ki bir internet sitesinde navigasyon önemli bir yere sahiptir, Flowchart çalışmaları için de aynı şeyler söylenebilir. Kullanıcı deneyiminde önemli bir unsur da, mobil uygulamada ya da internet sitesinde kullanıcıların menülere kolaylıkla ulaşabilmesinin sağlanmasıdır. Ayrıca kullanıcılar ziyaret ettikleri platformları hızlı ve kolay bir şekilde inceleyebilmelidir.En iyi tasarımların da ekip çalışması sonucu ortaya çıktığını hatırlatalım. Yani akıcı bir sayfa tasarımında; içerik editörü, grafiker, webmaster ve yazılım uzmanlarıyla birlikte çalışmak gerekir.Mesela tasarım aşamalarının başında; kullanıcı kayıt sayfası nasıl olacak, şifreni unuttun butonu nerede yer alacak ve giriş yap butonu sayfanın neresinde yer alacak gibi unsurlar belirlenmelidir. Ayrıca tasarımda toplamda kaç arayüz olacak ve kullanıcı ne kadar arayüz içerisinde gezinti yapacak gibi detaylar da belirlenmelidir.

Dijital Markalamayı Belirlemek

Kurumsal firmalar için dijital marka oldukça önemlidir. Dijital marka çalışmalarında da logonun önemi büyüktür. Cep telefonu arayüzünde kullanılacak olan logonun öncelikle belirlenmesi gerekir. Logo tasarımı yaparken; tipografi, renk ve şekillerin mobil uyumlu olarak iyi bir şekilde tasarlanması gereklidir.Marka tasarımının mobile uyumlu olarak yapılması için çok fazla seçenek yoktur diyebiliriz. Nedeni ise karmaşık tasarımların, cep telefonlarında kullanıcıları yoracağı ve kullanıcılar tarafından anlaşılamamasıdır. Aşırı derecede renk ve imaj kullanımı, mobil telefonlarda fark edilmeyi zorlaştırır.Aynı bilgileri dijital marka belirlemede, diğer içerikler için de söyleyebiliriz. Mobil uygulamalarda çok uzun yazıların bile kullanıcı tarafından sıkıcı karşılanacağını unutmamak gerekir.

Mobil Tasarımda Tel Kafes olarak Türkçesini belirttiğimiz kavram, sizlere biraz garip gelmiş olabilir. İngilizcesi Wireframe olan şematik plan, cep telefonlarında, elemanların nasıl yerleşeceğine karar vermekten ibarettir.Kullanıcı arayüzünde kullanılacak olan elemanlar, ana hatlarıyla şematik plan üzerinde tasarlanır. Tasarımda; elemanlar arasındaki hizalama, kompozisyon yerleşimi, menü hiyerarşisi, renk kontrastları, devamlılık, arka plan tasarımı ve şekiller arasındaki ilişki belirlenir.Sayfalarda kullanılacak olan butonların, sayfanın neresinde duracağına karar verilir. Görsellerin büyüklükleri ayarlanır. Çok büyük görseller, mobil tasarımda kullanılamazlar. Mobil tasarımda kullanılacak olan metinlerin de büyüklüklerinin optimum düzeyde olması gerekir. Çok büyük ya da çok küçük olmamalıdır.Uzman tasarımcılar tarafından, Wireframe kullanılarak ilk önce gridler oluşturulur. Bu gridlere, tasarım yapılacak olan elemanlar yerleştirilir. Uzmanların bu şekilde çalışmalarının nedeni, ilk önce şablon oluşturmak ve tasarımı daha net görebilmektir.

Böylece tasarıma son halini verebilmek daha kolay hale gelmektedir. İkon Setleri ile Tasarıma Renk Katın Kullanıcı arayüzü tasarımında ikonlar vazgeçilmez elemanlardır. Doğru seçim yapabilmek adına, internet üzerinden ikon setlerini satın almanız gerekebilir. Böylece ne yapacağınıza karar vermek adına, zamanınızı arayarak geçirmek zorunda kalmazsınız. İkon setleri her zaman için logoya göre belirlenir ya da tasarlanırlar.Ancak iyi bir tasarım yapmak istiyorsanız, ikon setleri satın almak yerine, kendiniz yapmalısınız. İkon setlerini tasarlarken, renk tonlarını ve leke değerlerini iyi ayarlamak gerekir. İkon seti tasarımında en zor olan iş, renklere karar vermektir. Bu yüzden deneyimli tasarımcılar, ilk önce siyah beyaz renk atayarak işe başlarlar.Siyah ve beyaz renklerin üzerin farklı renk tonlarını denerler ve renklerin yoğunlukları ile oynarlar. Böylece en iyi rengi belirlemiş olurlar.

Şablon ve Kullanıcı Deneyimi

Her zaman için tasarımın bir süreç olduğunu unutmamak gerekiyor. İyi şeyler, bir anda meydana gelmez. Belirli aşamalardan geçen tasarımlar son halini alır ve mükemmel hale gelirler.Tasarımınızı tamamladıktan sonra, prototipini oluşturun ve kullanıcıların fikirlerini alın. Böylece çalışma sırasında göremediğiniz eksiklik ve hataları giderme şansını yakalamış olursunuz. Prototip hazırlamak için http://www.adobe.com/products/experience-design.html adresinden yararlanabilirsiniz. çalışmalarınızın ön izlemesini görmek için yararlanacağınız birçok site bulabilirsiniz.

Mobil Arayüz Tasarımı Örneklerine Bir Göz Atalım

Bu başlıkta sizlere, daha önceden yapılmış ve birçok kullanıcı tarafından beğeni almış, mobil uygulama tasarımlarından söz edeceğiz. Dribble Android Android tasarımları içerisindeki en iyi arayüz diyebiliriz. Nedeni ise çok farklı bir tasarımı benimsemesidir. Kesinlikle listemizin başında olmayı hak ediyor. Uygulamanın en güzel tarafı, web sürümünün de harika özellikler barındırıyor olmasıdır. Natalie Retina UI Listemizin ikinci sırasında en seksi mobil uygulama arayüzü tasarımı diyebileceğimiz bir ürün bulunuyor. Son derece kaliteli olduğunu söyleyebiliriz. Nedeni ise basit ve sade bir tasarımsa sahip olmasıdır. Bunun yanı sıra kullanıcılar açısından kolaylıkla gezilebilecek özellikleri de bünyesinde barındırıyor. Alarm Clock Temasını Deneyin Saat temalı bu arayüzü tamamen ücretsiz olarak elde edebilirsiniz. Menü çubuğunun altta olması ve temanın ortasında kocaman dijital bir saat olması, bu arayüzü tamamen kullanışlı ve görsel açıdan sade olmasını sağlıyor. Mobil arayüz tasarım örnekleri şimdilik bu kadar.

İnternette birçok sitede harika ve kolaylıkla kullanacağınız tasarım örneklerini bulabilirsiniz. Önemli olan bulduğunuz örneklerden ilham almanızdır.Android Tasarım Şablonlarını Nerede Bulurum?Nasıl ki WordPress ortamında kullanabileceğiniz tema örnekleri varsa, yalnızca mobil ortama uyumlu, tema örnekleri de bulunur. Önemli olan kaliteli bir Android tasarım şablonları satın almanızdır. Genelde Android uygulamalar için ideal olan şablonları biraz paraya kıyarak alabilirsiniz. Bu arada şunu belirtelim ki, kesinlikle ödediğiniz paraya değecektir.Örnek olması açısından, ücretli https://www.templatemonster.com/tr/type/mobil-uygulama-sablonu/ sitesini incelemenizi öneririz. Buradaki şablonlar biraz pahalıdır. Ancak ucuz ya da ücretsiz şablon satın alıp, başınızı ağrıtacağınıza, biraz pahalı ama kaliteli bir şablon almanız en iyisi olacaktır. En azından uzun ömürlü kullanabilirsiniz.

Mobil Tasarım Ölçüleri Nasıl Olmalı?

Tasarım ölçülerinde 4 farklı unsura dikkat etmeniz yeterli olacaktır. Nedir bu ölçüler diye sorduğunuzu duyar gibiyiz.

Hemen cevaplayalım:   

Mobil telefonlar için 768 piksel resim ölçüsü,    Tablet cihazları için 768 piksel,    Masaüstü ve dizüstü bilgisayarlar için 992 piksel,    Büyük ekrana sahip bilgisayarlar için ise 1200 piksel İdeal ölçüler olacaktır.

Tabi ki temalar hazırlanırken, yukarıda maddeler halinde verdiğimiz değerlere göre kod yazılacaktır. Hazır tema seçeneklerini de değerlendirebilirsiniz.Mobil uygulama tasarımlarının nasıl yapıldığı hakkında detaylı bilgiler için “Bootstrap” isimli makalemizi inceleyebilirsiniz. Mobil tasarım ölçüleri kriterlerini internet üzerinde yer alan bazı programlar ile de belirleyebilirsiniz.