E Ticaret Web Sitesi UI Design
Eagleeyes için hazırlamış olduğumuz e ticaret web ui design ve arayüz tasarımı üzerinde baya vakit harcadık. E ticaret arayüz tasarımında ve web tasarımında genel olarak ele alınan ana konu her zaman kullanılabilir olmasıdır. Sade, anlaşılır ve kullanılabilir bir arayüz tasarımını hedefleyerek sistemin alt yapısında kullanılan opencart yazılımının getirdiği standartlara bağlı kalarak tasarladık. Çalışmaya başlamadan önce bir çok işte yaptığımız gibi ilk olarak işimizi kolaylaştırmak için bir wireframe hazırladık. Bu sayede arayüz üzerinde neyin nerede olduğunu daha rahat kavrıyoruz ve tasarım aşamasında karşımıza çıkabilecek sorunların tespitini daha önce yapmış oluyoruz.
Bu durum aslında dışarıdan bakınca işi uzatmak gibi algılanıyor bir çok web tasarımcısına. Ama aslında proje hakimiyetini kolaylaştırarak aynı zamanda projenin akışını daha sağlıklı bir hale getiriyor. Ben bu durumu mimarların autocad üzerinde proje çizmesine benzetiyorum. Binayı dikmeden önce neyin nasıl olacağına orada karar veriliyor ve tüm olumlu olumsuz aksiyonları o projede görebiliyorlar. Gelelim bu e ticaret web ui design çalışmasında neler yaptık nasıl bir yol izledik aşağıda bu konuyu detaylı bir şekilde anlatalım.
Ana Sayfa Tasarımı ve Yer Verilenler
E ticaret arayüzü için yaklaşık olarak 20 sayfa kadar hazırladığımız wireframelere bağlı kalarak web sitesinin tasarlama aşamasına geçtik. Ana sayfada yer alanlar ise her zaman olduğu gibi header bölümünde logomuz, linkler, search box, sosyal medya yönlendirmeleri ve kullanıcı paneli yönlendirme linkleri bulunuyor. Slider bölümü, yani hemen alt kısımda ise kampanya ve indirimlerin duyurulacağı standartlaşmış alan yer almaktadır. Slider üzerine taşan bölümde ise e ticaret üzerinde satışı yapılan ana kategorilere büyük ve görsel olarak dört farklı alanda yer verdik. Alt bölümde yer alan navigasyon ile satışı popüler olan ürünlerin dörtlü veya katları şeklinde listelenebilir hali yer alıyor.
E ticaret web ui design header bölümünde ayrıca hızlı bir şekilde ziyaretçilerin yeni üyelik yapabileceği ve sisteme giriş sağlayabileceği bir alanda bulunuyor. Bu alanın hemen yan tarafında yer alan hızlı sepet yönlendirmesi mevcut, ziyaretçiler buradan sepetlerindeki ürünlere hızlı bir şekilde müdahale edebiliyorlar.Popüler ürünlerin altında yer alan iki eşit ölçüde yan yana yer alan bannerlar ile sürekli değişken bir yapıya sahip duyuru işlemleri yapılmasına olanak sağladık. Banner tasarımlarının altında ise yine mevcut kategorilerdeki popüler ürünlerin listelendiği iki ve daha fazla şekilde çoğaltılabilir ürün yerleşimleri bulunmaktadır. Aynı zamanda ana sayfanın en alt bölümünde e bülten aboneliği formu ve müşteri yorumlarının olduğu bir alan yer almaktadır. Bunun altında ise markanın ziyaretçileri bilgilendirmek amaçlı kullandığı üç farklı kutucuk yer alıyor.
Bu kutucuklarda yer alan bilgiler ise belirli saatler içerisinde yapılan alışverişlerde aynı gün kargo işleminin gerçekleştirilmesi, ssl sertifikasının olduğunu vurgulayan yüzde yüz güvenli alışveriş bannerı ve ürün değişim ve iadelerinin kolayca gerçekleştirildiğini anlatan bir bölüm yer almakta. Her sitenin bir giriş gelişme ve sonuç bölümü şeklinde yer alan çalışma sisteminin sonuç bölümünü ise footer olarak adlandırıyoruz. Ziyaretçilerin sitenin tüm linklerine ulaşabileceği sade ve kullanışlı bir footer bölümü de bu alanda yer almaktadır. Diğer e ticaret web arayüz tasarımlarını buradan inceleyebilirsiniz. Eagle Eyes markası için hazırladığımız logo ve kurumsal kimlik tasarımını inceleyin.
