Web Tasarım Nedir?

Halk arasındaki adıyla web tasarım, aslında internet sitelerinin baştan aşağı yapılması anlamını taşıyor. Aslında -kendi içinde- bir çok adımın, profesyonel yeteneğin bir araya gelerek ortaya bir internet sitesi koymasını kapsıyor.

Web Tasarım Süreci

İhtiyacın Belirlenmesi
Kullanıcı Deneyim Planlaması
İçerik Hazırlama
Prototiplerin Çizilmesi
Arayüzlerin Tasarlanması
Front-end Kodlama
Back-end Kodlama
Kullanıcı Testleri
Sitenin Açılması

gibi 9 maddeyi içeriyor. Tüm bu maddeler kendi içlerinde bir çok detayı, gözlemi, testi ve işi barındırıyor. Web profesyonelleri olarak biz de bu mesleki terimi bir çırpıda söylenen “web tasarım” olarak -insanların google üzerinde aradığı gibi- isimlendirmek durumunda kalıyoruz.

İhtiyacın Belirlenmesi

Her iş bir amaç için gerçekleştirilir. Bir internet sitesinin amacının/niyetinin da net olması, tüm bu süreç içinde nereye varılmak istendiğinin belirgin olması, yapılan sitenin en verimli şekilde ortaya konmasını sağlıyor.

Müşterinin ihtiyaçlarını belirlemek, tüm bu sürecin başında, projenin nasıl bir müşteri deneyimine, nasıl bir arayüze sahip olacağına kadar karar veriyor. Böylece, tam ihtiyaca yönelik, problemi çözen işler ortaya çıkabiliyor.

Kullanıcı Deneyim Planlanması

Temel düzeyde kullanım alışkanlıkları gözetilerek, müşterinin site üzerinde yaşayacağı macera henüz ortaya hiç bir çizim yokken tasarlanıyor. Böylece çizilecek prototipler için, sitenin gerçekleştirmesini istediğimiz işlevler üzerinde yalın bir şekilde fikir yürütebiliyoruz.

Kullanıcı Deneyim Planlaması

Örneğin: İnternet Sitesinden Teklif Toplamak İstiyoruz
Olası Macera: Ziyaretçinin siteye ana sayfadan eriştiğini düşünelim. Hizmetlerimizin bulunduğu bir menü üzerinden, ilgilendiği hizmet sayfasına erişiyor. Sonrasında hizmetle ilgili detayları okuduktan, gözlemledikten sonra kolay erişilebilir bir teklif formunu dolduruyor. Hem müşteriye hem de site sahibinde ilgili teklif talebine istinaden e-posta gönderiliyor.

Görüldüğü üzere siteyi ziyaret eden potansiyel müşterilerin macerasını teklif almak odaklı bir şekilde planlamış olduk.

İçerik Hazırlama

İçerik aslında bir sitenin tamamıdır. Gördüğünüz görsel, yazan başlık, küçük metinler.. Tamamı sitenin kullanıcı deneyim planlamasında yapılan planlamaya göre tasarlanmalı ve üretilmelidir. Hizmet sayfalarında hangi detayların bulunacağı, öne çıkarılmak istenen bilgiler vb.

Prototiplerin Çizilmesi

Prototip Çizim

İçerikler hazırlandıktan sonraki adım olarak prototip sayfaların, ekranların çizilmesi geliyor. Böylece planladığımız deneyimi simüle ederek aksaklık olabilecek ya da daha iyi olabilecek noktaları kolayca tespit edebiliyoruz. Bu da, daha az hatayla bir sonraki adıma geçmemize olanak sağlıyor.

Arayüzlerin Tasarlanması

Protipler de tasarlandıktan sonraki adımda artık, arayüzleri/ekranları çizebilir ve tasarlayabiliriz. Bu adımda, tasarımcı butonların renklerini, kenarlarının ovalliklerini, ekrandaki bileşenlerin stillerini bir uyum içinde tasarlar. Böylece ilk internet sitesine ait ilk görüntü ortaya çıkmış oluyor.

Bu adımda son düzeltmeler, değişiklikler -dikkatlice- yapılarak sonraki adımlardaki iş/maliyet yükünü azaltmak gözetilir. Geriye dönük bazı değişiklikler, proje sürecindeki bir çok maliyetin şaşmasına sebep olabileceğinden, olabildiğince yazılım tarafına henüz geçilmeden ilgili değişiklikler yapılır.

Front-end Kodlama

Bu adım tasarımın gerçekleştirildiği adımdır. Bir noktada, deneyimin tasarlanıp, prototiplere göre tasarlanmasından sonra artık çizilen şey çalışmaya en yakın noktadadır.

Butonlar, formlar, görseller, renkler bu adımda tasarımdaki gibi kodlar ile yeniden oluşturulur. Butonlara tıklandığında gerçekleşecek sayfa değişimi/formdaki bilgilerin kayıtları gibi olaylar bir sonraki adımda gerçekleşir. Bu adım, arayüzün/ekranların kodlar vasıtasıyla 1e1 olarak front-end geliştirici tarafından oluşturulması demektir.

Back-end Kodlama

Tamamen yazılımsal bir adımdır. Bu adımda, yönetimsel karmaşık teknolojilerle iletişim kurulur. Bilgiler kaydedilir, kayıt edildiği yerden getirilir. Mantıksal kontroller yapılır. (Örn: E-posta daha önce kaydolmuş uyarısı vermek)

Örneğin: Kullanıcı Giriş Ekranı tasarımcı tarafından tasarlanır, front-end geliştirici tarafından kodla oluşturulur, oturum açma, şifre kontrolü vb işler back-end geliştirici tarafından gerçekleştirilir.

Kullanıcı Testleri

Bir grup insan ile birlikte, sitedeki deneyimlerin, işlevlerin farklı farklı cihazlarda(mobil, masaüstü, tablet vs) test edilmesi adımıdır. Genelde back-end ya da front-end hatalarının tespit edildiği adımdır. Bu adımda tamamen mantıksal bir hata tespit edilirse, önceki adımlar layıkıyla yerine getirilmemiş demektir.

Sitenin Açılması

Kullanıcı testleri yapıldıktan, çıkarımlar/düzeltmeler/değişiklikler siteye uygulandıktan sonra artık site açılmaya hazır bir hale gelir. İlgili yapılandırmalar yapıldıktan sonra site yayına alınır.

Web Tasarım Örnekleri

Yaptığımız işlerden bir kısmını web tasarım örnekleri olarak gösterebilirim. Ayrıca daha fazlası için web tasarım örnekleri adlı bağlantıya tıklayarak daha fazlasını görebilirsiniz.