20 Peningkatan Trend Reka Bentuk Web Untuk Menonton Pada Tahun 2017
Satu tahun lagi telah berlalu dan pereka mencari ke hadapan untuk masa depan. Ramai trend reka bentuk yang menjanjikan terikat meletup pada 2017. Tahun lepas saya merangkumi trend reka bentuk teratas 2016 dan kami telah melihat banyak perubahan sejak itu.
Jadi, untuk jawatan ini saya telah memilih 20 trend utama yang saya perhatikan mendapat daya tarikan pada tahun 2017. Trend reka bentuk ini boleh memohon kepada mana-mana laman web, jadi jaga mata anda untuk teknik ini ketika kami bergerak melalui 2017 dan seterusnya.
1. “Disediakan dalam” lencana
Pemula, blog, projek SaaS dan bahkan perniagaan kecil kini menggunakan “seperti yang dipaparkan dalam” lencana di laman web mereka. Lencana ini sering pautan ke artikel di blog arus perdana seperti HuffPo, Forbes, CNN, Fox, dan berita lain.
Matlamatnya ialah mengesahkan laman web dan membina kepercayaan dengan pelawat baru. Lebih mudah bagi seseorang untuk mempercayai laman web apabila mereka dapat melihat bahawa ia telah berlaku yang disebut dalam penerbitan berwibawa.
Malah banyak blog teratas menghargai pendedahan, jadi ia benar-benar membantu semua orang yang terlibat. Laman-laman besar ini sering melepaskan logo mereka secara dalam talian tetapi anda juga boleh mencari PNGs atau SVG yang transparan hanya dengan googling sekitar.
Juga disyorkan bahawa anda pautan balik ke artikel asal menyebutkan tapak anda. Ini membuktikan bahawa anda benar-benar disebut di laman web ini, dan anda bukan hanya membuat tuntutan.
2. Bunyi semua pautan tudung semua
Saya telah melihat berpuluh-puluh menu navigasi yang rapi semuanya bergantung pada reka bentuk yang sama. Pautan nav ini bervariasi dalam fon dan saiz tetapi mereka biasanya mempunyai ciri yang sama, seperti:
- Semua topi
- Bolded
- Sekali jaraknya
- Diselaraskan ke sudut kanan
Laman utama Zazzle adalah contoh yang bagus. Tetapi anda boleh mencari ini di banyak laman web permulaan kerana ia adalah a cara bersih untuk berkongsi pautan yang mudah dibaca dan mudah dilayari.
Saya kebanyakannya mengaitkan trend ini dengan perniagaan dan permulaan teknologi tetapi ia boleh menjadi lazim di blog juga.
Maklumkan pada kali seterusnya anda melihat trend ini kerana di mana-mana sahaja. Dan saya menjangkakan ia terus bertambah baik sehingga tahun 2017.
3. Blog gaya majalah
Blogging adalah konsep khusus semula pada awal tahun 2000an. Jika anda berlari blog pada tahun 2003 ia dianggap sebagai hobi kecil yang comel. Hanya dalam tempoh satu dekad trend telah berubah secara radikal. Kini blog boleh menyediakan pendapatan sepenuh masa, dan mereka mula kelihatan lebih banyak seperti majalah digital.
Perhatikan semula reka bentuk asal TechCrunch apabila ia mula dilancarkan pada 2006. Sepertimana blog WordPress generik yang betul?
Sekarang lihat halaman utama Techcrunch pada 2017:
Ia bukan sahaja kelihatan seperti majalah, ia juga fungsi seperti satu. TechCrunch menerbitkan puluhan (jika tidak beratus-ratus) jawatan baru setiap hari. Mereka adalah # 1 pergi-sumber untuk berita permulaan.
Trend reka bentuk gaya majalah membuat perbezaan besar. Laman web menggunakan a bahagian cerita yang besar, setiap jawatan mempunyai lakaran kecilnya sendiri, dan halaman artikel pusat di sekitar tajuk utama.
Apabila anda berfikir mengenainya, TechCrunch tidak banyak berubah. Masih ada “hanya blog”. Tetapi ia direka dan diuruskan seperti majalah, dan ini menjadikan semua perbezaan.
4. Latar belakang video
Bunyi pintas semula mungkin merupakan trend yang paling menjengkelkan di web. Tetapi menghairankan, video autoplaying (tanpa bunyi) adalah trend yang berkembang pesat. Anda boleh melihat ini pada lusinan tapak perniagaan di mana latar belakang video mengambil alih keseluruhan skrin.
Saya sangat suka teknik ini apabila ia digunakan dengan betul. Selagi video berkaitan dengan laman web ini dan tidak menghalang kandungan, Saya fikir ia adalah kesan sejuk untuk digunakan dalam tajuk anda.
5. Butang hantu
Sebagai Minimalism memberi makan lebih lanjut ke dalam reka bentuk web, banyak trend baru muncul. Satu trend sedemikian ialah kenaikan butang hantu yang tidak mempunyai isi dalaman tetapi mempunyai sempadan luar.
Kebanyakan masa butang ini berbeza dengan orang lain untuk menarik perhatian. Anda boleh melihatnya di laman utama Instantmojo dengan butang pendaftaran hijau terletak betul-betul di sebelah butang hantu yang menghubungkan ke demo langsung.
Laman web lain telah diterima pakai gaya reka bentuk semata-mata hantu ke butang mereka di sitewide. Satu contoh hebat di sini adalah tata letak Bootstrap baru.
Saya fikir butang ghost berfungsi di laman web itu bersandar kepada minimalism. Mereka mungkin tidak sesuai untuk setiap laman web, tetapi saya melihat penggunaannya bertambah dengan setiap tahun yang berlalu.
6. Optik tingkap modal
Tingkap modal sangat menjengkelkan, dan saya tidak boleh bayangkan mana-mana pengguna mahu mereka. Walau bagaimanapun mereka terbukti meningkatkan pendaftaran, dan pemasar tidak boleh mengabaikan teknik yang berfungsi.
Itulah sebabnya saya fikir modal opt-in windows akan terus mendaki pada tahun 2017.
Mereka bukan perkara kegemaran saya, dan saya tidak pernah menambahnya ke laman web saya. Tetapi jika matlamatnya adalah untuk menambah pendaftaran maka tingkap modal adalah cara yang pasti untuk mendapatkan sesuatu yang bergolek.
Plugin baru juga boleh sasaran niat keluar yang mana mencetuskan modal setiap kali pengguna cuba untuk meninggalkan tapak tersebut. Modal lain muncul selepas x detik atau ditetapkan untuk dibuka apabila pengguna menatal cukup jauh.
Tidak kira bagaimana modal dipicu, bagaimana mereka direka, atau bagaimana perasaan anda tentang mereka, saya fikir mereka akan berada di sekitar untuk jangka panjang.
7. Ilustrasi & seni vektor
Dengan program reka bentuk vektor baru seperti Sketch and Affinity Designer, terdapat gelombang ilustrator baru yang melanggar web. Reka bentuk grafik dan reka bentuk antara muka sentiasa bergabung dengan lebih banyak pereka pelbagai disiplin sekarang berbanding sebelum ini.
Ini bermakna kita akan melihat banyak lagi ikon tersuai dan ilustrasi penuh halaman dalam masa terdekat.
Banyak ilustrator yang diamalkan artis jadi saya fikir kita akan lihat lebih banyak latar belakang halaman penuh dibuat dengan perisian lukisan digital, diberikan secara terperinci seperti konsep seni.
8. Sidebars menatal tetap
Gelombang pertama reka bentuk tetap memberi tumpuan kepada bar navigasi. Ini semua sangat umum terutama dalam reka bentuk responsif di mana navbar tetap mereplikasi perasaan aplikasi mudah alih asli.
Tetapi pada tahun 2017, saya mengharapkan untuk melihat satu lagi elemen lengket-bar sisi.
Hampir setiap blog utama menggunakan bar sisi yang melekat ini. Ia menyimpan kandungan dalam pandangan pada setiap masa dan meningkatkan kemungkinan pengguna akan berinteraksi dengan kandungan bar sisi.
Ditambah dengan puluhan plugin jQuery percuma yang boleh meniru kesan bar sisi melekit. Lebih mudah dari sebelumnya untuk menetapkan ini di mana-mana laman web.
9. Jadual dalam kandungan
Kajian kes baru-baru ini mendapati bahawa kandungan kandungan jauh melebihi prestasi yang pendek dalam kedua-dua kedudukan dan kualiti pengekalan pengguna. Diberikan ini tidak selalu benar kerana beberapa pertanyaan boleh dijawab dengan cepat.
Tetapi dengan kandungan yang jauh lebih panjang di web, ia semulajadi untuk dilihat lebih banyak jadual kandungan ditambah ke dalam artikel. Anda akan melihat ini pada laman tinjauan panjang atau dalam artikel yang memecah masuk ke item yang disenaraikan.
Menambah jadual kandungan boleh meningkatkan pengalaman pengguna dan membantu memecah bacaan ke bahagian kecil. Jadual kandungan juga boleh membantu kedudukan laman web anda lebih baik! Jika Google mendapati halaman anda berharga anda mungkin dapatkan pautan melompat dalam hasil carian.
Mungkin benar bahawa ToCs agak langka sekarang. Tetapi saya menjangkakan trend ini meletup lebih dari 2017 dan bertahun-tahun selepas itu.
10. Reka bentuk terang berwarna-warni
Saya tidak pasti jika trend ini muncul daripada minimalism atau sebagai tindak balas kepada reka bentuk bahan Google. Tetapi saya telah terjumpa ke berpuluh-puluh laman web yang digunakan warna-warna pastel cerah bercampur dengan warna lain yang bersemangat untuk mewujudkan penampilan yang sangat luar biasa.
Laman web Rentberry adalah contoh hebat yang juga digunakan tan kecerunan. Dan bahkan ada yang disebutkan di atas “Disediakan dalam” lencana terletak di bawahnya! Dua trend di satu laman web.
Anda akan perhatikan bahawa warna tidak meresap keseluruhan halaman, dan mereka disenyapkan dengan warna putih & kelabu yang lain.
Saya telah melihat cukup banyak perkara ini skim warna bersemangat untuk mempercayai mereka semakin meningkat.
11. Skrol animasi
Pereka web tahu tentang tatal-tukar dan betapa buruknya. Walau bagaimanapun, itu bukan apa yang saya maksudkan dengan tajuk itu “animasi tatal”. Saya telah melihat banyak laman web yang sekarang bernyawa kandungan ke dalam pandangan apabila anda menatal lalu bahagian tertentu halaman.
Trend ini kebanyakannya terhad kepada permulaan laman web & syarikat SaaS yang mahukan beberapa pizzazz dalam reka bentuk mereka.
Saya tidak boleh mengatakan jika ia adalah trend yang sangat berguna. Pastinya tidak mengambil mata tetapi saya tidak fikir ia menawarkan lebih daripada estetika. Namun, ia adalah trend yang seolah-olah menyebarkan dengan cepat, dan bila digunakan dengan berhati-hati ia boleh menjadi sangat kemas.
12. Aplikasi satu halaman (SPA)
Aplikasi satu halaman adalah laman web dibina semata-mata dengan panggilan Ajax. JavaScript menarik kandungan dari pelayan dan memuatkannya secara dinamik, jadi halaman tidak pernah menyegarkan.
Contoh umum adalah tapak seperti Gmail dan Facebook. Tetapi dengan lebih banyak teknologi JS, Saya menyedari lebih banyak lagi SPA yang dibangunkan sepanjang masa. Heck, walaupun CodePen boleh dianggap SPA.
Dengan perpustakaan frontend yang kuat seperti React & Aurelia, ia akan menjadi lebih mudah untuk mewujudkan sebuah SPA dari awal tahun 2017.
13. Bar carian boleh dicas semula
Ia digunakan sebagai medan carian sentiasa dilihat di suatu tempat di halaman web, sama ada di bar sisi atau navigasi. Tetapi kebelakangan ini, saya telah melihat lebih banyak medan carian yang diperolehi tersembunyi secara lalai, dan mestilah toggled ke pandangan.
Sudah pasti trend yang berguna untuk menjimatkan ruang pada halaman sementara masih ada mengekalkan ciri carian boleh diakses. Sekiranya anda tidak pasti di mana untuk meletakkan borang carian dalam reka bentuk baru, anda mungkin mempertimbangkan menggunakan medan togol yang dikaitkan dengan ikon kaca pembesar dalam navigasi.
14. Mesej adblock
Tidak dinafikan hakikat bahawa penyekatan iklan semakin meningkat. Satu-satunya soalan ialah bagaimana penerbit akan mengendalikan trend ini. Sesetengah laman web dengan sopan tambah mesej ke dalam ruang iklan seperti Time.com. Mengenai Hongkiat, anda akan melihatnya iklan dalaman untuk mengisi kekosongan itu yang menghubungkan terus ke laman web ini.
Satu trend serius yang saya lihat semakin meningkat blok kandungan adblock. Ini adalah teknik untuk “blok penyekat iklan”. Ciri ini sudah ada di banyak tapak besar seperti Business Insider dan Forbes. Malangnya, ini menyakitkan pengguna dan penerbit, dan semuanya berpunca daripada teknik pengiklanan yang tidak berkualiti.
Akhirnya, tidak kira siapa yang anda nyalahkan atau di mana anda berada dalam perbahasan iklan yang menyekat. Lebih ramai orang memasang plugin adblock, dan saya menjangkakan lebih banyak penerbit untuk menolak.
15. ikon SVG tulen
Grafik SVG telah meresap ke dalam web tetapi mereka semakin besar pada hari itu. Dan saya rasa ada 2017 tahun yang besar untuk SVGs di web.
Anda boleh mencari beribu-ribu set ikon SVG percuma di laman web seperti Flaticon jika anda tahu bagaimana untuk mencari. Tetapi anda juga boleh kod SVG ke dalam HTML, contohnya dengan menggunakan contoh ini pada CodePen.
Jadi, pereka mempunyai cara untuk menggunakan SVG, dan pemaju mempunyai cara untuk menggunakan SVG juga. Sokongan penyemak imbas moden kelihatan baik di seluruh papan, jadi tidak ada masalah dengan keserasian. Semua yang diperlukan adalah pereka yang mencukupi mengiktiraf kuasa SVGs dan mula menggunakannya!
16. Adobe XD
Adobe mengeluarkan beta penuh Adobe XD pada tahun 2016, dan sejak itu berkembang pesat. Ia pada masa ini menyokong kedua-dua Mac & Windows, dan ia dalam fasa ujian sebelum dilancarkan sepenuhnya.
Anda mungkin mencemooh idea mana-mana program memotong Sketch tetapi Adobe adalah syarikat perisian utama kerja kreatif untuk alasan. Lakaran Plus masih Mac sahaja semasa Adobe mencari sokongan untuk semua orang.
Saya yakin kami akan membaca banyak lagi mengenai Adobe XD pada tahun yang akan datang. Ia mungkin menjadi perisian untuk merancang mockups UI-jadi akhirnya kita boleh menggunakan Photoshop sebagai alat manipulasi foto (sebagaimana dimaksud).
Dengan kebangkitan perisian baru, datang puluhan tutorial dan kit GUI freebie juga. Anda boleh mendapatkan banyak tawaran percuma Adobe XD di Dribbble bersama-sama dua tapak freebie yang difokuskan XD baru Designmine dan XD Guru.
17. Lebih banyak menu hamburger
Suka atau benci, yang hamburger ada di sini untuk tinggal. Terdapat banyak kajian kebolehgunaan yang berhujah terhadap menu tersembunyi dari pandangan. Tetapi dengan skrin kecil dan hanya banyak alternatif, tidak ada alternatif yang lebih baik untuk sekarang.
Ikon hamburger perlahan-lahan menjadi simbol dikenali untuk menu nav. Sama seperti ikon kaca pembesar membayangkan “carian”, ikon hamburger tiga bar tidak lama lagi akan sinonim dengan “menu”.
Ini sudah benar untuk kebanyakan individu yang berteknologi tinggi. Tetapi dengan setiap tahun yang berlalu, lebih ramai orang mendapatkan telefon pintar dan mula melayari web mudah alih. Dan mereka belajar bersekutu dengan hamburger dengan menu nav tanpa penglihatan.
18. Ikon ciri produk
Saya menulis tentang trend ini di Treehouse tetapi belum menyebutnya baru-baru ini. Dan akan berlaku pada tahun 2017 trend ini akan menjadi besar. Ini mungkin cara yang paling biasa berkongsi ciri produk di laman utama.
Anda bermula membuat senarai ciri untuk produk anda. Produk ini boleh menjadi apa-apa dari program SaaS untuk tema WordPress atau bahkan item fizikal.
Kemudian anda boleh sama ada ikon adat reka bentuk atau mencari set ikon untuk mewakili ciri-ciri ini. Ia adalah yang terbaik mengelakkan ciri generik seperti “boleh dipercayai” atau “cepat” kerana kebanyakan orang menjangkakan perkara ini.
Sebaliknya, ciri senarai yang sebenarnya penting. Jika tema premium WP mungkin menyenaraikan bahawa ia responsif, berapa banyak widget yang ada, atau bagaimana menu berfungsi.
Ikon ciri ini bekerja seperti visual untuk membantu menjual setiap ciri. Teks sahaja adalah sukar dikonsumsi tetapi visual adalah lebih mudah untuk memahami sekilas.
19. CTA di atas-kali lipat
Panggilan untuk bertindak telah secara tradisinya diletakkan di seluruh laman web. Tetapi dengan pelawat menghabiskan lebih sedikit masa di laman web, adalah penting untuk mempunyai CTA yang kuat tepat di atas lipatan.
Tindakan tindak-tanduk ini mungkin menjadi butang, bentuk opt-in, atau input lain untuk memandu orang untuk mengambil tindakan seperti mendaftar atau membaca catatan blog.
Saya tidak dapat memberitahu anda bagaimana untuk merancang CTA atau bagaimana untuk mengoptimumkannya untuk penukaran. Tetapi saya boleh mengatakan trend seolah-olah meletakkan CTA ini di atas lipatan dan dalam pandangan yang jelas untuk semua pelawat dapat melihat.
20. Kawasan kandungan yang lebih kecil
Monitor telah berkembang begitu besar sehingga kebanyakan laman web perlu tetapkan lebar maksimum. Lebih sukar untuk membaca ayat-ayat ketika mereka 2000px lebar berbanding hanya 700px lebar.
Kandungan yang lebih kecil adalah lebih mudah dikonsumsi, dan akhirnya mewujudkan a pengalaman yang lebih baik di laman web kandungan berat.
Saya fikir lebih banyak pereka menyedari ini, dan akan perlahan-lahan mengurangkan saiz kawasan kandungan mereka. Saya lebih suka lebar maksimum 750px tetapi anda boleh pergi sekecil 600px atau kurang.
Perenggan yang lebih pendek dengan kurangkan ayat dan kawasan kandungan yang lebih kecil akan sentiasa meningkatkan kebolehbacaan. Penerbitan utama seperti NY Times mungkin menyimpang dengan garis panduan struktur mereka sendiri. Tetapi untuk laman web blog atau perniagaan mudah, trend bergerak ke arah kandungan lebih panjang dengan perenggan kecil & kawasan kandungan.
Mengakhiri
Terdapat banyak trend lain yang saya tidak dapat meliputi dalam siaran ini, tetapi saya fikir ini 20 yang paling menarik. Ketika kita bergerak ke depan pada tahun 2017, haruslah jelas trend yang meletup dan mana yang tidak.
Dan jika anda mempunyai idea atau cadangan lain untuk trend reka bentuk yang akan datang, sila bebas untuk membuat komen di bawah.
