Bir Web Sitesini Tasarlama ve Kodlama Rehberi

Bir web sitesi için arayüz tasarlayıp bu tasarımı da HTML+CSS+JS ile kodlayarak inşa ederken bu süreci belirli bir disiplin çerçevesinde yapılması özellikle de maliyet/karlılık açısından çok ama çok önemlidir. Bunu bize kim mi söyle di ? 20 yılı aşkın bir süredir bizimle birlikte büyüyen "Tecrübe Abi". Özellikle son yıllarda epeyce çenesi düştü ve kulağımıza sürekli bir şeyler fısıldamaya başladı, pek de susacağı yok gibi görünüyor. Allah başımızdan eksik etmesin tabi.

Bahsi geçen bu disiplin sürecini maddeler halinde sıralarsak;

I. Ön Hazırlık Süreci

II. Tasarım Süreci

III. Kodlama Süreci

I. Ön Hazırlık Süreci

Alan adı (nam-ı diğer domain) ile başlayan ön hazırlık süreci esasında en önemli başlangıçtır. Eğer doğru alan adı ile başlarsak gömleğin ilk düğmesini de doğru ilikleyerek işe başlamış oluruz. Uzantısı ise öncelikle .com olması ilk tercih olmalıdır ve hatta gerekiyorsa uygun alan adı açık arttırma sitelerinden satın da alınabilir, olamıyorsa com.tr, .net yada .org olabilir. Eğer alan adları konusunda çok fazla bilgi sahibi değilseniz web sitesini inşa edecek firma/uzman ile istişare ederek bunun belirlenmesi sizin açınızdan daha iyi olacaktır. Eğer alan adınızı kendiniz tescil etmek isterseniz alantron.com, metunic.com.tr, godady.com gibi güvenilir sistemler üzerinden bunu yapabilirsiniz.

Domain+Hosting

Oluşturulacak olan web sitesinin teknik alt yapısına uygun bir alan barındırma (hosting) hizmeti alınmalıdır. Bunu da doğru belirlemek elbette ki her yıl ödediğimiz web sitesi maliyetlerinizi önemli ölçüde etkileyecektir. Eğer yönetimsel bir özelliğe kavuşturabilmek için bir yazılım ile web sitemizi geliştireceksek alan barındırma (hosting) hizmetimizi PHP ve MySQL teknik alt yapı desteğine sahip bir şekilde almalıyız. Bu tek seçenek midir ? Elbette hayır ama biz sadece bu platformda yazılım geliştiriyoruz o sebeple bizim sunabileceğimiz tek ve en mükemmel seçenektir :)

SSL Sertifikası

SSL sertifikası bize göre artık olmazsa olmazlardandır. Eğer oluşturulacak olan web sitesi üzerinden e-ticaret yapılmayacaksa yani üzerinde sanal pos aracılığı ile bir ödeme formu çalışmayacaksa SSL sertifikası alan adı veya barındırma hizmeti gibi mutlak şart bir zorunluluk değildir. Fakat arama motorları açısından pozitif ayrımcılık sağlayacağı gibi web sitemizi ziyaret eden potansiyel müşterimize ilk karşılaşmamızda güven vereceği için de SSL sertifikamızın sitemiz üzerinde tanımlı olması bize kuşkusuz faydalı bir etki sağlayacaktır. 

Hedef Kitlenin Belirlenmesi

Oluşturmak istediğimiz web sitesinin öncelikli amacını işe başlamadan önce belirlememiz gerekmektedir, bu sayede yol haritasını ortaya çıkarabiliriz. 

- Kurumsal firma, kurum, vakıf, dernek, organizasyon vb. tanıtım sitesi,

- Kişisel biyografi sitesi,

- E-ticaret sitesi,

- Ürün, hizmet, iş fikri ya da marka tanıtım sitesi,

- Proje tanıtım sitesi,

gibi bunları çoğaltabiliriz elbette ve bu sayede nasıl bir siteye ihtiyacımız olduğunu dolayısı ile hedef kitlemizi de belirleyerek üretim ortamına bir adım daha yaklaşmış oluruz. Hedef kitlenin önceden belirlenerek site haritasını, teknik alt yapı hizmetlerini, tasarım ve kodlanma sürecinin belirlenmesi çok önemlidir. Çünkü belirlenen hedef kitlenin bir web sitesinde ki beklentilerine odaklanarak tasarlanması ve kodlanması gerekmektedir. Bu anlayış ile yola çıkarsak maksimum başarı ve kazanım elde etme şansımız çok daha yüksek olacaktır.

Rakipler

Başarılı bir web sitesi yapmamızın bir diğer önemli unsuru da oluşturulacak olan web sitesinin rakiplerini tanımak ve incelemektir. Bu şekilde üretim sürecine başlamadan önce oluşturmamız gereken site haritasını oluşturmamızda bize önemli fikirler verecek ve geliştirme sürecinin sonucunda nasıl bir sonuç elde etmemiz konusunda da hedeflerimizi belirlemiş olacağız. Aynı zamanda eksiklerimizi ve eğer var ise güçlü olduğumuz tarafları göreceğiz. Hülasa yerimizi bileceğiz.

Site Haritası

Oluşturulan site haritasıyla birlikte ihtiyacımız olan içeriklerin, ana ve alt menülerin belirlenmesi ile web sitesi üretim süreci başlamadan önce tamamlanması ilerde yapılması gereken değişikliklerin işe başlamadan belirlenmesi zaman/para/huzur bağlamında ciddi bir kazanıma dönüşecektir. Ne kadar önemli olduğunu ne kadar yazsak anlatamayız.

İçerik

Başarılı ve nokta atışlı hızlı bir sonuç elde edebilmek için en önemlisi de daha siteyi açmadan olası yap/bozların önüne geçmek için web sitesinin içeriğini oluşturacak olan yazıların, görsellerin ve formların önceden hazırlanması gerekmektedir. Bunlar hazırlanmadan işe başlanırsa vay bizim halimize. 

Logo, Renkler ve Font

Tasarım sürecinde son olarak logo, siteyi oluşturacak baskın renkler ve kullanılacak font belirlenmelidir. Logonuz yoksa mutlaka işinin ehline yaptırmanız gerekmektedir ve gerçekten doğru logo çok ama çok önemlidir. Baskın renkler ve font da belirlenirken logo, hedef kitle, web sitesinin amacı gibi parametreler göz önünde bulundurularak belirlenmelidir.

II. Tasarım Süreci

Tasarım sürecinin neticesinde ki başarı olasılığının en önemli etkeni elbette öncelikle uzman ellerde yapılması ve bu uzman ellere teslim olmadan önce hazırlık aşamasının ne kadar eksiksiz ve kusursuz tamamlanmasından geçmekte olduğunu unutmamak gerekir. Burada yazılabilecek bir çok konu esasında hazırlık sürecindeki anlatılanların bir anlamda tekrarı olacaktır, bu süreçte başarılı ve beklentileri karşılayan bir sonuç elde etmek isteniyorsa öncelikle hazırlık süreci aşamasında dersinize iyi çalışmanız gerekmektedir. Web sitesi tasarım sürecinde genellikle Adobe XD, Photoshop gibi yazılımlar kullanılmaktadır. Tasarım sürecini mobil ve masaüstü tasarım olarak mutlaka ikiye ayırmak gerekmektedir. 2020`de olduğumuzu düşünerek Flat Tasarım denilen, minimalist ve mobil uyumlu tasarım trendinin kabul gören bir yaygınlıkta olduğunu söyleyebiliriz. Bizimde sıklıkla tercih ettiğimiz bir yöntemdir. Sadelik, basit elementlerin hakim olduğu, canlı renkler, minimalist ve tipografik elementler candır.

III. Kodlama Süreci

Web sitesinin görseller halinde hazırlanan taslak dosyaları genellikle HTML+CSS+Java Script şeklinde kodlanmaktadır. Bu kodlama işlemi yapılırken telefon, tablet, masaüstü gibi farklı ekran çözünürlüklerine duyarlı (responsive) şekilde kodlanmalıdır. Kullanılabilecek yazılım dilleri, kodlama teknikleri gibi işin teknik detaylarına burada girmeyeceğim zaten bu konularda internet üzerinde sayısız kaynak bulunmaktadır.

Güncel Tavsiyeler

- Sef url (Arama Motoru Uyumlu Link – Search Engine Friendly),

- Sayfaların yüklenme sürelerini olabildiğince düşürebilmek için kullanılan dosyaların boyutlarının optimize edilmesi,

- Görsellerde doğru şekilde kurgulanmış 72 dpi ile jpg, png, gif, ico ve svg dosyalarının kullanımı,

- Mümkün olduğunca kopya içerik kullanmaktan kaçınmak gerekir,

- Web sitesi, UI/UX standartlarına uygun şekilde tasarlanmalı ve kodlanmalı,

- Eğer eskiden var olan bir site yenileniyorsa eski linklerin 301 yönlendirmelerinin yapılması,

- favicon, robot.txt, sitemap, 404 sayfası gibi basit detayların hazırlanması,

- Kırık linklerin ya da içerikleri olmayan sayfaların oluşmasını engellemek,

- Tüm yaygın tarayıcılarda doğru çalıştığından emin olmak.