Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration

Tren Desain Web Terkini: Halaman Beranda Layar Penuh Full-on

by
Length:LongLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Sorry About This: 40 Examples of 404 Pages
Designing Comments, Discussion, and Feedback For the Web

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Splash layar penuh adalah salah satu pola yang paling akrab di web saat ini. Beberapa orang menyukainya, ada yang tidak suka, tapi apa pun perasaan Anda, mari kita lihat beberapa contoh penting dan bicaralah tentang praktik terbaik saat kita melakukannya.

Catatan tentang Konvergensi Desain

Istilah "konvergensi desain" mengacu pada cara desain menjadi serupa, konvergen, dari waktu ke waktu. @jongold men-tweet berikut ini:

Poinnya adalah bahwa desainer kurang kreativitas akhir-akhir ini, bukannya mencapai konvensi yang hampir dapat diterima saat merancang halaman web. Splash layar penuh adalah contoh sempurna dari ini. Apakah kita, para desainer, mengambil rute yang mudah dengan menggunakan pola ini? Apakah kita mengabaikan kesempatan untuk mendorong batasan dan berinovasi? Apakah web masih berdiri karena kemalasan?

Atau, Paul Boag menyatakan, apakah kita hanya bagian dari adegan desain web yang matang? Apakah kita sedang membangun apa yang pengguna inginkan; apa yang mereka harapkan, dan karena itu membuat produk kita lebih mudah digunakan?

"Semakin lama sebuah objek ada di sekitar, semakin standar desainnya" – Paul Boag

Saya akan menyerahkannya kepada Anda untuk memutuskannya. Sementara itu, mari kita lihat beberapa desain web layar penuh!

Atas ke Bawah, Kiri ke Kanan

Banyak situs layar penuh akurat tentang dimensi mereka, menggunakan JavaScript atau CSS untuk memastikan bagian yang terlihat awal sama persis dengan jendela browser saat ini. Setelah ini selesai, beberapa posisi CSS dapat menempatkan elemen pada tingkat yang ekstrim, bahkan jika jendela diubah ukurannya.

Makeshift menggunakan pola ini untuk mengikutkan navigasi sekunder ke bagian bawah layar, dengan beberapa tautan kiri dan kanan edisi terdahulu/berikutnya. Gambar latar belakang menggunakan background-size: cover; pada elemen figure besar.

Ideas adalah tema WordPress layar penuh dengan berbagai pilihan untuk slideshow, intro, presentasi homepage dll. Menggunakan gradien yang diposisikan di bagian bawah layar untuk membuat judul dan deskripsi gambar lebih mudah dibaca.

James Tupper mengintip dari bawah layar dengan membuat grafik wajahnya diposisikan dengan background-position: center bottom;. Splash kuning besar dibuat elegan sama dengan ketinggian viewport menggunakan height: 100vh; CSS asli.

Pelajari lebih lanjut tentang kedua teknik CSS ini:

Lifestyle magazine Lagom, gagasan Elliot Jay dan Samantha Stocks, menggunakan beranda yang mengisi layar secara keseluruhan. Tidak ada pengguliran di sini (kecuali dilihat di layar kecil). Lagom menggunakan tepi bawah untuk tempat tautan sosialnya.

Soul adalah template Shopify, dan salah satu layoutnya adalah slider layar penuh dengan link navigasi diposisikan di sebelah kanan.

Harap Terus Menggulir ↓

Bahaya dengan layar penuh adalah bahwa bentuk pendahuluannya adalah pengguna mungkin tidak sadar ada lagi yang bisa ditemukan dengan menggulir. Halaman beranda Envato kami sendiri meniadakan ini dengan ikon "gulir", menyarankan agar Anda mengintip di lipatan bagian bawah.

Blandly memilih anak panah yang mendorong ke bawah untuk mengatakan "lihat ke bawah sini".

Halaman beranda Kindeo menggunakan teknik yang saya suka; memastikan bahwa sepotong kecil bagian berikutnya selalu terlihat di bagian bawah area pandang. Ada juga tanda panah dengan "Find out more" sehingga pengguna tidak pernah ragu bahwa ada sesuatu yang dapat ditemukan di bagian bawah.

Kilani telah mengambil pendekatan suara autoplay yang agak meragukan; ada tombol mute di kanan bawah layar. Cara mereka menyarankan agar Anda menggulir lebih jauh juga menarik–menempelkan instruksi "Scroll Down" ke kursor mouse:

Video

Damir Kotorić, mantan desainer UX di Envato, memulai Falcon Films sebagai hasil gairahnya untuk fotografi udara. Hanya masuk akal bahwa video memainkan peran besar di halaman beranda Falcon Films; periksa latar belakang <video>, lalu tonton showreel untuk cuplikan drone Melbourne.

Sekali lagi, Damir telah menggunakan CSS min-height: 100vh; untuk membuat bagian hero layar penuh.

Landscape mencapai efek yang sama; sebuah layar penuh, putar video secara otomatis dengan showreel tambahan, namun menggunakan JavaScript untuk mendapatkan layar penuh. File video mp4 otomatis itu sendiri adalah 1.3Mb, tapi tidak ada lagi yang bisa menyumbat bandwidth Anda.

Gaya

Satu hal yang belum kami sebutkan adalah layar penuh yang memberi kami: kanvasnya! Dengan menggunakan ruang untuk menyajikan sebuah produk, sebuah perusahaan, sebuah gagasan, adalah keseluruhan dari pola ini. Menghilangkan kekacauan dari konten lainnya dan berfokus pada pesan dan kepribadian.

Contoh Landscape, dari yang sebelumnya, menggunakan biru kobalt yang indah (salah satu alasan saya menyukainya), dan Voog melakukan sesuatu yang serupa, yang terlihat hebat.

Saya selalu mengatakannya meskipun–gambar ini adalah duotone, jadi dapat dipotong ukurannya menjadi 540Kb. Beberapa sedikit kabur, kemudian mengurangi kualitas JPG hingga 50% menurunkannya menjadi sekitar 50Kb tanpa mengorbankan efeknya sama sekali.

Konferensi Desain Businessweek Bloomberg (apakah Anda akan ke sana?) menggunakan tata letak tipografi abstrak untuk dijadikan poinnya. Konvergensi desain? Tidak di sini, sobat.

Apakah saya pernah menyebutkan Proyek Translasi Envato Tuts+? Mungkin.. Bagaimanapun, saya menyukai demonstrasi tema skrip RTL ini–lihat Proland, template halaman arahan yang dibuat dengan Bootstrap dengan beberapa opsi tata letak layar penuh.

Apakah Anda Sudah Mengisi?

Halaman beranda layar penuh adalah pola yang tidak mungkin kita lihat akan hilang dalam waktu dekat. Dan mengapa harus? Ini adalah cara yang efektif untuk mengenalkan pengguna ke situs web dari semua jenis. Apa sajakah favorit Anda? Di mana lagi Anda melihat pola ini digunakan, untuk lebih baik atau lebih buruk? Beri tahu kami di komentar!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.