SOSYAL AĞLAR

Bir Web Sitesi Nasıl Yapılır? (Örneklerle Site Yapım Aşamaları)

Web Tasarım

Bir Web Sitesi Nasıl Yapılır? (Örneklerle Site Yapım Aşamaları)

banner-webSon zamanlarda artık hemen hemen herkes, kendi sitesini yapmanın bir yolunu aramaya başladı. Kimi template ‘edit’liyor, kimi üstünkörü site bozması bir şeyler yapıyor, kimi de gerçekten uğraşıyor, güzel çalışmalar çıkarıyor. İnternetteki kaynaklardan öğrenebildiği kadarıyla herkes bir şeyler döktürmeye gayret ediyor.

Eğer siz, “ben uğraşamam kardeşim, site mite yapmak için program filan öğrenemem, herhangi bir hazır site bile benim işimi görür” diyorsanız, basit bir blog sitesi kurmayı deneyebilirsiniz. Ama kendinize özel siteler yapmak arzusunda iseniz, yazımızın bundan sonraki kısmını dikkatle okumanızı öneriyorum. Çünkü bu yazımda web tasarımına yeni başlayanların bilmeleri gereken aşamalara değinmek istiyorum.

Örnek bir çalışma ile başlayalım.

Ön Hazırlık Aşaması

Mesela bu yazımızda bir elektrik firmasını ele alalım ve onun üzerinden gidelim.

Yıldırım Elektrik Bobinaj firması bizden müşterilerinin kendilerine kolayca ulaşabileceği ve ürünlerin ön planda olduğu bir web sitesi yapmamızı istiyor. Ürünlere daha sonra ekleme-çıkarma yapılmasını, yani dilediği zaman bir kategori ve ürün eklemek çıkarmak istiyor.

İlk önce yapacağımız site ile ilgili dokümanları 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ı 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.

Tasarım çalışmamızda Fireworks kullanıyorum. Siz isterseniz Photoshop da kullanabilirsiniz, ama Fireworks kadar bu konuda pratik olmadığını belirtmek isterim. Tasarımımı tamamlıyorum:

Şimdi bu tasarımın diğer sayfalarda görünümünü yapalım. Referanslarımız kısmı aşağıdaki gibi olacak:

Ürünlerden birine tıklandığında aşağıdaki gibi görünecek:

Tasarım işi sizin becerinize kalmış zaten. Tasarım yaparken çok güzel görünüyor diye öyle herşeyi doldurmayın. Çünkü firma sahibinin bizden isteği, sitenin kullanışlı olması, sitesine giren birinin gerekli bilgileri elde edebilmesi.

Bir düşünün: Bir bobinaj arıyorsunuz ve Google’dan buldunuz siteyi, girdiniz diyelim. 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 mi tüm bunlar? Yoksa sadece ürünle mi ilgilenirsiniz? İşte bu düşüncelerle lüzumsuz gif animasyonlar, anlamsız resimler, çok farklı keskin renkler web tasarımında uzak durulması gereken unsurlar olarak karşımıza çıkıyor. Sadece amaca ulaşın, yeterli.

Tasarım kısmını tamamladım ve 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 halinde 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. Soldaki ürünler menüsüne uygun şekilde kodlamayı yapıyor. Birine tıkladığınızda o kategorideki ü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 varsa gideriyoruz. Sitenin son haline buradan ulaşabilirsiniz.

Sonuç:

Basit içerikli bir siteyi hazırlarken yukarıda bahsettiğimiz aşamaları takip ederiz genelde. Sizlere fikir vermesi açısından gelen soru ve talepleri de göz önünde bulundurarak böyle bir yazı hazırlama ihtiyacı doğdu. Umarım bir fikir vermiş ve yararlı olmuştur.

Kolay gelsin.

Okumaya Devam Et
14 Yorum

  1. pc_kop@hotmail.com'

    Ahmet

    06 Aralık 2010 / 14:56

    Çok teşekkürler

  2. ekvgd.06@hotmail.com'

    Vural

    09 Ocak 2011 / 12:20

    teşekkürler paylaşımınız için.

  3. cefakar_mc@hotmail.com'

    ferhat

    18 Ocak 2011 / 09:04

    Paylaşımınız için teşekkürler…

  4. hyturkyilmaz@gmail.com'

    Hasan

    29 Nisan 2011 / 12:53

    Peki siz sadece tasarım mı yapıyorsunuz? yoksa programlamayı da yapıp mı işi teslim ediyorsunuz? daha doğrusu müşteri hem size hem de programcıya mı para veriyor?

    • siracel

      04 Aralık 2011 / 22:33

      Ben sadece arayüzü hazırlıyorum, kimi zaman da CSS’e aktararak teslim ediyorum.

  5. hepsevadnan@hotmail.com'

    ADNAN HEPSEV

    10 Mayıs 2011 / 11:32

    Hocam bilgileriniz için teşekkür ederim.Photoshop ta kenar kıvırma ile ilgili bilgilerinize ulaşamadım.Kısa bir linkle e-mailime yollarmısınız?Saygılar

  6. mazlum_83@hotmail.com'

    Mazlum BARAN

    12 Ağustos 2011 / 08:17

    peki kodlama konusunda kendimizi hangi dilde nasıl geliştimemiz daha iyidir.

    • siracel

      04 Aralık 2011 / 22:35

      Ben PHP’yi çok esnek olarak değerlendiriyorum ve hem ücretsiz, hem de kendini geliştirmek daha kolay diye düşünüyorum.

  7. vergul_bozkurt@hotmail.com'

    Yunus Emre Vergül

    17 Ağustos 2011 / 08:44

    yaptığınız paylaşım için teşekkürler ancak yapılan bu sitenin alt menüsünde ve linklerinde hata var bilginiz olsun . .

    • siracel

      04 Aralık 2011 / 22:35

      Site zamanla değiştirilmiş, bu nedenle linklerde de değişiklikler olmuş. Hayli zaman önceydi 🙂

  8. info@eceabatrehberi.com'

    Serhat

    16 Eylül 2011 / 16:01

    bunu dikkate alıcam ben kendimi daha yeni yeni geliştiriyorum bu tavsiye ettiğiniz yöndem google tarafından da seviliyor mu ?

  9. kosova_550@hotmail.com'

    muhittin

    30 Kasım 2011 / 14:31

    Çalıntı bir paylaşım bu. Bunun aynısı yanlış hatırlamıyorsam Sanalkurs.net diye bir sitede vardı. Özgün paylaşımlar bekliyoruz . Sağdan soldan çalmanız çok hoş olmayan bir hareket.

    • siracel

      04 Aralık 2011 / 22:32

      Biraz dikkat edersen ordaki yazının da bana ait olduğunu görebilirsin.

  10. snszm625@gmail.com'

    KaaN

    28 Aralık 2011 / 17:07

    Muhıttın bıraz daha dıkkatlı bırader. Sıraceddın abi ben html, dw, fıreworks ws. bıtırdım su anda php ıslıyıorm baya ılerledm sence phpden sonra hangı programlamadan dewam etmelıyım?

Sen de Fikrini Paylaş

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Siraceddin El

1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında pek çok projede yer aldım. 2002 yılında Sanalkurs.net'i ve 2013 yılında da Etkinlik.com.tr'yi kuran ekibin bir parçası oldum. Girişimci, tasarımcı ve eğitmen olarak çalışmalarımı sürdürüyorum. Daha Fazla...

Öne Çıkanlar

YUKARI