Merhaba, bu yazımda kısaca 2017’nin web tasarım kurgularında öne çıkması muhtemel bazı özelliklerden bahsedeceğim.
Şöyle anlayatım. Bundan on sene önce ekranı kaplayan büyük tablolar, daha az hücre içerisine yerleştirilmiş kocaman puntolu yazılar trend idi. Yani şimdi bizim “böyle site mi olur” diyeceğimiz web tasarımları kullanılıyordu. Ve o zamanın insanı için hiç de itici gelmiyordu. Ancak her geçen gün web tasarımı platformu kendini biraz daha güncelleyerek şuan bulunduğu konuma geldi.
Web tasarım’ın siteye müşteri çekmek açısından önemini de bir başka yazımda anlatayım inş.
Sözü fazla uzatmadan 2017’nin halihazırda web tasarım trend’lerini kısaca açıklayalım.
1.Flat Design : Bu tasarım stili sade, temiz, düz, kolay anlaşılır ve efektsiz ögelerden oluşur.
2.UI/UX Tasarımlar :
-UI tasarımlar arayüz tasarımıdır. Her türlü elektronik aygıtın dizilimi/yerleştirilmesi anlamına gelir. Bir hesap makinesindeki tuşların diziminden android bir cihazdaki görünüme kadar bir çok cihazda UI tasarımından bahsetmek mümkündür.
-UX tasarımları ise cihazın (bizim için web sitesinin) nasıl göründüğünden çok ziyaretçiye nasıl hissettirdiğiyle ilgilidir. Basitlik, rahatlık, kolay anlaşılabilirlik, kullanıcının site üzerinden yapmak istediği işlemi (form doldurma, download gibi) kısa sürede tamamlayabilmesi hep UX ile ilgilidir. Kısaca UX için “ziyaretçinin her açıdan web sitesinden memnun kalması” diyebiliriz.
3.Material Design : Android ve ios7 tasarımı material design’dır. Tüm ögelerin tek katman üzerine dizildiği hissi uyandırır. Flat design kavramıyla yakın anlamlıdır. Material design için, flat design’ın mobil cihazlara uyarlanmış hali diyebiliriz.
4. Resposnive Web Design: Kullanılan aygıta duyarlı web site tasarımıdır. Örneğin bir web sitesini, siz masaüstü pc’den siteyi ziyaret ediyorken daha geniş büyük görseller görüntülemesi; android, iphone gibi cihazlarda ise aynı resmi size küçük boyutlarda gösermesidir.
5.Tipografik Tasarımlar – Yazıları estetik formlara dönüştürerek görseller oluşturma sanatıdır.
Bir nevi yazı ve resmin iç içe geçmiş halidir.
6.Büyük Görseller – Genelde ekranın büyük bir bölümünü kaplayan büyük resimler/fotoğraflar, 2016’da olduğu gibi 2017’de de ziyaretçinin ilgisini çekecek gibi görünmektedir.
7.HTML5 & CSS3 :
-HTML5 “hayaldi gerçek oldu” tadında daha önceden bir dünya kod yazmamızı gerektiren özellikleri tek bir tag’da göstermemizi mümkün kılıyor. Tasarımcının işini kolaylaştırırken, web site ziyaretçisine de daha esnek, rahat bir görünüm sunmamızı sağlıyor. Her halde HTML5’in canvas özelliğini bilmeyen yoktur. Bu özellik web site üzerinde animasyonlar kurgulamamıza imkan tanıyor.
-CSS3 de gerek görsel anlamda gerek siteye canlılık katmak için efektler kullanırken tasarımcının olmazsa olmazı durumundadır.
8.Parallax Kaydırma Efektleri – Görsele derinlik hissi katmadır. Bu sayede sabit duran bir jpg resmini sayfayı kaydırdıkça hareket ediyormuş gibi hissedersiniz.
9.Minimalizm ve Sadelik – Basitlik ve kolay algılanabilirliktir. Siteye girilen ilk anda yoğun objelerle gözü yormak yerine sadece 3-5 obje kullanarak hem site içeriğini daha hızlı sunmak hem de ziyaretçinin içeriği algılamasını kolaylaştırmak amacını taşır.
10.Skeuomorphizm – Tasarıma gerçekçilik hissi uyandırır. Örneğin bir e-book içeriğimiz varsa kitap sayfaları temasıyla ziyaretçiye gerçekmiş gibi bir izlenim uyandırabiliriz. Bu bağlamda Skeuomorphizm tasarımlarında üç boyutlu görsellerden yararlanmak gerektiğini de hatırlatalım.
11.Daha Büyük Puntolar – Yazıları dikkat çekecek şekilde büyük puntolarla yazmaktır. Ancak burada dikkat edilmesi gereken husus, özgün ve içerik bağlamına uygun fontlar kullanılmasıdır.
12.One-Page- Tek sayfalık Tasarımlardır. Bu tasarımlar adından da anlaşılacağı gibi tek sayfadan oluşur. Genelde kurumsal site tasarımlarında ya da kişisel web sitelerinde kullanılır. Sayfanın değişik bölümleri değişik gruplara ayrılmıştır. Mesela sayfanın en üst kısmı hakkımızda içeriğini barındırırken, ortalarda proftolyolar/projeler, daha aşağılarda referanslar ve en altta iletişim bilgileri yer alır.
13.Esnekleştirilmiş Grid ler – Gridler ekranı yatay- dikey parçalara bölmek demektir. Kullanılan cihanız ekran büyüklüğüne göre bu gridleri sayısı otomatik artar/azalır. Örneğin daha dar bir ekrandan xyz sitesini ziyaret ediyorsanız, grid’deki dikey hücrelerin sayısı artarken, yatay hücreler azalacaktır. Tam tersi Geniş ekran bir LCD’den bakıyorsanız siteye, yatay hücrelerin sayısı artacak, dikey hücreler azalacaktır.
14.İç içe Kullanılan Dairesel Ögeler – Örneğin aşağıdaki gibi kullanılmaktadır.
15.Retro & Vintage Background – Sitenize nostalji imajı katar.
16.Cinemagraph Gifler – Genelde sinema karelerinden alınmış büyük boyutlu fotoğrafların köşelerine eklenen sallanan yaprak, akan şelale vs gibi giflerdir. Bu giflerle sitenize canlılık katabilirsiniz. Video gibidirler ama bir nevi küçük görsel hilelerle ziyaretçiyi kandırmadır. Ve bazen bir duyguyu, ya da bir olayı daha kısa yoldan anlatmanızı sağlar.
17.Landing Page – Genelde ticari içerikli sitelerde ziyaretçiyi bir aksiyona yönelten tasarımdır. Örneğin bir form ya da rezervasyon talebine yönlendirir.
18.Crowdsourcing – Düşünen insanlar topluluğudur. Bu tarz görseller genelde kurumsal çalışan büyük firmaların ve stratejik büyüme odaklı işletmelerin tercihidir. Siteye bir dinamizm katar.
19.Arka Plan Videoları –Videolara kısa ve boyutu küçük olmalıdır. Aksi taktirde sitenizi çok kasar ve ziyaretçinin site içeriğine odaklanmasına engel olur.
20.Uzun Scrollar – farklı sayfalara yönlendirmek yerine aşağı doğru uzayan sayfalardır. Bunun için gerekirse çapa(anchor) da kullanılabilir. Bu aşamada jquery kullanarak kaydırma efektine “easing” özelliği kazandırabilirsiniz.