8 Elemen Desain Web Modern (Dan Tren Desain Web yang Perlu Diperhatikan)

Setiap tahun, kami melihat elemen dan gaya baru dalam desain situs web mulai bermunculan.

Beberapa elemen – jika digabungkan dengan bijaksana – membantu menceritakan kisah dan menjelaskan perusahaan Anda. Elemen lain berfungsi untuk meningkatkan tampilan konten di perangkat tertentu. Meskipun tidak perlu memasukkan setiap tren yang muncul di situs web Anda, banyak di antaranya berpotensi meningkatkan pengalaman pengunjung Anda.

Tetapi dengan begitu banyak pilihan untuk dipilih, mungkin sulit untuk menentukan yang mana Betulkah layak dipertimbangkan. Untuk membantu Anda mempersempit fokus, kami telah memerinci delapan elemen penting dari desain situs web modern yang dapat Anda sertakan untuk meningkatkan kinerja situs Anda.

8 Elemen dan Tren Desain Situs Web Modern

1. Tipografi Unik & Besar

Sebagian besar perusahaan memiliki font atau tipografi tertentu yang mereka gunakan untuk membantu pelanggan segera mengidentifikasi mereka versus pesaing mereka. Dalam beberapa tahun terakhir, desainer telah menerima lebih banyak pilihan font untuk dipilih, memudahkan merek untuk mengekspresikan diri mereka secara lebih akurat melalui tipografi.

Sebagai contoh, The New Yorker langsung dikenali melalui penggunaan font unik, Adobe Caslon Pro. Sementara font yang lebih unik, seperti Blokletters-Balpen, sudah mulai digunakan oleh perusahaan rintisan dan teknologi seperti Nol.

Mengapa ini berguna?

Tipografi menggunakan satu tren desain di seluruh situs web untuk mengarahkan pembaca ke berbagai bagian halaman. Contohnya, The New Yorker situs web mengarahkan pengunjung dari satu bagian ke bagian lain berdasarkan tipografi dan ukuran font.

Saat membuat merek perusahaan Anda, pilihan Anda dalam tipografi dapat menunjukkan petunjuk halus tentang siapa Anda. Apakah kamu menyenangkan atau serius? Fungsional atau informasional? Terlepas dari font apa yang Anda pilih, pastikan bahwa desainer Anda mempertimbangkan penerapannya di seluruh browser dan komputer. Memilih font yang tidak didukung oleh browser dan komputer umum dapat berarti bahwa situs web Anda ditampilkan dengan canggung di perangkat yang berbeda.

2. Gambar Pahlawan Besar & Responsif

Anda tidak perlu jauh-jauh melampaui situs penerbitan populer Medium.com untuk melihat contoh gambar pahlawan besar:

Gambar besar seperti ini singkirkan konsep paro atas dan paro bawah. Dengan berfokus hanya pada gambar dengan teks daripada CTA atau tombol sosial, Medium menciptakan pengalaman visual yang kuat yang mendorong Anda untuk menggulir ke bawah untuk membaca lebih lanjut.

Gambar pahlawan besar juga sering ditempatkan di latar belakang dengan teks dan konten lain yang dihamparkan di atasnya, seperti di situs web Uber. Terlepas dari pendekatan yang Anda gunakan, gambar besar dapat membantu menceritakan kisah Anda secara visual tanpa harus bergantung pada teks saja.

Mengapa ini berguna?

Pelanggan Anda datang dari berbagai tempat dan memiliki harapan yang tinggi. Anda mungkin tidak yakin apakah mereka menemukan situs web Anda dari ponsel, tablet, atau komputer desktop mereka. Gambar yang digunakan Medium di atas sangat kuat, tetapi jika hanya terlihat dari komputer desktop, banyak orang mungkin melewatkannya.

Karena itu, memastikan gambar Anda responsif membuat pengalaman pengguna yang baik. Pengunjung situs web dapat melihat gambar yang berbeda – apakah itu latar belakang atau gambar produk – dan bisa mendapatkan pengalaman yang sama dari perangkat apa pun mereka berasal.

3. Video Latar Belakang

Video yang diputar secara otomatis di latar belakang dapat menambah banyak hal ke halaman. Mereka dapat digunakan untuk menceritakan sebuah cerita dan secara signifikan mengurangi jumlah konten lain yang diperlukan untuk menjelaskan bisnis Anda.

Mari kita ambil Wistiasitus web, misalnya. Saat Anda membuka beranda mereka, video besar secara otomatis mulai diputar di latar belakang, dan dengan mengeklik tombol putar, Anda dapat melihat lebih dalam di Wistia:

Video latar belakang ini berfungsi sebagai cara yang brilian untuk menarik pengunjung agar mengklik ke video utama.

Mengapa ini berguna?

Video latar belakang berfokus untuk memikat pengunjung sejak mereka tiba di halaman Anda. Video tersebut memungkinkan pengunjung Anda untuk memahami poin-poin penting tentang perusahaan Anda tanpa harus membaca satu baris teks pun.

Selain itu, video diproses 60.000 kali lebih cepat oleh otak kita dibandingkan dengan teks. Meskipun orang sering ragu untuk membaca blok teks yang berat, video tampak mudah dan dapat dikonsumsi dengan sangat cepat. Ini juga membantu kecepatan koneksi meningkat dan ukuran perangkat seluler berkembang, membuat pengalaman video yang lebih baik.

4. Desain Semi-Datar

Pada 2013, Apple secara fundamental beralih ke desain datar. Sederhananya, flat design adalah setiap elemen yang tidak menyertakan atau memberikan persepsi tiga dimensi, misalnya bayangan. Desain datar tidak hanya lebih mudah dipahami pengguna, tetapi juga dapat memuat lebih cepat di situs web tanpa elemen yang rumit atau terlalu teknis.

Mengikuti jejak Apple, banyak organisasi lain – baik besar maupun kecil – telah beralih ke desain datar. Namun, perusahaan seperti Uber telah menerapkan gaya mereka sendiri dengan menambahkan bayangan dan dimensi yang halus. Seperti yang Anda lihat pada gambar di bawah, kotak memiliki elemen kedalaman dengan bayangan di sekitarnya, tanpa berlebihan:

Saat Anda menggulir ke salah satu kotak di beranda Uber, bayangan menghilang dan menghilangkan gambar di belakangnya.

Mengapa ini berguna?

Desain datar membantu pengunjung memahami konten Anda lebih cepat, dan menambahkan beberapa elemen kedalaman dapat menghidupkannya. Terlepas dari apakah Anda sepenuhnya mendesain situs web menggunakan desain datar atau memanfaatkan bayangan dan elemen lainnya, penting untuk tetap konsisten di seluruh situs web Anda. Pastikan bahwa beranda, halaman produk, dan bagian penting lainnya dari situs web Anda semuanya menggunakan petunjuk desain yang sama sehingga pengunjung dapat langsung memahami apa yang mereka lihat.

5. Menu Hamburger

Sepertinya sebagian besar situs web yang Anda hubungi memiliki menu opsi yang panjang untuk dipilih. Keuntungan dari menu ini adalah dapat membawa pengunjung langsung ke tempat yang mereka tuju. Namun, kerugiannya adalah mereka umumnya memakan banyak ruang layar yang berharga.

Menu tersembunyi, atau hamburger, mengubah ini. Menu ini sudah umum di aplikasi web sebelum dibuat desain web – bahkan di Google Chrome Anda dapat menemukan menu hamburger di sisi kanan.

Sumber: Gerakan UX

Ingin tahu mengapa ini disebut menu hamburger?

Jika Anda menggunakan imajinasi Anda, tiga baris yang bertumpuk terlihat seperti roti hamburger. Mendapatkan?

Mengapa ini berguna?

Halaman situs web Anda harus memiliki jalur yang jelas untuk diambil pengguna. Menghapus navigasi yang sibuk membuat pengalaman lebih bersih dan bebas gangguan. Pengalaman yang ditingkatkan ini membantu meningkatkan kemungkinan bahwa pengguna akan menemukan informasi yang mereka butuhkan untuk menyelesaikan tindakan yang diinginkan.

6. Gambar Produk Raksasa

Anda mungkin telah memperhatikan bahwa banyak situs web B2B mulai menampilkan gambar produk besar di situs mereka untuk menyoroti berbagai fitur atau bagian dari produk mereka. Ini bukan kebetulan.

Untuk memberi Anda gambaran yang lebih baik tentang apa yang kita bicarakan, mari kita lihat halaman produk untuk Platform Situs Web HubSpot:

Ada gambar berfitur besar di bagian atas halaman ini, dan saat Anda menggulir ke bawah halaman ada gambar produk tambahan yang mendalam. Gambar juga responsif yang bertujuan untuk memastikan pengalaman yang dioptimalkan untuk pemirsa yang datang dari perangkat berbeda, seperti yang kami sebutkan sebelumnya.

Mengapa ini berguna?

Gambar produk yang lebih besar membantu desainer menyoroti berbagai fitur produk dengan cara yang lebih efisien dan efektif.

Pendekatan ini memperkuat manfaat fitur dengan memberikan kesempatan untuk menyoroti bagian yang paling berharga. Misalnya pada gambar kedua, Anda akan melihat bahwa pada gambar tersebut terdapat angka yang sesuai dengan keunggulan fitur tertentu.

Gambar besar ini juga ramah pemindaian. Mereka membantu pengunjung menghasilkan pemahaman yang kuat tentang apa yang dilakukan berbagai fitur produk dengan menyampaikannya melalui gambar, bukan kata-kata.

7. Desain Kartu

Dengan munculnya Pinterest, desainer dan pemasar menjadi terpesona dengan kartu. Masing-masing kartu membantu mendistribusikan informasi dengan cara visual sehingga pengunjung dapat dengan mudah mengonsumsi konten seukuran gigitan tanpa kewalahan.

Brit + Co. beranda berfungsi sebagai contoh bagus dari desain kartu yang sedang beraksi:

Dengan memecah bagian konten yang berbeda menjadi beberapa kartu, pengguna dapat memilih dan memilih artikel mana yang ingin mereka luaskan. Ini membantu menjaga beranda tetap bersih dan teratur, tanpa bergantung pada banyak teks.

Mengapa ini berguna?

Desain kartu menjadi semakin populer di seluruh situs web B2B dan B2C karena membantu menyampaikan potongan informasi yang mudah dicerna bagi pengguna. Menggunakan desain ini di situs Anda dapat membantu menyoroti beberapa produk atau solusi secara berdampingan.

Ingatlah bahwa kartu Anda harus responsif. Ini berarti bahwa ketika ukuran layar semakin kecil atau besar, jumlah dan ukuran kartu yang ditampilkan harus disesuaikan.

8. Video Produk atau Fitur Singkat

Selain video latar belakang, perusahaan juga mulai menggunakan produk pendek atau video fitur untuk menyoroti kasus penggunaan tertentu. Video pendek ini bagus untuk menghidupkan solusi Anda, sambil tidak membebani pengunjung dengan pengalaman panjang yang harus mereka ikuti.

Contoh yang kuat dari ini datang dari orang-orang di InVision. Mereka menampilkan ilustrator singkat ini tentang betapa mudahnya menggunakan produk mereka dengan menarik-dan-melepaskan desain langsung di beranda mereka:

Mengapa ini berguna?

Menurut Majalah Inc., 92% pelanggan B2B menonton video online, dan 43% pelanggan B2B menonton video online saat meneliti produk dan layanan untuk bisnis mereka. Oleh karena itu, perusahaan B2B perlu membuat video yang menjelaskan produknya karena berpengaruh dalam proses pengambilan keputusan pembeli.

Video pendek ini memungkinkan prospek Anda memahami nilai dengan cepat tanpa harus menonton pengalaman yang sangat panjang dan mendalam. Tentu, keduanya memiliki nilai, tetapi video yang lebih pendek memungkinkan pemahaman cepat yang terbaik untuk yang terbaik.

Catatan Editor: Posting ini awalnya diterbitkan pada Agustus 2018 dan telah diperbarui agar lebih lengkap.