Arayüz Tasarımı: Uygulama İkonu Tasarlama

iOS uygulamanızı kodladınız — peki ikonunuzu tasarlamaya başladınız mı? Gelin birlikte dikkat edilmesi gereken noktaları öğrenelim!

Nadin Tamer
TurkishKit
3 min readMar 30, 2020

--

Merhaba sevgili TurkishKit okuyucuları! 👋🏻 Bugünkü yazımızda, iOS uygulamanız için ikon tasarlarken dikkat etmeniz gereken noktaları konuşacağız. Hazırsanız gelin başlayalım! 🥳

Uygulama İkonunuz Nerelerde Kullanılır?

Bu, ilk başta biraz saçma bir soru gibi duyulabilir: Uygulama ikonunuz tabii ki kullanıcının ana sayfasında gözüküp uygulamayı açmalarını sağlar! Ancak unutmayın ki uygulama ikonunuz, ana sayfa dışında da birçok yerde kullanılmaktadır ve bunun için farklı boyutlarda ikonlar yüklemeniz gerekebilir.

Uygulama ikonunuzun kullanıldığı diğer yerler:

  • Telefonun ana sayfası
  • App Store’da gösterilen ikon (normal ikondan daha büyüktür ve biraz daha fazla detay içerebilir)
  • Telefonun Ayarlar sayfasında gösterilen ikon (küçük)
  • Spotlight aramasında gösterilen ikon (küçük)
  • Bildirimlerin kenarında gösterilen ikon (küçük)

Yüklemeniz gereken çeşitli ikonların boyutları hakkında daha fazla bilgi almak için Apple’ın Human Interface Guidelines sayfasını ziyaret edebilirsiniz.

İkon Tasarımında Dikkat Edilmesi Gereken Noktalar

  • İkonu mümkün olduğunca basit tutun: Unutmayın ki kullanıcılar, uygulama ikonunuzu oldukça küçük bir boyutta, başka birçok uygulamanın arasında ana sayfalarına görecekler. İkonunuza fazla detay eklemeye çalışmak, hem detayların küçük boyutlarda seçilememesine hem de ikonun fazla karmaşık gözükmesine yol açabilir. Aynı sebepten dolayı Apple, ikonunuzun içerisinde fotoğraf, uygulamanızdan ekran görüntüleri veya arayüz elemanları da kullanmamanızı önermektedir.
  • Çok gerekli olmadıkça ikonunuzda yazı kullanmaktan kaçının: Uygulamanızın ismi, ana ekranda zaten ikonun altında gözükecektir. Bu nedenle uygulamanızın adını veya uygulamanın ne yaptığını açıklayan yazılar kullanmanıza gerek yoktur (bunun yerine uygulamanın ne yaptığını açıklayan etkili bir resim kullanabilirsiniz!). Ancak yazı, logonuzun bir parçasıysa tabii ki bunda bir sakınca yoktur. Örnek olarak Uber ve Lyft’in ikonunda yazı bulunmaktadır.
Uber ve Lyft, ikonunda yazı bulunan iki başarılı uygulamaya örnektir.
  • Kolayca anlaşılan bir tasarım tercih edin: Daha önce zaten karmaşık bir ikon yerine basit bir ikon tercih etmenin öneminden bahsetmiştik. Bunu yapmanın en etkili yolu, uygulamanızın temelini temsil eden basit bir şekil veya sembol kullanmaktır. Örneğin, Apple’ın Mail uygulaması sadece bir zarf içerse de, zarf e-postayı temsil ettiğinden bu basit ikon çok etkilidir. Başka bir örnek ise eminim ki hepimizin sık sık kullandığı Yemeksepeti uygulamasının ikonundaki kurye resmidir.
Yemeksepeti ve Mail uygulamalarının ikonları, uygulamanın temelini özetleyen semboller kullanmaktadır.
  • Arka planı basit tutun ve şeffaf arka planlardan kaçının: İkonunuz birçok başka ikonun yanında ve ayrıca kullanıcının telefon arka planının üzerinde belireceğinden, opak olduğuna ve mümkün olduğunca basit olduğuna emin olun. Fark ettiyseniz neredeyse tüm uygulamalar, ikonlarının arka planında tek renk kullanmaktadır.
  • Uygulama ikonunuzu farklı arka planların üzerinde test edin: Bir önceki noktamızdan devam edecek olursak, uygulama ikonunuzun birçok farklı arka planın üzerinde yer alacağını unutmayın ve bunu test edin!
  • Uygulama ikonunuzu kare tutun: Ana ekranınızda gördüğünüz ikonların kenarları yuvarlak olsa da bu Apple tarafından otomatik olarak eklenen bir maskedir. Uygulama ikonunuzu yüklerken, ikonu kare tutun!

Böylece bir yazımızın daha sonuna geldik. Bu yazımızda, iOS uygulama ikonu tasarımından ve dikkat edilmesi gereken noktalardan bahsettik. Umarım ki yararlı bulmuşsunuzdur. Keyifli tasarımlar! 💻

Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.

Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook

--

--