Duygu K.
2 Şubat 2023 19:26 Tarihinde gönderildi

PROJE HAKKINDA

Bu proje yaptığım ilk ux/uı projesidir. Armut uygulamasında eksik gördüğüm şeyleri ve yanlış gördüklerimi bu projede daha kullanılabilir ve kolay bir arayüzle sunmaya çalıştım.

DESTEK TALEBİ

Bu alanda profesyonel öğreticiler sayesinde kendimi geliştirmek isterim.

Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Projeyi sunarken margin kullanımına biraz daha dikkat edebilirsin. Beyaz boşluklar sunumda ve tasarımlarda çok önemli. Beyaz boşlukları doğru kullandığında tasarım daha ferah ve hoş görünecektir.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Renkler arasındaki padding çok az. Biraz daha artırıp yine ferah bir görüntü sağlanabilir. Aynı zamanda renk kodlarında sayıların büyüklükleri sanırım fonttan dolayı farklı olduğu için görsel anlamda çok dengeli durmuyor. Font seçimini yaparken göz atabileceğin bir site: fontshare.com.

Google fonts'tan da bakıp fontu aile olarak indirebilirsin.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Font-size'ları neye göre seçtiğini anlamadım. Design system olarak 4'lük ya da 8'lik sistem sık kullanılır. Bu noktada ünlü design system'ları araştırmanı öneririm. (Material, microsoft, apple vb.) Bir site önerisi: designsystemsforfigma.com

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

İkon kullanırken bir aile seçmeye özen göstermelisin. Outline ikon kullanıyorsan stroke size'ların eşit olduğundan emin olabilirsin. Boyut olarak da aynı boyutlarda olmasına özen göstermelisin.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

İlllustrasyon kullanımı çok hoş, renk olarak kurumsal kimliğe uygun renkler seçmişsin ANCAK çok kritik, tolerans edilmesi mümkün olmayan bir hata yapmışsın. Asla ama asla görselleri, illustrasyonları, ikonları vs sündürme. Sündürmeden kastım küçültürken veya büyütürken proportion'ı korumadan yapmak. Yani kısacası büyütme-küçültme yaparken shift'e basman gerekiyor.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

İnputların başlığını yukarıya koyman güzel bir çözüm olmuş buna ek olarak UX deneyimini artırmak adına şöyle bir önerim olabilir. e-maili'i inputun içine placeholder şeklinde koyup, kullanıcı tıkladığında başlığı yukarı almayı deneyebilirsin. Böylece kullanıcı tıkladığı alanın ne olduğunu hatırlar. Bu şekilde de hatırlıyor ama bahsettiğim deneyim çoğu uygulamada kullanılıyor.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Buttonlarda bir consistency hatası var gibi. Başta gösterdiğin primary button ile burdaki farklı. Burada design system'ın eksikliği görülüyor. Butonun genişliğini input alanlarının genişliğiyle aynı tutmuştun ilk ekranlarda burda da aynısını yapabilirsin, bir de border radius fazla olmuş gibi, sağlıklı yorum yapaibilmem için kaç olduğuna bakmak lazım.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Facebook logosu Google logosuyla aynı boyutta değil gibi

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Fikir güzel ama renk kullanımını anlayamadım. Rastgele seçilmiş renkler gibi, kurumsal kimlikle bir bağlantısı yok. 5 yıldız yeşil, 4-3 sarı, 2-1 kırmızıyı deneyebilirsin belki en azından bir mantığı olur.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Varolan tasarımda 2 yorum yan yana görünecek şekilde tasarlanmış böylece daha fazla yorum olduğunu kullanıcı ilk bakışta anlayabiliyor, ama senin tasarımında başka yorum olduğunu kullanıcı aşağı scroll yaparak görebiliyor. Mevcut tasarım daha doğru geldi bana.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Başlıklardan sonra ":" kullanımı çok doğru değil. Ayrıca "Hizmeti veren" başlığı ile "Fotoğraflar" başlığı aynı seviyede ise alttaki bilginin paddingi eşit değil, yani fotoğraflar başlığından sonra gösterilen fotoğraflar biraz fazla aşağıda olmuş. Aradaki boşluklar eşit değil.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Burada neden boşluk var, yüklenememiş bir alan gibi görünüyor. Mevcut tasarımdaki gibi bir görsel eklemeyi deneyebilirsin. Alttaki ikonların alignment'ı yanlış, hepsini seçip "ortaya hizala" diyebilirsin. En alttaki butonlar birbirine bitişik duruyor, aralarını açıp ferah bir görüntü elde edebilirsin.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Shadow ve stroke kullanımı UI olarak pek doğru olmamış. Stroke çok az, çok ince. Shadow containerın dışında görünüyor, offseti azaltmayı deneyebilirsin. Bana kalsa shadow hiç kullanmam. Shadowu şu durumlarda kullanabilirsin, birden fazla kartı aynı anda gösterdiğin ama öne çıkmasını istediğin bir kart varsa ona shadow ekleyip öne çıkarabilirsin. Ya da desktop uygulamaların hover efekti olarak kullanabilirsin.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Başlık işlerim, altta yine işlerim yazıyor. Direkt yukarıyı tab şeklinde yapabilirsin, işlerim ilk tab, ikinci tabta eski işlerim seçili olur.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

İptal edildi'yi chip şeklinde gösterebilirsin. Mevcut armut uygulamasındaki gibi ama rengini kırmızı tonlarda yapmak daha doğru bir kullanım olur. Ayrıca burada kartta ok kullanmışsın bir tanesinde açık halini gösterebilirsin.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Bazı ekranlar piksel piksel mi görünüyor yoksa bende mi yüklenmedi anlamadım.

Mesajı Göster
Caner Şanlı
3 Şubat 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Selam, olabildiğinde detaylı yorumlar yazdım. Alınmaca gücenmece yok :) Böyle böyle geliştirirsin kendini, eline sağlık.

Proje Adı armut redesign
Son Durum Geliştirmek Gerekiyor
V1
pintool info
Geliştirmek Gerekiyor
Projeyi sunarken margin kullanımına biraz daha dikkat edebilirsin. Beyaz boşluklar sunumda ve tasarımlarda çok önemli. Beyaz boşlukları doğru kullandığında tasarım daha ferah ve hoş görünecektir.
Geliştirmek Gerekiyor
Renkler arasındaki padding çok az. Biraz daha artırıp yine ferah bir görüntü sağlanabilir. Aynı zamanda renk kodlarında sayıların büyüklükleri sanırım fonttan dolayı farklı olduğu için görsel anlamda çok dengeli durmuyor. Font seçimini yaparken göz atabileceğin bir site: fontshare.com.

Google fonts'tan da bakıp fontu aile olarak indirebilirsin.
Geliştirmek Gerekiyor
Font-size'ları neye göre seçtiğini anlamadım. Design system olarak 4'lük ya da 8'lik sistem sık kullanılır. Bu noktada ünlü design system'ları araştırmanı öneririm. (Material, microsoft, apple vb.) Bir site önerisi: designsystemsforfigma.com
Geliştirmek Gerekiyor
İkon kullanırken bir aile seçmeye özen göstermelisin. Outline ikon kullanıyorsan stroke size'ların eşit olduğundan emin olabilirsin. Boyut olarak da aynı boyutlarda olmasına özen göstermelisin.
Geliştirmek Gerekiyor
İlllustrasyon kullanımı çok hoş, renk olarak kurumsal kimliğe uygun renkler seçmişsin ANCAK çok kritik, tolerans edilmesi mümkün olmayan bir hata yapmışsın. Asla ama asla görselleri, illustrasyonları, ikonları vs sündürme. Sündürmeden kastım küçültürken veya büyütürken proportion'ı korumadan yapmak. Yani kısacası büyütme-küçültme yaparken shift'e basman gerekiyor.
Geliştirmek Gerekiyor
İnputların başlığını yukarıya koyman güzel bir çözüm olmuş buna ek olarak UX deneyimini artırmak adına şöyle bir önerim olabilir. e-maili'i inputun içine placeholder şeklinde koyup, kullanıcı tıkladığında başlığı yukarı almayı deneyebilirsin. Böylece kullanıcı tıkladığı alanın ne olduğunu hatırlar. Bu şekilde de hatırlıyor ama bahsettiğim deneyim çoğu uygulamada kullanılıyor.
Geliştirmek Gerekiyor
Buttonlarda bir consistency hatası var gibi. Başta gösterdiğin primary button ile burdaki farklı. Burada design system'ın eksikliği görülüyor. Butonun genişliğini input alanlarının genişliğiyle aynı tutmuştun ilk ekranlarda burda da aynısını yapabilirsin, bir de border radius fazla olmuş gibi, sağlıklı yorum yapaibilmem için kaç olduğuna bakmak lazım.
Geliştirmek Gerekiyor
Facebook logosu Google logosuyla aynı boyutta değil gibi
Geliştirmek Gerekiyor
Fikir güzel ama renk kullanımını anlayamadım. Rastgele seçilmiş renkler gibi, kurumsal kimlikle bir bağlantısı yok. 5 yıldız yeşil, 4-3 sarı, 2-1 kırmızıyı deneyebilirsin belki en azından bir mantığı olur.
Geliştirmek Gerekiyor
Varolan tasarımda 2 yorum yan yana görünecek şekilde tasarlanmış böylece daha fazla yorum olduğunu kullanıcı ilk bakışta anlayabiliyor, ama senin tasarımında başka yorum olduğunu kullanıcı aşağı scroll yaparak görebiliyor. Mevcut tasarım daha doğru geldi bana.
Geliştirmek Gerekiyor
Başlıklardan sonra ":" kullanımı çok doğru değil. Ayrıca "Hizmeti veren" başlığı ile "Fotoğraflar" başlığı aynı seviyede ise alttaki bilginin paddingi eşit değil, yani fotoğraflar başlığından sonra gösterilen fotoğraflar biraz fazla aşağıda olmuş. Aradaki boşluklar eşit değil.
Geliştirmek Gerekiyor
Burada neden boşluk var, yüklenememiş bir alan gibi görünüyor. Mevcut tasarımdaki gibi bir görsel eklemeyi deneyebilirsin. Alttaki ikonların alignment'ı yanlış, hepsini seçip "ortaya hizala" diyebilirsin. En alttaki butonlar birbirine bitişik duruyor, aralarını açıp ferah bir görüntü elde edebilirsin.
Geliştirmek Gerekiyor
Shadow ve stroke kullanımı UI olarak pek doğru olmamış. Stroke çok az, çok ince. Shadow containerın dışında görünüyor, offseti azaltmayı deneyebilirsin. Bana kalsa shadow hiç kullanmam. Shadowu şu durumlarda kullanabilirsin, birden fazla kartı aynı anda gösterdiğin ama öne çıkmasını istediğin bir kart varsa ona shadow ekleyip öne çıkarabilirsin. Ya da desktop uygulamaların hover efekti olarak kullanabilirsin.
Geliştirmek Gerekiyor
Başlık işlerim, altta yine işlerim yazıyor. Direkt yukarıyı tab şeklinde yapabilirsin, işlerim ilk tab, ikinci tabta eski işlerim seçili olur.
Geliştirmek Gerekiyor
İptal edildi'yi chip şeklinde gösterebilirsin. Mevcut armut uygulamasındaki gibi ama rengini kırmızı tonlarda yapmak daha doğru bir kullanım olur. Ayrıca burada kartta ok kullanmışsın bir tanesinde açık halini gösterebilirsin.
Geliştirmek Gerekiyor
Bazı ekranlar piksel piksel mi görünüyor yoksa bende mi yüklenmedi anlamadım.
Duygu K.
armut redesign