Web 2.0 Tasarım Rehberi-Sitemizi Tasarlıyoruz

Web 2.0 tasarım rehberimizin son bölümüne gelmiş bulunuyoruz. Bu güne kadar öğrendiğimiz konuları teoriden pratiğe dökerek Web2.0 trendlerine uygun yepyeni ir site tasarlıyacağız. Bir kez daha altını çizmemiz gerekirse bu rehber de ele aldığımız konu Web 2.0 tasarım trendleri, altyapı, kullanım amacı kodlama ve css gibi konular değil.

Tasarımımızda öncelikle ilk dersimizde gördüğümüz sayfa yapısını oluşturmamız gerek. Tasarımını yapacağımız site son zamanlarda hayli moda olan, günde bir ürün satan sitelerden olacak. Tabiki bu tamamen mevcut siteleri inceleyerek oluşturduğumuz kriter ve içerikle gerçekleşecek.

Sayfa yapımızı bu içeriğe göre header, navigasyon, içerik ve footer bölümlerinden oluşturmaya karar vermiş olalım.

Öncelikle mevcut logomuzu daha önce gördüğümüz teknikleri kullanarak Web 2.0 trendine uygun hale getirelim.

Logomuzu zengin yüzey tekniğine göre arzu ettiğimiz hale getirdikten sonra yansıma kullanarak header içine yerleştiriyoruz.

Header yani sitemizin üst kısmının arka planına biraz atmosfer yaratabilmek için hoş bir görselde ekleyerek daha zengin bir görünüm elde etmiş oluyoruz.
Sitemizin sloganının “Satın alın kazanın” olduğunu varsayarsak, yine daha önce incelediğimiz yansıma ikon ve flaşlar tekniğine uygun olarak hazırladığımız bir patlangacıda yine header’ın sağ tarafına ekliyoruz.

Böylece sıra sitenin ana navigasyonunu hazırlamaya geliyor. Son dönemlerde oldukça moda olan hemde kullanıcının işini kolaylaştıran tab yada diğer adı ile sekme yöntemini kullanarak sitemizin navigasyonunuda oluşturuyoruz.
Bu noktada dikkat etmemiz gereken ayrıntının o an bulunduğumuz sayfada sekmenin nasıl şekilde görüneceğini ayarlamayı unutmamamız.

Artık sıra içeriğimizi nasıl göstereceğimize geldi. Sitemizde yayınlanacak ürünü beyaz bir alanda göstermemiz kullanıcıların kolay algılaması açısından en uygun seçim olacaktır.

Tasarımlarınızda beyaz renk kullanmaktan asla çekinmeyin. Sadeliği yakalamak için beyaz renk bir çok tasarımda bir numaralı yardımcınız olacak.

Gördüğünüz gibi ürünümüzün görselini hazırlarken de yine yansıma efekti kullanarak tasarımımıza derinlik kazandırdık.
Sitemizin renk skalasına ve yine Web 2.0 tasarım trendlerine uygun şekilde iri fontlar kullandık, kocaman ve degrade bir geçiş kullanarak satın al butonumuzuda, ürün ve fiyat bilgilerinin hemen altına yerleştirerek, bu ürünü satın almaya niyetli kullanıcılar için önemli bir kolaylık sağladık.
Bu bölümünde tasarımını tamamladığımıza göre sıra geldi sitemizin son ana bölümü olan footer kısmının yerleşimine.

Footer’ın sol tarafına sitenin kullanım şekli ile ilgili olabileceğiniz varsaydığımız yazılardan ekledik, alt bölüm içinse ayrı olarak tasarladığımız kurumsal bilgilerin bulunduğu yönlendirme linklerini eklemeyi uygun gördük. Footer’ın sağ tarafında ise sitemizin logosu ve RSS beslemesi ikonlarını yerleştiriyoruz.

Ve böylelikle gördüğümüz teknikleri uygulayarak Web 2.0 tasarımı trendine uygun olarak sitemizi tamamlamış oluyoruz.

Daha önceki konuları ve bu örneği inceleyerek yeni nesil tasarım trendleri hakkında bolca fikir sahibi olabilir, ve sizde pratik yapabilirsiniz.

Bu örnek sitenin tam görselini görmek için buraya tıklayabilirsiniz.

Hazırladığımız örnek tasarımı PSD dosyası olarak indirmek isterseniz buraya tıklayınız.