2014 Web Trendleri

2014 Web Trendleri


2014’ün web trendlerini sizin için inceledik, derledik ve 20 maddelik bir döküm çıkarttık. Aşağıda, önem sıralaması olmaksızın, sitenizi tasarlarken ve içerik hazırlarken dikkat etmeniz gereken, güncel bilgilere ve içeriğe ulaşabilirsiniz. 

Daha İyi UX (Kullanıcı Deneyimi)

Son zamanlarda web sitelerinde kullanıcı deneyiminde giderek artan bir gelişim söz konusu. Kanımızca bu durum ilerlemeye devam edecektir. Önümüzdeki günlerde web siteleri ve uygulamaların kullanıcı deneyimleri ile iş stratejisinin birleştirilmesi bir trend olma yolunda. Bu iki kolu birlikte yürüten firmaların çok zekice davrandıklarını söyleyebiliriz.

Daha Çok Kaydırma, Daha Az Tıklama

Araştırmalar, zaman içerisinde kullanıcıların sayfa üzerinde tıklama yapmak yerine sayfayı kaydırmayı tercih ettiklerini gösteriyor. Bu da, tek sayfalık websitelerin neden başarılı olduğunu gösteriyor. Eğer kullanıcı deneyimi ile hikaye anlatımını birleştirirseniz karşınıza tek sayfalık bir öykü çıkıyor. Web sitelerinin bu konuda denemeler gerçekleştireceğine inanıyoruz. Tabii internetin sadece kaydırmadan oluşan sitelerden ibaret olacağını söylemiyoruz, sadece yeni sayfa yerine kaydırmayı seçmeyi düşüneceklerdir.

Büyük Basma Harfler

Tipografi, web üzerinde de oldukça ilgi çekiyor. SVG ikon fontlarının da desteğiyle gittikçe daha çok popüler olmaya başladı. Web üzerindeki tipografiyi düşündüğümüzde aklımıza tasarıma entegre olmuş büyük harf tipleri geliyor. Bunlar; gösterişli, kalın ve güzel olmalarının yanı sıra, artık Iconic’deki harika adamlar sayesinde yakında devrimsel bir şekilde responsive özelliğe de sahip olacaklar.

Kişisel İçerik

İnsanlar, kişiliği olmayan işleri sevmezler, özellikle de internet üzerinde. Başka bir işle, firmayla alakalı bir makine ile uğraşma fikrine sıcak bakmazlar. Bu yüzden startup firmalarının web içeriklerinde bir kişilik vardır. Bu da firmanın arkasında gerçek bir insan olduğu havasını yaratmak içindir. İçerik en önemlisidir ve hedef kitlenizle çevrim içi olarak bağlantı kurmanıza yarayacak en temel ögedir. Bu yüzden bunu kişisel olarak tasarlamalısınız. Sayfanızı ve görsellerinizi arkadaşçıl, eksantrik ve arsız kılın. Bu sayede müşterileriniz sizinle bağlantı kurabilirler.

Flat Kullanıcı Arayüzü Gelişmeye Devam Edecek

Sans serif fontların uslanmaz fanatikleri olarak, temiz ve pürüzsüzün hala süslüden daha önde olduğunu belirtelim. Öncelikle Windows 8 buna büyük ölçüde ilham kaynağı oldu, daha sonra da Apple, iOS7 ile bu trendi devam ettirdi. Flat tasarımların daha uzun bir süre karşımıza çıkacağı ve gelişeceği bir gerçektir.

Öncelikle Mobil

Akıllı telefon ve tablet kullanımı geçtiğimiz senelerde inanılmaz bir artış gösterdi ve birçok websitesi için masaüstü trafiğinin önüne geçti. 2014’te de mobil cihazlar dominasyona devam edecek ve tasarımcılar küçük ekranlar için kullanıcı deneyimini de göz önünde bulundurmak zorunda kalacaklar. Artan mobil kullanıcı tabanına adapte olabilmek, firmayı daha kıvrak ve organizasyon içerisinde inovatif kılacaktır.

Tabii ki gerçekçi olmak gerekirse birçok firma için mobilin öncelikli olacağını söyleyemeyiz. Hala mobil kullanım daha çok ikinci sırada yer almaktadır. Ama responsive ve adapte olabilen tasarımı özümseyebilenler için bu yatırımların dönüşü muhteşem olacaktır.

Minimalist Navigasyon

Giderek popülerleşmeye başlayan bir diğer trend de sadeleştirilmiş navigasyondur. Kısmen ilham aldığı mobil için tasarlanmış navigasyondan; daha çok ikona odaklı, özetten detaya giden, ve aşağı kaydırdığınızda adeta büzülen bir navigasyona evrilmiştir.

CSS, Görsellerin Yerine Geçiyor

Neden CSS yerine bir görsel ya da ikon kullanasınız? Kim sitesinde hoş bir CSS onay kutusu seti görmek istemez?

Video/Hareketli Fonlar

Bize kalırsa bu artık sıkça göreceğimiz bir trend. The Guardian’ın Firestorm adlı hikayesi buna iyi bir örnek olabilir. Bazı markalar, içerik sitelerine kıyasla, en dinamik fonları 2014’te yayımladılar.

Daha Zengin İçerik Deneyimleri

Firestorm iyi bir örnek olabilir bu konuda. Bazı yayıncılar; yazı, görsel, video, interaktif fonksiyonellik ve hatırı sayılır derecede aşağı kaydırmayı harmanlayarak daha cazip gelen çevrim içi içerik deneyimlerine yöneliyorlar.

Daha Büyük, Daha İyi İmgelem

Büyük çapta resimler ve arka plan görselleri – texture deseni de olabilir – giderek popülerleşiyor ve özellikle retina ekranlarda harika görünüyor. Awwwards’ın sitesindeki “Site Of The Day” galerisine bir göz atın, ne demeye çalıştığımızı anlayacaksınız. Yayıncı kuruluşlar da karışık yorumlar alsalar bile artık büyük boyutlu görseller kullanıyorlar.

Sabit Konumlu İçerik/Navigasyon

Bu, aşağı kaydırdığınızda navigasyonun (ya da belirli bir içerik biriminin) sayfada sabit kalmasıdır. Bazen navigasyonun ya da genişleyecek bir küçük ikonun (8 noktada bir) yüksekliği yakın bir barda azalabilir. Bu trend son zamanlarda taze tasarlanmış web sitelerinde görülüyor. Örnekler için Awwwards’a bir göz atmanızı tavsiye ederiz.

Flat Tasarım Ögeleri

Web tasarım trendlerinden bahsederken flat tasarımların geniş çapta kullanımından bahsetmemek olmazdı. CSS3; doğal kutu gölgeleri, metin gölgeleri ya da yuvarlak köşeler aracılığıyla tasarımcıların daha düz butonlar yaratmalarını sağladı. Flat kullanıcı arayüzü desen anlayışı, form girişinin ve navigasyon menülerinin ötesine geçti.

Ama gelecekte bundan çok daha fazlasını göreceğimizi öngörebiliriz. Flat ikon setleri ve GUI kitleri birçok web sitesinde bedava yayımlanıyor. Metro tarzı tasarımın da, Microsoft Windows İşletim Sistemi ve Windows Mobil Phone sayesinde popülerliğinin arttığını söyleyebiliriz.

Tembel Yüklenen Animasyonlar

Themeforest’da dolanırken geçiş efektli ögelerin, sadece görmek için kaydırdığınızda aktif olduğu WordPress temalarıyla karşılaşabilirsiniz. Bu ögeler yavaş açılan görsellere benzemektedir. Aslında sayfada zaten yüklenmiş durumda ama gözden uzakta durmaktadırlar.

JavaScript kullanmak; bu ögelerin sitenin neresinde durduğunu bulmaya ve CSS3 geçişlerini ya da JavaScript’i kullanarak bu ögeleri oynatmaya yarıyor.

Chart.js üzerinde sayfayı aşağı kaydırdığınızda bloklar halinde görsel ve içerik görüntülenecektir. Bu trend, eğer içeriğin yüklenmesi için beklemeyi tercih ediyorsanız, bant genişliğinde birikmeyecektir. Bu, daha çok site estetiği ve pürüzsüz, şık bir arayüz sağlamak içindir.

Mega Menüler

Son yıllarda her türlü süslü navigasyonun testi ve adaptasyonu yapıldı. HTML5/CSS3 ile birlikte mobil responsive web tasarımlarının bunda büyük bir payı vardır. Bunların yanında yavaş yavaş gelişen bir trend olan, içerik ve linklere ait büyük bloklara yayılan mega navigasyon menüleri de yer alabilir.

Bu mega menüler daha çok özgün ve yüksek volümlü içeriğe sahip olan web sitelerinde görülüyor. Çevrim içi dergi ve web forumları hemen aklımıza gelen örnekler. Sayfada biraz yer kapladığı doğru fakat okuyucular için de daha geniş seçenekli bir navigasyon olanağı sunduğu açık.

Genişleyen Arama Çubukları

Dönüp baktığımızda bu konseptin ne zaman bir trende dönüştüğünü bilemesek de, sayfa tasarımlarında yarı-gizli ya da genişleyen arama çubuklarının popülerliğinin arttığını görmekteyiz. Kullanıcılar; bir büyüteç ikonuna ya da formun kendisine tıkladıklarında metin içeriği girilebilecek, geniş bir çubukla karşılaşıyorlar.

Codrops bu konuda bütün geliştiricilerin okuyabileceği oldukça göze çarpan bir tutorial hazırlamış, tavsiye ederiz. Öncelikle saklı arama bölgesi, sayfanızda alandan tasarruf etmenizi sağlıyor. Hatta bunu, sayfanın en üstüne tıklandığında açılıp kapanacak bir navigasyon menüsü olarak koyabilirsiniz. Bu teknik daha çok responsive tasarımlarda öne çıksa da, daha büyük ve geniş içerikli siteler de bu uyum sağlayan arama çubuklarını kullanıyorlar.

HTML5 Kanvaz

HTML5 içinde bulunan kanvaz elementi için söylenecek çok şey var ve bu gerçek bir ders konusu sayılabilir. Javascript kullanarak HTML5 içerisinde oyunlar ve çizim uygulamaları yaratabilmek mümkün. Kanvaz elementinin fare aracılığı ile imza toplamak için kullanıldığını bile gördük.

Yukarıdaki örnek basit bir Codepen girişi aslında. Biri gösterişli bir yükleme çemberini Dribbble’ın içine yerleştirmiş ve bu kalem de kanvaz elementinin bir replikası olarak iş görüyor. Diğer bir örnek de HTML5 kanvaz ve Javascript ile yapılmış bir küçük yatay yükleme barı. Bu seçenekler hızla artıyor. Birkaç sene içinde kanvazın kullanımının bize neler göstereceğini düşünmek bile heyecan verici.

Çabuk Kullanıcı Kaydı

Kullanıcılar için kayıt özelliği sunan web uygulamaları ve yeni startupların sayısı artmaktadır. Hatta çoğu web sitesi servisi ziyaretçilerine kullanım için kayıt olma ön koşulunu koymaktadır. Bu hızla iletişime geçilmesi gereken dünyada uzun ve detaylı kayıt formları son derece itici olmaktadır.

Sayfanız için tasarlayacağınız kayıt formlarını kısa ve isabetli tutmaya çalışın. Birçok yeni web uygulamaları kayıt formlarını ana sayfada, daha çok kullanıcıya ulaşabilecek şekilde konumlandırmaktalar. Bu daha çok bir kullanıcının web sitenize giriş yapıp sitede birkaç satır okuduktan sonra ürününüz için meraklanması ve üstüne düşmesine yaramaktadır. Bu stratejinin, daha çok kullanıcı edinmenizde şok edici sonuçları olacaktır.

CSS3 Animasyonlu Bağımsız Kareler

2000’lerin başından beri tarayıcı animasyonu için JavaScript ilk seçenek olmuştur. Son zamanlarda CSS3 ana akıma adapte olmuş ve geliştiricilerin kullanabileceği ve keyframelerde kendi animasyon efektlerini kullanabileceği bir alternatif haline gelmiştir.

Animasyona dökmenin bir başka yolu geçiş özelliğidir – ki animasyon için tek duruma sahip olmasına rağmen keyframeler Adobe Flash gibi davranır. %0 ile 0 arasında olan bir frame yüzdesi kurarsınız, bu da zamanla framelerin nasıl özellikler edineceğini gösterir. Son CSS3 spesifikasyonları; size ögelerinizi anime edebileceğiniz yeterli aracı verir ve bunları pratik bir şekilde istediğiniz stilde uygulamanızı sağlar.
İnsanlar Sonuca Daha Hızlı Ulaşsınlar

Karşılama Sayfasının Önemi

Hedeflenmiş karşılama sayfası markalar için her zaman en büyük iletişim aracı olmuştur. Geçmişte bunun sebebi sıklıkla; sitenin ana sayfasında ve takip eden alanlarında çok fazla veri, çok fazla okunacak bilgi, çok fazla seçenek olmasıydı.

Bu günlerde, her şey kullanıcının zihinsel yükleme süresini düşürmek için minimal olmaya doğru gitmektedir. İlk etkileşim için gittikçe daha basit, temiz call to actionlar görmekteyiz. Uygulamalar bu alanda parlayan yıldızlar gibidir; siz içine daldıkça zahmetli istekleri, daha az zahmetli görevlere döndürürler.

Bu, “sürtünmesiz deneyim” kullanıcı mutluluğuna yardım ettiği gibi; markanın ne kadar efektif olduğuna dair bir ölçümü olan net promoter score’a da indirekt katkı sağlar. Düşünün, Sony marka bir ürün almak için Sony’e mi yoksa Teknosa’ya mı gidersiniz? Tabii ki Sony mağazasına! Daha ne diyelim?

Önceliğimiz; İçerik!

Bu, aşırı tweetlenmiş klişelerden öte bir konu aslında. Kullanıcıya istediğini verebilmek ve tüm karışıklık ögelerini önlerinden çekerek kullanıcıların, görevi yerine getirmelerini ya da hikayeyi tamamlamalarını sağlamaktır. Mıhlanmış ve kaybolan navigasyon konseptlerinin nereden geldiğini düşünüyordunuz?

Gittikçe daha çok kart bazlı tasarımlar göreceğiz. Bu gayet iyi bir şey. Kullanıcıya sadece istedikleri şeyi istedikleri zamanda sunmanın doğru olduğu ve içeriğin kolay takip edilip bulunan bir şekle sokulması gerektiği bir gerçektir.

Javascript’in Ölümsüzleşmesi

Ember gibi frameworkler, JavaScript’in modern web tasarımında yaygınlaşmasına yardımcı oluyor. Eskiden Flash, internet üzerinde “cool” çocuktu ve hiçbir şey o hızlı, kıpır kıpır animasyonlar kadar etkileyici değildi. Ama o günler geride kaldı. JavaScript artık web tasarımında çok önemli bir yere sahip. Evrensel olarak kullanılabilen bütün API ve platformlar üzerindeki köprüler ve kütüphaneler aracılığı ile reklamı yapılarak popülaritesi artıyor.

Tüm platformlarda artık JS kullanılıyor ve sarsılmaz popülaritesi onu gelişmeye devam eden bir dil haline getiriyor. Framworkler, kaba sakallı hipsterlar ve dönüştürülmüş bisikletler gibi gizlendikleri yerden çıkmaya devam edecekler. Bir şey eğer JS ile yapılacaksa, o öyle olacaktır.

Site Introsuna Dönüş Yok!

Kullanıcının sabrı, sıcak bir yaz gününde asfalt üzerindeki su gibi buharlaşmaktadır. Gittikçe sisin arkasında loaderlar, geçişler ve diğer durum odaklı ögelerin yer aldığı arayüzler görüyoruz ve bu da bütün olayı bir AJAX deneyimine dönüştürebiliyor. Eğer ziyaretçilerinizi bekletecekseniz onlara buna değecek bir şeyler verin ve ne olursa olsun bir daha onları sitenizin introsuna döndürmeyin.

Çeviri: Gökhan KORO
Düzenleme: Buse BAYGIN

http://www.hongkiat.com/blog/web-design-trends-2014/

http://www.creativebloq.com/web-design/desirable-trends-see-2014-21410698

Coming and Going Web Design Trends for 2014

https://econsultancy.com/blog/64096-18-pivotal-web-design-trends-for-2014#i.obfpt9sffe95z9

 

0
like
0
love
0
haha
0
wow
0
sad
0
angry