Skip to main content

Desain Web - Grid

Sumber : webdesign.tutsplus.com >

Grid
grid dapat membuat struktur dasar, kerangka untuk desain . terdiri dari garis "tak terlihat" di mana elemen desain dapat ditempatkan. lakukan mengikat bersama dalam "sistem" secara keseluruhan dan mendukung komposisi —secara rasional. 
BBC

 

Grid membantu mencapai keselarasan dan konsistensi yang efektif dengan sedikit usaha. "

Terminologi

Unit

Unit adalah blok bangunan dasar dari setiap grid. Beberapa unit membentuk grid secara keseluruhan. Dalam contoh di bawah ini dari BBC  merupakan grid 12 unit. Garis-garis ungu masing-masing mewakili satu unit.

Gutter

Garis-garis kuning sempit pada ilustrasi di bawah ini mewakili Gutter yang memisahkan masing-masing unit. Gutter adalah bentuk ruang putih kisi mikro yang memberikan ruang untuk bernafas pada. 

Column

Sekarang menjadi lebih menarik. Beberapa unit dan talang bersama-sama Columnmembentuk yang merupakan wadah efektif untuk menempatkan konten —secara strategis. Ini mungkin tidak tampak pada awalnya, bekerja dalam batasan seperti itu tetapi tetapi. Kendala dapat membuat keputusan tentang tempat menempatkan konten lebih mudah dan lebih cepat. 

Pada contoh di bawah ini, dapat melihat tiga kolom berbeda sedang bekerja. Setiap kolom berukuran untuk bentuk konten tertentu atau untuk menciptakan penekanan.

Seperti yang dilihat, memiliki banyak opsi untuk menggabungkan berbagai bentuk konten dan elemen desain. Apa yang juga dapat amati adalah bahwa kolom-kolom ini bersama-sama struktur kokoh yang mengembuskan konsistensi membentuk dan keteraturan melalui penyelarasan. Bukan harga yang buruk untuk membayar untuk menyiapkan beberapa baris dan untuk beberapa kendala, bukan?

Field

Kolom Field merupakan divisi horizontal halaman. Bukan ide yang buruk untuk mengupayakan dengan ketinggian yang sama di halaman . Dalam prakteknya hal ini tidak selalu mudah untuk dicapai. Jika ladang memiliki ketinggian yang sama dan cocok untuk desain, bagus, jika tidak, lanjutkan dan goreng ikan yang lebih besar.

Rule of Thirds

Rule of Thirds menggunakan grid mini dan menyiratkan bahwa ketika menempatkan konten pada baris tertentu yang membagi konten menjadi tiga, hasilnya akan lebih enak di mata manusia. Ini adalah pendekatan yang sangat sering digunakan dalam fotografi, misalnya. Meskipun ini mungkin merupakan titik yang baik dan sering kali berada di rata-rata yang tepat,

 

Rule of Thirds  adalah pedoman yang baik—atau setidaknya bisa—bila cocok dan “selaras” dengan gambar, desain, atau apa pun, tetapi jangan dianggap terlalu serius. Melanggar aturan kapan pun itu masuk akal. lakukan apa yang benar-benar terasa dan lakukan dengan naluriah dalam pedoman dan teknik yang pertama kali untuk pekerjaan desain . "Tidak ada yang benar, semuanya diizinkan" dalam desain — untuk mengutip beberapa Nietzsche di luar konteks. Secara filosofis ini dapat diperdebatkan sampai mati — memang memang begitu, tetapi dalam desain, ini merupakan pedoman yang kuat untuk mengeksplorasi kreativitas tanpa batasan "ajaib". 

Twelve Unit Grid

Berikut akan dibahas terkait pengembanang sistem pertama yang baik untuk tata letak . Twelve Unit Grid. 

 

Mengapa Twelve Unit Grid berguna? Sebagai awalnya, karena memecah dengan baik menjadi tiga, empat dan enam kolom, yang cukup fleksibel untuk menangani semua jenis konten dengan mudah. Selain itu, dapat membuat simetris atau asimetris—yang memberi banyak opsi untuk memainkannya dengan aman atau membuat beberapa tata letak dinamis yang melampaui simetri sederhana. 

Mari kita lihat beberapa layout yang memanfaatkan fleksibilitas yang ditawarkan grid ini.

Four Column Grid

Manfaat utama dari grid empat kolom/Four Column Grid adalah kesederhanaannya, keseimbangannya dan juga sangat dapat dilkan. Setiap kolom di sini mencakup tiga unit. Sisi sebaliknya adalah sangat simetris yang bisa terlihat sedikit membosankan. 

Kadang-kadang, memerlukan bagian sekunder untuk konten yang ditekankan dan kemudian bilah sisi untuk masalah. Pada contoh pertama di bawah ini, dapat melihat bahwa kolom pertama digunakan untuk branding, dua kolom di tengah untuk konten utama, sedangkan yang terakhir untuk konten yang kurang disorot.

Three Column Grid

Dengan grid ini, setiap kolom mencakup empat unit. Variasi ini sedikit lebih karena ini adalah grid asimetris dan harus lebih pintar dalam menemukan keseimbangan dalam desain . Tata letak asimetris seperti ini sering dianggap lebih aktif dan lebih terampil. Itu bisa dan harus dipertanyakan tentunya!

Six Column Grid

Dalam contoh ini, setiap kolom mencakup dua unit, membuat segalanya lebih menantang daripada kisi-kisi tiga kolom. Ini membagi setiap kolom dari kotak tiga kolom menjadi dua kolom lebih lanjut. Kisi enam kolom memberi lebih banyak opsi dan peluang untuk menyempurnakan detail yang lebih kecil. Jika bekerja di situs yang kaya konten dan perlu memarkir banyak informasi, kisi kolom bisa menjadi titik awal yang cerdas untuk eksperimen. Karena ini mungkin grid tingkat lanjut, mungkin tidak akan merekomendasikan untuk memulainya di rodeo pertama .

kombinasi

juga dapat menggabungkan grid dalam desain, itulah sebabnya sistem grid dua belas unit sangat berguna. Ini dengan mudah mendukung untuk menggabungkan blok tiga, empat dan enam dengan rapi. 

Penekanan

Tata letak yang seimbang dan sederhana seringkali terasa lebih nyaman daripada yang terlalu rumit. Sisi sebaliknya adalah harus berhati-hati untuk tidak memainkannya terlalu aman sepanjang waktu dan membosankan. Untuk, dapat memisahkan diri dari kisi atau menyorot elemen desain tertentu melalui ukuran—dengan menggabungkan beberapa kolom, misalnya. Ini dapat menciptakan minat visual dan membangun hierarki yang lebih baik dalam elemen desain utama . 

Keluar dari grid untuk menciptakan penekanan dapat meningkatkan desain secara besar-besaran dengan menyorot bagian-bagian penting, atau dapat terlihat sangat, yah, bodoh. Wallpaper melakukan pekerjaan yang bagus untuk keluar dari empat kolom dan video yang ingin ditonton.

Namun perlu berhati-hati, melanggar ritme grid kali terlihat rusak atau terlalu banyak bagian sehingga tidak menonjol lagi.

Keterbatasan

Pertanyaan yang sering muncul adalah kapan menggunakan grid dalam desain? Selalu! Itu selalu merupakan keputusan yang baik untuk pergi dengan grid karena membantu dengan keseimbangan, hierarki, keselarasan, dan konsistensi. 

Lalu selalu ada argumen bahwa grid membatasi pekerjaan . TAPI ITU Hal Yang Baik KARENA jaringan sebenarnya DAPAT memfasilitasi Kreativitas Dan memandu keputusan Beroperasi konstruktif. Pembatasan seperti itu bisa menjadi titik awal yang baik untuk pekerjaan . Jadi ketika memiliki konstanta, seperti ukuran iklan yang diberikan kepada klien , memiliki titik awal untuk membangun desain di sekitarnya. Ukuran grid dapat dan harus memperhatikan batasan tersebut.

Pada contoh di bawah dari The Wall Street Journal , dapat melihat bahwa ukuran iklan, yang dipadukan dengan warna hijau, menghasilkan keputusan desain untuk membuat bagian dari kisi-kisi dengan mempertimbangkan dimensi tersebut.

Peta Mental

Jika berhasil, grid akan membantu membangun model mental situs dan halaman individualnya. Itu juga berbeda menyiratkan bahwa struktur halaman tidak boleh sekali satu sama lain — penyebut umum yang menyesuaikan dengan keterjangkauan setiap halaman harus dari . 

Mari kita lihat lagi bagaimana Etsy berhasil menyelesaikan beberapa ini. Hanya kali ini, mari kita fokus pada bagaimana grid mendukung kebutuhan konten yang berbeda dan bagaimana menggabungkannya dari halaman ke halaman. Menurut pendapat , melakukan pekerjaan yang baik dalam menjaga konsistensi yang menciptakan kesan terpadu, mengikat halaman bersama dengan rapi. Dengan demikian, diharapkan memandu pengguna melalui konten dan pengguna tahu apa yang diinginkan. Peta mental yang sehat dan tidak memiliki kejutan yang dapat menggagalkan pengalaman pengguna secara struktural.

menciptakan ritme yang bagus untuk halaman dan grid terlihat elegan karena memainkannya dengan sederhana.