Ruang bebas dalam reka bentuk web. 9 tapak untuk inspirasi

Ruang kosong tidak selalu buruk.

Pengalaman dunia reka bentuk web telah menunjukkan: lebih baik bila terdapat banyak ruang udara dan kosong dalam reka bentuk.

Pelawat laman web digunakan untuk dengan cepat membalikkan halaman dan membuat skim melalui pos. Susun atur yang dilebih-lebihkan, di mana pemaju cuba mencetak maklumat yang terlalu banyak, mengelirukan pengguna tersebut. Kesederhanaan adalah kunci kepada perhatian pengguna yang tidak berbelah bahagi. Dan kesederhanaan ini bermula dengan penggunaan ruang bebas yang berkesan.

Marilah kita secara ringkas menganalisis mengapa ruang bebas adalah penting kerana ia meningkatkan penukaran, serta mempertimbangkan sembilan laman web dan bagaimana pencipta mereka menggunakan ruang bebas dengan berkesan, dan mendorong pengunjung untuk mengambil tindakan.

Ruang bebas dalam reka bentuk web adalah udara di antara pelbagai elemen. Ia secara visual memisahkan susun atur tapak dan maklumat ke dalam bahagian, menarik perhatian pelawat ke yang paling penting.

Kawasan-kawasan yang sengaja dibiarkan kosong adalah menyenangkan kepada mata. Selain estetika, mereka mempunyai kesan yang signifikan terhadap bagaimana otak memahami dan memproses maklumat baru. Terlalu banyak maklumat atau data visual, ketat dibungkus ke ruang kecil, menyebabkan keletihan kognitif - menjadi lebih sukar untuk melihat maklumat. Untuk reka bentuk tidak ada yang lebih teruk daripada kesesakan.

Kenapa anda perlukan ruang kosong

Ingat betapa keras halaman direktori telefon abjad. Semua lajur teks kecil ini bergabung dalam satu aliran maklumat yang tidak dapat disangkal. Sangat sukar untuk mencari yang diperlukan dalam buku rujukan tersebut.

Mujurlah, tidak seperti direktori telefon, yang dibuat untuk memberikan maklumat maksimum, menempati sekurang-kurangnya ruang, kebanyakan penerbitan cetak secara aktif menggunakan ruang bebas, memudahkan persepsi.

Di bawah, dalam susun atur perkhidmatan Ink Digital, ada contoh yang jelas tentang bagaimana penggunaan ruang bebas yang cekap memudahkan persepsi maklumat:

Lihat perbezaannya? Pada susun atur di sebelah kiri, sebahagian besar ruang bebas digunakan; akibatnya, teks kelihatan besar dan terlalu banyak. Laman ini tidak menimbulkan minat. Walaupun dengan pantas, jelas bahawa bacaan akan membosankan.

Dan pada susun atur di sebelah kanan, jarak antara lajur dan perenggan jauh lebih besar. Perubahan reka bentuk mudah membuat teks lebih mudah dibaca dan menarik.

Sebagai tambahan kepada hakikat bahawa ruang bebas memudahkan pemahaman teks, ia boleh digunakan untuk menyerlahkan perkara-perkara penting terutamanya: untuk menarik perhatian pembaca kepada yang paling penting. Dengan memecahkan susun atur dan membentuk bahagian kecil, anda membuat halaman lebih berat dan halus.

Lihatlah susun atur kad perniagaan cetak ini:

Di atas kad perniagaan di sebelah kiri terdapat ruang yang kosong, tetapi unsur-unsur masih diperas ke satu sudut, oleh itu kad perniagaan kelihatan tidak profesional. Kad perniagaan di sebelah kanan menunjukkan penggunaan ruang bebas yang berkesan: unsur-unsur berada pada jarak yang jauh dari satu sama lain, lebih mudah untuk melihatnya.

Dalam reka bentuk web, ruang bebas merupakan elemen penting untuk kedua-dua estetika dan dari segi pengoptimuman penukaran. Penggunaan ruang bebas yang tepat akan membolehkan anda memfasilitasi navigasi melalui laman web ini, menjadikannya mudah difahami dan mudah dan mendorong pengguna untuk panggilan ke tindakan, meningkatkan penukaran perkhidmatan.

Penyelidikan klasik oleh Faktor Manusia Antarabangsa mendedahkannya penggunaan ruang bebas untuk menyerlahkan unsur-unsur penting laman web itu meningkatkan jangkauan pelawat hampir 20%.

Lihatlah dua susun atur ini:

Di susun atur kiri, butang tindak-tindak dipijamkan oleh blok lain: pemisah dan teks yang padat diletakkan. Sukar bagi pelawat untuk memilih perkara yang paling penting, kerana terlalu banyak gangguan pada halaman

Pada susun atur di sebelah kanan, butang tindak-tindak akan dikelilingi oleh ruang kosong. Dia segera menarik perhatian pengunjung.

Dengan menambah sedikit ruang kosong di sekitar item panggilan untuk bertindak, anda mengalihkan kandungan lain di bawah. Tetapi tidak ada yang salah dengan itu. Jangan cuba muat semua kandungan pada halaman tanpa menatal. Hasilnya, laman web ini boleh menjadi besar dan terlalu banyak.

9 tapak yang menggunakan ruang kosong dengan berkesan

1) Shopify

Halaman utama platform e-dagang Shopify direka untuk menawarkan pelawat untuk mendaftar untuk versi demo percuma.

Untuk tujuan ini, borang pendaftaran profil tunggal dikelilingi dengan jumlah ruang kosong yang mencukupi, meminimumkan gangguan. Jadi pengguna pasti akan melihat mesej utama halaman ini. Fon navigasi laman utama adalah jauh lebih kecil daripada tawaran langganan. Dan blok menu dialihkan ke bahagian paling atas skrin supaya tidak mengganggu pengguna dari bentuk utama.

2) Everlane

Ruang bebas tidak perlu menjadi latar belakang putih biasa. Perkara utama ialah elemen-elemen yang terletak di lokasi strategik dengan jarak jauh dari satu sama lain, membolehkan anda untuk mengelakkan kesesakan halaman dan menghalang pengunjung menjadi keliru dalam jumlah kandungan yang berlebihan.

Untuk menunjukkan koleksi fesyen terkini, peruncit pakaian Everlane telah memilih reka bentuk yang minimum. Di latar belakang adalah gambar blazer "GoWeave". Dan di tengah-tengah skrin butang dengan panggilan untuk bertindak - "Beli Sekarang" diletakkan dengan mahir. Contoh ideal tentang cara menawarkan pengguna untuk membuat pembelian dan tidak kelihatan agresif.

3) Wistia

Apa yang anda perlukan untuk membuat penggunaan strategik ruang bebas adalah untuk memastikan bahawa butang tindak-tindak jelas dipisahkan dari semua kandungan lain. Perubahan mudah seperti ini memainkan peranan penting dalam bagaimana pengguna melihat laman web anda.

Platform Video Wistia mempersembahkan pengguna dengan laman utama tetap dengan persoalan yang mesra dan senarai juntai bawah. Kedua-dua butang panggilan ke tindakan tengah adalah titik fokus utamanya bagi keseluruhan halaman. Pada masa yang sama, mereka agak terpisah dari navigasi utama dan imej latar belakang.

4) Welikesmall

Digital-agency Welikesmall membuktikan bahawa ruang bebas tidak perlu membosankan, kosong atau statik. Di halaman utama laman web mereka adalah video demo dengan projek-projek terkini. Episod pendek serta-merta menarik perhatian pengguna.

Video skrin penuh dalam sebarang konteks lain mungkin kelihatan terlalu agresif dan terlalu banyak. Tetapi para pereka menjaga jumlah ruang kosong yang mencukupi, jadi penyelesaian ini kelihatan elegan. Fokusnya adalah pada video latar belakang, dan maklumat teks adalah minimum. Di salah satu sudut halaman adalah logo syarikat, dan yang lain - menu "hamburger". Slogan "Kepercayaan dalam Membuat", bersama dengan butang tindak-tindak yang membawa kepada demo penuh, berpusat pada halaman.

5) Simpla

Laman web Simpla membuktikan betapa kuatnya alat pemasaran dapat ruang kosong tanpa menatal. Halaman mudah dan minimalis ini memaksa pengguna untuk menatal halaman.

Kebanyakan laman web di bawah logo dan menu kekal kosong. Walau bagaimanapun, bahagian foto yang kelihatan dari bawah dan serpihan kecil teks seolah-olah menjemput pengguna untuk membaca lebih lanjut dan mengenali sejarah dan matlamat syarikat.

Penyelesaian seperti itu bukan sahaja kelihatan canggih, tetapi juga menarik perhatian pengguna ke laman web ini.

6) Muzium Seni Harvard

Muzium seni di Harvard terkenal dengan memaparkan lukisan kuno. Walau bagaimanapun, halaman rumah mereka kelihatan seperti contoh utama reka bentuk moden. Di sini, ruang bebas menjadi latar belakang yang ideal untuk karya seni: tidak ada yang mengganggu pengguna dari kontemplasi yang indah. Pameran seni digital yang sempurna.

Tata letak dalam bentuk batu permata menarik pengguna untuk menatal selanjutnya, dan memastikan bahawa tiada imej yang hilang dalam orang ramai. Untuk memastikannya minimalis, menu laman sepenuhnya tersembunyi sehingga anda berlegar di bahagian atas halaman.

7) Burnkit

Apabila bekerja dengan ruang kosong di halaman utama, anda mesti memutuskan bahawa pelbagai maklumat adalah cukup penting untuk dipaparkan. Tetapi agensi reka bentuk ini menunjukkan kepada kita bahawa walaupun susun atur minimalis dapat menyesuaikan kandungan yang besar dalam dirinya sendiri, dan reka bentuknya tidak akan kelihatan seperti timbunan sampah dengan blok yang berjalan di antara satu sama lain.

Kandungan utama blog, petikan utama dari portfolio dan beberapa kerja di belakang pentas agensi di halaman utama Burnkit. Bagaimanakah mereka berjaya menyesuaikan semua ini pada satu halaman tanpa mengubah laman web tersebut menjadi sekumpulan maklumat yang terlalu banyak? Ruang bebas. Banyak ruang kosong. Setiap artikel dipisahkan oleh inden yang luas. Pengguna boleh menatal halaman untuk melihat bahan baru.

8) sederhana

Perkhidmatan sederhana yang sangat bijak menggunakan ruang kosong, memaksa pembaca menatal ke bawah halaman, melibatkan mereka dalam statistik interaktif: berapa ramai orang menilai siaran ini, berapa banyak yang mengulas dan apa kandungan yang sama yang mereka dapat baca.

Ruang bebas membuat pengguna memberi perhatian kepada lajur tengah skrin, di mana tajuk dan tajuk gambar dipaparkan.

9) Ahrefs

Laman web Ahrefs adalah satu lagi contoh hakikat bahawa ruang bebas tidak boleh menjadi warna. Pencipta tapak menunjukkan kepada kami cara menggunakan ruang kosong dan pemformatan teks dengan betul untuk menarik perhatian pengunjung. Penyelesaiannya mudah dan jelas: butang oren terang, menawarkan untuk mendapatkan versi percubaan.

Dengan teks berani, besar, Ahrefs menandakan nilai teras perisiannya. Kemudian datang teks bertujukan pusat yang lebih kecil, dikelilingi oleh ruang bebas, yang membawa pengguna terus ke butang tindak-tindak. Pintar, betul?

Artikel yang diterjemahkan oleh Tatiana Musihina, Agensi Pemasaran Internet Agency m2b.space.

Artikel asal mengikut rujukan.

Tonton video itu: 15 Ide Bisnis Online Modal Kecil Bahkan Tanpa Modal (Oktober 2019).

Tinggalkan Komen Anda