Web Tasarımı Nedir, Nasıl Öğrenilir?

Web tasarımı, kullanıcı ara yüzü üzerinden yerleştirme, gezinme gibi özelliklerin planlanması, çeşitli öğelerin sayfalara eklenmesi gibi süreçleri içerisine katmaktadır. Yani bir web sitesinin oluşturulması sırasında tasarımın dâhil olduğu noktaları kapsamaktadır.

Web tasarımı kullanıcıların yani ziyaretçilerin, web sitesi ile aralarında olan iletişimin daha sağlıklı hale gelmesini sağlamaktadır. Yaratıcılık ve analitik beceri gerekliliği olduğundan dolayı da standart kodların bilinmesi gerekir. Ek olarak kullanıcı deneyimlerinin önemsenmesi, arama motoru optimizasyonunun ciddiye alınması şarttır. Tüm bunlarla beraber web tasarımcılar aslında kavramsal seçenekleri çevirip fikirlerin iletilmesini sağlayan işlevsel ortamlar hazırlamaktadır.

Web tasarımının öğrenilmesi için devam eden yolculukta HTML, CSS gibi kodlama bilgileri olması önerilmektedir. Sizler de bu tarz bilgilere sahip olmak için çevrimiçi kurslara katılabilirsiniz. Web tasarımla ilgili blog sayfalarını, YouTube videolarını takip edebilirsiniz. Web site tasarımı nasıl yapılır, öğrenmek istediğiniz zaman ise bilmeniz gereken bazı kavramlar mevcuttur. Bu seçenekleri şu şekilde örneklendirmek de mümkündür;

·        Ön Uç – Arka Uç

Ön uç ve arka uç web site geliştirme çalışmalarında kullanılmakta olan popüler terimlerdendir. Ön uç tarayıcı içerisinde görebileceğiniz kısımken arka uç web sitenin görünmeyen kısmı olarak bilinir. İstemci ön uca denirken arka uca ise sunucu tarafı denir.  Ayrıca ön uç HTML ve CSS dosyaları ile hazırlanan, web tasarımcıların kullandığı parçadır. Hazırlanan bu dosyalar ise istemci kısmında tarayıcıya yüklenmektedir. Arka uç sitenin görüntülenmesi sırasında arka planda çalışmakta olan sunucuları yansıtmaktadır. Uygulamalar ve veritabanları da bu kategori içerisindedir. Bir kişi web tasarımı öğrenmek istediği zaman arka uç konusunda detaylı bir bilgi edinmek zorunda da değildir. Ancak arka uç nedir, ne amaçla kullanılır bilmek gerekir. Yani kısaca bilgi sahibi olmanız sizin faydanıza olacaktır.

Sunucular web sitenin dosyalarının saklandığı, sürekli olarak çalışmakta olan, kesintisiz internet bağlantısının olduğu bilgisayarlar olarak tanımlanır. Çalışmaları sırasında Linux ve Windows işletim sistemi kullanılmaktadır. Sunucuda yer alan uygulamanın işlevi için ise PHP, Python, C gibi programlama dilleri tercih edilmektedir. Örnek vermek gerekirse WordPress için destekleme dili PHP olarak geçmektedir.

·        HTML

HTML kavramının Türkçe karşılığı Köprü Metni Biçimlendirme Dili olarak bilinmektedir. Tüm sitelerin temelinde yer alan HTML, yeni başlayanlar için de en kolay kodlama yöntemidir. Bir sitenin yapısını oluşturmak istediğiniz zaman yardımcı iskelet görevi görmektedir. Sizler bu dili öğrendiğiniz zaman da HTML sizin için daha anlamlı bir hale gelebilmektedir.

HTML web sayfanıza görsellerin, paragrafların, görsellerin yerleşmesini sağlamaktadır. Sitenin görüntülenmesi amacıyla da yüklenmektedir. Sizlere sitenizin nasıl görüneceği konusunda yönergeler de sunmaktadır. Özellikle H1-H2-H3 gibi etiketleri kullanarak içeriklerin nasıl hazırlanacağını bilmeniz gerekir. Sizler HTML öğrenmek istediğiniz zaman siteniz içerisinde kontrol sahibi de olabilirsiniz. Hatta sitenizle ilgili çok daha derin bir bilgi sahibi olabilirsiniz.

·        CSS

CSS yani “Basamaklı Stil Sayfaları”, tarayıcıların web sayfası için HTML nasıl biçimlendirilir bunu gösteren kod olarak tanımlanır. HTML içeriğinin daha çekici bir hale gelmesi, bu şekilde biçimlendirilmesi amacıyla kullanılmaktadır. Sizler ön uç tarafında uzman hale gelmek istiyorsanız o zaman CSS becerilerinizin fazla olması gerekir. CSS nasıl çalışır merak ediyorsanız birçok konuda da başarılı olursunuz. Sitenizi benzersiz bir şekilde hazırlayıp, var olan şablonları size özel hale getirebilirsiniz.

CSS kullanımı ile özel yazı tipleri ekleyebilirsiniz. Yazıların renklerini değiştirebilirsiniz. Sitenizin öğelerini görmek istediğiniz gibi düzenlemeniz de mümkündür. Sayfa içerisinde yer alan en yüksek etkiyi alabilmeniz de söz konusudur. Ancak bu aşamada CSS nedir, kodları nelerdir gibi konularda da kapsamlı bilgi sahibi olmanız gerekmektedir.

·        JavaScript

Tasarımın sadece HTML ve CSS kullanımı ile kodlanması mümkündür. Bunun yanında sizler JavaScript kullandığınız zaman daha avantajlı konumda olursunuz. Bunun nedeni ise JavaScript kullanımının sitenizde yer alan öğeleri daha etkileşimli hale getirmesidir. Örnek olarak sizler ziyaretçinizi sayfanın üst kısmından başa dön butonu ile ana sayfaya iletebilirsiniz. Ziyaretçinizin konumuna uygun olacak şekilde hava durumu hakkında bilgi verebilirsiniz.

JavaScript tarayıcı üzerinden çalışacak şekilde tasarlanan bir programlama dili olarak bilinir. Çerçeveleri sıfırdan başlamanın yerine önceden hazırlanan yapılarla tasarım oluşturmanızı sağlamaktadır. Sizler bu gibi temel bilgileri öğrendiğiniz zaman JavaScript çerçevelerini de öğrenebilirsiniz.

·        Sürüm Kontrol Sistemi

Hem ön uç hem de arka uç geliştiricilerinin sürüm kontrol sistemleri hakkında bilgi sahibi olması gerekmektedir. Sürüm kontrol sistemler kodda gerçekleşen değişiklikleri takip edebilmenizi sağlamaktadır. Aynı zamanda kod üzerinde bir ya da birden fazla kişinin aynı anda çalışmasını sağlar. Günümüzde kullanılmakta olan en popüler sürüm kontrol sistemi ise Git olarak bilinmektedir.

Sürüm kontrol sistemleri dosyaların pek çok sürümünü kaydetmenizi sağlamaktadır. Böylece kayıtlarınıza sonradan ulaşabilirsiniz. Kullanabileceğiniz en iyi sürüm kontrol sistemleri ise ekiplerin dosyalarını senkronize etmesini sağlar. Böylece herkes güncel dosyalara kolaylıkla erişir. Hatta asıl kaynak da olası risklere karşı korunma altında olur.

·        Web Tasarımı Programları

Günümüzde hemen her tasarımcının kullanmakta olduğu araçlar arasında Abode Photoshop ve Illustrator yer almaktadır. Bu araçlar tasarımın daha dinamik olmasını, web sitelerinin etkileşimli olarak tasarlanmasını kolay hale getirmektedir. Web tasarımı için en çok kullanılan yazılım ise Photoshop olarak bilinir. Sizler sıfırdan web tasarıma başlıyorsanız da o zaman Abode XD, Figma gibi seçenekleri kullanabilirsiniz. Bu seçenekler daha çok web tasarım odaklı olarak kullanılmaktadır. Aynı zamanda kullanımı daha kolaydır.

Sizler bir web sitesi oluşturacağınız zaman kullanmanız gereken en önemli araçlardan birisi kod düzenleyicidir. Karşınıza çıkacak en başarılı kod düzenleyici ise VS Code olarak geçer. VS Code, diğer seçeneklere göre daha basittir. Hızlı ve ücretsiz olmasının yanında kullanımı da kolaydır. Var olan temalar, uzantılar kullanılarak özgün hale getirilmesi mümkündür.

·        Görsel Tasarım

Görsel tasarım konusunda renkler, şekiller ve dokular için bileşenler kullanılır. Bu sırada amaçlanan etkinin ortaya çıkması için de bazı kuralların bilinmesi gerekir. Bazı tasarım ilkelerinin, temel kavramların bilinmesi önem arz eder. Örnek vermek gerekirse görsel tasarım konusunda kare ve dikdörtgenler kullanılır.

Sizler iletmek istediğiniz mesajın değerini azaltmamak adına aşırı uyarıcı siteler hazırlamaktan da kaçınmalısınız. Bunun için grafikleriniz, metinleriniz ve renkleriniz arasında bir denge sağlamalısınız. Görsellerinizi yüksek çözünürlüklü olarak hazırlamalısınız. Renkleri, şekilleri bir araya getirerek ziyaretçilerinizin daha rahat odaklanmasını sağlayabilirsiniz. Bu da sitenizin akışının daha konforlu olması anlamına gelecektir.

Siteniz için hazırlayacağınız tasarımların göz yormaması da önemli. Bu sayede renk teorisi konusunda geniş çaplı bilgi sahibi olabilirsiniz. Renklerinizin tamamlayıcı olması, zıt renklerin kullanılması gibi konularda bilgi edinebilirsiniz. Renk kuralları ile daha modern ve estetik web tasarımları yapabilirsiniz.

·        UX

UX, kullanıcı deneyimi anlamına gelmektedir. Kullanıcıların bakış açısını kullanarak tasarımlarınızı hazırlamanız gibi bir anlam taşır. Yani sitenizin tasarımını yaparken aklınızda kullanıcıların bakış açısı da olmalıdır. Bu oldukça önemli bir detay olarak geçer. Çünkü kullanıcı deneyimin ihmal edilmesi, sitenizin arama motoru sıralamalarının düşmesine yol açmaktadır. Kullanıcıların ihtiyaçlarına uyumlu bir web site tasarımı ise daha rahat odaklanmayı, hedef kitle tarafından görünür hale gelmeyi sağlamaktadır. Bunun gerçek olması için ise site etkileşiminin izlenmesi önemli bir detaydır. Dikkat etmeniz gereken ise kitleniz konusunda bilgi sahibi olup buna uygun adımlar atmanızdır. Böylece ziyaretçilerinizin isteklerine ve ihtiyaçlarına uygun bir web site tasarımı hazırlamış olursunuz.