Serpil A.
3 Nisan 2022 20:24 Tarihinde gönderildi

PROJE HAKKINDA

Merhaba Eray Bey,
Yeni proje yaptım ve size göstermek için sabırsızlanıyorum.

Projem online bir ayakkabı mağazası, sağ alta eklediğim sepet ve ürün ekleme butonlarının boyutlarından biraz şüpheliyim bir de hamburger menu ana sayfada şart mı?

Renk konusunda hiçbir zaman emin olamıyorum, burada belki bir ahenk yakalamışımdır.

DESTEK TALEBİ

Projemi daha fazla nasıl geliştirebilirim? (Sanki tüm iyi tasarımlar yapılmış gibi hissediyorum)
Şimdiden tüm fikirleriniz için çok teşekkür ederim.

Eray Karayel
3 Nisan 2022
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Serpil Hanım Merhabalar.

Öncelikle elinize sağlık. Genel görünüm olarak gatey güzel bir arayüzle karşı karşıyayız. Tabi üzerinde durmamız gereken bir kaç konu olacak.

Öncelikle yazdıklarınız hakkında bir kaç şey söylemek istiyorum.

1.si sağ alt tara eklediğiniz sepet görseli teknik olarak biraz sıkıntılı. Kullanılabilir mi? Evet kullanılabilir ancak mümkün olduğunca kullanıcıların etkileşim sağlayacağı dikdörtgen içerik alanında sabit yerleştirme nedeniyle bazı içeriklerin önüne geçmesi ve içeriği engellemesi söz konusu. Örnek olarak ilk sayfada göreceğimiz gibi 197TL tutarını engelliyor olması. Kullanıcı ister istemez yanlışlıkla bu alana dokunabilir ve istemeden sepete gidebilir. Ayrıca bu kadar önemli bir alana bu butonu koymak, markanın değerini de gösterir. Bu durumda marka direkt satışı her şeyin önünde gördüğü gibi bir dolaylı algı oluşabilir. Örnek vermek gerekirse twitter'da benzer bir ikon var. Bu alanda yeni tweet oluşturma özelliğine yönlendiriyor ve kullanıcıları içerik üretmeye teşvik ediyor. Bunun üzerinden çıkarımlarınızı yapabilirsiniz.

Üzerinde yer alan + ikonunun ne işe yarayacağı konusunda açıkçası net değilim. O butona tıkladığımda yeni bir ürün mü keşfedebiliyorum ya da ne oluyor pek anlaşılmıyor. İkonlar, işlevleri çok açık bir şekilde belirtebilmesi hayati önem taşıyan bir başka konu.

Anasayfada sepetin olması konusu evet, şart. Ancak bunun yerine belki profil fotoğrafını sol tarafa yerleştirip şu anki profil fotoğrafının olduğu yere sepet ikonunu, eğer sepete ürün eklenmişse ürün sayısı ve toplam tutarı gösterebildiğimiz aşamada bir çok sorunun önüne geçebilmiş oluruz. Zira kullanıcı alışverişi bitirdikten sonra sepete gidebilmek için detay sayfalara gitmek istemez, böyle bir eğilim de göstermez.

Bir başka açıdan, her ikonun her yerde karşımıza çıkması yararlı olmayabilir. Tamamen örnek olması için söylüyorum, filtreler bölümünde footer'ı geçici olarak gizleyebiliriz ya da sepeti filtreler detayında göstermeyebiliriz gibi... Bu konuda kendinizi kullanıcının yerine koyup gözden geçirdiğinizde zaten neyin olması gerektiğini ya da neyin fazlalık olduğunu zaman içerisinde daha rahat anlayabilirsiniz.

İkinci görselinizde + ikonunun ürünü sepete ekle demek olduğunu düşünüyorum. Yine eğer öyle değilse anasayfada ya da diğer ürün olmayan sayfalarda bu + ikonunun işlevi olmayacağı için görünmemesi gerekir. Yine araştırmalar bize gösteriyor ki sepete ekleme butonunun statik bir şekilde kullanıcı detayları belirttikten sonra sayfa içerisinde görüntülenip görüntülenmemesinin daha yeğdir.

Demem o ki, kullanıcının 40 numara ayakkabıya ihtiyacı varsa ve o şu anda stokta yoksa, sepete ekle butonunun pasifleşmesi ya da yerine "stoğa geldiğinde haber ver" gibi daha interaktif bir şeye dönüşmesi.

Hamburger menü olarak bahsettiğiniz menü esasında hamburger menü değil. Aslında bir candy box menü. Kullanıcıları kategorilere ulaştırmanın en önemli yollarından biri. Bu menüyü yine anasayfaya statik olarak yerleştirip anasayfadan kullanıcının tüm kategorilere erişmesini sağlayabilirsiniz. Bu tamamen sizin yaklaşımınızla alakalı bir şey.

Footer'da anasayfa olarak gösterdiğiniz ikonu da yine yukarıda söylediklerime dayandırarak sepete git butonu olarak değerlendirmeniz, sağdaki fazlalık ikonlardan kurtulmanızı sağlayabilir.

Tekrar söyleyeyim, bunların hepsi tamamen sizin yaklaşımınız ve kararlarınızla alakalı. Söylediklerimi dikkate alarak kendiniz bu alanı tekrar kurgulayabilirsiniz. Belki farklı bir yaklaşım da sergileyebilirsiniz.

Renk konusu ise paletler olmadan çok sorun olabilecek bir konu. Renkleri belirlerken color.adobe 'dan faydalanabilirsiniz. Renk paleti sunan ücretsiz çok fazla sayıda farklı kaynak da söz konusu. Renkler üzerine araştırmalar yapıp hangi rengin neyi temsil edebileceğiyle alakalı entelektüel bilgiye vakıf olmanız bu sorunu kökten ortadan kaldırabilir. Ayrıca belirtmek de isterim ki her renk tek bir şeyi ifade etmez. Birbirleriyle uyumu 0.01 derece farklı bir tonuyla bile kaybedebilir ya da yakalayabilirsiniz. Bu yüzden bu gerginlik oluşturmanıza olanak vermeden sadece geliştirmeniz gereken bir konu olarak görürseniz rahat edersiniz. Herkes bu yollardan eminim geçmiştir.

Tüm iyi tasarımlar yapılmıştır görüşü de yine bir önyargının eseri. Bu yüzden hiç dert etmeyin. Deneyim kazandıkça ve müşteri beklentileri ve kendi çizginizi yakaladığınız durumlarda bunun aslında bir yanılsama olduğunu zaman içerisinde çözeceksiniz. Bu da yine herkesin geçtiği bir süreçtir. Ben hala daha öyle tasarımlar görüyorum ki kimisi vasat ötesi, kimisi benim hiç hayal bile edemeyeceğim derecede güzel tasarımlar oluyor. İyi tasarımları takdir etmeyi, kötü tasarımları da iyi tasarımlara çevirerek kendinizi ispatlamayı bir yol olarak seçerseniz bu sorundan da kurtulursunuz. Burada yanlış anlamayın, siz böyle yapmıyorsunuz demek değil. Zaman içerisinde deneyim kazanacaksınız demek istiyorum.

Şimdi pinler üzerinden gidelim.

Eray Karayel
3 Nisan 2022
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Pinler üzerine gelmeden önce unuttuğum bir nokta var, onu da belirteyim. Tasarımı hangi araçla yaptınız bilemiyorum ancak figma, sketch ya da xd üzerinden yaptığınız çalışmaların prototiplerini resmi telefon uygulamaları ile telefonunuza anlık olarak yansıtıp nasıl göründüğünü görebiliyorsunuz bildiğiniz üzere. Renk uyumu, oran orantılar, boşluk kullanımı gibi detayları telefonunuzdan anlık olarak görüntüleyerek belki daha kolay karar verebilirsiniz. (Figma mirror uygulamasından eminim ancak diğer uygulamaların detayına vakıf değilim. Mutlaka benzer bir imkan sunuyorlardır.)

Eray Karayel
3 Nisan 2022
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Karşılama alanı oldukça sade ve göze hoş görünüyor. Fakat bu alanın biraz işlev kazanması gerekli gibi. Mesela kullanıcının ayarlarını ve uygulama seçeneklerini görebileceği esas hamburger menü içeriğini kullanıcının profil fotoğrafı olarak belirleyebilirsiniz. Ya da en kötü ihtimalle profili düzenleme ya da profil sayfasına gidebilmesini sağlayabilmeliyiz.

Sepete ekle butonuyla alakalı yukarıda bahsettiğim detaylar da buraya entegre edilebilir aynı zamanda. Sadece sepet ikonu ve sepete eklendiğinde nasıl görünür detayını da gösterebilmek gerekli.

Ayrıca font seçimini beğendim. Gayet uyumlu görünüyor.

Fondaki gri tonu da höze hoş geliyor ancak sanki bir tık daha açık ton olursa daha ferah bir görünüm olabilir gibime geldi. Bunu da ayrıca deneyip kendin karar verirsen iyi olur. Eğer istediğin görünümden uzaklaşıyorsa ve amacına hizmet etmiyorsa bu ton da kalabilir.

Arama bölümü konusuna da 2 farklı yöntem izlenebilir. Footer'daki profil ikonu yerine (yerleşim sıralamasından bağımsız söylüyorum) arama ikonu yerleştirilebilir ve onun için farklı bir sayfa tasarlanabilir. Bir diğer özellik, sayfanın yukarısında gizli bir şekilde durabilir ve sayfayı aşağı çektiğinde kullanıcının arama yapacağı bar çıkabilir. Sağ taraftaki filtre ise bu aşamada gerekli değil. Arama detay sayfasında filtre seçeneklerini gösterebiliriz.

Seçenekler başlığına da ihtiyaç yok. direkt kadın, erkek, unisex gibi kategorileri göstermek zaten kullanıcıların anlayacağı bir şey olduğu için bu alanı hoşgeldin bölümünün altında direkt konumlandırabiliriz.

Popüler ürünler harici aşağıya daha farklı bir kaç içerik daha sunabiliriz belki. Ne olduğunu biraz araştırmak gerekir.

Sarı-pembe renk geçişi tatlı görünüyor ama tasarımın tüm detayına baktığımızda biraz sırıtıyor gibi. Bunun için bu rengi kullanabilecek farklı alanlarla desteklemek gerekebilir ya da bu renkleri anasayfadan kaldırabiliriz. Bunların hepsi olası yani senin tasarım yaklaşımınla alakalı şeyler. Kalabilir, desteklenebilir ya da kaldırılıp iç sayfalarda kullanılabilir gibi düşün.

Mesajı Göster
Eray Karayel
3 Nisan 2022
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Footer'da kullandığın fon rengi çok tatlı güzel bir renk. Fakat genel tasarım göz önüne alındığında çok baskın duruyor. Bu renklerin negatifini kullanmak daha yararlı olabilir.

Şu şekilde alternatiflerimiz var;

- Fon beyaz yapılıp ikonlar fondaki renge bürünebilir.
- Fon beyaz yapılıp aktif ikonlar fon rengine dönüştürülüp diğer aktif olmayan ikonlar solid ikon değilde çizgi ikon olarak içleri boş şekilde tasarlanabilir.
- Pembe sarı geçişli kullandığın renk ile fon rengi ya da biraz önce negatif bahsettiğimiz tarzda tasarlanabilir...

Bu alan da yine tamamen senin elinde. Yukarıda zaten sepet, arama ve diğer detaylardan da bahsetmiştim.

Son olarak bu alandaki ikonlar aşırı büyük göründü. Sanıyorum ki burada kullandığın sepet ikon büyüklüğü ya da bir tık daha küçüğü şeklinde ayarlanabilir gibi duruyor.

Bu alanla alakalı da tasarım çözümlerini bekliyor olacağım.

Mesajı Göster
Eray Karayel
3 Nisan 2022
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Ürün görselleri, thumb görseller ve alttaki açıklama, beden gibi bilgilerin yerleşim konularında kesinlikle söyleyecek bir şeyim yok. Her şey çok güzel ve yerinde görünüyor.

Sadece sağ üst tarafta kullandığımız kalp rengi de en azından tasarım mantığında kullandığımız paletten şaşmaması gerekiyor. Yani orada tam kırmızı kullanmışız. Diğer yerlerde kullandığımız pembe-sarı ya da sade pembe tonu ile bir bütünlük sağlamalı.

Mesajı Göster
Eray Karayel
3 Nisan 2022
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Kategoriler sayfası genel tasarım yapısına yine uymadığını düşünüyorum. Kategoriler arası çok açık ve gölgelendirme ile çok farklı bir tarza hizmet ediyor gibi. Bunun yerine alışılmışın dışında bir yerleşim bekliyorum senden. Hepsini standart dikdörtgen şekilde yapacağımıza belki en çok aranan kategorileri daha büyük karelerle simgeleyebiliriz. Örnek olarak getir'in hizmet menüsünü ya da trendyol'un aynı şekilde uygulamasında yer alan hizmet menüsünü inceleyebilirsin. Tarz olarak bire bir aynısı olmasını kastetmiyorum tabiki ancak benzer bir yerleşimle daha dolu bir görünüm sunmak mümkün. Biraz önce bahsettiğim detaylara ve tarzına dikkat etmek suretiyle...

Mesajı Göster
Eray Karayel
3 Nisan 2022
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Filtreler detay sayfasına da söyleyecek bir sözüm yok. Gayet yerinde kullanımı var gerek font büyüklüğü gerek yerleşimleri...

Ayrıca prototipleme yapmak gerekli. Eğer figma kullanıyorsan (ya da sketch ya da xd) sayfaları birbirine bağlayarak nerede ne eksik var kolayca görebilir ve tüm sayfaları amacına uygun tasarlayabilirsin.

Bu detay sayfalarını tasarlamak projeye ne katar?

Projeyi tam anlamıyla uygulanabilir bir olgunluğa eriştirir. Eksiklerini daha net görmeni sağlar.
En önemlisi, projeyi portfolyona eklemek için gerekli olan tüm arayüzleri sunar.

Bu güncellemeleri yapıp buraya yükledikten sonra tekrar konuşalım.
Bu aşamadan sonra bu projeyi tam anlamıyla sunum görseli haline nasıl getireceğimizi konuşuyor olacağız. Bu aşama için de yine aklında olması açıısndan söylüyorum, ille ayakkabı uygulaması olmasına gerek olmadan behance veya dribble gibi portfolio sitelerinden ilham almaya çalış. Bir tasarımı hangi detaylarıyla sunmuşlar. Hangi tasarım için nelere dikkat etmek gerekir gibi bir çok detay konumuz olacak. Bunun için şimdiden güncellemeyi yaptığında daha detaylı görünümleri, kesitleri hazırlamanda fayda olacaktır.

Güncellemeyi merakla bekliyorum.

Eline sağlık, görüşmek üzere. :)

Serpil A.
9 Nisan 2022
Versiyon 2 Yüklendi
Durum Güncellendi Yorum Gerekiyor

MESAJ

Merhaba :3

Dediğiniz her adımı tek tek not alarak değerlendirdim, çalıştım ve son halini sunmak için biraz sabırsızlanıyorum.

Projeyi sunarken eksik bilgi verdiğim için lütfen kusura bakmayın. Evet, Figma'da çalışıyorum bütün sayfaları birbirine bağlayabiliyorum aslında bunu da görmenizi isterdim. color.adobe da oldukça işime yaradı; çalışırken renkleri biraz az tutup yazıyla ilgili makaleleri okudum (medium.com mükemmel bir icat)

Yüklemek için duyduğum heyecanı yorumunuzu beklerken de yaşayacağım, şimdiden teşekkür ederim.

Proje Adı Online Alışveriş Sayfası
Son Durum Yorum Gerekiyor
V1 V2
pintool info
Yorum Gerekiyor
Karşılama alanı oldukça sade ve göze hoş görünüyor. Fakat bu alanın biraz işlev kazanması gerekli gibi. Mesela kullanıcının ayarlarını ve uygulama seçeneklerini görebileceği esas hamburger menü içeriğini kullanıcının profil fotoğrafı olarak belirleyebilirsiniz. Ya da en kötü ihtimalle profili düzenleme ya da profil sayfasına gidebilmesini sağlayabilmeliyiz.

Sepete ekle butonuyla alakalı yukarıda bahsettiğim detaylar da buraya entegre edilebilir aynı zamanda. Sadece sepet ikonu ve sepete eklendiğinde nasıl görünür detayını da gösterebilmek gerekli.

Ayrıca font seçimini beğendim. Gayet uyumlu görünüyor.

Fondaki gri tonu da höze hoş geliyor ancak sanki bir tık daha açık ton olursa daha ferah bir görünüm olabilir gibime geldi. Bunu da ayrıca deneyip kendin karar verirsen iyi olur. Eğer istediğin görünümden uzaklaşıyorsa ve amacına hizmet etmiyorsa bu ton da kalabilir.

Arama bölümü konusuna da 2 farklı yöntem izlenebilir. Footer'daki profil ikonu yerine (yerleşim sıralamasından bağımsız söylüyorum) arama ikonu yerleştirilebilir ve onun için farklı bir sayfa tasarlanabilir. Bir diğer özellik, sayfanın yukarısında gizli bir şekilde durabilir ve sayfayı aşağı çektiğinde kullanıcının arama yapacağı bar çıkabilir. Sağ taraftaki filtre ise bu aşamada gerekli değil. Arama detay sayfasında filtre seçeneklerini gösterebiliriz.

Seçenekler başlığına da ihtiyaç yok. direkt kadın, erkek, unisex gibi kategorileri göstermek zaten kullanıcıların anlayacağı bir şey olduğu için bu alanı hoşgeldin bölümünün altında direkt konumlandırabiliriz.

Popüler ürünler harici aşağıya daha farklı bir kaç içerik daha sunabiliriz belki. Ne olduğunu biraz araştırmak gerekir.

Sarı-pembe renk geçişi tatlı görünüyor ama tasarımın tüm detayına baktığımızda biraz sırıtıyor gibi. Bunun için bu rengi kullanabilecek farklı alanlarla desteklemek gerekebilir ya da bu renkleri anasayfadan kaldırabiliriz. Bunların hepsi olası yani senin tasarım yaklaşımınla alakalı şeyler. Kalabilir, desteklenebilir ya da kaldırılıp iç sayfalarda kullanılabilir gibi düşün.
Yorum Gerekiyor
Footer'da kullandığın fon rengi çok tatlı güzel bir renk. Fakat genel tasarım göz önüne alındığında çok baskın duruyor. Bu renklerin negatifini kullanmak daha yararlı olabilir.

Şu şekilde alternatiflerimiz var;

- Fon beyaz yapılıp ikonlar fondaki renge bürünebilir.
- Fon beyaz yapılıp aktif ikonlar fon rengine dönüştürülüp diğer aktif olmayan ikonlar solid ikon değilde çizgi ikon olarak içleri boş şekilde tasarlanabilir.
- Pembe sarı geçişli kullandığın renk ile fon rengi ya da biraz önce negatif bahsettiğimiz tarzda tasarlanabilir...

Bu alan da yine tamamen senin elinde. Yukarıda zaten sepet, arama ve diğer detaylardan da bahsetmiştim.

Son olarak bu alandaki ikonlar aşırı büyük göründü. Sanıyorum ki burada kullandığın sepet ikon büyüklüğü ya da bir tık daha küçüğü şeklinde ayarlanabilir gibi duruyor.

Bu alanla alakalı da tasarım çözümlerini bekliyor olacağım.
Yorum Gerekiyor
Ürün görselleri, thumb görseller ve alttaki açıklama, beden gibi bilgilerin yerleşim konularında kesinlikle söyleyecek bir şeyim yok. Her şey çok güzel ve yerinde görünüyor.

Sadece sağ üst tarafta kullandığımız kalp rengi de en azından tasarım mantığında kullandığımız paletten şaşmaması gerekiyor. Yani orada tam kırmızı kullanmışız. Diğer yerlerde kullandığımız pembe-sarı ya da sade pembe tonu ile bir bütünlük sağlamalı.
Yorum Gerekiyor
Kategoriler sayfası genel tasarım yapısına yine uymadığını düşünüyorum. Kategoriler arası çok açık ve gölgelendirme ile çok farklı bir tarza hizmet ediyor gibi. Bunun yerine alışılmışın dışında bir yerleşim bekliyorum senden. Hepsini standart dikdörtgen şekilde yapacağımıza belki en çok aranan kategorileri daha büyük karelerle simgeleyebiliriz. Örnek olarak getir'in hizmet menüsünü ya da trendyol'un aynı şekilde uygulamasında yer alan hizmet menüsünü inceleyebilirsin. Tarz olarak bire bir aynısı olmasını kastetmiyorum tabiki ancak benzer bir yerleşimle daha dolu bir görünüm sunmak mümkün. Biraz önce bahsettiğim detaylara ve tarzına dikkat etmek suretiyle...
Serpil A.
Online Alışveriş Sayfası