Site Tasarımı

Site Tasarımı,  yaparken öncelikle kafamızda tasarladıklarımızı taslak olarak kağıda dökmeliyiz ki ona göre site tasarımımızı yapabilelim.

Site Tasarım Nasıl Yapılır?

Site Tasarımı yaparken uygulayacağımız bazı aşamalar bulunuyor.

– Ön Hazırlık Aşaması

– Tasarım Aşaması

– Kodlama Aşaması

– Test Aşaması

olmak üzere 4 bölümdür.

Ön Hazırlık Aşaması

Mesela bir tekstil firması bizden kendilerine kolayca ulaşılabilen, çok göz yorucu olmayan ama dikkat çeken bir site yapmamızı istiyor.

Kontrol panelini kullanıp istediği resmi veya bilgiyi ekleyip çıkarmak istiyor.

 Site tasarımı yaparken ilk  yapacağımız iş site ile ilgili dökümanları sitesi yapılacak firmadan temin ediyoruz. Ürünleri ve kategorileri belirliyor, “Hakkında” kısmı için kullanacağımız metni ve adres telefon gibi iletişim bilgilerini alıyoruz. Bizden istenen çok da aşırıya kaçmadan sadelik üzerine kurulu, kullanışlı bir web sitesi oluşturulması. Varsa diğer bilgilere de ulaşıyor ve ön hazırlık kısmını tamamlıyoruz. Böylece sitemiz dört kısımdan oluşacak: Ana Sayfa, Hakkımızda, Referanslar, İletişim. Ürünler ise başlı başına bir modül olacak.

Tasarım Aşaması

Artık sitenin yapısını yani iskeletini belirlememiz gerekiyor. Bunun için önce bir karalama ile plan yapmamız lazım, ki sonrasında bunu tasarım haline getirebilelim. Photoshop yardımı ile sitede kullanacağımız materyalleri temizliyoruz. Bunun için Fireworks‘ü kullanmanızı önermem, tırtıklı bir şekilde temizleme yapacaktır. En iyisi Photoshop‘tur.

Şimdi yapılan bu tasarımın diğer sayfalarda görünümünü yapalım.

– Referanslarımız kısmı olacak.

– Ürünlerden birine tıklandığında  görünecek.

Tasarım işi tamamen sizin becerinize ve yaratıcı gücünüze kalmış bir iş zaten. Tasarım yaparken firma sahibinin bizden isteği, doğrultusunda hareket etmeyi unutmamalıyız.

Google arama motorunda rahat kıyafetler olarak arama yapıyorsunuz. Siteyi buldunuz, girdiniz , sitenin açılışında uzun süren bir animasyon, yanıp sönen bir sürü saçma sapan hareketli nesneler var. Ana sayfaya geldiniz yine aynı. Ne kadar etkileyici olursa olsun, o an için size bir anlam ifade eder etmeyecektir. Siz sadece ürünle ilgileneceğinizden dolayı lüzumsuz grafik animasyonlar, anlamsız resimler, çok farklı keskin renkler web tasarımında uzak durulması gereken unsurlar olarak karşımıza çıkmaktadır. Siz sadece sizden isteneni yapmalısınız..

Tasarım kısmını tamamladıktan sonra kendi mantığıma uygun şekilde dilimliyorum. Dilimleme yaparken Flash yapacağım kısmı tam olarak kesiyorum. Başlıkları dilimlerle belirliyorum.

Hiçbir zaman Fireworks’ten HTML’ye dönüştürülmüş dosyalarla çalışmadığımdan dilimlediklerimi (sadece kullanacaklarımı) farklı resimler şeklinde kaydediyorum.

Dreamweaver’da yeni bir sayfa oluşturuyorum. Genel olarak CSS kullanarak oluşturduğum div’leri boyutlandırarak sayfa yerleşimini yapıyorum.

Sonra Flash programını açarak header bölgesi olarak belirlediğim kısmın boyutunu ayarlıyorum ve daha sonra Fireworks’te bu alandaki tüm parçaları ile kopyalayarak Flash içine yapıştırıyorum. Flash, Fireworks’teki bir nesneyi veya nesneleri movie klip olarak, png formatına import edecektir. Yapmanız gereken kopyala yapıştır yapmaktır. Header’i istediğimiz hareket ve efektleri vererek sade bir şekilde yapıyoruz.

Kodlama Aşaması

Bundan sonra programcı devreye giriyor. Ürünler menüsüne uygun şekilde kodlamayı yapıyor. Birine tıkladığınızda o kategorideki tüm ürünler geliyor, ayrıca belirlenmiş olan kontrol panelinden kategori ve ürün eklenebilir hale getiriyor.

Referanslar kısmını da benzer şekilde hallettikten sonra web sitesini herhangi bir FTP programı vasıtası ile hostingine atıyoruz.

Test Aşaması

Sonra siteyi test ediyoruz, tasarımda veya programlamada hatalar  olabilir eğer varsa hemen gideriyoruz. Hiç bir sorun yoksa son olarak müşteriden onay alıp iş teslim etmeye kalıyor.