Web Tasarımı İçin Ne Bilmek Gerekir?
Web Tasarımı yapmak için bilinmesi gereken tüm işlemlerin temel listesi şu şekildedir:
- Temel Web Teknolojileri
- Tasarım İlkeleri
- Renk teorisi
- Tipografi
- Hizalama
- Boşluk kullanımı
- Görsel hiyerarşi
- Kullanıcı Deneyimi (UX)
- Kullanıcı Arayüzü Tasarımı (UI)
- Responsive Tasarım
- Grafik Tasarım Araçları
- Adobe Photoshop
- Adobe Illustrator
- Sketch
- Figma
- Canva
- Web Geliştirme Araçları
- Bootstrap
- Tailwind
- Jquery
- React.js
- SEO Temelleri
- SEO Nasıl yapılır?
- SEO İçin hangi programlar kullanılır?
- Erişilebilirlik
- Web Performansı ve Optimizasyon
- Diğer Web Tasarım Uygulamaları
Bu liste bir web tasarımcının bilmesi gereken her detayı içermektedir. Şimdi bu maddelerin hepsine kısa birer açıklama yapalım:
- Temel Web Teknolojileri
Temel web teknolojileri bir web sitesi oluşturmak için gereken temel yazılım dilleridir. Son maddede bahsedeceğimiz Wordpress, Wix gibi programlar bu yazılım dillerinin yerini tutabilir ancak tamamen kişiselleştirilmiş ve sıfırdan size özel yapılmış bir web tasarımı istiyorsanız bu tasarımın temel yapısını oluşturabilmek için HTML, oluşturduğunuz yapıya stil özellikleri ekleyebilmek için CSS, bu web tasarımını dinamik ve kullanıcı etkileşimli bir hale getirebilmek için ise Javascript dillerine hakim olmanız gerekmektedir. - Tasarım İlkeleri
İlk maddede stil özelliklerinden ve CSS’ten bahsettik. Bunun yanı sıra bir de web sitenizde kullanmanız gereken görseller var. Bu görselleri ve web tasarımınızın genel stil özelliklerini estetik algılarına ve kullanıcı deneyimine uygun bir şekilde tasarlayabilmek için bahsettiğimiz tasarım ilkelerine hakim olmanız gerekmektedir. - Kullanıcı Deneyimi (UX)
Kullanıcı deneyimi sadece görsel ile değil aynı zamanda işlevsellikle de alakalıdır. Sitenize ekleyeceğiniz formlar, butonlar ve diğer tüm elementler kullanıcı deneyimini en üst düzeye çıkarmak için tasarlanmış ve CSS ile düzenlemesi yapılmış olmalıdır. - Kullanıcı Arayüzü Tasarımı (UI)
Bu ve 3. madde birbirleriyle benzerlik gösteren, hatta kardeş diyebileceğimiz maddelerdir. Bu iki maddede güzel işler çıkarılması sitenizin çok fazla kullanılmasını sağlayacağı gibi, sitenizin SEO işlemlerinde çok daha hızlı ilerlemesini sağlayacak ve hatta bu site üzerinden yapacağınız satışlarınızı dahi arttırabilecektir. Bu sebeple ziyaretçilerin ve müşterilerin kullanacağı arayüz tasarımı tamamen kullanıcı deneyimine yönelik ve ilkelerine uygun olarak tasarlanmalıdır - Responsive Tasarım
Responsive tasarım web sitenizin tüm cihazlarla uyumlu olmasını, farklı ekran boyutlarında sorunsuz çalışmasını sağlamaktır. Günümüzde internet kullanıcılarının %70’inden fazlası mobil cihazları tercih etmektedir. Bu sebeple web tasarımı yaparken tasarımın akıllı telefonlarda, tabletlerde, dizüstü bilgisayarlarda ve masaüstü bilgisayarlarda doğru bir şekilde çalıştığından emin olmanız gerekmektedir. - Grafik Tasarım Araçları
1- Adobe Photoshop
Adobe Photoshop web tasarımında sitenize özel görsel tasarımlar yapabilmenize imkan veren bir uygulamadır. Bu uygulamayı kullanmayı bilmek size bir çok avantaj sağlayacaktır.
Google özgünlüğe çok önem verir. Bu sebeple stok fotoğraflar yerine özel tasarım görseller kullanmak web sitenizi mutlaka öne çıkaracaktır.
Kurumsal web tasarımlarda müşteriler mutlaka özelleştirilmiş görseller ister, bu görselleri web tasarımı yapan kişinin tasarlaması hem daha uyumlu çalışmalar çıkaracak, hem de daha yüksek kazançlar elde edilmesini sağlayacaktır.
2- Adobe Illustrator
Bu program da Adobe’nin farklı bir görsel tasarım programıdır. Photoshop ile aynı amaca hizmet etse de bu programda üretebileceğiniz görsel türü photoshop’tan çok farklıdır. Web tasarımınızın stiline ve amacına göre Adobe Illustrator’ü de tercih edebilirsiniz.
3-Sketch
Sketch programı web tasarımında kodlamaya başlamadan önce tasarımı oluşturmak için kullanılmaktadır. Bu tarz programlarda öncelikle tasarım oluşturulur, daha sonra bu tasarım kodlara dökülür. Bu programların amacı kodlama sırasında vakit kazanmaktır.
4-Figma
Figma’da Sketch ile aynı amaca hizmet etmektedir. Web tasarımında tasarımı önceden oluşturmaya yönelik araçlara sahiptir. Tasarımı oluşturduktan sonra gerekli düzenlemeleri yapabilir veya müşterinize sunup onaylattıktan sonra kodlara dökebilirsiniz.
5-Canva
Canva diğer görsel/grafik tasarım programlarına kıyasla kullanımı çok daha rahat olan bir programdır. Hem web tasarım için önceden tasarlama, hem photoshop hem de illüstrasyon görseller üretme yeteneğine sahiptir fakat bunların hepsini içermesinin ve kullanımının daha kolay olmasının da getirdiği bazı kısıtlamalar mevcuttur. Genel anlamıyla tüm alanlarda size yardımcı olabilecek bir programdır ancak alana özel üretilen programlara göre daha az yeteneğe sahiptir. - SEO Temelleri
SEO bir web sitesinin olmazsa olmaz işlemlerinden birisidir. Kısaca bahsetmek gerekirse web sitesini arama motoru optimizasyonu işlemleriyle ön plana çıkarma, arama sonuçları sıralamasında daha ön sıralarda yer almasını sağlama işlemidir. Detaylı anlatım için ‘seo nasıl yapılır?’ yazımızı inceleyebilirsiniz. - Erişilebilirlik
Günümüzde artık çoğumuzun farkında olduğu bir durum, hepimiz birer engelli adayıyız. Erişilebilirlik maddesi ile kasttettiğimiz durum ise, görme engellilerin de interneti diğer insanlar kadar rahat kullanabilmesini sağlamak amacıyla yapılan kodlama işlemidir. Bu işlemlerin nasıl yapılacağına hakim olmak web sitenizde size bir çok avantaj sağlayacaktır. - Web Performansı ve Optimizasyon
Bu madde dolaylı yoldan SEO ile ilgili bir maddedir. Web sitenizin performansını, çalışma hızını arttırmak web sitenizin kullanımını kolaylaştıracak ve web tasarımını yaptığınız sitenin ön plana çıkmasını sağlayacaktır. - Diğer Web Tasarım Uygulamaları
1- Wordpress
Günümüzde internette aktif olan web sitelerinin neredeyse yarısı Wordpress kullanılarak tasarlanmıştır. Wordpress kodlama bilgisine sahip olmadan web sitesi tasarlayabilmenize imkan sağlayan bir uygulamadır. Elbette bu uygulamanın kişiye özel kodlanmış web tasarımlara göre bazı eksi yanları da mevcuttur.
2- Wix
Wix ve benzeri diğer uygulamalar wordpress kadar kullanımda olmasa da Wordpress ile aynı amaca hizmet eden, kodlama bilgisi olmadan kendi web tasarımınızı oluşturabilmenizi sağlayan uygulamalardır.
