E-Ticaret Sitesi Tasarlarken Kullanıcağımız Programlar ve Teknikler

E-Ticaret Sitesi Tasarlarken Kullanıcağımız Programlar ve Teknikler ana

E-Ticaret Sitesi Tasarlarken Kullanıcağımız Programlar ve Teknikler

E-Ticaret Sitesi Tasarlarken Kullanıcağımız Programlar ve Teknikler

Öncelikle ne istediğimizi, nasıl bir e-ticaret sayfası oluşturacağımızı bilmemiz gerekir, bunun için de bazı konularda bilgi sahibi olmalıyız.

 

  1. E-ticaret sitesinde yer almasını istediğiniz menüler ve iç sayfaları neler olmalıdır?
  2. Sitemiz nasıl bir konseptte ve şablonda olmalıdır?
  3. Sitemizin temel şablonunda hangi renkler ağırlıklı olarak kullanılmalıdır?
  4. Site içeriği nasıl bir kalitede olursa şirketimizin gerçek kurumsal kimliğini yansıtmış oluruz?
  5. Firmamız geliştiği süreçte sitede yer alması gereken bilgiler nelerdir?

Bunları doğru analiz edip sağlam bir tespitte bulunduktan sonra artık ne istediğimizi biliyoruz ve sitemizi çizmeye başlayabiliriz demektir.

Web Uygulamamıza Uygun E-Ticaret Sitesinin Çizimi

Logomuz ve site üzerinde kullanacağımız renk değerleri bu şekildedir. Artık sitemizin tasarımına geçebiliriz. Şirketimizin kurumsal rengi siyah tonları ve bordo. Şirketimizin kurumsal renkleri siyah ve bordo olacağı için arka zemini gri ve beyaz çalışmak faydalı olacaktır.E-Ticaret Site si Tasarlarken Kullanıcağımız Programlar ve Teknikler konu

Koyu bir zemin kullanırsak, renk uyumunda sıkıntın çekebiliriz. Bu yüzden kullandığımız renkler bizim işimizi daima kolaylaştıracak renkler olmalıdır. Örneğin; gri ve beyaz renkler üzerine birçok renk uydurabiliriz, fakat koyu renkler üzerine her renk uymaz. Web tasarım yapacağımız için ben piyasada en çok kullanılan ve tercih edilen Photoshop programını tercih ediyorum. Sizler isterseniz daha farklı tasarım programlarıyla hazırlayabilirsiniz.

Artık yapıma geçebiliriz. Öncelikle Photoshop programımızı açalım ve File menüsünden New sekmemize tıklayalım.

Bu kısımda sitemizi çalışacağımız zemini oluşturuyoruz. Sayfamıza ok diyip açıktan sonra çalışma alanımıza Rectangle Tool aracımız ile sayfamızı dolduracak büyüklükte bir kare çizelim. Karemizi çizdikten sonra çalışma alanımızda çizdiğimiz bu nesneye, sağ tarafta bulunan layer penceremizde çizdiğimiz nesneye sağ tıklayıp, blending options diyelim ve color overlay sekmemize gelelim. Şeklimiz Beyaz renklere olmalıdır. Eğer beyaz değilse blending options penceremize girerek color overlay penceremizden beyaz yapmalıyız. Daha sonra logomuzu koymalıyız sol en üst kısma, yanında da sloganımızı yazmalıyız.

Logomuzu sol üst köşeye yerleştirdik ve yanına sloganımızı yazdık. Sloganımızda kullandığımız fontun ismi Handel Gothic BT‘dir. Logomuzu yerleştirdikten sonra hemen karşısına kullanıcıların site içerisinde arama yapabileceği ufak bir alan yapmalıyız. Logomuz ile aynı simetride olmasına özen göstermeliyiz. Yine aynı şekilde nesnelerimizi kullanarak bir nesne çizelim.

Arama bölümünde daha öncede söylediğim gibi, sitemizin üst kısmının logo ile aynı orantıda olmasına dikkat etmeliyiz. Şimdi ise üst  alanımızı ve menümüzü birbirinden ayıracak bir menü gölge ekleyelim, öncelikle sitemize ince uzun bir kare çizelim ve daha sonra blending options penceremizden Gradient overlay sekmemizi açalım;

Griden beyaza doğru bir zemin yapalım. Bu yaptığımız nesneyi üst kısma yaslayalım. Gördüğünüz gibi sitemizin üst kısmını oluşturmuş olduk. Sizler o kısmı dilediğiniz gibi zenginleştirebilir, hatta dilerseniz farklı renklerde deneyebilirsiniz.

Şimdi ise menümüzü yapalım, menümüz içerisinde yer alacak olan bilgiler; Anasayfa, Hakkımızda, Yeni ürünler, Kampanyalar, Gelecek Ürünler, İletişim. Logomuza uygun bir renk olsun, menümüzü kırmızı yapalım fakat saf kırmızı değil bordoya yakın bir renk. Aynı şekilde nesnemizi kullanarak bir şekil çiziyoruz.E-Ticaret Sitesi Tasarlarken Kullanıcağımız Programlar ve Teknikler

Çizdikten sonra yazmamız gereken yazıları üzerine yazalım. Fakat üzerine yazdığımız yazıları birbirinden bağımsız şekilde yapmalıyız, bu yüzden ” | ” (Alt Gr + <>) bu şekil bir ayraç kullanmalıyız. Yazılarımızı nesnemize ortalı bir şekilde yazdık ve gerekli ayrımı yaptık. Gördüğünüz gibi sitemizin, web sayfamızın üst kısmını yaptık. Artık sağ ve sol tarafta kullanacağımız uygulamalarda sıra. Öncelikle sol tarafta çizmiş olduğumuz kategoriler sekmemizi yapalım. Bir çerçeve çizelim bu çerçevemizi belli aralıklar ile ayıralım;

Kategoriler üzerinde yer alan menü barımızı bordo ve kırmızı graident güzel bir stil uyguladık. O kısımda kategoriler kısmı olduğunu belirteceğiz. Daha sonra ise şu yazılarımızı tek tek yazalım kategoriler sekmemize;

”Programlama”, ”Grafik / Tasarım”, ”Database”, ”Güvenlik”, ”Web / İnternet”; ”Yeni Başlayanlar”,”İşletim Sistemi”,”Microsoft Office”,”Network”,”Web Tasarım”,”Mobil Programlama”,”Donanım ve sunucular.

Kategoriler sekmemize yazılarımızı yazdık, menü bar ve menü içerisinde yazan yazılarımızın aynı özelliklerde ve aynı simetride olmasına özen göstermeliyiz. Yani biri ileride biri geride olmamalı. Menülerimizin başına onları daha estetik gösterecek bir ikon daima eklenmelidir. Çünkü tek başına bir yazı fazla dikkat çekmeyebilir. Bu yüzden bir ikon daima tercih edilmelidir. Ben böyle bir ikon tercih ettim, sizler daha farklı görüntülerde ikonlar kullanabilirsiniz.

Kategoriler sekmemizi oluşturduk, şimdi ise kategori sekmemizin karşısında yer alacak olan slider alanmızı yapmaya geldi. Slider alanımız için öncelikle bir çerçeve yapalım;E-Ticaret Sitesi Tasarlarken Kullanıcağımız Programlar ve Teknikler 1

Çerçevemizi yapıp stroke özelliğimizde 1 derecesinde kontur verelim slider alanımızın çevresine. Daha sonra yine nesnelerimiz aracılığı ile 1 2 3 4 5 şeklinde butonlar yapalım.

Sayfamızı dilimledik şimdi ise File menümüzden Save for Web & Devices diyelim. Kısayolu ALT+Shift+CTRL+S’dir. Dilimlediğimiz web sayfasını Save for Web & Devices sekmesine tıkladıktan sonra, karşımıza bu şekilde bir pencere açılacaktır.

Bu kısımda transparency sekmemizin seçili olmasına dikkat etmeliyiz. Bu sekmemizin image görüntülerimizi arka planlarının transparan olmasını sağlar: Preset seçeneğimiz daima PNG-24 şeklinde olmalıdır. Bu formatı tercih etmemizin sebebi, bizlere kaliteli bir görüntü sunmasıdır. PNG-24 özelliği sayesinde image görüntülerinin arka planlarını şeffaf şekilde kaydetmektedir. Bu da kaliteli bir görüntü sunmaktadır bizlere.E-Ticaret Sitesi Tasarlarken Kullanıcağımız Programlar ve Teknikler giriş

Web sitesi üzerinde veya herhangi bir çalışmamızda bir nesnenin arka planını temizledik, bu görüntümüzü PNG-24 olarak kaydetmeliyiz, çünkü bu görüntümüzü hangi zaminde kullanırsak kullanalım arka planımız şeffaf olarak görünecektir. Bu da daha kaliteli çalışmalar elde etmemizi sağlayacaktır. Bu şekilde ayarlamalarımızı yaptıktan sonra Save diyelim. Sitemizin hem HTML hem de IMAGGE görüntülerini kaydetmiş olduk.

 

Bu gönderiyi paylaş

Bir cevap yazın