Apa ciri-ciri desain website modern? Ini pertanyaan yang cukup umum.
Dari klien yang bertanya di awal proyek web hingga desainer yang mencoba mencari cara untuk menggabungkan elemen terbaru dan trendi, mencari tahu seperti apa desain web modern adalah salah satu tantangan terbesar kami.
Kenyataannya adalah mudah untuk mengatakan apa itu desain web modern tidak. Anda tahu desain yang ketinggalan jaman ketika Anda melihatnya dengan pasti. Di sini, kami telah mengumpulkan 22 contoh desain web modern untuk membantu membentuk gagasan yang lebih baik tentang tampilannya.
1. Desain untuk Keterlibatan Seluler
Tanda pasti bahwa seorang desainer berpikir dengan proses pemikiran modern adalah proyek yang dibuat untuk dilihat di ponsel. Itu tidak berarti situs desktop diabaikan, tetapi itu bukan prioritas.
Contoh hadiah yang mengutamakan seluler termasuk situs gulir yang lebih panjang, “layar” horizontal di desktop yang dipadatkan dengan indah di seluler, dan bahkan gaya teks yang tampak agak terlalu besar di layar desktop.
Antarmuka cukup sederhana dan dibuat untuk interaction ketuk dan gulir dengan banyak hal yang harus dilakukan dan lebih sedikit dekorasi. Ini adalah mentalitas yang mengutamakan pengguna untuk situs web yang memiliki lebih banyak pengguna seluler daripada pengguna desktop. (Dan itu persentase yang signifikan dari lalu lintas web untuk sebagian besar industri pada tahun 2022.)
2. Animasi
Petunjuk halus animasi adalah yang terbaik, dan itu menunjukkan bahwa perancang menyeimbangkan keinginan untuk memasukkan elemen interaktif ini dengan ambang batas Anda untuk melihat dan menanganinya. Animasi bisa menjadi luar biasa dengan cepat, jadi animasi kecil dengan gerakan yang disengaja sangat ideal.
Apa artinya ini bagi desain situs web Anda?
- Animasi yang diaktifkan dengan status melayang
- Animasi yang halus dan mengarahkan mata Anda melalui desain
- Animasi yang menciptakan kesenangan, seperti penunjuk mouse berputar atau ajakan bertindak
- Animasi yang harus Anda cari, seperti mengedipkan mata atau berkedip atau berputar di suatu tempat dalam desain
- Animasi yang membuat desain lebih mudah digunakan dan memberi tahu pengguna cara berinteraction
3. Minimalis
Anda tidak harus seminimal mungkin seperti Whiteboard, tetapi Anda harus mengakui bahwa desain minimal sangat mencolok dan hampir memaksa Anda untuk membaca setiap kata di layar.
Minimalisme adalah alat yang hebat untuk menyampaikan pesan dengan segera. Gaya ini memberikan titik fokus yang jelas untuk apa yang Anda coba komunikasikan. Triknya adalah memastikan bahwa elemen memiliki minat yang cukup untuk menarik orang. Di sini, tipografi besar dalam tipografi yang menarik.
4. Warna Tebal
Lewatlah sudah situs web netral dan abu-abu polos di masa lalu. Situs web modern menampilkan warna yang cerah dan berani. Dari kuning lemon Wombat (di atas) hingga ungu besar, hijau, dan merah muda, hampir tidak ada yang terlarang dalam hal membangun palet.
Trik-nya? Pilih warna dan gunakan dengan baik. Jangan merasa Anda perlu menarik inspirasi dari seluruh spektrum warna.
5. Tipografi yang Berani
Kami berada dalam fase tipografi berani dalam desain situs web. Anda sudah dapat melihat desain yang tampaknya melanggar semua aturan tipe dan tetap terlihat luar biasa.
Online Women Biz adalah salah satunya. Mulailah dengan besar – dan maksud saya ginormous – W yang memenuhi sebagian besar layar. Logo menggunakan font yang funky dengan huruf terbalik. Ikon gulir dienkapsulasi dalam cincin teks animasi dan ada beberapa font dan gaya yang digunakan.
Semua ini melanggar aturan dan masih terlihat bagus, mudah dimengerti, dan memiliki getaran yang berfungsi.
6. Gambar Luar Biasa
Ada perbedaan mencolok antara situs web dengan gambar yang terencana dan dijalankan dengan baik dan yang tidak.
Desain web modern menampilkan yang pertama. Perhatikan bagaimana setiap warna cocok (dari pakaian subjek hingga latar belakang hingga bayangan) dalam desain Dreamers untuk Squarespace. Ini melengkapi warna teks. Spasi dibuat untuk elemen teks dalam gambar.
Semua itu menciptakan visual yang memukau.
7. Navigasi yang Efisien
Navigasi yang disederhanakan memberikan sekilas aspek terpenting dari desain situs web. Itu harus menyertakan halaman kunci atau halaman yang paling sering dikunjungi. Seharusnya tidak menyertakan setiap halaman di situs web Anda.
Tidak ada yang mengatakan “desain situs web lama” seperti menu navigasi mega dropdown.
8. Beberapa Titik Masuk
Meskipun sering kali merupakan praktik terbaik untuk memberi pengguna pilihan ini atau itu dengan konten, beberapa titik masuk bisa efektif untuk beberapa jenis konten. Kami telah melihat banyak hal ini dengan desain layar terpisah, seperti yang untuk Tempo (di atas).
Perhatikan jumlah tombol di beranda. Pengguna dapat memilih perjalanan mereka sejak awal, dan titik masuk masing-masing dirancang untuk orang yang berbeda. Ini adalah cara yang baik untuk menangani beberapa grup target pada satu halaman.
9. Keterlibatan Pengguna
Beruang dan Syalnya adalah buku cerita online. “Halaman” dirancang seperti halaman buku tradisional dengan ilustrasi besar dan beberapa kata, tetapi juga mengandung animasi dan elemen interaktif agar tetap menarik.
Tapi itu lebih dari itu. Buku cerita ini adalah halaman penggemar untuk klub sepak bola (sepak bola) di Belgia.
10. Ruang Putih Bertujuan
Ruang putih harus memiliki tujuan dalam desain. Lars Franzen menggunakan spasi yang sangat berguna untuk memindahkan pengguna melalui gambar dalam portofolionya.
Ruang putih membantu membingkai gambar dan menarik perhatian melintasi layar ke gambar lain. Ruang putih juga memiliki tujuan lain di sini – ini adalah alat navigasi yang mendorong pengguliran dari sisi ke sisi.
11. Mikrokopi yang Dapat Ditindaklanjuti
Elemen mikrokopi harus memberi tahu pengguna apa yang terjadi selanjutnya. Kabar baiknya adalah itu tidak harus rumit.
Gunakan frasa yang dapat ditindaklanjuti yang memberikan penjelasan yang jelas, seperti tombol untuk Gracie Mansion (di atas): Pesan Tur. Ini langsung dan memberikan instruksi yang bersih.
12. Pahlawan Besar
Lebih besar mungkin lebih baik dalam skema desain situs web modern. Area gambar pahlawan yang lebih besar dari kehidupan membuat koneksi dengan pengguna dan menarik mereka ke dalam konten.
Di sini, Owl Design menggunakan sedikit citra yang menakjubkan dengan sedikit animasi tak terduga untuk menarik perhatian Anda. (Ini adalah salah satu gambar yang dapat Anda tatap selama berjam-jam.)
13. Video (Mungkin Vertikal)
Orientasi video dalam desain situs web adalah penyaringan 90 derajat. (Anda dapat berterima kasih kepada ponsel untuk itu.)
Dari “kisah” media sosial yang hidup di ruang vertikal hingga cara sebagian besar pengguna memegang ponsel mereka untuk melihat konten, pergeseran ke video vertikal sedang berlangsung. Itu juga berlaku untuk desain situs web (walaupun masih banyak video horizontal di luar sana).
Video vertikal sangat bagus dalam format layar terpisah, seperti This is Beyond (di atas), karena terlihat bagus di desktop dan perangkat seluler, tempat “layar” terpisah ditumpuk.
14. Kecepatan Muat Zippy
Hal pertama yang akan diperhatikan seseorang tentang situs web Anda adalah apakah situs dimuat dengan cepat atau tidak (kebanyakan jika tidak). Waktu muat yang lambat adalah hambatan dan akan membuat pengguna terpental lebih cepat dari apa pun.
Desain situs web modern harus terlihat bagus dan dimuat dengan cepat.
15. Dioptimalkan untuk Pencarian
Salah satu elemen terpenting dari desain situs web modern adalah salah satu yang mungkin tidak dapat Anda lihat – ini dioptimalkan untuk pencarian.
Bagaimana lagi pengguna akan menemukannya?
16. Elemen Berlapis
Lapisan menciptakan kedalaman, gerakan, dan membantu memandu pengguna melalui perjalanan online. Itu sebabnya elemen berlapis adalah bagian penting dari proyek desain.
Di sini, DM Home menggunakan layer sebagai bagian dari navigasi utama. Bilah berwarna memanjang melalui gambar dengan deskripsi dalam status melayang. (Buat titik untuk mengklik, unicorn lain dalam desain ini adalah bahwa setiap warna yang buruk cocok dengan warna aksen pada foto yang menyertainya.)
17. Suara
Suara adalah elemen desain modern yang semakin populer. (Pastikan pengguna dapat mengaktifkan dan menonaktifkannya.)
Pengalaman audio memberikan makna yang lebih dalam pada konten dan meningkatkan interaction pengguna. Triknya adalah suara harus tajam dan terarah jika Anda ingin orang benar-benar mendengarkannya.
18. Gradien
Gradien adalah tren yang terus berjalan … dan berkembang.
Dari gradien tebal yang besar, seperti yang di atas, hingga gradien halus dalam ilustrasi atau elemen teks, tren warna ini terus muncul. Sebagian alasannya? Ini menarik dari elemen populer lainnya dan dapat membantu menciptakan kedalaman dan minat visual tanpa membebani sisa desain.
19. Animasi Melayang yang Menarik
Menyenangkan dan mengejutkan pengguna dengan animasi hover yang menarik. Gerakan dan gerakan halus adalah pergeseran dari segalanya yang bergerak cepat dan memberikan pengalaman pengguna yang lebih tenang dan lebih fokus.
Lebih lanjut, status hover ini dapat membantu mengarahkan pengguna tentang cara berinteraction dan terlibat dengan konten atau memberikan kejutan yang tepat yang membuat mereka tidak meninggalkan desain. (Teks dan ikon pada contoh di atas memantul dengan cara yang hampir menghipnotis, cocok dengan konten desain.)
20. Bercerita Serius
Let Girls Dream menggunakan konten yang dikirimkan pengguna untuk menceritakan kisah pemberdayaan. Desainnya dikemas dengan fitur interaktif, mulai dari teks dan cerita video hingga tempat untuk mengunggah impian dan informasi Anda. Ada juga trailer video animasi yang akan menghangatkan hati Anda.
Semua elemen ini menarik pengguna ke dalam desain dengan cerita yang hebat.
21. Konsistensi Perangkat
Situs web modern dirancang untuk bekerja pada berbagai jenis dan ukuran perangkat. Pengguna mengharapkan konsistensi ketika mereka mengakses desain dari perangkat yang berbeda pada waktu yang berbeda.
Jika Anda tidak membuat tampilan dan nuansa yang konsisten, Anda berisiko membuat kebingungan pengguna (dan itu dapat menyebabkan mereka meninggalkan situs web). Fort Studio melakukan pekerjaan yang hebat dengan panel latar belakang animasi keren dan tipografi dan penempatan yang menciptakan pengalaman pengguna yang konsisten tidak peduli bagaimana Anda mengunjungi situs web.
22. Pengalaman Pengguna yang Kreatif
Minta Bola AI dibangun berdasarkan tren dengan sesuatu yang lama (bola 8 ajaib) dan sesuatu yang baru (AI) untuk menciptakan pengalaman yang berbeda dari yang Anda harapkan. Jika Anda ingin pengguna menghabiskan banyak waktu dengan desain, itu harus kreatif dan memberikan pengalaman yang berharga.
Rumus ajaib itu mungkin sulit ditemukan, jadi pikirkanlah sedikit di luar kebiasaan.
Kesimpulan
Anda akan mengetahui salah satu situs web sekitar tahun 2008 saat Anda membukanya. Begitulah cara untuk tidak melakukan desain web modern. Contoh di atas semuanya membawa tema yang sama, dan Anda mungkin melihat banyak elemen desain web modern bersilangan di dalamnya.
Benang merah itu adalah kesederhanaan yang meningkatkan kegunaan. Pengunjung situs web mungkin tidak akan menghabiskan banyak waktu di situs web Anda, jadi Anda harus membuatnya menarik secara visual dan mudah dipahami dalam sekejap. Itulah inti dari desain modern saat ini.
