GymFit App UI / UX İncelemesi

Uygulama Fikri: Ben tasarlasam nasıl olur düşüncesiyle yola çıktığım bir app fikri geldi aklıma. Adını da hemen GymFit olarak üzerinde pek fazla düşünmeden işe koyuldum.n.

Büyük bir spor salonunda üyeliğiniz olduğunu düşünün. Burada bir çok PT ve bir çok olanaklara sahipsiniz ve bu olanaklara programlı bir şekilde erişip kullanabilmeniz gerekiyor. İşte GymFit fikri buradan çıktı. PT’lerin size uygulama üzerinden programlar verebildiği, sizin kendinize programlar oluşturabildiğiniz, özel derslerin olduğu, gym body bulup eşleşebildiğiniz ve birlikte spor yapabildiğiniz insanlarla tanışabildiğiniz bir uygulama. Şimdi uygulamanın detaylarına geçelim.

Logo : Fiziksel ya da dijital bir ürün tasarlarken dikkat ettiğim ilk etmen logodur. Çünkü genelde Logonun biçimi, rengi, kullandığı fonta göre tasarım yapmayı severim. Gymfit uygulaması için de Logo tasarlarken Kırmızı, Beyaz ve siyah tonları üzerinde durdum.

Çünkü alternatif olarak bir çok gym ve fitness uygulaması inceledim. Sportif faaliyetlerde kırmızı, siyah, sarı, mavi gibi renkler çok fazla kullanılıyor. Renklerin insanlarda bıraktığı etkiye daha sonra deyineceğim fakat şimdi önden kısa bir bilgi geçmek istedim.

Logonun bir kısmını looka.com üzerinden yapay zeka yardımıyla oluşturdum ve sol tarafındaki ikonu ise freepik.comüzerinden bulduğum vektör ile illustrator de şekillendirdim.

Figma üzerinden de bir çok tool ya da çeşitli iconsetler ile de bu işlemler yapılabilir. Ayrıca bu uygulamada da kullandığım bütün iconlar ‘Material Design UI Kit’ içerisinde mevcut. Figma Commity üzerinden ya da google üzerinden bir çok UI Kit bulmak mümkün.

İşlevsellik : Bu kısım biraz uzun sürebilir. Çünkü uygulamanın kullanılabilirliği konusunda üzerinde pek çok düşünülmüş kısım var. Detaylıca anlatmak istiyorum. İçerisinde her projede önümüze çıkması muhtemel yaklaşımlar barındırıyor.

İşlevsellik 01 : Uygulamanın ana ekranında direkt karşımıza çıkan ve bizim için tanımlanan ya da bizim tarafımızdan tanımlanmış training programları görebiliyorsunuz. Detayları incelemek için tıklayabiliyor, sizde ‘+’ butonu ile program ekleyebiliyorsunuz.

Program Eklemek için üzerine tıkladığınız item butonlar, onaylandığına dair bir yapıya bürünüyor ve butonun solunda çıkan onaylanma ikonu ile de kullanıcı için karmaşıklığı ortadan kaldırıyor.

İşlevsellik 02 : Week Activity Özelliği başlı başına bir yapı olmasıyla beraber sizin spor salonuna hangi vakitlerlerde tembellik yapıp, hangi vakitlerde sıkı çalıştığınızı gösteren bölüm.

Buradan Aylık, yıllık aktivitelerinizi görebilir ayrıca haftalık kaç gün spora geldiğinizi de görebilirsiniz. Kendinizi motive edebilecek datalara kolayca erişebiliyorsunuz.

İşlevsellik 03 :Uygulamayı tasarlarken en keyif aldığım ve en çok üzerinde düşündüğüm alan bu kısım oldu. Çünkü burada iki farklı fonksiyonu bir section içinde görüyoruz.

Salon yoğunluğunu anlık olarak takip edip, grup dersi oluşturmak için de ayrıca bir tarih seçebiliyorsunuz. Gymfit yüzlerce aktif kullanıcısı olan ve içerisinde onlarca PT’nin çalıştığı ve her gün bir çok özel dersin olduğu bir salon olgusu vurgulanmıştır.

Uygulama fikrinizi anlatırken gerçek hayatta uygulanabilir, kanıtlanabilir ve vadettiği özellikleri de gösterirken kullanıcı dostu bir yapı oluşturmak durumundasınız.

Dijital ve basılı ürün tasarlarken dahi kullanıcının ne istediğini, sizin bu düşünceleri nasıl ifade edebileceğinizi bir çok kez deneyimleyip, talim etmeniz gerekmektedir. Çünkü kullanıcı deneyimi büyük tecrübeler ile oluşturulur.

Bunu basit bir broşür yaparken de, mobil uygulama tasarlarken de yapmamız gerekmektedir. Çünkü kullanıcıya ve sizden istenilen fikre yaklaşamayan bir ürün ne kadar tasarım abidesi de olsa albeniden yoksun olabilir.

İşlevsellik 05 : Kullanıcı için önemli olan unsulardan biri de renk konusudur. Renkler bir uygulamanın dış dünyaya açılan gözü gibidir. Vereceğiniz mesaj kullanıcıya ilk renkler ile aktarılır.

Bu renkleri seçerken dikkatli olmak durumundasınız ve renkler ile ilgili ifadesel anlamları bilmelisiniz. Kırmızının sıcaklık göstergesi olup, kahverenginin güven etkisi yarattığını bilmek gibi . Renk Piskolojisi başlığı altında arama yapabilirsiniz.

Üç renk kuralı : Tasarım yaparken genelde üç renk seçimi önerilir. Primary (Ana Renk) , Secondary(ikinci renk), Tertiary (üçüncü renk / alternatif renk). Çok fazla renk seçimi ya da birbirinden alakasız renklerin seçiminin de kullanımı zordur.

Renk paletlerinizi ve tasarım stillerinizi oluştururken material design, HIG(Apple Human Interface Guidelines) ,IBM Carbon Design System gibi yapıları inceleyebilirsiniz.

Components-01 : Figma üzerinde bir proje inşa ederken component yapılarını düzgün bir şekilde tasarlamanız gerekiyor. Bunu bir alışkanlık haline getirdiğinizde tasarımda bir değişiklik olduğunda tek bir noktadan müdahale edebileceksiniz.

Components-02 İkon, Renk paleti, tipografi, butonlar, inputlar, textboxlar projenize dahil edebileceğiniz her materyali component haline getirin. Kendi projelerimde kullandığım ana yapıları component olarak kullanıp geriye dönük bir işlem olduğunda kolaylıkla değiştirebiliyorum.

 

Font-01: Fontlar bir tasarımı ön plana çıkaran, renk seçimi kadar önemli bir konudur.Projeye özel font seçimi çok önemlidir. Projenin bütünlüğünü daha da arttıracak olan fontu seçmeniz elzemdir.

Bir çok tasarımcı bende dahil font seçimi yaparken zorlanırız fakat kafamızda belli başlı bazı font aileleri vardır ve bunlar çoğu zaman hayat kurtarır 

Font-02: Ben bu projeyi tasarlarken Inter fontunu kullandım. Fakat Satoshi, Roboto, Noto Sans, SF Pro gibi fontları da pek çok kez projelerde kullandım. Hatta belki de daha önce yapılmayanı yaparak

Satoshi fontu ile bir katalog hazırlıyorum 

Boşluklar-01 : Margin ve padding değerlerini doğru kullanmak hem nesnelerin kendi içinde, hemde diğer nesneler ile arasındaki mesafeyi doğru belirmek için önemlidir.

Bir buton oluştururken, başlık, metin ve görsellerin birbirleriyle ve diğer sectionlar ile arasındaki

dikey ve yatay mesafeleri doğru belirlemek tasarım bütünlüğü için önemlidir.