Media Pengembangan Web & App | by APPKEY

Desain Design Web Bagaimana Mengelola White Space di Layout Responsif Seluler?

Bagaimana Mengelola White Space di Layout Responsif Seluler?

-

Disadari atau tidak, white space adalah alat desain penting. Banyak desainer menyesuaikan elemen halaman sampai terlihat bagus. Paling sering ini mengarah pada keseimbangan alami white space antara bagian halaman hanya dari naluri.

Tetapi ketika Anda masuk ke desain layout responsif, subjek ini menjadi sedikit rumit. White space perlu disesuaikan pada breakpoint yang berbeda untuk menciptakan pengalaman yang mulus bagi semua pengguna.

Ini dapat dilakukan dengan berbagai teknik dan kita akan membahas yang terbaik di sini. Semua situs web modern harus sepenuhnya memiliki desain responsif. Sehingga tidak diragukan lagi bahwa desain layout responsif itu penting. Satu-satunya pertanyaan adalah bagaimana menangani white space, sehingga semua pengguna memiliki pengalaman yang luar biasa.

Mengelola White Space di Layout Responsif Seluler

layout1

Mengatur Ulang Navigasi

Tentu hal pertama yang dipertimbangkan setiap desainer untuk layout responsif adalah bagaimana menangani menu navigasi. Jika sebuah situs memiliki lusinan tautan, Anda sebenarnya tidak memiliki banyak opsi. Anda dapat menggunakan kolom input pilihan atau menu tersembunyi dengan ikon hamburger tiga bar.

Setelah jendela browser Anda mencapai breakpoint tertentu, tautan secara otomatis bersembunyi ke dalam menu dan diganti dengan ikon hamburger. Tetapi perhatikan ruang kosong ekstra yang ditambahkan di antara setiap tautan. Ini adalah teknik umum dan umumnya merupakan ide bagus untuk memberi jarak pada tautan untuk ketukan jari di perangkat seluler.

Artikel Terkait  Mau Kegiatan Ngodingmu Lebih Asyik? Coba Gunakan 10 Text Editor Terbaik Berikut Ini

Sebagian besar situs web mengatur ulang navigasi mereka beberapa kali sebelum akhirnya memilih ikon tiga-bar. Misalnya Dorigati, menggunakan menu navigasi lebar penuh yang akhirnya dipecah menjadi sistem grid. Kemudian pada breakpoint 960 piksel seluruh layout responsif bergeser dari header atas ke navigasi sidebar.

Logo dan tautan semuanya mengatur ulang dirinya sendiri ke dalam sidebar baru. Setelah itu, tautan navigasi tersebut akan kembali ke atas tersembunyi dengan menu hamburger. Ini adalah solusi yang sangat kompleks. Tetapi memberikan pengalaman yang lebih alami untuk resolusi browser yang berbeda.

Dan ingat jika navigasinya cukup kecil maka Anda bahkan tidak perlu hamburger. Biasanya merupakan ide yang baik untuk menghindari menu tersembunyi jika memungkinkan.

Geser dari Horizontal ke Vertikal

White space pada layout desktop bergerak melintasi dan ke bawah halaman. Namun saat Anda berurusan dengan perangkat yang lebih kecil, Anda harus lebih memperhatikan ruang vertikal. Ini menentukan kecepatan konten dan merupakan ‘aliran’ alami untuk smartphone dan tablet. Di Jisc, Anda akan melihat ada banyak bagian halaman yang berorientasi horizontal. Setelah Anda mengubah ukuran halaman, semua elemen blok kecil ini jatuh di bawah satu sama lain.

Satu bagian halaman idealnya menjangkau seluruh lebar layar smartphone 320 piksel. Tetapi layout responsif membutuhkan lebih banyak ruang negatif vertikal antar elemen untuk menciptakan aliran vertikal tersebut. Ide ruang negatif sangat kuat dalam desain web. Anda membutuhkan ruang itu untuk memecah bagian halaman dan membiarkan blok teks memiliki ruang.

Contohnya, Mashable. Saat Anda menggunakan desktop, seluruh beranda mencakup 3-4 kolom konten. Tetapi pengguna yang responsif perlu mendapatkan versi sederhana dari satu kolom yang sangat panjang. Semua kolom lainnya bisa jatuh di bawah kolom utama, atau mereka bisa disembunyikan dari halaman dengan layout responsif.

Setiap situs memiliki solusi yang berbeda. Namun saat Anda mengalihkan white space untuk seluler, Anda selalu perlu berpikir secara vertikal. Garis horizontal harus dikontrol oleh satu elemen pada satu waktu. Anda sebaiknya fokus pada seberapa banyak ruang yang Anda butuhkan di antara elemen dan di antara bagian lain halaman.

Ukuran Font & Spasi

layout2

Beberapa desain responsif dapat bertahan dengan ukuran font tradisional yang sama. Namun jika Anda memiliki header yang terlalu besar atau teks paragraf yang sangat kecil, Anda perlu menyesuaikan ukuran pada breakpoint tertentu. Ada banyak hal yang dapat Anda lakukan dengan tipografi desain responsif di luar properti ukuran biasa. Anda juga dapat menyesuaikan tinggi garis, spasi huruf, warna, dan margin antara dua blok teks.

Artikel Terkait  Belajar Bahasa Pemrograman Javascript Bagi Pemula Mudah dan Menyenangkan

Layout desktop Next Web memiliki banyak white space antara header dan navigasi atas. Tetapi layout responsif seluler mereka memperpendek ruang ini secara dramatis. Sementara teks header juga diperkecil ukurannya sambil memberi jarak sedikit pada paragraf.

Anda harus memercayai naluri Anda dalam hal tipografi seluler. Cobalah untuk mencari tahu apa yang akan terlihat terbaik dan cobalah untuk mencapainya. Pertimbangkan juga bagaimana situs terlihat di layar seluler. Agra Culture memiliki serangkaian blok gambar yang menampilkan teks saat melayang.

Namun, karena pengguna seluler tidak dapat mengarahkan kursor, teks secara otomatis ditampilkan melewati breakpoint tertentu. Tampaknya ini hanya pertimbangan kecil tetapi berdampak besar pada pengalaman seluler.

White space bertambah di antara bagian halaman yang memberikan ilusi area konten yang licik. Efek yang sama ini dapat dilihat di halaman Cartoon Network di mana mereka memiliki navigasi teratas dengan ikon. Setelah breakpoint tertentu, logo CN menyusut bersama dengan link utama. Anda akan melihat tautan yang memiliki ikon akan menyusut dan sepenuhnya kehilangan ikon di layar yang lebih kecil.

Memang benar grafik dapat meningkatkan navigasi. Tetapi hanya ada begitu banyak ruang di seluler dan Anda harus berhati-hati. Saat tipe restyling selalu pertimbangkan masalah ruang horizontal dan vertikal.

Gambar Restyling

Salah satu pertimbangan lainnya adalah penggunaan gambar layar lebar. Karena kebanyakan monitor adalah layar lebar, web telah beradaptasi untuk menyertakan gambar yang biasanya lebih lebar dari yang lebih tinggi. Situs dengan layout responsif seluler harus mengecilkan gambar-gambar ini atau mengatur ulang agar pas.

UPP Broadgate Park memiliki solusi menarik di mana gambar header atas diubah ukurannya agar pas secara vertikal. Tampilan slide gambar dibuat agar sesuai dengan lebar penuh layar, tetapi layar apa pun yang lebih kecil dari 500 piksel akan mendapatkan gambar yang diperpanjang. Ini menambahkan ruang vertikal yang sangat besar ke dalam halaman, yang bisa menjadi bagus jika Anda mencarinya.

Ini adalah strategi yang sulit untuk dilakukan. Anda perlu mengetahui ukuran gambar Anda dan titik fokus dari setiap gambar untuk mengubah ukurannya dengan benar. Namun jika Anda bersedia berusaha, pada akhirnya akan menghasilkan pengalaman yang lebih besar. Dalam skenario lain, Anda mungkin memilih untuk menyembunyikan gambar yang lebih panjang dan menghapusnya sepenuhnya dari pengalaman seluler.

Situs web Golden Isles menggunakan teknik ini pada tayangan slide header atas. Semua gambar lain di halaman diatur ulang menjadi satu kolom dengan tambahan spasi. Namun karena carousel tidak menambahkan banyak pengalaman pengguna, carousel dapat disembunyikan untuk pengguna seluler.

Artikel Terkait  Jasa Pembuatan Website dan Aplikasi Android

Pertimbangkan bagaimana Anda ingin menangani gambar dan berapa banyak ruang yang Anda butuhkan di antara keduanya. Galeri gambar mini mungkin lebih berdekatan daripada tayangan slide atau foto stok unggulan. Setiap skenario berbeda, jadi cobalah strategi yang berbeda untuk melihat mana yang paling berhasil.

Kesimpulan dari White Space di Layout Responsif Seluler

White space adalah aspek penting dari desain web dan memainkan peran besar dalam aliran konten untuk situs web dengan layout responsif. Sebagian besar desainer dapat memperkirakan nilai white dengan mata, tetapi ini membantu untuk memahami mengapa Anda menambahkan white space ke dalam layout responsif.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Apa Itu Cache Memory? Pengertian dan Fungsinya

Apa itu cache memory? Orang yang setiap hari berinteraksi dengan internet, istilah cache tentu saja bukan lagi istilah yang...

Layout adalah : 4 Prinsip Dasar Desain Layout

Desain layout adalah salah satu bagian dari seni kita semua tahu,  untuk bisa menampilkan seni dengan baik, kita harus...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya