2017'de İzlenecek 20 Yükselen Web Tasarım Trendleri

Bir yıl daha geçti ve tasarımcılar geleceğe doğru bakıyorlar. çok umut verici tasarım trendleri 2017'de patlak vermek zorundalar. Geçen yıl en iyi 2016 tasarım trendlerini ele aldım ve gördük birçok değişiklik o zamandan beri.

Yani, bu yazı için ben seçtim en iyi 20 trend farkettim ki 2017 yılında çekiş kazanıyor. Bu tasarım trendleri herhangi bir web sitesine başvurabilir, Bu yüzden, 2017 ve sonrasında ilerlerken gözlerinizi bu teknikler için uzak tutunuz..

1. “Öne çıkanlar” Rozetler

Startup'lar, bloglar, SaaS projeleri ve hatta küçük işletmeler şimdi kullanıyor “özellikli” Rozetler kendi web sitelerinde. Bu rozetler sık ​​sık ana bloglardaki makalelere bağlantı HuffPo, Forbes, CNN, Fox ve diğer haberler gibi.

Amaç için bir web sitesini doğrula ve güven oluşturmak yeni ziyaretçilerle. Birisinin bir web sitesine güvendiğini görmek istediğinde, web sitesine güvenmesi daha kolay yetkili yayınlarda belirtilen.

Aslında birçok popüler blog maruz kalmayı takdir etmek, Bu yüzden gerçekten katılan herkes yardımcı olur. Bu büyük siteler sıklıkla logolarını çevrimiçi yayınlayın ancak saydam PNG'leri veya SVG'leri de yalnızca etrafa bakarak bulabilirsiniz.

Ayrıca size tavsiye edilir orijinal makaleye geri dön Sitenizden bahseden. Bu kanıtlıyor Gerçekten bahsettin sitede ve sadece iddialarda bulunmuyorsunuz.

2. Bold all-caps nav bağlantıları

gördüm düzinelerce şık navigasyon menüsü hepsi bu aynı tasarıma güveniyor. Bu nav bağlantıları yazı tipine ve boyutuna göre değişir ama onlar genellikle benzer özelliklere sahip, gibi:

• Tümü büyük harf
• kalın
• Eşit aralıklı
• Sağ köşeye hizalanmış

Zazzle ana sayfası harika bir örnek. Ama bunu bulabilirsin birçok başlangıç ​​web sitesinde çünkü bu bir bağlantıları paylaşmanın temiz yolu okunması kolay ve göz atması kolay.

Ben çoğunlukla bu eğilimi ilişkilendiririm işletmeler ve teknoloji girişimleri ile ancak bloglarda da yaygın olabilir.

Bir dahaki sefere bu eğilimi not edin, çünkü her yerde. Ve 2017'ye kadar iyi büyümesini sürdürmesini bekliyorum.

3. Dergi tarzı bloglar

Blogculuk, 2000'li yılların başlarında böyle bir niş kavram oldu. 2003 yılında bir blog koştuysanız, sevimli bir hobi olarak kabul edildi. On yıldan biraz fazla bir sürede, bu eğilim kökten değişti. Şimdi bloglar yapabilir tam zamanlı bir gelir sağlamak, ve onlar başlıyor dijital dergilere daha çok benziyor.

İlk 2006'da piyasaya sürüldüğünde TechCrunch'ın orijinal tasarımına bakın. Genel bir WordPress bloguna benziyor.?

Şimdi 2017'deki Techcrunch'ın güncel anasayfasına bakalım:

Sadece dergiye benziyor, o da biri gibi çalışır. TechCrunch her gün düzinelerce (yüzlerce olmasa) yeni gönderi yayınlamaktadır. Başlangıç ​​haberleri için 1 numaralı kaynak..

Dergi tarzı tasarım trendleri büyük bir fark yaratıyor. Ana sayfa bir büyük özellikli hikaye bölümü, her gönderi kendi küçük resmi var, ve makale sayfaları manşet merkezi.

Bunu düşündüğünüzde, TechCrunch fazla değişmedi. Hala “sadece bir blog”. Fakat bir dergi gibi tasarlandı ve yönetildi, ve bu tüm farkı yaratıyor.

4. Video arka planları

Otomatik çalma sesi belki de web'deki en sinir bozucu eğilimdir. Ama şaşırtıcı bir şekilde, otomatik oynatılan video (ses olmadan) hızla büyüyen bir trend. Bunu, bir video arka planının bulunduğu düzinelerce iş sitesinde görebilirsiniz. tüm ekranı devraldı.

Doğru uygulandığında bu tekniği çok seviyorum. Sürece video site ile ilgilidir ve içeriği engellemiyor, Başlığında kullanmanın harika bir etkisi olduğunu düşünüyorum..

5. Hayalet düğmeleri

Gibi minimalizm daha fazla beslenir web tasarımında birçok yeni trend ortaya çıkıyor. Böyle bir eğilim hayalet düğmelerinin yükselişi iç dolgusu olmayan ancak dış kenarlığı olan.

Bu düğmeler çoğu zaman diğerleriyle zıt İlgi çekmek. Yeşil kayıt butonu ile bunu Instantmojo ana sayfasında görebilirsiniz. hemen yanında canlı bir demoya bağlayan hayalet düğme.

Diğer siteler kabul etti Tamamen hayalet bir tasarım stili düğmelerinin yanında. Buradaki harika bir örnek, yeni Bootstrap düzeni..

Bence hayalet düğmeler bu sitelerde işe yarıyor minimalizm yönüne yaslanmak. Her web sitesi için uygun olmayabilirler, ancak kullanımlarının her geçen yıl arttığını görüyorum.

6. Modal pencere tercihleri

Kalıcı pencereler süper can sıkıcı ve hiçbir kullanıcının onları beğeneceğini hayal edemiyorum. ancak kaydolmaları arttırdıkları kanıtlandı, ve pazarlamacılar çalışan teknikleri görmezden gelemezler.

Bu nedenle modal opt-in pencerelerinin çalışacağını düşünüyorum. tırmanmaya devam et 2017'de.

En sevdiğim şey değiller ve onları asla web sitelerime eklemiyorum. Ancak, eğer amaç kayıtları arttırmaksa, kalıcı pencereler olayları döndürmenin kesin yoludur.

Yeni eklentiler bile yapabilir hedef çıkış amacı hangi modal tetikler kullanıcı siteden ayrılmaya çalıştığında. Diğer modellemeler x saniye sonra görünür veya kullanıcı yeterince aşağı kaydırdığında açılacak şekilde ayarlanır.

Modellilerin nasıl tetiklendiğine, nasıl tasarlandığına ya da onlar hakkında nasıl hissettiğinize bakılmaksızın, uzun süre boyunca etrafta olacaklarını düşünüyorum..

7. İllüstrasyon ve vektör sanat

Sketch ve Affinity Designer gibi yeni vektör tasarım programlarıyla, internete giren yeni bir illüstratör dalgası var. Grafik tasarım ve arayüz tasarımı, şimdiye dek hiç olmadığı kadar çok disiplinli tasarımcılarla sürekli bir araya geliyor.

Bu, göreceğimiz anlamına gelir çok daha fazla özel simgeler ve tam sayfa çizimler yakın gelecekte.

Birçok ressam uygulamalı sanatçıdır, bu yüzden göreceğimizi düşünüyorum. daha tam sayfa arka planlar Dijital resim yazılımı ile yapılmış, konsept sanat gibi detaylı.

8. Sabit kaydırma kenar çubukları

Sabit tasarımın ilk dalgası gezinti çubuklarına odaklanmış. Bunların hepsi özellikle sabit navbarın kullanıldığı duyarlı tasarımlarda çok yaygın yerel bir mobil uygulama hissini çoğaltır.

Fakat 2017'de bir tane daha yapışkan unsur görmeyi bekliyorum.-yapışkan kenar çubuğu.

Neredeyse her büyük blog bu tür yapışkan kenar çubuğunu kullanır. O içeriği görünümde tutar her zaman ve kullanıcıların olacak olasılığını artırır kenar çubuğu içeriği ile etkileşime gir.

Artı yapabilen onlarca ücretsiz jQuery eklentisi ile birlikte yapışkan kenar çubuğu etkisini çoğaltmak. Bunu herhangi bir web sitesinde ayarlamak her zamankinden daha kolay.

9. Sayfa içindekiler tablosu

Yeni bir vaka çalışması bulundu longform içeriği shortform'dan daha iyi performans gösteriyor Hem sıralamada hem de kullanıcı tutma kalitesinde. Bu sorgular her zaman doğru değildir, çünkü bazı sorgular hızla cevaplanabilir.

Ancak, web’de çok daha uzun biçimli bir içeriğe sahip, görmek doğal makalelere eklenen daha fazla içerik tablosu. Bunu uzun inceleme sitelerinde veya listelenen öğelere ayrılan makalelerde göreceksiniz.

İçindekiler tablosu ekleyebilir kullanıcı deneyimini geliştirmek ve yardım okumayı bölmek daha küçük parçalara. İçindekiler da yapabilirsiniz sitenizin daha iyi sıralanmasına yardımcı olun! Google sayfanızı değerli bulursa, atlama bağlantılarını al arama sonuçlarında.

ToC'lerin şu anda oldukça az olduğu doğru olabilir. Ancak bu eğilimin 2017’den daha uzun yıllar sonra yükselmesini bekliyorum..

10. Parlak renkli tasarımlar

Bu trendin minimalizmden mi yoksa Google'ın materyal tasarımına bir tepki olarak mı ortaya çıktığından emin değilim. Ama kullanan onlarca web sitesine rastladım diğer canlı renk tonlarıyla karışık parlak pastel renkler çok hayali bir görünüm yaratmak için.

Rentberry ana sayfası, aynı zamanda kullanan harika bir örnek ton degradeler. Ve daha önce bahsedilen “Öne çıkanlar” altında bulunan rozetler! Bir sitede iki trend.

Renkleri fark edeceksiniz tüm sayfaya nüfuz etme, ve diğer beyaz ve gri tonlarında susturulur..

Bunları yeterince gördüm canlı renk şemaları yükselişe inanmak.

11. Kaydırma animasyonları

Web tasarımcıları kaydırma jacking ve ne kadar korkunç olduğunu biliyor. Ancak bu başlık ile kastediyorum değil “kaydırma animasyonları”. Şimdi birçok site gördüm içeriği görüntülemeye canlandır sayfanın belirli bir bölümünü kaydırdığınızda.

Bu eğilim çoğunlukla başlangıç ​​sayfası ve SaaS şirketleri ile sınırlı tasarımlarında biraz pizzazz isteyen.

Özellikle faydalı bir trend olup olmadığını söyleyemem. Kesinlikle gözü kapıyor ama estetiğin ötesinde bir şey olduğunu sanmıyorum. Yine de, hızla yayıldığı görülüyor ve ne zaman az kullanılan gerçekten düzgün olabilir.

12. Tek sayfa uygulamalar (SPA'lar)

Tek sayfa uygulamalar web siteleridir tamamen Ajax aramaları ile inşa. JavaScript bir sunucudan içerik çeker ve dinamik olarak yükler, yani sayfa asla yenilenmez.

Yaygın örnekler Gmail ve Facebook gibi sitelerdir. Fakat daha fazla JS teknolojisi, Her zaman daha fazla ve daha fazla SPA geliştirildiğini fark ediyorum. Heck, CodePen bile bir SPA olarak düşünülebilir.

React & Aurelia gibi güçlü frontend kütüphaneleriyle 2017'de sıfırdan SPA oluşturmak daha kolay olacak.

13. Geçişli arama çubukları

Bu arama alanları olmak için kullanılır her zaman görüşündeydi Web sayfasının bir yerinde, kenar çubuğunda veya navigasyonda. Ancak son zamanlarda daha fazla arama alanı fark ettim. varsayılan olarak gizli, ve olmalı görünüme girdi.

Kesinlikle kullanışlı bir eğilim sayfada yer kazanmak Ken hala arama özelliğini erişilebilir kılmak. Arama formunu yeni bir tasarımda nereye yerleştireceğinizden emin değilseniz, navigasyondaki bir büyüteç simgesine bağlı bir geçiş alanı kullanmayı düşünebilirsiniz.

14. Adblock mesajları

Bu gerçeği inkar etmek yok reklam engelleme artıyor. Tek sorun, yayıncıların bu eğilimle nasıl başa çıkacakları. Bazı siteler kibarca reklam alanlarına mesaj ekle Time.com gibi. Hongkiat'ta fark edeceksiniz boşluğu doldurmak için dahili reklamlar siteye daha fazla bağlantı veren.

Arttığımı gördüğüm ciddi bir eğilim adblock içerik blokları. Bu bir tekniktir “reklam engelleyicilerini engelle”. Bu özellik Business Insider ve Forbes gibi birçok büyük sitede zaten mevcuttur. Ne yazık ki, bu hem kullanıcıyı hem de yayıncısını incitiyor ve hepsi kalitesiz reklamcılık tekniklerinden kaynaklanıyor..

Sonuç olarak, kimi suçladığınız veya reklam engelleme tartışmasının neresinde durduğunuz önemli değildir. Daha fazla kişi adblock eklentileri yüklüyor ve ben bekliyorum geri dönmek için daha fazla yayıncı.

15. Saf SVG simgeleri

SVG grafikleri çoktan ağa sızmışlar ama gün geçtikçe daha da büyüyorlar. 2017’nin olacağıma dair bir his var SVG'ler için büyük bir yıl internette.

Binlerce bulabilirsiniz ücretsiz SVG Icon Setler nasıl arama yapılacağını biliyorsanız Flaticon gibi sitelerde. Ama ayrıca SVG'leri HTML olarak kodlayın, örneğin bu örneği CodePen’de kullanarak.

Dolayısıyla, tasarımcıların SVG'leri kullanmanın bir yolu var ve geliştiricilerin de SVG'leri kullanmanın bir yolu var. Modern tarayıcı desteği iyi görünüyor yönetim kurulu genelinde, bu nedenle uyumluluk ile ilgili bir sorun yok. Gereken tek şey, tasarımcılar için yeterli SVG'lerin gücünü tanır ve onları kullanmaya başla!

16. Adobe XD

Adobe söndürüldü Adobe XD'nin tam bir beta sürümü 2016 yılında ve o zamandan beri hızlı bir şekilde büyüdü. Şu anda hem Mac'i hem de Windows'u destekler, ve Onun test aşamasında tamamen açılmadan önce.

Herhangi bir programın eskiz edilmesi fikrine değinebilirsiniz ancak Adobe, yaratıcı bir çalışmanın ana yazılım şirketidir. Plus Sketch, yalnızca Adobe’de yalnızca Mac’tir herkesi desteklemek istiyor.

Gelecek sene Adobe XD hakkında daha fazla şey okuyacağımıza kesinlikle inanıyorum. İçin gitmek için yazılım olabilir UI örnekler tasarlama-bu yüzden nihayet Photoshop’u bir fotoğraf işleme aracı olarak kullanabiliriz (istenildiği gibi).

Yeni yazılımın yükselişi ile birlikte onlarca öğreticiler ve freebie GUI kitleri yanı sıra. Dribbble ile birlikte birçok Adobe XD freebies bulabilirsiniz iki yeni XD odaklı freebie sitesi Designmine ve XD Guru.

17. Daha fazla hamburger menüleri

Onu sev ya da nefret et Hamburger kalmak için burada. Çok sayıda kullanılabilirlik çalışması var. görünümden gizli menülere karşı tartışmak. Ancak küçük bir ekran ve yalnızca bu kadar alternatifle, şimdilik daha iyi bir alternatif yok.

Hamburger simgeleri yavaş tanınabilir semboller olma Nav menüler için. Tıpkı bir büyüteç simgesinin ima ettiği gibi “arama”, Üç çubuklu hamburger simgesi yakında eşanlamlı olacak “Menü”.

Bu, teknolojiye meraklı bireylerin çoğu için zaten geçerli. Ancak her geçen yıl daha fazla insan akıllı telefonlar alıyor ve mobil web'de gezinmeye başlıyor. Ve öğreniyorlar bu hamburger ile nav menüsünü ilişkilendirme görünürde sonu olmayan.

18. Ürün özellik simgeleri

Bu trend hakkında Treehouse'a yazdım ancak son zamanlarda bahsetmedim. Ve 2017'ye girerken bu eğilim çok büyük olacak. Muhtemelen en yaygın yoldur. ürün özelliklerini bir ana sayfada paylaş.

Sen başla özelliklerin bir listesini yapmak ürününüz için. Ürün, bir SaaS programından WordPress temasına veya hatta fiziksel bir öğeye kadar herhangi bir şey olabilir..

O zaman ya özel simgeler tasarımı veya simge seti bulmak bu özellikleri temsil etmek. En iyisi genel özelliklerden kaçının gibi “dürüst” veya “hızlı” çünkü çoğu insan bu şeyi bekler.

Bunun yerine, özellikleri listele bu gerçekten önemli. Birinci sınıf bir WP temasıysa, yanıt verilebileceğini, kaç tane widget'ın geldiğini veya menünün nasıl çalıştığını listeleyebilir.

Bu özellik simgeleri görseller gibi çalışmak yardım etmek her özelliği sat. Yalnız metin tüketmek zor ancak görseller çok daha kolaydır bir bakışta anlamak.

19. Kat Üstü CTA'lar

Çağrı-eylemler geleneksel olarak yerleştirilmiş bir web sitesinin her yerinde. Ancak ziyaretçilerle web sitelerinde daha az zaman harcamak, CTA’ya sahip olmak çok önemli kıvrımın hemen üstünde.

Bu harekete geçirme ifadeleri düğmeler, tercih formları veya diğer girişler olabilir. insanları harekete geçmeye teşvik et Blog postasını kaydetmek veya okumak gibi.

Size bir CTA'nın nasıl tasarlandığını veya dönüşümler için nasıl optimize edileceğini söyleyemem. Ancak eğilimin bu CTA'ları koyuyor gibi göründüğünü söyleyebilirim katlamanın üstünde ve net görünümde tüm ziyaretçilerin görmesi için.

20. Küçük içerik alanları

Monitörler, çoğu web sitesinin yapması gereken kadar büyüdü maksimum genişlik ayarlamak. Sadece 700 piksel genişliğe kıyasla 2000 piksel genişliğinde cümleler okumak çok daha zor.

Küçük içerik tüketmek daha kolay, ve nihayetinde bir içerik ağırlıklı web sitelerinde daha iyi bir deneyim.

Bence daha fazla tasarımcı bunu gerçekleştiriyor ve yavaşça içerik alanlarının boyutunu azaltmak. Maksimum 750 piksel genişliğe tercih ediyorum, ancak 600 piksel veya daha küçük boyutlara gidebilirsiniz..

Daha kısa paragraflar ile daha az cümle ve daha küçük içerik alanları her zaman okunabilirliği arttır. NY Times gibi büyük yayınlar kendi yapısal yönergeleriyle değişebilir. Ancak, basit bir blog veya iş sitesi için trend doğru ilerliyor daha küçük paragraflara ve içerik alanlarına sahip daha uzun içerik.

Sarma

Bu yazının üstesinden gelemediğim birçok trend var, ancak bunların 20'sinin en ilginç olduğunu düşünüyorum. 2017'ye doğru ilerledikçe, hangi eğilimlerin patladığı ve hangilerinin olmadığı açıkça görülmeli.

Yaklaşan tasarım trendleri için başka fikirleriniz veya önerileriniz varsa, aşağıya bir yorum yazmaktan çekinmeyin.