Kullanıcılarınızın sitenizde daha uzun süre durması, sitenizi beğenmesi ve diğer insanlara tavsiye etmeleri için içeriklerinizi düzenli tutmalı, kullanıcıya istediğini rahat bir şekide ulaştırmalı ve kullanıcının içeriklerinizi rahat okuyabilmesini sağlamalısınız. Bunun için de şüphesiz en büyük etken tasarımınızdır. Sitenizin tasarımını yaparken dikkat etmeniz gereken unsurlara baktığımızda şöyle bir liste çıkartabiliriz.
- Yazı fontu, boyutu ve satır aralığı
- Başlıkların kullanımı
- Multimedya içeriklerin boyutu
- İç ve dış boşluklar
- Kenarlıklar
- Gölgelendirmeler
- Kenar Yumuşaklığı
- Renk uyumu
- Ufak Süslemeler
- Arkaplan rengi ve deseni
Web tasarımda son derece önemli olan bu etkenleri şimdi teker teker ele alalım ve hepsi üzerinde detaylı bir şekilde fikir yürütelim.
Yazı Fontu
Seçtiğiniz font mutlak surette okunabilir olmalıdır. Fontunuzun boyutu çok küçük olmamalıdır, arkaplan renginize de çok yakın olmamalıdır. Küçük boyutlu yazılar ve kısa satır aralıkları benim gibi göz problemleri olan insanlar için tam bir işkencedir. Bu iki unsur üst üste geldiği zaman içeriklerinizi okuyamayan kullanıcılar sitenizi çöp olarak değerlendirecektir. İçeriğiniz kaliteli olsa bile bu okuyucularınızı kaybedebilirsiniz . Başlıklar için kalın ve içerikler için de light fontlar tercih edebilirsiniz. Türkçe karakter sorunu yaşamamak için OpenSans kullanabilirsiniz. Başlıklarınızda OpenSans-Bold kullanabilirsiniz. Eğer bu font size çok sade gelirse de bunun yerine başlıklar için Bebas Font iyi gidebilir. İçerikleriniz için de OpenSans Light veya başka herhangi bir light font işinize yarayabilir. Bu fontları şu adreslerde bulabilirsiniz;
Open Sans : https://www.google.com/fonts/specimen/Open+Sans
Bebas : http://www.dafont.com/bebas.font
Başlıkların Kullanımı
Başlıklardan kastımız heading’lerdir. Yani sitenizde kullandığınız h1, h2, h3 gibi etiketler. Başlıkların kullanımı da kullanıcılar açısından oldukça önemlidir. Kullanıcı hangi içeriğin nerede olduğunu bu başlıklar sayesinde rahat bir şekilde bulabilir. Ana başlıklar için h1 etiketi, alt başlıklar için de h2 veya h3 etiketlerini kullanabilirsiniz. Kullanıcıların dikkatini çekmesi gereken Arama gibi alanlar için de başlıklardan yararlanabilirsiniz.
Multimedya İçeriklerin Boyutu
Multimedya içeriklerinizin hem genişlik ve yükseklikleri hem de dosya boyutlarına da son derece önem vermeliyiz. Resimleri ve videoları kullanıcıya gösterirken kullanıcının küçük ekranlı cihazdan da giriş yapmış olabileceğini düşünüp multimedya içeriğimizin boyutunu çok büyük ayarlamamalıyız. Bunun yerine tarayıcının genişliği kadar, tarayıcının yarısı kadar gibi ifadelerle multimedya içeriklerimizin bütün ekranlarda düzgün görünmesini sağlayabiliriz ama bunu yaparken bir diğer yandan da resmin en boy oranını bozmadığımızdan emin olmalıyız. Resimlerimizin boyutunu düzenlerken CSS kısmında genişliklerine 100% , 50% , 25% gibi değerler verebiliriz.
İç Ve Dış Boşluklar
Yaptığımız tasarımda nesnelerin birbirine çok fazla yakın, çok iç içe olmaması gerekir. Aynı zamanda birbirinden çok uzak da olmamalıdır. Bu yüzden iç ve dış boşluklar son derece önemlidir. İç ve dış boşluklar verirken verdiğiniz boşlukların birbirine yakın değerler olmasına dikkat etmelisiniz. Yakın kelimesinden kastımız şudur: bir yerde 15 pixel boşluk verdiyseniz başka yerde 30 pixel boşluk vermeniz tasarımınızı biraz bozabilir. Bu yüzden tek bir değer belirleyip bunun üzerine gitmeniz daha iyi olacaktır. Örneğin her yerde 15 pixel kullanabilirsiniz.
Kenarlıklar
Web sitenizde içeriklerin birbirine karışmaması için belli elemanlara kenarlıklar verebilirsiniz. Örnek olarak sitenizin içerik kısmının iki parçadan oluştuğunu düşünelim. Bir content kısmı ve bir de sidebar kısmı. Eğer content ve sidebar kısımlarını birbirine yakın yaptıysanız ve kenarlıklar yoksa kullanıcınız bu iki parçayı tek parça zannedebilir. Bu durum da kullanıcı üzerinde iyi bir izlenim bırakmaz. Kenarlıklarla ilgili bir diğer mesele de kenarlıkların yumuşaklığı/yuvarlaklığıdır. Her ne kadar bu sıralar flat (düz) tasarımlar moda olsa da sivri kenarlar bazı içeriklere pek iyi gitmeyebilir. Bu yüzden kenarlıkları birazcık yumuşaklaştırmanız sitenize daha güzel bir hava katacaktır.
Renk Uyumu
Bir web sitesi tasarımında diğer unsurlara nazaran çok daha önemli bir meseledir renk uyumu. Bir internet sitesine girdiğinizde karşınıza birbirinden tamamen alakasız ve saçma renklerden oluşmuş bir tasarım çıktığında çok büyük ihtimalle “ıyyy bu ne” diyerek sekmeyi kapatırsınız. Bunu yapmakta da son derece haklısınız. Bu durumda sizin internet sitenizin renk uyumunun güzel olması gerekir, çünkü “En iyi eleştiri daha iyisini yapmaktır.”, eğer o siteyi eleştirecekseniz sizin renk uyumunuzun güzel olması lazım. Her insan bu konuda yetenekli olmayabilir. Hangi renklerin uyumlu olup olmadığına karar veremeyebilir. Bu gibi bir durum için de son derece güzel hizmetler var. Bunlardan birisi Colour Lovers. Bu sitenin kullanıcıları kendi oluşturduğu renk kombinlerini paylaşıyor ve böylece sizi hangi renklerin uyumlu olduğunu düşünme derdinden kurtarıyor. Burada istediğiniz renk grubunu bulamadıysanız üzülmeyin. Bu sefer de devreye Adobe’nin bir servisi giriyor. Adobe Color. Buradan da istediğiniz bir rengi seçiyorsunuz ve Adobe Color sizin için yakın renkleri yanında gösteriyor.
Renk uyumu meselesini de bunlarla hallettiğimizi düşünüyorum. Şimdi sıra bir diğer ufak ama etkili mevzuya geldi.
Ufak Süslemeler
Nedir bu ufak süslemeler ? Hemen anlatayım. Örnek olarak bu sıralar kendini belli etmiş olan Material Design’i ele alalım. Material Design’in en büyük artısı rakiplerine nazaran çok daha fazla animasyona sahip olmasıdır. Örnek olarak Bootstrap’ta bir butona tıkladığınızda sadece rengine ufak bir değişme olurken, materialize css kullanarak hazırladığınız web sitenizde butona tıklandığında açık veya koyu renkli tıkladığınız yerden başlayan ve etrafa dalgasal bir şekilde yayılan güzel bir animasyon efektiyle karşılaşıyorsunuz. Bunun dışında sağdan soldan kayan içerikler, toast dediğimiz ufak bildirimler vb… şeyler materialize css’in büyümesinde son derece etkili olmuştur. Siz de web sitenize böyle ufak tefek animasyonlar vb… şeyler ekleyerek sitelerinizi kullanıcılar gözünde çok daha sempatik ve sevimli bir hale getirebilirsiniz. Eğer kısa yoldan ufak süslemeler yapmak için Materialize CSS öğrenmek isterseniz tarafımızdan hazırlanmış Materialize CSS Derslerini Youtube üzerinden izleyebilirsiniz.
Arkaplan Rengi Ve Deseni
Web tasarım konusunda belki de en önemli meselelerden birisidir bu arkaplan rengi veya deseni. Sayfada en çok yeri kaplayan şey arkaplan olacağı için son derece iyi seçilmiş olması gerekir. İlk önceliğiniz arkaplan renginizin veya resminizin/deseninizin göz yormaması olmalı. Göz yoran renklerden kaçınılmalıdır. Örnek olarak sayfada standart beyaz arkaplan kullanmak yerine beyaza çok yakın bir gri kullanılabilir. Bunun dışında arkaplan resmi kullanacaksanız kullandığınız resmin web sitenizin içeriğiyle ilgili olması da gerekir. Her ne kadar arkaplan resmi pek kullanılmasa da bu konudan da bahsetmiş olalım. Bir diğer mesele de arkaplan desenleridir. Web sitenizde arkaplan resmi veya rengi yerine arkaplanlarınızda sürekli tekrar edebilecek desenler kullanmanız çok daha güzel bir hava katacaktır sitenize. Arkaplan desenini nereden bulacağım dediğinizi duyar gibiyim. Bunun için Subtle Patterns‘i ziyaret edebilirsiniz. Oldukça güzel arkaplan desenleri bulabilirsiniz bu sitede.
İşte güzel bir web sitesi yapmanın arkasında yatan ufak sırlar bunlar. Burada bahsettiğimiz unsurlara dikkat ettiğiniz sürece web sitesi tasarımınız kullanıcılar tarafından oldukça hoş karşılanacak ve benimsenecektir. Sizin sitenizde bulunan bir içerikle başka bir sitede bulunan benzer bir içerik kullanıcıya sunulduğunda web sitenize duyduğu sempatiden dolayı içeriği sizin sitenizden okuyacaktır.
Biz de Ankara Web Tasarım Ekibi olarak bu unsurların hepsini göz önünde bulundurarak sizin için ve şirketiniz için son derece mükemmel tasarımlar yapıp bu tasarımları kodluyoruz ve kullanıma sunuyoruz. Buyrun gelin bir çayımızı için ve beraber şirketinizin yükselişini izleyelim.
