Web tasarımında trend değişimleri ve 2015 web modası

Web tasarımı dünyasında da aynen moda dünyasında olduğu gibi zamana göre farklı trendlere yöneliniyor. Bakalım trendler zamanla nasıl değişiyor:

Renkler

Nasıl 80’lerin moda dünyasında bol renkli kıyafetler popülerse 90’ların web sayfalarında da gene bol miktarda rengi bir arada görebiliyorduk. Renk paletlerinin limitli olduğu dönemlerde ana 16-64 renk paletlerine dayalı, cırlak mavi, kırmızı, yeşil gibi renklerle dolu web siteleri görürken 2000’lere geldiğimizde web 2.0 konseptine de bağlı olarak pastel tonlar öne çıkmaya başladı.

Son dönemlerde ise hem mobil cihazların hem de basitliğe verilen önemin artmasıyla beyazın yoğun olduğu, renk sayısının bir kaçı geçmediği siteler popüler hale geldi. Twitter’ın renkleri yeni trend olurken Facebook renk açısından biraz eski moda kaldı. 2000’lerde moda haline gelen pastel renkler hala kullanılmakta ama özellikle mobilde daha okunaklı olması için en parlak tonu olmasa da pastel renklerin kuvvetli versiyonları artık daha sık kullanılıyor.

Fontlar ve Tipografi

90’larda hemen her yazıda kullandığımız Times New Roman yerini Arial, Verdana gibi fontlara bıraktı. Mac’lerin yaygınlaşmasıyla Helvetica Neue popüler fontlar listesinde tırmandı. Kısaca Serif font ailesi yerine okunabilirliği çok daha yüksek olan Sans-Serif font ailesi webe hakim duruma geldi.

Büyük harflerle yazılan bir çok marka hem kullanıcıya yaklaşma hem de yeni yüzyıla ayak uyduruyoruz imajı çizmek amacıyla küçük harfli olacak şekilde komple bir renevasyondan geçti (Örnek: BP, Citibank, Arçelik). Logoların modası ile web modası aslında çok paralel. Logo tasarımında marka algısını kuvvetlendirmek, güven yaratmak, sadelik üzerine kurulu şirket imajı vermek için düşünülen tüm etmenler web sitelerine de aynı şekilde yansımakta.

Tipografi artık profesyonel web, grafik ve reklam tasarımcılığında önemli bir dal. Artık bir reklam başlığının sadece hangi fontla, büyüklükte ve renkte yazılacağı değil, satırların, harflerin arasındaki boşluk bile bir tipografın elinden geçmesi gerekiyor.

Grafik

Internet bağlantılarının bugüne göre çok daha yavaş olduğu günlerde web sitesi hazırlarken bir sayfayı indirmek için gereken zamanı azaltmak bugüne göre çok daha öncelikliydi.90’larda HTML kodunun 15kb ya da 50kb olması bile kullanıcı deneyimini etkilediğinden kod içindeki boşlukları minimuma indirip aynı çıktıyı daha kısa kodla ortaya çıkarmak önem kazanıyordu. Bir düğmeyi resim dosyası yapmak yerine mümkünse HTML kodu ile yapıp CSS ile renklendirmeye çalışıyorduk.

2000’lerde görselin öne çıkmaya başlamasıyla web sitelerinde resim içeriği arttı. Grafik yoğunluğu artarken internet hızları hala yeterli düzeyde değildi. O yüzden sitede sunulan grafiklerin web’e göre optimize edilmesi önemliydi. Google’un Page Speed‘i gibi uygulamaları görsel kaliteyi düşürmeden hangi imajların daha düşük boyutta sunulabileceğini net bir şekilde gösteriyordu. Web browser’lar 1 tane 20kb’lık dosyayı 20 tane 1kb’lık dosyadan daha hızlı indirebildiğinden düğme, çizgi, ikon gibi site tasarımında kullanılan ufak grafikler tek bir dosyada birleştirilip CSS stilleri ile istenilen yerde bu dosyadan gereken imaj parçası gösteriliyordu (CSS sprites tekniği).

2010’lara geldiğimizde artık 50-100kb’lık imajlar için kafa yormak o kadar gerekmemeye başladı. Edge zamanında hala kullanıcı deneyimininde zorlanan mobil cihazlar 3G‘nin gelmesiyle grafik ağırlıklı sitelerde bile akıcı bir yükleme sunabiliyor. Retina gibi yüksek pixel yoğunluklu ekranların da gelmesiyle grafiklerin boyutu yerine grafiklerin kalitesi ön plana çıktı. Fotoğraflar oldukça yüksek kalitede sunulurken kabartmalı düğmeler ve gölgeli yazılar yerlerini düz ve sade, daha okunaklı ve çevresinde yeterince boşluk bulunan versiyonlara bıraktı.

Arka fon grafikleri de aynı şekilde 90’larda hız limiti nedeniyle küçük grafiklerin tekrarlanması (tiled) ile duvar kağıdı tadında oluşturulurken 2000’lerin sonunda tek renk ağırlıklı, geçişli (gradient) arka fonlar popüler hale geldi. Son zamanlarda ise geçiş olmadan tek renk, özellikle beyaz arka fonlar moda. Görselin ön plana çıkması beklenen bir web sitesinde (örneğin mücevher veya lüks yat satan bir firmanın web sitesi) dev ve kaliteli fotoğraftan oluşan arka fonlar rahatlıkla kullanılmakta.

Geçen hafta 4G‘nin bu yıl içinde geleceği de resmi olarak açıklandı. Pratikte 3G’e göre en az 3-4 kat hız farkı hissedebileceğimizi düşünüyorum. Böylece artık Türkiye’de de yüksek çözünürlükle grafiklerin ve daha çok video kullanımında pek endişe kalmayacak. Bir önceki yazımda 4G bize neler getirecek kısaca bahsettim.

Animasyon

Web dünyasında ilk animasyonlar Animated GIF ile başlamıştı. O zamanlar kim nerde ne animasyonlu bir GIF dosyası bulsa sitesini hareketlendirmek için hemen eklerdi. 2000’lerin başında Flash ve türevi (Shockwave vs) animasyonlar popüler hale geldi. Flash ile yapılabilecekler o zamanın şartlarına göre ciddi bir devrimdi. Web sitenizde gerçek anlamda görsel ziyafet sunma imkanınız artık vardı. Flash yazan programcı/tasarımcı azdı. Reklam şirketleri 3-4 sayfalık flash animasyonlu mikro siteleri dev firmalara 50-60bin dolara pazarlıyordu.

Derleme gerektirdiğinden Flash sitelerinin kopyalanması daha zor olduğu gibi güncellenmesi de zordu. Flash ile hazırlanan siteler ve içerikler genelde yıllarca güncellenmeden kaldı, kaldırılana kadar ilk halleriyle durdular. İndeksleme zorluğundan dolayı flash sitelerinin arama motoru sonuçlarında da dezavantajı vardı.

İlk önce jQuery gibi Flash gerektirmeden basit ama ihtiyacı karşılayan animasyonları yapmayı sağlayan javascript framework’lerinin gelmesi daha sonra CSS3, HTML5 gibi yeni versiyon HTML ve style elementleri ile dinamik sitelerin hazırlanması kolaylaşması, içeriğin arama motoru tarafından indekslenebilmesinin önemi ve belki de son vurucu hamle olarak Apple’ın cihazlarında Flash desteklememesiyle Flash neredeyse tamamen öldü diyebilirim. Artık direkt ön yüzdeki basit kodlamalar ile dinamik, animasyon içeren sayfalar yapmak çok kolay. jQuery’nin “write less, do more” sloganı oldukça yerinde olmuş.

Navigasyon

Web dünyasındaki navigasyonu teknolojik gelişmeler ve kullanıcı deneyimi yönlendiriyor diyebilirim. 90’larda iframe‘ler ile tepede veya solda bulunan menülerle her seferinde klikleyerek navigasyon yapılırken artık kodlama bile gerektirmeyen sadece CSS ile ayarlanabilen fare üzerine geldiğinde açılan (onmouseover megamenu) menuler ile navigasyon çok daha kullanıcı dostu hale geldi. Breadcrumb tarzı ek navigasyon öğeleri özellikle e-ticaret sitelerinin vazgeçilmezi oldu. Duyarlı tasarım (Responsive design) ile her ekran boyutuna uygun navigasyon hazırlanabilirken, tepede sabitlenen (static top), tıklayınca sağdan açılıp gelen (slide out) menuler gibi ihtiyaca uygun yeni trend menüler artık standartlar arasında.

İçerik

“Content is King”, “Content Strategy” gibi terimleri artık çok daha fazla duyuyoruz. İçeriğin önemi gitgide artıyor. İçeriğin modasını iki şey belirliyor:
1. İhtiyaç
2. Google

Google diyorum çünkü artık siteniz Google organik aramalarında çıkıyorsa ziyaret alır, çıkmazsa almaz konumuna geldi. Tabii ki Adwords ile sitenize para harcayarak trafik (paid traffic) getirebilirsiniz ama unutmatın: Taşıma su ile değirmen yürümez!

Google organik arama sonuçlarında üst sıralarda yer alabilmek (SERP: Search Engine Result Page) o kadar önemli ki bir çok içerik sırf Google algoritmalarının seveceği, daha iyi puanlayacağı şekilde giriliyor. Evet okunaklı olması, faydalı bir bilgi içermesi önemli ama Google’un içeriği önemli bulması çok daha önemli. O yüzden içeriğin ne olacağı ve nasıl sunulacağı (content strategy) İçerik Yönetici’lerinden (Content Manager) ziyade SEO (Search Engine Optimization) uzmanlarına bırakılıyor. Google, sayfanın üst tarafında yazan bilgiye daha önem veriyorsa oraya daha çok sayfa anahtar kelime yerleştiriliyor. Sayfadaki yazı/kod oranına bakılıyorsa ve mevcut içerik azsa bir şekilde yazı oranını artıracak içerik ekleniyor. Normal içerikte dağınık olarak farklı sayfalarda bulunan içerikler sırf Google için özel olarak toparlanıp iniş sayfası (landing page) haline getiriliyor. Tüm bunları yaparken de Google kurallarını (policies) yakından takip edip organik trafik alayım derken Google tarafından ceza yememek de önemli (Geçenlerde gazete sitelerinin SEO için yaptığı kullanıcıya faydasız, otomatik oluşturulan içerik sayfalarının Google arama sonuçlarında aşağıya çekilmesinin etkisi gibi). Hep Google diyoruz çünkü en azından Türkiye için şu anda hacim olarak rekabet edebilecek başka bir arama motoru yok.

Web’de son trendler

Bu aralar tek sayfa web siteleri çok popüler. Uzun, aşağıya kayan tek bir sayfa yapılıp navigasyonla ya da aşağı kayarak (scroll) sayfanın belirli bölümlerine geçiş sunuluyor. Şahsem tasarım olarak çok faydalı bulmasam da daha fazla içeriği ziyaretçiye sunmak için iyi bir çözüm. Ziyaretçinin farklı içeriğe ulaşmak için bir yere tıklaması ya da site haritası içinde kaybolmasına izin vermeden sadece yukarı aşağı sayfayı kaydırarak da içeriğin çoğunu görebilmesi sağlanıyor ki bu aslında güzel bir avantaj. SEO konusunda da faydalar getirebiliyor. Sitedeki sayfa sayısı azalıyor ama dışarıdan gelen linklerin bir çok sayfaya bölünmesi engellenerek az sayıda sayfanın daha iyi bir page rank alması sağlanabiliyor. Aynı zamanda bir sayfadaki içerik arttığından gene Google tarafından artı puan alabilir.

Ön yüzde kullanıcı tarafından farkedilmese bile kod tarafında da trendler var. Artık daha fazla meta tagler ve yeni HTML/CSS kodları kullanıp sitenin Facebook gibi sosyal ağlarda post edilmesi sırasında içeriğin doğru aktarılması sağlanıyor. Engelli kişilerce ziyaret edildiğinde rahatça kullanılması için screen-reader’ların tanıdığı özel tag’ler kullanılıyor. Google arama sonuçlarında ek bilgiler görüntülemek için zengin snippet‘leri eklemek gerekiyor. Ziyaretçi bilgilerinin çeşitli analiz araçlarına aktarılması, reklamların daha iyi hedeflenmesi (retargeting/remarketing) için kodlar ekleniyor.

Kısaca son web trendleri sadelik, basitlik, mobil uyumluluk (özellikle duyarlı tasarım), kaliteli grafikler ve zengin (aynı zamanda orjinal) içerik üzerine kurulu. Bunların sayfa üzerinde yerleşiminde kullanıcı deneyiminin yanı sıra arama motorundan da iyi bir skor alabilmek belirleyici etmen oluyor.