Web Tasarım: bir firmanın, ürünün, hizmetin markasını ve bilgilerini yansıtmak için kullanıcı deneyimli web siteleri ve sayfaların oluşturulmasıdır. İster bir web sitesi, ister mobil uygulama tasarlıyor olun, ister bir web sayfasındaki içeriğin bakımını yapıyor olun, görünüm ve tasarım hayati unsurlar olarak birleştirilir.
Web Tasarım Nedir?
Web tasarım kısaca firmanızın online dükkanı diye adlandırabiliriz. Çünkü herkesin elinde artık akıllı telefonlar ve tabletler var. Bilgisayar kullanımı da çok yaygın olarak devam etmektedir. Artık herkes bir hizmet aradığı zaman ayda bir ürün aradığı zaman internette araştırma yapıyor. Gelin internet sitesinin ne kadar önemli olduğu aşağıdaki raporda birlikte görelim.
İnternet Kullanım oranları;
İnternet kullananların oranı %85,0‘e ulaştı. İnternet kullanım oranı; 16-74 yaş grubundaki bireylerde 2021 yılında %82,6 iken 2022 yılında %85,0 ulaştı. İnternet kullanım oranı 2022 yılında erkeklerde %89,1 iken kadınlarda ise %80,9 olduğu görüldü. [Kaynak]
Hal böyleyken internet sitesi olmayan firmalar sektörün çok gerisinde kalmaktadır. İnternet sitesi yapan firmalara web tasarım firması denir. Peki web tasarım nasıl yapılır? Web tasarım fiyatları nedir? gibi sorular sorduğunuzu biliyorum. Şimdi bu konuda size detaylı olarak hepsini açıklamaya çalışacağız. Artık sizinde bir websiteniz olmalı. Eğer web siteniz varsa profesyonel bir web sitemiz var mı sorusunu soralım kendimiz. Her konuda detaylı bilgiye sahip olacağınız için bunun kararını siz verebileceksiniz. Bu konuda web sitenizi; Grafik Görsel Tasarım, UX Design (Kullanıcı Deneyimli Tasarım), Kodlama Yapısı ve SEO (Arama Motoru Optimizasyonu) açısından analiz etmemiz için bizden ücretsiz destek alabilirsiniz.
Web Tasarım Nasıl Yapılır?
Web Tasarım bir çok kodlama ve altyapının birlikte kullanılmasıyla oluşur. Bu altyapılar ihtiyaca göre artmakta ve azalmaktadır. Ancak bazı temel bileşenler vardır ki bunları çok site ve projeler kullanmaktadır.
Web sitesi oluştururken kullanılan temel bileşenler;
Html; Hiper Metin İşaretleme Dili web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir.
CSS; Cascading Style Sheets, HTML’e ek olarak metin ve format biçimlendirme(stil ve renklendirme) sağlayan işaretleme dilidir.
Javascript; JavaScript, HTML ve CSS ile birlikte World Wide Web’in temel teknolojilerinden biri olan programlama dilidir. Web sitelerinin %97’sinden fazlası, web sayfası hareketleri için istemci tarafında JavaScript kullanırlar ve kullanılan kodlar genellikle üçüncü taraf kitaplıkları içerir.
Php; Hypertext Preprocessor, internet için üretilmiş, sunucu taraflı, çok geniş kullanımlı, genel amaçlı, içerisine HTML gömülebilen betik ve programlama dilidir. İlk kez 1995 yılında Rasmus Lerdorf tarafından yaratılan PHP’nin geliştirilmesi bugün PHP topluluğu tarafından sürdürülmektedir.
ASP.NET; Microsoft tarafından geliştirilmiş olan bir açık kaynak Web uygulama gelişimi teknolojisidir. Dinamik Web sayfaları, Web uygulamaları ve XML tabanlı Web hizmetleri geliştirilmesine olanak sağlar.
Merak etmeyin bu bilgiler teknik bilgilerdir, detaylı olarak öğrenmenize gerek yok. Ancak öğrenmek isteyenler için kısaca açıklamak istedik. Bu bilgilerin daha detaylı açıklamaları aşağılarda yer almaktadır.
Web sitesi sadece görsel tasarım yapılan grafik işleme programları oluşturulmamaktadır. Çünkü günümüz modern çağında artık siteler dinamik olarak kodlanmaktadır. Yani bir sitenin yönetim paneli de olmaktadır. İsteğe bağlı olarak siteye dil altyapısı da eklenebilmektedir. Örneğin Türkiye ve İngiltere’ye hizmet veriyorsunuz. Müşterileriniz girdiği zaman verdiğiniz hizmeti yada sattığınız ürünü kolayca anlayabilmeleri için kendi dillerinde gösterebilirsiniz. Site dili ve içerikleri hem ön yüzde(front) tarafında, hamde arkaplan panel(backend) tarafında ayrıca listelenebilmektedir. Bu yönetim paneli adlandırılmaktadır. Size ayrıca bir şifreli alan sunulmaktadır. Bu bilgilerle giriş yapıp sitenizi ve içeriklerinizi güncelleyebilmektesiniz.
Web siteleri günümüzde farklı yazılım teknolojileri ve yazılım dillerine göre hazırlanmaktadır.
Web sitenizi güncelletmek istiyorsanız veya yeni yaptıracaksanız, olmazsa olmaz dediğimiz bileşenler nelerdir? Web sitesi oluştururken nelere dikkat edilmelidir? SEO uyumlu web sitesi nasıl yapılır? bu sorularınızın tamına makalemizi okuduğunuzda cevap bulacaksınız. Fakat öncesinde bilmeniz gereken daha önemli bilgiler var. Bu bilgileri de sizlere hemen aktarmaya başlayalım.
Web tasarıma başlamadan önce sitenin amacı, neye hizmet edeceği, sektörü, renkleri, ulaşabileceği max anlık kullanıcı sayısı, veritabanı büyüklüğü vb. bir çok konu var. Bu konulara dikkat edilmeden yada önemsemden başlanırsa baştan yanlış yapılmıştır demektir. Özel yazılım bir proje yazılıyorsa proje analizi, sektör analizi ve algoritması çok iyi çıkarılıdır. Aksi takdirde projede çok büyük sıkıntılar çıkacaktır. Her sektörün bir renk yoğunluğu vardır. Bu sektör renklerine ve uyumlu renklere göre site tasarlanmalı ve kullanıcı deneyimli UI/UX design olarak site tasarımı oluşturulmalıdır. Şimdi size düzenli ve doğru çalışmanın ipuçlarını hemen paylaşacağım.
Tasarıma çalışmaya başlamadan önce aklınızdaki görseli/çalışmayı direk siteye girişerek yapmak doğru değildir. Tasarım çalıştığımız programa (Paint, Photoshop vb.) yada bir boş kâğıda ön çizim çalışması yapmanızı Avmek olarak tavsiye ederiz.
Web Sitesi Yerleşim: Web tasarımı için kullandığınız elementler (tasarım, görsel banner çalışmamız, çizim veya yazılar) belirli bir kompozisyonda ve hiyerarşide olmalıdır. Şirket logosunda kullanılan renkler sitede kullandığımız ana renklerde kullanılmalıdır. Kullandığımız rengin aynı zamanda sektör ile yaptığımız işle uyumlu olması önem arz etmektedir. Bunun en temel sebebi, tasarımınızdaki kararlılık ve uyum ziyaretçilerin gözünde ilk algı olarak ciddi bir pozitif etki yaratmaktadır. Web sitemizdeki bir hizmetimize veya sayfamıza içeriğimize giren bir kullanıcıyı doğru ve doyurucu bir bilgiyle ulaştırmak sitenin bir çok açıdan faydasına olmaktadır. Bu sebepten ötürü SEO kavramı devreye girmektedir. Bu konuda yazımızı okudukça daha detaylı bilgi öğreneceksiniz.
Dikkat ettiyseniz satış sitelerinde genelde turuncu vb. renkler kullanılmaktadır. Web sayfasında kullanacağınız turuncu renk sıcaklık ve güven anlamına gelmektedir. Siteye giren ziyaretçide tetikleyici teşvik edici özelliğe sahiptir. Bu renk uyumlarını ayrı bir konu olarak anlatacağız.
Grafik illüstrasyon çizimler: Web sitenizde logo, iconlar ve hizmet resimlerileri kullanabiliriz. Yerine göre hizmetlerimizi/ürünlerimizi sergilemek için resim kullanırken, yerine göre de çizimlerden oluşan icon’lar kullanırız. Doğru kullanıldığında çok doğru bir seçim olmaktadır. İcon kullandığımız zaman bizim tavsiyemiz olabildiğince küçük çalışılmasıdır. Ancak bunu yaparken responsive ölçülerini de unutmamamız gerekir. Resimlerin bozulmadan net görünebilmesi için doğru boyutlandırma önemlidir. Eğer yapabiliyorsak iconları svg formatında sitemize yüklemek daha doğru olacaktır. Peki resimleri nasıl ekleyeceğiz diye sorduğunuzu biliyorum. Burada bazen png bazende jpg/jpeg resimler tercih ediliyor. Arka plan şeffaf bir resim eklememiz gerekiyorsa png eklemek zorundayız. Resimden tasarruf edeceğiz diye de görüntü kalitemizden ödün veremeyiz. Jpeg/Jpg resimleri mümkün olabildiğince web optimizasyonlu olarak kaydetmeye çalışalım. Daha etkili ve ciddi tasarruf sağlayan bir uzantı ise WebP uzantısıdır. Resimlerimizi bu uzantıya çevirip yüklersek çok ciddi tasarruf etmiş oluruz.
Sitede barındırdığımız materyaller içerikler veya renkler, vereceğiniz mesajı asla arka plana atmamalıdır. Ziyaretçi dikkatini kaybettiğinde veya kafası karıştığında web sitenizden çıkması sadece bir < Geri tuşuna bakar. Bu yüzden sitede kullanılan her şeyin her elementin önemli olduğunu anlamanız gerekir.
Avmek Web Tasarım olarak, web sayfalarını tasarlarken mobil görünümlerde resimleri uygun ölçülerde boyutlanmış resimlerini getiriyoruz. Normalde tek resim ekliyorsunuz, biz bu resimi eklenirken tasarımda kullanacağımız boyutlara göre ölçeklenmiş halini de yüklüyoruz. Daha sonra resimleri çağırırken img srcset yöntemini kullanarak resimlerimizi çağıyoruz. Bu yapı arka planda tarayıcıdan aldığı veriye göre ilk resmin ölçüleri değiştirilmiş şekilde kullanıcıya hızlı şekilde sunan bir yapıda çalışır.
Bir resimin 1366×768 ölçülerinde olan bir bilgisayar ekranına 600 kb olarak geldiğiniz varsayalım. Sayfa yüklenirken kod satırlarının, CSS ve Java kodlarının yüklenmesi zaten yeterince yük oluşturmaktadır. Tarayıcı kodları yorumlayıp html diline çevirip ekrana gösterirken bir de görsel yüklemeye çalışması oldukça zorlayıcı olabilmektedir. Bu sebepten ötürü yukarıda belirttiğimiz gibi resimleri daha doğru uzantılarda ve oranlarda boyutlandırmamız önemlidir.
Sitemizde Kullandığımız Yazı Fontları: Web sitesinde doğru font seçimi oldukça önemlidir. Font hem firmanızı tanıtırken tasarımda çok önemli bir rol oynamaktadır. Font sitenizin görselini, sitenizin SEO’sunu etkileyebilen bir elementtir. Sadece bir font deyip geçmemeniz gerektiğini şu an ciddiye aldınız büyük ihtimalle. Çünkü genellike dahili yada harici fontlar kullanırız. Yada default font kullanırız ve hiç başımız ağrımasın deriz. Google fontlar bu konuda oldukça tercih edilen bir harici fontlardır. Ancak font kullanırken kullanmayacağımız kalınlıklarını yada özelliklerini çağırmamaya çalışalım. Örneğin eğik olamsı yada font-weight: 500 genişlikten yukarını kullanmayacaksak çağırmayalım. Bu bile sitenin yüklenmesine ekstra yük oluşturmaktadır. Çoğu web tarayıcılarında bilinen ve güvenli yazı fontları hızlı yüklenir. Tabi bazı tarayıcılarda bu farklılık gösterebilmektedir.
Web Site İçeriği: Web sitesi içeriği çok önemli ve detaylı bir konudur. Şimdi diyeceksiniz ki her söylediğiniz şeyde çok önemlidir diyorsunuz. Evet haklısınız ancak, bir internet sitesi her açıdan düşünülmüş, doğru parçaların belirli ahenkte kompozisyon oluşturmasıyla ortaya çıkar. Bu kolay bir şey değildir. Ama ne yaptığınızı biliyorsanız neyi yine yaptığınızı biliyorsanız işte bu o zaman hem zevkli hemde kolay olur.
Web siteniz kullandığınız resimlerin ve içeriklerin hizmetlerinizin firmanızın vereceği mesajı destekler nitelikte olmalıdır. Siteye giren ziyaretçileri yormayan güncel altyapılar ile hazırlanmış, responsive (mobil uyumlu) tasarım olarak bilinen yapılarda hiçbir karmaşaya girmeden düzenli bir akışta içerik gösterimi yapılmalıdır.
Size çok önemli bir not aktarmak isterim. Sitenizde, herhangi bir sayfada bulunan içeriğin başlığında yer alan kelime, içerik içerisinde kesinlikle bulunmalıdır. Örneğin; “Avmek Creative Media – Web Tasarım” yazan bir sayfa başlık var. Hiç bir şekilde bu Web Tasarım kelimelerini kullanmadınız ve farklı bir konularda bilgi verdiniz diyelim. İşte burada kötü puan alırız. Google botlarını taramak için siteye gönderdiğinde bu başlık burda ama içerik ne alaka diyecek. Çünkü alakasız içeriktir. İstediğiniz kadar iyi içerik yazın baştan yanlış yapmış oluyorsunuz. Bu konular aslında SEO ile ilgili konular ancak konu dahili içerisinde bilgi vermek gerekeceği için bunu da aktarmamız gerekiyor.
Size çok önemli bir bilgi daha vermek isterim. Ne yaparsanız yapın, ne google ne de kullanıcılar kandırmadan yapmaya çalışın. Çünkü google ziyaretçileri mutlu etmek ister. Girdiklerinde aradıklarını bulabilsinler, sitede çok zaman geçirsinler mümkünse iç linkler ile site içerisinde diğer makalelere geçsinler ister. Çünkü kullanıcı google üzerinden bir şey aratıp istediğini bulmuş ve memnun kalmış demektir. Bu olduğu zaman siz google de kullanıcıyı da kazanmış oluyorsunuz. Tabi SEO çok detaylı çok teknik konuların olduğu bir konu ancak bu da çok öneli bir dipnot olarak burada dursun istedim.
CSS Nedir?
CSS (Cascading Style Sheets), HTML’e ek olarak resim, metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir. Türkçeye çevirdiğimiz zaman “Basamaklı Biçim Sayfaları” anlamına gelmektedir. Anlaşıldığı üzere css formatlandırma için kullanılan bir işaretleme dilidir.
CSS Ne için Kullanılır?
CSS kullanmadan yapılan bir siteyi gözünüzde canlandırmak gerekirse buna şu şekilde örnek verebiliriz. İnsanların sadece kemikten ve iskeletten oluştuğunu hayal edin. Biz bir site yaparken iskeleti ortaya çıkarırız ancak aynı zamanda tasarımı da yaparız. Artık her şey görsel. Günümüzde gelişen teknolojiler ve altyapılar ile bir çok farklı şekilde tasarım oluşturulmaktadır. Ancak hepsinin temeli css’dir. Siteye renk katan gösterişli kılan kullanışlı hale getiren gözümüzü doyuran en önemli elementlerden birisidir.
Peki CSS’ in tarihi nedir, gemişi ne kadar geriye dayanır. Şimdi size css’in çeşitlerini, kullanım amacını ve faydalarını anlatmaya başlayalım.