Web Tasarım Rehberi
Web tasarım, firmaların yada şahısların belirli amaçları doğrultusunda internet ortamında onları temsil etmesi için hazırlanan tasarımlardır.
Web tasarım dinamik yapısı olan, hareketli görselleri ve tıklanabilir butonları olan interaktif web sayfalarının arka planından ziyade dış görünüşü ile ilgilenen hizmetler bütünüdür.
Grafik tasarımdan farklı olarak web tasarım içerisinde grafik tasarımı, yazılımı ,HTML CSS ve javascript kodlamaları barındırmaktadır. Web tasarımın etkili olabilmesi için , çalışmalara başlamadan önce belirli analizler ve planlama yapılması gerekmektedir.
Günümüzde birçok kurum ve şahıs kendisini etkili bir şekilde tanıtabilmek, ulaşılabilirliğini arttırmak için web tasarım yaptırmaktadırlar. Web tasarım internet ortamında bir firmanın görünümünü yansıtmaktadır.
Web Tasarım Türleri Nelerdir?
Web tasarım hizmetini kapsamı, süreçleri ve maliyetleri açısından 5 ayrı kategoride ele alabiliriz. Müşterilerimizin en çok sorduğu maliyet ve teslim süreleri konusunda bir açıklık getirmek için web tasarım türlerini ayrı ayrı örnekler ile anlatıyoruz.
01) Kurumsal Web Tasarım
Kurumsal Web Tasarım Nedir?
Kurumsal Web Tasarım hizmeti bir şirketin ya da bir markanın ihtiyaçlarına özel web yazılım, Uİ (Arayüz Tasarımı), UX (Kullanıcı Deneyimi) ve dijital pazarlama çalışmalarını içeren hizmetlerin bütününe denilmektedir. Markaya ve şirkete özel kurumsal web tasarım hizmetleri yaklaşık 4-6 hafta arası sürmektedir. Kurumsal web tasarımlar genellikle çoklu dil alt yapısında hazırlanmaktadır ve şirketinin ihtiyaçlarına uygun yazılım çözümlerini barındırmaktadır.
02) Hazır Web Tasarım
Hazır Web Tasarım Nedir?
Hazır web tasarım belirli web tasarım şablonları üzerinden uygun tasarımın belirlenerek şirketin ihtiyaçları doğrultusunda hazırlanması sürecidir. Hazır web tasarım hizmetlerinde çizim ve kodlama süreçleri olmadığı için maliyetleri kurumsal web tasarıma göre çok daha uygundur.
03) Mikro Site Web Tasarım
Mikro Site Web Tasarım Nedir?
Mikro ya da micro web site olarak adlandırılan hizmetler belirli bir ürün ya da hizmet odaklı yapılan görsel ağırlıklı web tasarım projeleridir. Mikro web site tasarım projeleri şirketin ihtiyaçları doğrultusunda projelendirilmekte ve fiyatlandırılmaktadır. Örnek olarak Üstün Yapı İnşaat için tasarladığımız atriumterrace.com bir micro proje web sitesidir. Bu projede Atrium Terrace’nin özellikleri, lokasyonu, kat planları, görsellerine müşteri dönüşümlerine odaklanılmıştır. Micro web tasarım projeleri de kurumsal web tasarım projeleri gibi genellikle çoklu dil alt yapısında hazırlanmaktadır ve şirketinin ihtiyaçlarına uygun yazılım çözümlerini barındırmaktadır.
04) Hazır Web Tasarım Kurulumu
Hazır Web Tasarım Kurulumu Nedir?
Hazır web tasarım kurulumları en uygun maliyetli web tasarım çözümleridir. Bu hizmette sadece şirkete domain, hosting ve web site kurulum hizmetleri verilmektedir. Bu hizmetler 1 gün içerisinde tamamlanmaktadır. Bu hizmeti satın alan şirketler web site yönetim paneli üzerinden web site içeriklerini ve güncellemelerini kendi bünyelerinde tamamlamaktadır. Hazır web tasarım kurulum fiyatları, alan adı, hosting ve kurulum ücretleri dahil 990 TL kdv dahildir.
05) E-ticaret Web Sitesi Tasarımı
E-ticaret Web Sitesi Tasarımı Nedir?
E-ticaret web sitesi tasarımları eticaret alt yapılarında hazır ya da konsept tasarım kullanmak istemeyen firmalar için en iyi çözümü sunmak için verilmektedir. Şirketin ihtiyaçları ve kullanılacak eticaret yazılımının özellikleri doğrultusunda web tasarım çizim ve kodlama hizmetleri verilmektedir.
E-ticaret web tasarım projeleri özel tasarım hizmetleridir. Şirketin ve markanın ihtiyaçları doğrultusunda proje süresi ve fiyatları değişmektedir. E-ticaret web site tasarımlarında, arama kısımları, sepet sayfaları, ödeme adımları, üyelik sayfaları, ürün detay ve kategori sayfaları firmanın ihtiyaçları doğrultusunda responsive (Tüm Cihazlara Uyumlu) tararım olarak arayüzleri hazırlanır ve kodlama süreci tamamlanır.
Web Tasarımda Kullanılan Program ve Kodlama Dilleri
01) Adobe Photoshop
Adobe photoshop uzun yıllardır hem grafik tasarım hem de web tasarım hizmetlerinde kullanılan en yaygın programdır. Web tasarım ve kodlama sürecinden önce kurumsal web tasarım ajansları web sitenin arayüz tasarımlarını Photoshop üzerinde çizerek müşteriye sunum hazırlamaktadır. Ancak günümüzde artan maliyetler ve çok yüksek rekabet olması nedeni ile küçük ve orta ölçekli işletmeler düşük maliyetleri olması sebebiyle hazır konsept tasarımları (Daha Önceden Çizilip Kodlanmış Tasarımlar) seçmektedir.
02) Adobe XD
Adobe XD de aynı Photoshop gibi web tasarım, interaktif tasarım sunumları ve mobil uygulama arayüz tasarımları (UI Design) hazırlanmasında özellikle son yıllarda yaygın bir kullanıma sahip olmuştur.
03) HTML
HTML (Hyper Text Markup Language) yani “Köprü Metin İşaretleme Dili” anlamındadır. HTML ile bir web tasarımın gövdesi ve iskeleti oluşturulur. Bunu insanın iskelet sistemi ya da binanın kaba inşaatı olarak düşünebilirsiniz. Çizilen web tasarımların Google Chrome, Edge, Mozilla Firefox gibi modern web tarayıcılarında görüntülenebilir olması için HTML işaretleme diline sahip olması gerekir. HTML’in en son ve geçerli sürümü olan HTML5 kullanılmaktadır.
04) CSS
CSS (Cascading Style Sheets ) Yani Basamaklı Stil Dosyasıdır. CSS hazırlanan HTML belgesini stillendirmek için kullanılan stil dilidir. CSS’i de şu şekilde düşünebilirsiniz iskelet sistemi HTML ise kas yapısı, göz rengi, saç şeklini oluşturan kodlar olarak. HTML olarak kodlanan belge CSS ile renklendirilir, boyutlandırılır ve photoshopta çizilen arayüz tasarımının görünümüne kavuşturulur.
05) Javascript
Javascript ise web tasarıma dinamiklik ve interaktivite kazandırmak için kullanılmaktadır. Slide üzerindeki resimlerin geçişleri, tıklayınca açılan menüler, fırlayan reklam pop up ları gibi düşünebilirsiniz. Javascript hareket ve dinamiklik kazandırır. Günümüzün tüm modern web tasarımları HTML, CSS ve Javascript ile oluşturulmaktadır.
Web Tasarımı Neden Önemlidir?
Her işte olduğu gibi web tasarımınız da alanında uzman kişiler tarafından yapıldığında en fazla verimi elde edebilirsiniz. Web tasarımı, içerisinde bir çok detay ve uzmanlık alanı barındırmaktadır.
- Profesyonel bir web tasarım ile marka bilinirliğiniz artırabilirsiniz.
- Kullanıcı deneyimi açısından başarı bir web site size müşteri kazandıracaktır.
- Hızlı açılan ve SEO uyumlu web tasarımlar Google’da üst sıralara çıkabilmek için en önemli süreçlerdir.
- Profesyonel bir web tasarımı ile müşterilerinizin satın almasını kolaylaştırırsınız.
- Kötü tasarlanmış bir web sitesi size müşteri ve para kaybettirir.
- Özellikle küçük işletmeler uygun fiyatlı oldukları için çok ucuza web tasarım tercih ediyorlar ama kaybettikleri müşteri ve kazançların farkında olmuyorlar.
Firmaların kendilerini etkili bir şekilde tanıtmaları ve internet ortamında da prestij sahibi olabilmeleri için öncelikle iyi bir web tasarıma ihtiyaçları vardır.
Daha fazla müşteriye ve kullanıcıya ulaşabilmek için kaliteli web tasarım yaptırmalısınız. İnternet ortamında artan rekabet koşulları ile sadece web sitenizin olması yeterli olmuyor. İyi bir strateji ile hazırlanmış profesyonel bir web tasarım ile rekabetin galibi olabilirsiniz.
Bu yüzden artık günümüzde firmalar kurumsal web site tasarım faaliyetleri için ciddi yatırımlar yapmaktadırlar.
Web Tasarımın Bize Göre Olmazsa Olmazları
Yukarıdaki resimde de analtıldığı gibi web tasarım, sade, etkileyici, ulaşılabilir (Seo Dostu) , özgün yani markayı yansıtan, kullanıcı dostu ve işlevsel olması gerekir.
Google Bunları Çok Sever.
- %100 mobil uyumlu ve hızlı açılan web site tasarımları,
- Hızlı açılan ve kullanıcı dostu tasarımlar,
- Özgün içerik ve iyi bir görsel tasarıma sahip olan web tasarımları,
- Farklı, sade ve özgün tasarımları,
- SEO dostu ve iyi bir içerik pazarlamasına sahip olan web site tasarımlarını Google çok sever ve daha üst sıralara çıkartır.
- İyi bir web tasarımın en önemli amacı satışları ve dönüşüm oranları olmalıdır. CTA (Call to Action) "harakete geçirici mesaj" alanları profesyonel bir şekilde kurgulanalı ve geliştirilmelidir.
Web Tasarım Fiyatları
Genellikle küçük işletmelerin en çok tercih ettiği hazır şablon web tasarım fiyatlarından ve kurumsal şirketlerin ve markaların tercih ettiği kurumsal web tasarım fiyatlarından bahsedelim.
Hazır Şablon Web Tasarım Fiyatları
Web tasarım fiyatları projeden projeye ve tasarım süreçlerinin uzunluğuna göre değişmektedir. Hazır şablon ile yapılan web tasarım fiyatları 1000 TL ile 4000 TL arası olabilmektedir. Hazır şablon web tasarımlar özellikle uygun bütçeli olması nedeni ile küçük işletmeler tarafından en çok tercih edilen web tasarımlardır.
Hazır Şablon Web Tasarımların Avantajları
- Web tasarım hizmetini satın almadan önce farklı tasarım seçenekleri arasından beğendinizi seçmenize olanaktanır
- Hazır şablon web tasarımlar istediğiniz şekilde küçük bütçeli ek maliyetler ile özelleştirilebilir.
- Hazır şablon web site tasarımları uygun bütçeli ve hızlı tamamlanan hizmetlerdir.
- Hazır şablon projelerinde sitelerin hız testini ve mobil uyumluluk testlerini hizmeti satın almadan kontrol edebilirsiniz.
- Güncellenmesi kolay ve hızlı renk değişikliği sunar.
- Başlangıçta küçük işletmeler için çok idealdir.
Kurumsal Web Tasarım Fiyatları
Kurumsal web tasarım süreçleri profesyonel UI (User Interface) Designer ve UX (User Experience) Designer tarafından oluşturulmaktadır. Şirketlere ve markalara özel tasarlanan tasarım ve kodlama süreçleri 3-6 hafta süreçler aldığı için fiyat aralığı hazır şablon web tasarımlara göre daha yüksektir.
Kurumsal web tasarım fiyatları genellikle 10.000TL ve 25.000 TL arası deişmektedir. Kurumsal web tasarım süreçleri yazılım ve özel entegrasyon süreçlerini de kapsadığı için bu maliyetler atabilmektedir.
- 2 Haftalık Süreçler → 10.000 TL
- 3 Haftalık Süreçler → 15.000 - 20.000 TL
- 4 - 6 haftalık süreçler → 25.000TL üzeri olarak fiyatlandırılmaktadır.
- Özel yazılım ve büyük çaplı projeler için fiyatlar daha da yüksek olmaktadır.
Kurumsal Web Tasarımın Avantajları
- Markanıza ve şirketinize özel hazırlanan kurumsal web tasarımlar sadece sizin için tasarlanmaktadır.
- Kurumsal bir marka oluşturmak için en iyi çözüm sunarlar.
- Yüksek kaliteli kullanıcı deneyimi sayesinde uzun yıllar kullanıcılarını tatmin eder.
- Her zaman geliştirilmeye açık tasarım ve yazılım alt yapısına sahiptirler.
- İstediğiniz takdirde size özel paylaşımsız sunucu ve hosting çözümleri sunulabilir.
- En az 5 yıl profesyonel bir web tasarıma sahip olmak istiyorsanız şirketinize ve markanıza kazandıracağı birçok avantajı ile ödediğiniz parayı kısa vadelerde size geri kazandıracaktır.
- Büyümekte olan şirketlerin ve markaların tercihi olan kurumsal web tasarım ile marka algısını en iyi şekilde yansıtacak.
- Kurumsal web site tasarımı ile sizde müşterilerinizin ve rakiplerinizin wooow diyecekleri bir siteye sahip olacaksınız.
Web Tasarım Süreçleri
Bu sayfada web tasarım süreçleri kısmında sadece arayüz tasarımının çizim ve kodlama kısmından bahsedeceğiz. Yazılım, yönetim paneli, dijital pazarlama süreçlerini kapsayan kurumsal web tasarım yazımızı da okuyabilirsiniz.
01) Müşteri briefi ve Ön Araştırma
Bu süreç ilk ve en önemli süreçtir. Web tasarım hizmeti sunulacak müşterinin beklentileri, hizmet kapsamı, güçlü ve ön plana çıkarmak istediği noktaları çok iyi belirlenmelidir.
Müşterinizin verdiği brief eksik olduğu takdirde Arayüz tasarımcısı müşterinin tam olarak istediği tasarımı çizmesi ve uygun içerikleri yerleştirmesi zor olacaktır. Eğer müşterinizin eksik brief ya da açıklama verdiğini düşünüyor iseniz web tasarım çalışmalarına başlamadan önce brief üzerine tekrar bir toplantı talep etmeniz gereklidir.
02) Rakip Analizi ve İçerik Planlaması
Müşteriden alınan kapsamlı brief ile web tasarımcı ve proje yöneticileri tasarım ve içerik planlaması çalışmalarına başlamadan önce kapsamlı rakip analizi ve sektör analizi yapması gereklidir.
Eğer sektöre, hizmetlere, ürünlere ve müşterinizin hedef kitlesine detaylı bir giriş yaparsanız tasarım çalışmalarının müşterinin beklentisini karşılaması çok daha muhtemel olacaktır.
İçerik planlaması web tasarım süreçlerini ve dijital pazarlama stratejilerinin en önemli süreçlerinden biridir. Web sayfası üzerinde her içerik, görsel ve açılan her sayfa içerik pazarlamasının bir sonucudur. İyi bir içerik planı aynı zamanda Arama motoru optimizasyonu çalışmalarının da temelini oluşturmaktadır.
içerik planı oluştururken müşterinizin güçlü yönlerini, anasayfa da ön plana çıkarmak istediği bilgileri, hizmetleri ve diğer unsurları göz ele almalısınız.
03) Eskiz ve Çizim Aşaması
Eskiz çalışmasını ana sayfanın taslak hali olarak ta düşünebilirsiniz. Eskiz İngilizce de wireframe olarak adlandırılan eskiz web tasarım çizimleri öncesinde size hız ve esneklik katmaktadır. Yapılan eskizler üzerinden müşterinize sunum yapabilir ve planlarınızın gidişatı hakkında geri bildirim alabilirsiniz.
Eskiz çalışmalarını tamamladıktan sonra Anasayfa çizim çalışmasına başlıyoruz. Taslak olarak hazır çizimlerin görselleştirilmesi ve gerçek bir web sayfası görünümüne kavuşmasını çizim aşamasında sağlıyoruz. Web tasarım çizimlerimizi yukarıda saydığımız Adobe Photoshop ve Adobe XD programları ile tasarlamaktayız.
Bu süreçte ilk etapta kullanılacak olan görselleri seçmeniz tasarım süreçlerinizi hızlandıracaktır. Görselleri lisanslı bir şekilde freepik, shutterstock gibi platformlardan satın almanız önemlidir. Google üzerinden herhangi bir görseli kullanırsanız ileri de telif hakkı sorunları ile karşılaşabilirsiniz.
03) Tasarım Sunumu ve Onay Süreci
Çizilen Anasayfa ve iç sayfa tasarımları müşteriye sunulur. Müşterinin revize talepleri doğrultusunda tasarım düzenlenir ve müşteri onayı için tekrar sunulur. Müşteri onayını aldıktan sonra web tasarım artık kodlama için hazır hale gelmiştir.
04) Web Tasarımı Kodlama
Web tasarım HTML, CSS ve javascript olarak tüm cihazlara uyumlu ve w3c standartlarına uygun bir şekilde kodlanır. Kodlanan tasarım çalışır bir şekilde müşteriye sunulur. Web tasarım bitmiş hali ile onaylandıktan sonra CMS (İçerik Yönetim Sistemi) entegrasyonu için back-end developer a teslim edilir. Bundan sonraki süreçleri ise entegrasyon, optimizasyon ve yayınlama süreçleridir. Web site müşterinin alan adına tahsis edilen hosting üzerinde kurulumu yapılır ve web sayfası yayına alınır.
Web Tasarımda Yaygın Hatalar Nelerdir?
- Çok karmaşık ve gereksiz görsel kullanımı: Sadelikten uzak, boşluklardan yoksun sıkışıp kalmış bir web tasarım kullanıcının aradığı şeye odaklanmasını engeller ve bu durumdan sıkılan kullanıcı siteyi hızlı bir şekilde terk eder.
- Çok büyük ve çok küçük fontların kullanımı: Web sitesi tasarımlarında çok aşırı büyük ve yersiz kullanılan tipografiler tasarımın dengesini bozacaktır.
- Çirkin ve amatör görüntüler; Amatörce çekilen fotoğraflar ve kalitesiz resimler web sitenizin kalitesini ve imajını sarsacaktır.
- Harekete geçirici CTA(Call to Action) alanlarının eksikliği ya da karmaşık olması, Müşterilerinizin geri dönüşlerini ve satın alma süreçlerini hızlandırmak için harekete geçirici alanların ve bannerların iyi bir tasarıma ve kullanıcı deneyimine sahip olması gerekir.
- Masaüstü görünüme haddinden fazla odaklanarak, mobil görünümü kötü bir şekilde tamamlamak. Günümüzde artık kullanıcıların %80’i mobil cihazlardan web siteleri ziyaret ettikleri için mobil görünümün kötü bir UX’e sahip olması bütün sonuçları değiştirecektir.
- Tasarım çiziminde kullanılan lorem ipsum yazılarının siteyi açtıktan sonra unutulması. Sitenizdeki emaneten kullanılan yazıların unutulması müşterinize gözünde web sitenizin kullanılmayan arka bahçeniz kadar değersiz olduğunu söyleyecektir.
- Tasarımcının anasayfada her hizmete ve ürüne yer verme isteği ilk açılış sayfasının sizi tanımaktan uzak içerik karmaşasına çevirebilir.
- Anasayfa tasarımının aşırı uzun tutulması ve AB testlerinin hiç bir zaman yapılmaması. Çok uzun bir anasayfa tasarımı yaptınız ama hiç bir zaman kullanıcının sayfayı aşağıya doğru kaydırıp ana sayfada diğer öğeleri görüntüleyip görüntülediğine bakmadınız. Belkide hiçbir zaman görüntülenmeyen içerikler için anasayfanızı karmaşık ve yavaş açılan bir konuma soktuğunuzun farkına varmayacaksınız.
Web Tasarımınızın Hızını Test edin
Web sitenizin hızını ve mobil uyumluluğunu Google PageSpeed İnsights kullanarak test edin. Web site açılış hızları Google başta olmak üzere tüm arama motorlarının dikkate aldığı en önemli sıralama koşullarından biridir.
Web Tasarımın Hızını Düşüren Web Tasarımcı Hataları
- Çizilen web tasarım şablonlarının kodlanması sırasında aşırı iç içe HTML öğesi kullanmak. Çok fazla derinlikte HTML öğesi iç içe kullanıldığında web tarayıcısı siteyi derlemek için daha fazla performans harcayacak ve bu da sitenin açılış hızını önemli bir şekilde etkileyecektir.
- Hatalı ve gereksiz CSS kullanımı; Hatalı ve gereksiz CSS kullanımı en çok yapılan hatalardan biridir. Özellikle Sass ile CSS yazımına yeni başlayan ve belli başlı CSS kurallarına hakim olmayan web tasarımcılar gereksiz ve tekrarlı CSS kodları yazarak dosya boyutunun şişmesine neden olmaktadır.
- Resim dosyalarının optimize edilmemesi: Malesef çözümü çok kolay olmasına rağmen birçok kurumsal web tasarım ajansı bile bazen resim optimizasyonunu atlayabiliyor. İlk açılış hızını ve total yüklenme sürelerini olumsuz etkileyen bu hatanın çözümü çok basit.
- Resimlerin ve google harita gibi öğelerin Lazyload ile çağrılmaması: Bu şu anlama geliyor web siteniz ilk açılışta büyük dosyalar tarafından çok yavaşlıyor. Halbuki bu dosyalar sayfa yüklendikten hemen sonra çağırılırsa açılış hızlarınız büyük ölçüde artacaktır.
- Javascript hataları: Javascript hataları ve bazen farkında olmadan yanlış yazılan kodlar sayfanın çok geç açılmasına hatta açılış döngüsüne bile girmesine sebep olabilir.
Web tasarım nedir yazımızda sizler için web tasarım hakkında en çok merak edilen ve bilinmesi değerli konuları açıkladık. Şirketinizi ve markanızı ileriye taşıyacak profesyonel bir tasarım için bize ulaşınız.