2021 yılında değişen dünya ile birlikte insanların web deneyimleme biçimini nasıl tasarladığımızı ve iyileştireceğimizi şekillendirecek bu 21 web tasarım trendine gelin hep birlikte göz atalım!
Retro tipografiden sürekli büyüyen kodsuz hareketlere kadar, 2021’de incelemenizi sabırsızlıkla bekleyeceğimiz çok şey var!
2020 bizler için kolay bir yıl değildi. Litrelerce el dezenfektanı, alışamadığımız Zoom toplantıları ve baş gösteren belirsizlik endişesi ile hepimiz biraz bitkin hissediyoruz. Tüm bu koşullara rağmen, hepimiz kendi alanımızda ilerlemek için elimizden gelenin en iyisini yaptık. Birçoğumuz yeni tasarım becerileri öğrenmek için büyük zaman ayırdık, herkesin zorluklarla başa çıkma şekli elbetteki farklıdır!
Tasarım söz konusu olduğunda, hiç bitmeyen derya deniz trendlerden bir derleme sizler için yaptık. Bu listenin size ilham vermekle kalmayıp, web tasarımına daha kapsayıcı ve erişilebilir bir şekilde yaklaşmanızı sağlamayı gönülden diliyoruz!
İşte 2021’i biraz daha parlak hale getirmeye yardımcı olacak 21 web tasarım trendi sizlerle!
1. Retro yazı tipleri
Birçok eski şeyin yeniden havalı hale geldiğini ve ardından daha da havalı olmadığını gördük. Retro yazı tipleri, popülerliklerinde aynı gelgiti yaşadı ve eski tipografiye sahip birçok tasarım iyi yaşlanmadı.
Bununla birlikte, throwback tipografisi biraz canlanma geçirdi. Aynı yorgun yazı tiplerini görmüyoruz. Aksine, stilizasyon ve biraz sanat, retro yazı tiplerinin ne olabileceğini yeniden tasavvur ediyor.
Spotify’ın Carnival promosyonu sayfasında eski ve yeninin bu birleşimini görüyoruz. Bayat ve klişe hissetmek yerine, biraz deneme ile geleneksel kalın yazı tiplerine yeni bir soluk getiriyorlar. Bu, geleneksel yazı tiplerini alıp okunabilirliği korurken onlara biraz havalı ve modern bir görünüm kazandırmanın iyi bir örneği!
Etkinlik planlama şirketi Goliath Entertainment için bu web sitesinde bir retro-fütürizm duygusu var. Cesur tipografi, geçmişe bir selam verirken hala anı hissettiriyor.
2021 ilerledikçe daha yaratıcı tipografik tasarımlar görmeyi dört gözle bekliyoruz!
2. Parallax scroll animasyonları
Paralaks kaydırma efektleri yıllardır web sitesi tasarımında bir trend olmuştur ve 2021’de paralaks ile neler yapılabileceğine dair daha incelikli ve yaratıcı keşifler görmeyi umuyoruz.
Alice Lee’nin portföy sitesi, illüstrasyonunu hayata geçirmek için fare konumuna yanıt veren paralaks efektlerini kullanıyor. Burada hareket miktarı küçüktür ve kahramanın sınırları içindedir. Bu, paralaksı kısıtlama ve niyetle kullanmanın harika bir örneği.
Derinlik ve hareket yanılsaması oryantasyon bozukluğuna ve baş dönmesine neden olabileceğinden, paralaks etkilerinde çok fazla hareketin vestibüler bozukluğu olan kişiler için zararlı olabileceğini unutmayın. Paralaksı minimum düzeyde ve zarar vermeden dahil etmelerini sağlamak için daha fazla tasarımcının dikkate aldığını gördüğümüz bazı yönergeler:
- Paralaks etkilerinin insanları asıl önemli kısımdan uzaklaştırmasına izin vermeyin.
- Kullanıcının önemli bir görevi tamamlamasını zorlaştırmayın.
- Paralaks efektlerinin sayısını minimumda tutun.
- Her örnekte paralaks hareketi miktarını en aza indirin.
- Ekranın küçük bir alanında paralaks efektlerini kısıtlayın.
- Kullanıcıların paralaks efektlerini kapatabilmesi için bir seçenek ekleyin.
Her paralaks animasyonunun ekranda büyük hareketler yapması gerekmez, daha ince uygulamalar da görüyoruz. Green Meadow için bu web tasarımında, bu etki neredeyse tamamen gözden kaçabilir. Ancak metnin bu nazik ortaya çıkışı, göründüğü gibi her metin bloğuna dikkat çekmek için yeterli bir yan yana koyma yaratıyor.
Gelecek yıl, paralaks kaydırmanın gösterişli efekt için değil, içeriğin önemli parçalarını vurgulamak veya vurgulamak için bir araç olarak ustaca kullanıldığını görmeyi heyecanla bekliyoruz!
3. Yatay Kaydırma
Daha önce bir web tasarımı faux-pas olarak kabul edilen yatay kaydırma geri dönüyor.
Yatay kaydırma ile denemeler yapmaya devam eden daha fazla web tasarımcısı görüyoruz. Bunu en iyi yapanlar, farklı olmak adına değil, bir resim galerisinde olduğu gibi ikincil bilgileri aşamalı olarak ifşa etmenin pratik bir yolu olarak kalıbı bozarlar.
Momento Design Studio‘nun ana sayfasında, birincil düğmenin yanında, aynı zamanda bir bağlantı görevi gören net bir ipucu bulunur ve sizi yavaşça tıkladığınızda öne çıkan çalışmalara kaydırır. Kaydırma hareketi iyi tempolu ve çok uzun değil, öne çıkan görüntülerin parlamasına izin veriyor.
2021’de yatay kaydırmayı başarıyla kullanan tasarımcılar şu hususları göz önünde bulundurabilir:
- Kullanıcıları yatay içerikte gezinmeye zorlamayın, net etiketlere sahip ok düğmeleri gibi alternatif gezinme yollarına izin verin.
- İçeriğin yatay kaydırmayı nerede kullandığını belirtmek için net görsel ipuçları kullanın ve bu ipuçlarını fareyle üzerine gelmelerin arkasına saklamayın.
- Yatay kaydırmada hangi içeriğin görüntülenmesinin fayda sağlayacağı konusunda dikkatli olun — yatay kaydırma, kullanıcılara küçük bir önizleme göstereceği ve onlara daha fazlasını görüntüleme veya sayfada aşağı doğru ilerlemeye devam etme seçeneği sunacağından, bir fotoğraf galerisi iyi bir rakiptir.
- Okunması gereken metin için yatay kaydırma gerektirmekten kaçının.
4. 3D görseller her yerde
Daha yüksek çözünürlüklü ekranların ortaya çıkmasıyla, 3D tasarım Geocities’in bloklu ve eğimli kenarlarından çok yol kat etti. Artık web tasarımlarına kusursuz bir şekilde dokunan yüksek kaliteli 3D görseller görüyoruz. Gösterişli ve dikkat dağıtıcı olmak yerine, genel kullanıcı deneyimine katkıda bulunuyorlar.
Yaratıcı ajans Sennep, web sitesinde 3D öğelerle derinlik çizgileri atıyor. Burada tüm tasarım öğeleri arasında hoş bir uyum duygusu var. Bu, daha minimalist düzenlerde 3D’nin nasıl daha büyük bir izlenim bırakabileceğinin mükemmel bir örneğidir.
5. Multimedya deneyimler
Çoğu insanın daha yüksek internet hızlarına erişimi olduğu için, multimedya web deneyimleri her yerde ortaya çıkıyor. Görsel, metin, video ve sesi bir araya getirmek, zengin bir kullanıcı deneyimi sağlar.
2021’deki başarılı tasarımlar, multimedya deneyimleriyle kullanım sağlayacaklarsa dikkat etmeleri gerekenler:
- Hareket ve sesi birleştirirken olduğu gibi basitliğe öncelik verin. Çok fazla şey, bilişsel bozukluğu olan insanlar için dikkat dağıtıcı veya bunaltıcı olabilir.
- İçeriğin erişilebilirliğini en üst düzeye çıkarmanın bir yolu olarak farklı medya biçimlerini dikkatli bir şekilde kullanın.
- Önceden kaydedilmiş tüm multimedya için altyazıları ve dökümleri ekleyin.
- Resimler için alternatif metin ekleyin ve karmaşık resimlere daha uzun açıklayıcı metinlerle eşlik edin.
- Tüm metnin görüntülerin içinde işlenmek yerine HTML ile yapıldığından emin olun.
- Videoyu veya hareketli içeriği otomatik olarak oynatmaktan kaçının: bunun yerine, kullanıcıya içeriği oynatma ve duraklatma seçeneği sunan net bir “oynat” düğmesi sağlayın.
- Multimedyayı etkili ve erişilebilir bir şekilde kullanmak, çeşitli faktörleri ele alma sorumluluğunu beraberinde getirir. Burada video erişilebilirliği hakkında daha fazla kaynak bulabilirsiniz.
Nicolas Errera‘nın sitesi, güzel bir arka plan videosu için oynatma kontrolleri içerir: tıklandığında oynatılır ve ayrıca duraklatılabilir. Ayrıca, videonun ne kadar içinde olduğunuzu gösteren ince bir animasyon içerir.
6. Artırılmış gerçeklik (AR) deneyimleri
Ve multimedya deneyimleriyle, artırılmış gerçeklik (AR) kullanan tüm şaşırtıcı sürükleyici deneyimleri de unutmayalım. AR, artık Apple veya Android mobil cihazınızda Pokémon avlamaktan daha fazlasını ifade ediyor. WebXR API gibi yeni teknolojiler ve Wayfair Technologies tarafından yapılan yazılımlar bu alanı neredeyse herkes için açtı.
Jeep, bu “Bir Jeep Yap ve Fiyatlandır” sayfası için AR’yi kullanır. Araba galerilerine adım atmaktan nefret edenler için bu, havadar ve baskısız bir deneyim sağlar. Daha fazla perakende ve e-ticaret web sitesi, ürünlerini satmaya yardımcı olmak ve satın alma sürecinde potansiyel müşterileri güçlendirmek için AR’nin gücünden yararlanıyor.
7. Gren üzerine odaklanma
Sert ızgaralar ve düz renkli düz bloklar, kişiliği bir web tasarımından gerçekten çekebilir. Grenli dokular onlara daha doğal bir his verebilir.
Studio Gusto için hazırlanan bu web sitesinde grenliliğin güzelliğini görüyoruz. Birçok web tasarımında yaygın olan kaygan mükemmellikten daha doğal hissettiren daha kaba bir kullanıcı deneyimi için lo-fi tasarım öğelerini kullanır.
8. Pastel renklere odaklanma
Tıpkı tanelerin tasarıma daha doğal bir his vermesi gibi, sade renkler de verebilir.
Magic Theatre Studio, bu web tasarımının bölümleri arasında belirgin bir kontrast oluşturan koyu yeşil bloklarla birlikte açık bir renk paleti kullanır. Bu sessiz renkler, elle çizilmiş metin ve çizimler için mükemmel bir fon oluşturur. Arka planda, neredeyse fark edilemeyen hafif vızıldayan bir gren ve açık ve koyu arka planlarda ince bir bozulma var, bu da tasarımı çok canlı hissettiriyor.
Magic Theatre Studio’nun web sitesi, sakin bir etki için nötr krem rengi basit siyah grafiklerle birleştirir.
9. Tercihe göre tasarımlar
Web geliştirme, daha kişiselleştirilmiş deneyimler sunmada büyük adımlar attı. Bu, karanlık/aydınlık modu ile bir sitenin görünümünü ve gezinmesini değiştirmenin diğer yolları arasında geçiş yapmaktan, Spotify tarafından oluşturulan özel çalma listeleri gibi kişinin zevkine göre özel olarak hazırlanmış içerik sunmaya kadar her şey olabilir.
Yeni tasarım uygulamaları ve algoritmalar, interneti daha az pasif bir kullanıcı deneyimi ve daha kullanıcı merkezli hale getiriyor. Gelecek, web sitelerinde gezinenlerin ihtiyaçlarını, isteklerini ve zevklerini karşılamaya daha fazla odaklanmayı getirecek.
10. Gauss bulanıklığı
Gauss bulanıklığı, görüntülere ve gradyanlara yumuşak bir odak girdabı sağlamakta çok iyi çalışıyor. Bu etki bir süredir var, ancak tasarımcılar bunu web tasarımlarında daha belirgin alanlarda kullanıyor.
Moment House, ana sayfalarına bir kahraman görüntüsü ile değil, hoş bir gauss rengi bulanıklığı ile başlar. Bu, atmosferik bir his verir ve onu takip eden Los Angeles şehir manzarası fotoğrafına doğrudan bağlanır. Los Angeles’ın içinden bakıldığı altın rengi ışık ve sisin merceğini mükemmel bir şekilde yakalar.
11. Kaydırmalı anlatım
Web deneyimleri aracılığıyla hikayeler anlatan tasarımcılarda artan bir eğilim gördük. İşte burada kaydırmalı anlatım devreye giriyor — hikayeyi zenginleştiren ve sizi anlatısına bağlayan görsel hikaye anlatımı!
Scrollytelling alıştırma kısıtlamasının en iyi uygulamaları için:
- Hareketi küçük bir alanda tutun.
- Kullanıcının şartlarına göre etkileşimler sağlayın: etkileşimleri ve hareketleri oynatmak / duraklatmak / durdurmak için açık oynatma kontrolleri sağlayın.
- Kaydırmalı anlatım öğelerinin dikkati önemli metinden uzaklaştırmak yerine hikayeyi vurgulamaya yardımcı olduğundan emin olun.
12. Karanlık mod
AC&DC’nin “Back in Black” parçasına bir göz atın çünkü karanlık mod 2021’de daha fazla ekrana geliyor! Daha fazla tasarımcı karanlık mod estetiğini benimsiyor ve siyah, tasarım öğelerinin ekrandan çıkmasını sağlamak için mükemmel bir karanlık zemin sağlıyor.
Aşağıdaki örnekte, Obys Agency, ince dokulu siyah bir arka planı güzel bir serif yazı karakteriyle eşleştirerek moda tasarımcısı Peter Lindbergh‘e güzel bir övgü tasarladı.
Kendi tasarım çalışmanızla 2021’de kararmaktan korkmayın!
14. Geometrik ızgaralar
Izgaralar basittir ancak bir tasarıma nasıl entegre edilebilecekleri konusunda çok fazla esnekliğe sahiptir. Geometrik ızgaralar, temiz ve cesur bir görünüme sahip bir düzeni yapılandırmanın bir yolu olarak ilgi kazanıyor.
Hudson Gavin ve Martin‘in bu tasarımı, hem gezinme öğeleri hem de içerik için bloklar kullanıyor. Bu büyük renkli kareler arasında gezinmek eğlencelidir ve dikkatinizi çekmek için çok iyi çalışır.
15. Özel imleçler
İmleçler muhtemelen web tasarımının en çok gözden kaçan yönlerinden biridir ve çoğumuz eski bir okla yetiniyoruz. Bir tasarımcı bir web sitesinin bu önemsiz parçasını alıp havalı bir şeye dönüştürebildiğinde, bu oldukça büyük bir başarıdır.
Az önce HGM Legal’dan ve geometrik ızgara kullanımlarından bahsettik, ama aynı zamanda bu duvardan çıkma koyu siyah imleç de var.
16. Kayan kartlar
Kayan kartların tasarımların ayrılmaz bir parçası haline geldiğini görmekten heyecan duyduk. İster yatay ister dikey kaydırma yapın, bir web sitesine hızlı hareket katarlar ve bilgi sunmanın harika bir yoludur.
Ofcina‘nın bu web sitesi, kayan kartları için göz alıcı bir renk dizisi kullanıyor.
17. Renksiz tasarımlar
Seyrek beyaz, temiz bir tasarım sağlar ve renkli tüm öğeler daha da fazla dikkat çeker.
Minimal sade tasarım gibi bir şey bile mikro etkileşimler, animasyonlar ve diğer dinamik efektlerle ilgi çekici bir deneyim olabilir.
Kullanıcı Deneyimi Veritabanı ayrıca renksiz bir tasarım yaklaşımı benimser, bu da onu minimal ve okunması kolay hale getirir.
18. Ses
Sesi bir tasarımın ayrılmaz bir parçası olarak sunmak, görme engelliler için erişilebilirlik engellerini ortadan kaldırır ve ayrıca bir web sitesinde büyük bir metin parçasını dinlemeyi tercih edenlere fayda sağlar,
New York Times, öne çıkan makalelerinden bazılarına eşlik eden ses sağlama konusunda harika bir iş çıkarıyor.
Gelecekte web sitelerinde daha fazla ses seçeneği görmeyi ve insanlara içeriği nasıl deneyimlemek istedikleri konusunda bir seçenek sunmayı umuyoruz.
19. Baskıdan ilham alan web tasarımı
Dijital teknolojinin bir zamanlar fiziksel olan nesnelerin yerini almasıyla birlikte, eski medya yeniden doğdu. Plak albümlerinin popülaritesi, insanların sadece bir ve sıfırdan ibaret olmayan bir şeyi deneyimlemek istediklerinin kanıtıdır.
İlhamını baskıdan alan mizanpajlar, insanların gerçek dünyadaki bir şeyle bağlantı kurma arzusunu yerine getirir. Magazin tarzı mizanpajlar ve geleneksel grafik tasarımın diğer unsurları, kağıt üzerine baskının dokunsal deneyimine bir bağlantı sağlar.
Home Run Studio‘dan alınan yukarıdaki örnek, baskıdan ilham alarak onlara yayıncılık konusunda bir aşinalık ve bağlantı sağlar.
20. Tutarlılık için tasarım sistemleri
Tasarım sistemleri güçlüdür. Tekrarlanabilir mizanpajlar ve ilgili koleksiyonlar oluşturmak için bir CMS kullanarak, hızlı bir şekilde yinelenen web siteleri oluşturmanın yanı sıra güncellemeler veya düzenlemeler yapmak da kolaydır. İster küçük ölçekte ister daha büyük ölçekte kullanılsınlar, tasarımlarını oluşturma ve yönetme konusunda herhangi bir kuruluş için yararlıdırlar.
Ayrıca tasarım sistemi iş akışlarını daha da kolaylaştırmak için geliştirilmiş gerçekten kullanışlı uygulamalar gördük. Zeroheight, görevleri yönetmek ve işbirliği yapmak için merkezi bir alan görevi görür. Figma, diğer tasarım sistemleri araçlarının yanı sıra şablonlar da sunar.
21. Kod yok!
Kod yok demek, elbetteki kodun tamamen ortadan kaldırılması anlamına gelmez. Programcılar ve geliştiriciler her zaman önemli olacaktır. Hiçbir kod, bu uzmanlık alanlarının, aksi takdirde muaf tutulacak kişilere açılması anlamına gelmez. Bir fikri veya vizyonu olan herkesin yaratmasını sağlar.
Tasarımcılar hiçbir kod olmadan ön uç geliştiriciler haline gelirler. Yazarlar web tasarımcısı olurlar. Ve küçük işletme sahipleri e-ticaret dünyasına atlayabilirler. Kim olursanız olun, hiçbir kod size daha fazlası olmanızı sağlamaz. Tasarımcı olmayanlar, sadece tasarlayanlar ve geliştiriciler arasındaki ayrım çizgilerini ortadan kaldırır. İnsanları işbirliği içinde bir araya getirir.
Yeni kodsuz platformların gelişimini ve müfredatlarında bununla ilgili öğretileri içeren tasarım kursları için heyecan vericiydi. 2021’de kodsuz hareketle ne olacağını görmek için sabırsızlanıyoruz.
Web tasarımının nasıl değişmeye devam ettiğini ve kodsuz hareketin devam eden ivmesini görmek her zaman heyecan vericidir.
Ayrıca yeni yılda neler yaratacağınızı görmek için sabırsızlanıyoruz. En son çalışmalarınızı bizimle paylaşın ve sürekli büyüyen Ozicab’a katılmak için bizlere sosyal medya hesaplarımızdan ulaşın!
