Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. Inspiration
Webdesign

Tren Web Design Terkini: Halaman Laman Penuh Penuh Layar Penuh

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

Malay (Melayu) translation by Fariz Alfarizki (you can also view the original English article)

Splash skrin penuh adalah salah satu pola paling akrab di web saat ini. Beberapa orang menyukainya, ada yang tidak suka, tetapi apa pun perasaan anda, mari kita lihat beberapa contoh penting dan bicaralah tentang best practices saat kami melakukannya.

Catatan mengenai Konvergensi Design

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

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

Atau, Paul Boag menyatakan , apakah kita hanya bagian dari web desain adegan yang matang? Adakah kita sedang membina apa yang pengguna inginkan; apa yang mereka harapkan, dan kerana itu menjadikan produk kami lebih mudah digunakan?

"Semakin lama suatu objek ada di sekitar, semakin banyak desainnya" - Paul Boag

Saya akan menyerahkannya kepada anda untuk memutuskannya. Sementara itu, mari kita lihat beberapa reka bentuk web skrin penuh!

Atas ke Bawah, Kiri ke Kanan

Banyak tapak skrin penuh akurat mengenai dimensi mereka, menggunakan JavaScript atau CSS untuk memastikan bahagian yang terlihat awal sama persis dengan browser saat ini. Setelah ini selesai, beberapa CSS posisi dapat menempatkan elemen di tingkat yang ekstrim, bahkan jika jendela diubah ukurannya.

Makeshift menggunakan pola ini untuk menyusun navigasi sekunder ke bahagian bawah layar, dengan beberapa pautan kiri dan kanan edisi terdahulu / seterusnya. Gambar latar menggunakan background-size: cover; pada elemen figure besar.

Idea adalah tema penuh layar WordPress dengan pelbagai pilihan untuk tayangan slaid, intro, laman utama penyampaian dll. Menggunakan gradien yang diposisikan di bahagian bawah skrin untuk menjadikan tajuk dan gambar deskripsi 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:

Majalah Gaya Hidup Lagom , gagasan Elliot Jay dan Samantha Stocks , menggunakan beranda yang mengisi keseluruhan layar. Tiada pengguliran di sini (kecuali dilihat di layar kecil). Lagom menggunakan tepi bawah untuk meletakkan pautan sosialnya.

Jiwa adalah template Shopify, dan salah satu layoutnya adalah skrin slider penuh dengan navigasi navigasi yang diposisikan di sebelah kanan.

Sila Terus Menggulir ↓

Bahaya dengan penuh skrin adalah bahawa bentuk awalnya adalah pengguna mungkin tidak menyadari ada lagi yang dapat ditemukan dengan menggulir. Halaman rumah Envato kami sendiri meniadakan ini dengan ikon "gulir", suggakan agar anda mengintip di bawah lipatan.

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

Halaman halaman Kindeo menggunakan teknik yang saya suka;memastikan bahawa sesotong kecil bahagian seterusnya selalu dilihat di bahagian bawah pandang kawasan. Terdapat juga tanda panah dengan "Ketahui lebih lanjut" sehingga pengguna tidak pernah ragu bahawa ada sesuatu yang dapat ditemukan di bagian bawah.

Kilani telah mengambil pendekatan autoplay suara yang agak mencabar; ada butang mute di kanan bawah skrin. Cara mereka menyarankan agar anda menggulir lebih jauh juga menarik-memasang arahan "Tinjau ke bawah" ke tetikus kursor:

Video

Damir Kotorić , bekas pereka UX di Envato, memulakan Falcon Films sebagai hasil gairahnya untuk fotografi udara. Hanya masuk akal bahawa video memainkan peranan besar di halaman rumah Falcon Films; periksa latar belakang <video> , lalu tonton showreel untuk melbourne drlot.

Sekali lagi, Damir telah menggunakan CSS min-height: 100vh;untuk membuat sebahagian pahlawan penuh skrin.

Lanskap mencapai kesan yang sama; satu skrin penuh, memutar video secara automatik dengan tambahan showreel, tetapi menggunakan JavaScript untuk mendapatkan skrin penuh. Fail video mp4 otomatis itu sendiri adalah 1.3Mb, tetapi tidak ada lagi yang dapat menyekat bandwith Anda.

Gaya

Satu hal yang belum kita sebutkan adalah skrin penuh yang memberi kita: kanvasnya! kanvasnya! Dengan menggunakan ruangan untuk menyajikan produk, sebuah syarikat, sebuah idea, adalah keseluruhan dari pola ini. Menghapuskan kekacauan dari isi lain dan berfokus pada pesan dan kepribadian.

Contoh Landskap, 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 walaupun-gambar ini adalah duotone, jadi bisa dipotong ukurannya menjadi 540Kb. Beberapa sedikit kabur, kemudian menurunkan kualitas JPG hingga 50% menurunkannya menjadi sekitar 50Kb tanpa mengorbankan efeknya sama sekali.

Persidangan Perniagaan Perniagaan Bloomberg (apakah anda akan ke sana?) Menggunakan abstrak tipografi tata letak untuk dijadikan mata. Reka bentuk konvergensi? Tidak di sini, kawan.

Adakah saya pernah menyebutkan Proyek Translasi Envato Tuts + ? Mungkin .. Bagaimanapun, saya menyukai demonstrasi tema skrip RTL ini-lihat Proland , arahan laman template yang dibuat dengan Bootstrap dengan beberapa pilihan skrin penuh layout.

Adakah anda Sudah Mengisi?

Halaman skrin penuh halaman adalah pola yang tidak mungkin kita lihat akan hilang dalam waktu dekat Dan mengapa perlu? Ini adalah cara yang berkesan untuk mengenalkan pengguna ke laman web dari semua jenis. Apa sajakah kegemaran anda? Di mana lagi anda melihat pola ini digunakan, untuk lebih baik atau lebih buruk? Beri tahu kami di komen!

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.