20 Tren Desain Web Meningkat Untuk Ditonton Pada 2017

Satu tahun lagi telah berlalu dan para desainer menanti masa depan. Banyak tren desain yang menjanjikan terikat untuk meletus pada tahun 2017. Tahun lalu saya membahas tren desain 2016 teratas dan kami telah melihat banyak perubahan Dari dulu.

Jadi, untuk posting ini saya telah memilih 20 tren teratas yang saya perhatikan mendapatkan traksi pada tahun 2017. Tren desain ini dapat berlaku untuk situs web apa pun, jadi awasi terus teknik-teknik ini saat kami bergerak hingga 2017 dan seterusnya.

1. “Ditampilkan dalam” lencana

Startups, blog, proyek SaaS dan bahkan usaha kecil sekarang menggunakan “seperti ditampilkan dalam” lencana di situs web mereka. Lencana ini sering tautan ke artikel di blog umum seperti HuffPo, Forbes, CNN, Fox, dan outlet berita lainnya.

Tujuannya adalah untuk memvalidasi situs web dan membangun kepercayaan dengan pengunjung baru. Lebih mudah bagi seseorang untuk mempercayai sebuah situs web ketika mereka dapat melihat bahwa situs web itu sudah ada disebutkan dalam publikasi otoritatif.

Bahkan banyak blog top menghargai eksposur, jadi itu sangat membantu semua orang yang terlibat. Situs-situs besar ini sering lepaskan logo mereka secara online tetapi Anda juga dapat menemukan PNG transparan atau SVG hanya dengan googling.

Juga disarankan agar Anda tautan kembali ke artikel asli menyebutkan situs Anda. Ini membuktikan itu Anda benar-benar disebutkan di situs, dan Anda tidak hanya mengada-ada.

2. Tautan nav all-caps tebal

Saya telah melihat puluhan menu navigasi yang ramping semua mengandalkan desain yang sama ini. Tautan nav ini bervariasi dalam font dan ukuran tetapi biasanya mereka memiliki fitur serupa, seperti:

• Semua topi
• Berani
• Diratakan spasi
• Diselaraskan ke sudut kanan

Situs web Zazzle adalah contoh yang bagus. Tetapi Anda dapat menemukan ini di banyak situs web startup karena itu a cara bersih untuk membagikan tautan yang mudah dibaca dan mudah dijelajahi.

Saya kebanyakan mengasosiasikan tren ini dengan bisnis dan startup teknologi tetapi bisa juga lazim di blog juga.

Catat waktu berikutnya Anda melihat tren ini karena ada di mana-mana. Dan saya berharap itu akan terus tumbuh hingga 2017.

3. Blog bergaya majalah

Blogging adalah konsep niche pada awal 2000-an. Jika Anda menjalankan blog pada tahun 2003 itu dianggap sebagai hobi kecil yang lucu. Hanya dalam satu dekade tren itu telah berubah secara radikal. Sekarang blog bisa memberikan penghasilan penuh waktu, dan mereka mulai lebih mirip majalah digital.

Lihat kembali desain asli TechCrunch ketika pertama kali diluncurkan pada tahun 2006. Sepertinya blog WordPress generik benar?

Sekarang lihat homepage Techcrunch terbaru di 2017:

Tidak hanya itu terlihat seperti majalah, juga berfungsi seperti satu. TechCrunch menerbitkan lusinan (jika bukan ratusan) posting baru setiap hari. Mereka adalah sumber masuk # 1 untuk berita startup.

Tren desain gaya majalah membuat perbedaan besar. Beranda menggunakan a bagian cerita fitur besar, setiap posting memiliki thumbnail sendiri, dan halaman artikel pusat di sekitar tajuk utama.

Ketika Anda memikirkannya, TechCrunch tidak banyak berubah. Itu tetap “hanya sebuah blog”. Tapi itu dirancang dan dikelola seperti majalah, dan ini membuat semua perbedaan.

4. Latar belakang video

Suara pemutaran otomatis mungkin merupakan tren yang paling menjengkelkan di web. Tapi yang mengejutkan, memutar video secara otomatis (tanpa suara) adalah tren yang berkembang pesat. Anda dapat melihat ini di puluhan situs bisnis yang memiliki latar belakang video mengambil alih seluruh layar.

Saya sangat suka teknik ini ketika diterapkan dengan benar. Selama Video berhubungan dengan situs dan tidak menghalangi konten, Saya pikir ini efek keren untuk digunakan di header Anda.

5. Tombol hantu

Sebagai minimalis memberi makan lebih lanjut dalam desain web, banyak tren baru bermunculan. Salah satu tren tersebut adalah munculnya tombol hantu yang tidak memiliki isi batin tetapi memiliki perbatasan luar.

Sebagian besar waktu tombol-tombol ini kontras dengan yang lain menarik perhatian. Anda dapat melihat ini di beranda Instantmojo dengan tombol pendaftaran hijau terletak tepat di samping tombol hantu yang menghubungkan ke demo langsung.

Situs lain telah diadopsi gaya desain murni-hantu ke tombol mereka di seluruh tempat. Contoh yang bagus di sini adalah tata letak Bootstrap baru.

Saya pikir tombol hantu berfungsi di situs itu condong ke arah minimalis. Mereka mungkin tidak cocok untuk setiap situs web, tetapi saya melihat penggunaannya meningkat setiap tahun.

6. Modal jendela opt-in

Modal windows sangat menjengkelkan, dan saya tidak bisa membayangkan ada pengguna yang menyukainya. Namun mereka terbukti meningkatkan pendaftaran, dan pemasar tidak bisa mengabaikan teknik yang berhasil.

Inilah sebabnya saya pikir modal opt-in windows akan terus mendaki pada 2017.

Itu bukan hal favorit saya, dan saya tidak pernah menambahkannya ke situs web saya. Tetapi jika tujuannya adalah untuk meningkatkan pendaftaran maka modal windows adalah cara yang pasti untuk membuat segalanya bergulir.

Plugin baru bahkan bisa niat keluar sasaran yang memicu modal setiap kali pengguna mencoba untuk meninggalkan situs. Modal lain muncul setelah x detik atau disetel untuk terbuka ketika pengguna menggulir ke bawah cukup jauh.

Terlepas dari bagaimana dipicu modals, bagaimana mereka dirancang, atau bagaimana perasaan Anda tentang mereka, saya pikir mereka akan ada untuk jangka panjang.

7. Ilustrasi & seni vektor

Dengan program desain vektor baru seperti Sketch dan Affinity Designer, ada gelombang ilustrator baru yang menerobos web. Desain grafis dan desain antarmuka terus bergabung dengan lebih banyak desainer multidisiplin sekarang daripada sebelumnya.

Ini berarti kita akan melihatnya lebih banyak ikon khusus dan ilustrasi satu halaman penuh dalam waktu dekat.

Banyak ilustrator adalah seniman terlatih, jadi saya pikir kita akan melihat lebih banyak latar belakang halaman penuh dibuat dengan perangkat lunak lukisan digital, disajikan secara detail seperti konsep seni.

8. Memperbaiki sidebar gulir

Gelombang pertama desain tetap berfokus pada bilah navigasi. Ini semua terlalu umum terutama dalam desain responsif di mana navbar tetap mereplikasi perasaan aplikasi mobile asli.

Namun pada 2017, saya berharap melihat satu elemen lagi yang lengket-sidebar lengket.

Hampir setiap blog besar menggunakan jenis bilah lengket seperti ini. Saya t menjaga konten tetap terlihat setiap saat dan meningkatkan kemungkinan bahwa pengguna akan melakukannya berinteraksi dengan konten bilah sisi.

Ditambah dengan puluhan plugin jQuery gratis yang bisa meniru efek sidebar lengket. Lebih mudah dari sebelumnya untuk mengatur ini di situs web mana pun.

9. Daftar isi dalam halaman

Studi kasus baru-baru ini menemukan itu konten longform mengungguli shortform baik dalam peringkat dan kualitas retensi pengguna. Memang ini tidak selalu benar karena beberapa pertanyaan dapat dijawab dengan cepat.

Tetapi dengan konten yang jauh lebih panjang di web, itu wajar untuk dilihat lebih banyak daftar isi ditambahkan ke dalam artikel. Anda akan melihat ini di situs ulasan yang panjang atau di artikel yang dipecah menjadi item yang terdaftar.

Menambahkan daftar isi kaleng tingkatkan pengalaman pengguna dan membantu putus membaca menjadi potongan-potongan kecil. Daftar isi juga bisa bantu peringkat situs Anda lebih baik! Jika Google menemukan halaman Anda berharga, Anda mungkin dapatkan tautan lompat di hasil pencarian.

Mungkin benar bahwa ToC cukup langka saat ini. Tapi saya berharap tren ini akan meledak lebih dari 2017 dan bertahun-tahun setelahnya.

10. Desain berwarna cerah

Saya tidak yakin apakah tren ini muncul dari minimalis atau sebagai reaksi terhadap desain materi Google. Tapi saya menemukan puluhan situs web yang menggunakan warna-warna pastel cerah bercampur dengan warna-warna cerah lainnya untuk membuat penampilan yang sangat fantastis.

Beranda Rentberry adalah contoh bagus yang juga digunakan ton gradien. Dan itu bahkan telah disebutkan di atas “Ditampilkan dalam” lencana terletak di bawahnya! Dua tren di satu situs.

Anda akan melihat bahwa warnanya jangan meresapi seluruh halaman, dan mereka diredam dengan nuansa putih & abu-abu lainnya.

Saya sudah cukup melihat ini skema warna yang hidup untuk percaya mereka sedang meningkat.

11. Gulir animasi

Desainer web tahu tentang penggulingan-gulir dan betapa mengerikannya itu. Namun bukan itu yang saya maksud dengan judulnya “gulir animasi”. Saya telah melihat banyak situs yang sekarang menghidupkan konten ke tampilan ketika Anda menggulir melewati bagian halaman tertentu.

Tren ini sebagian besar terbatas pada homepage startup & perusahaan SaaS yang ingin pizzazz dalam desain mereka.

Saya tidak bisa mengatakan apakah itu tren yang sangat berguna. Tentu saja tidak ambil mata tapi saya pikir itu tidak menawarkan banyak hal di luar estetika. Namun, ini adalah tren yang tampaknya menyebar dengan cepat, dan kapan digunakan hemat itu bisa sangat rapi.

12. Aplikasi satu halaman (SPA)

Aplikasi satu halaman adalah situs web dibangun murni dengan panggilan Ajax. JavaScript menarik konten dari server dan memuatnya secara dinamis, begitu halamannya tidak pernah menyegarkan.

Contoh umum adalah situs seperti Gmail dan Facebook. Tetapi dengan lebih banyak teknologi JS, Saya melihat lebih banyak & lebih banyak SPA yang berkembang setiap saat. Heck, bahkan CodePen dapat dianggap sebagai SPA.

Dengan perpustakaan frontend yang kuat seperti React & Aurelia, akan lebih mudah untuk membuat SPA dari awal pada tahun 2017.

13. Toggleable search bar

Dulu bidang pencarian itu selalu terlihat suatu tempat di halaman web, baik di bilah sisi atau navigasi. Namun belakangan ini saya memperhatikan lebih banyak bidang pencarian yang didapat disembunyikan secara default, dan harus beralih ke tampilan.

Tentunya tren yang berguna untuk menghemat ruang di halaman saat masih menjaga agar fitur pencarian dapat diakses. Jika Anda tidak yakin di mana menempatkan formulir pencarian dalam desain baru, Anda dapat mempertimbangkan untuk menggunakan bidang sakelar yang ditautkan dengan ikon kaca pembesar di navigasi..

14. Pesan Adblock

Tidak dapat disangkal fakta itu pemblokiran iklan sedang meningkat. Satu-satunya pertanyaan adalah bagaimana penerbit akan menangani tren ini. Beberapa situs sopan tambahkan pesan ke dalam ruang iklan seperti Time.com. Di Hongkiat, Anda akan melihat iklan internal untuk mengisi kekosongan tautan yang lebih jauh ke situs.

Satu tren serius yang saya lihat meningkat adalah blok konten adblock. Ini adalah teknik untuk “blokir pemblokir iklan”. Fitur ini sudah ada di banyak situs besar seperti Business Insider dan Forbes. Sayangnya, ini merugikan pengguna dan penerbit, dan itu semua berasal dari teknik periklanan yang berkualitas buruk.

Pada akhirnya, tidak masalah siapa yang Anda salahkan atau di mana Anda berdiri dalam debat pemblokiran iklan. Lebih banyak orang memasang plugin adblock, dan saya berharap lebih banyak penerbit untuk mendorong kembali.

15. Ikon SVG murni

Grafik SVG sudah meresap ke dalam web tetapi mereka semakin besar dari hari ke hari. Dan saya merasa bahwa 2017 akan menjadi tahun yang luar biasa bagi SVG di web.

Anda dapat menemukan ribuan set ikon SVG gratis di situs-situs seperti Flaticon jika Anda tahu cara mencari. Tapi kamu juga bisa kode SVG ke dalam HTML, misalnya dengan memanfaatkan contoh ini pada CodePen.

Jadi, desainer memiliki cara untuk menggunakan SVG, dan pengembang juga memiliki cara untuk menggunakan SVG. Dukungan browser modern terlihat bagus di seluruh papan, sehingga tidak ada masalah dengan kompatibilitas. Yang dibutuhkan adalah cukup banyak desainer mengenali kekuatan SVG dan mulai menggunakannya!

16. Adobe XD

Adobe padam beta penuh Adobe XD pada 2016, dan sejak itu berkembang pesat. Saat ini mendukung Mac & Windows, dan itu dalam fase pengujian sebelum sepenuhnya diluncurkan.

Anda dapat mengejek ide program apa pun yang menyalip Sketch tetapi Adobe adalah perusahaan perangkat lunak utama dari pekerjaan kreatif karena suatu alasan. Plus Sketch masih Mac-only sementara Adobe ingin mendukung semua orang.

Saya yakin kami akan membaca lebih banyak tentang Adobe XD di tahun mendatang. Mungkin menjadi perangkat lunak masuk untuk merancang mockup UI-jadi kami akhirnya dapat menggunakan Photoshop sebagai alat manipulasi foto (sebagaimana dimaksud).

Dengan munculnya perangkat lunak baru, datang puluhan tutorial dan kit GUI freebie demikian juga. Anda dapat menemukan banyak Adobe XD gratis di Dribbble bersama dua situs freebie baru yang berfokus pada XD Designmine dan XD Guru.

17. Menu hamburger lainnya

Suka atau benci, itu hamburger ada di sini untuk tinggal. Ada banyak studi kegunaan itu membantah menu yang disembunyikan dari tampilan. Tetapi dengan layar kecil dan hanya begitu banyak alternatif, tidak ada alternatif yang lebih baik untuk saat ini.

Ikon Hamburger perlahan menjadi simbol yang bisa dikenali untuk menu nav. Sama seperti ikon kaca pembesar menyiratkan “pencarian”, ikon hamburger tiga batang akan segera identik dengan “menu”.

Ini sudah berlaku bagi sebagian besar individu yang mengerti teknologi. Tetapi setiap tahun, semakin banyak orang mendapatkan ponsel cerdas dan mulai menjelajahi web seluler. Dan mereka sedang belajar kaitkan hamburger itu dengan menu nav tanpa akhir yang terlihat.

18. Ikon fitur produk

Saya menulis tentang tren ini di Treehouse tetapi belum menyebutkannya baru-baru ini. Dan memasuki 2017 tren ini akan menjadi besar. Mungkin cara yang paling umum untuk melakukannya berbagi fitur produk di beranda.

Anda mulai dengan membuat daftar fitur untuk produk Anda. Produk dapat berupa apa saja dari program SaaS hingga tema WordPress atau bahkan item fisik.

Maka Anda juga bisa ikon desain khusus atau temukan set ikon untuk mewakili fitur-fitur ini. Itu yang terbaik hindari fitur-fitur umum seperti “dapat diandalkan” atau “cepat” karena kebanyakan orang mengharapkan hal ini.

Sebaliknya, daftarkan fitur itu sebenarnya penting. Jika tema WP premium mungkin daftar yang responsif, berapa banyak widget yang ada, atau cara kerjanya.

Ikon fitur ini bekerja seperti visual untuk membantu menjual setiap fitur. Teks saja sulit dikonsumsi tetapi visual jauh lebih mudah mengerti sekilas.

19. CTA di atas-lipat

Ajakan bertindak secara tradisional ditempatkan di seluruh situs web. Tetapi dengan pengunjung menghabiskan lebih sedikit waktu di situs web, sangat penting untuk memiliki CTA yang kuat tepat di atas flip.

Ajakan bertindak ini mungkin berupa tombol, formulir opt-in, atau input lainnya mendorong orang untuk mengambil tindakan seperti mendaftar atau membaca posting blog.

Saya tidak dapat memberi tahu Anda cara mendesain CTA atau cara mengoptimalkannya untuk konversi. Tapi saya bisa mengatakan tren tampaknya menempatkan CTA ini di atas flip dan terlihat jelas bagi semua pengunjung untuk melihat.

20. Area konten yang lebih kecil

Monitor telah tumbuh sangat besar sehingga sebagian besar situs web harus atur lebar maks. Jauh lebih sulit untuk membaca kalimat ketika lebar 2000px dibandingkan dengan hanya 700px.

Konten yang lebih kecil adalah lebih mudah dikonsumsi, dan pada akhirnya menciptakan a pengalaman yang lebih baik di situs web konten-berat.

Saya pikir lebih banyak desainer yang menyadari hal ini, dan akan perlahan-lahan kurangi ukuran area konten mereka. Saya lebih suka lebar maksimum 750px tetapi Anda bisa menjadi sekecil 600px atau kurang.

Paragraf pendek dengan lebih sedikit kalimat dan area konten yang lebih kecil akan selalu meningkatkan keterbacaan. Publikasi besar seperti NY Times dapat menyimpang dengan pedoman struktural mereka sendiri. Tetapi untuk blog atau situs bisnis sederhana, tren sedang bergerak menuju konten yang lebih panjang dengan paragraf & area konten yang lebih kecil.

Membungkus

Ada banyak tren lain yang tidak dapat saya bahas dalam posting ini, tapi saya pikir 20 ini adalah yang paling menarik. Ketika kita bergerak maju ke 2017, seharusnya jelas tren mana yang meledak dan mana yang tidak.

Dan jika Anda memiliki ide atau saran lain untuk tren desain mendatang, jangan ragu untuk memberikan komentar di bawah ini.