Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Grids
Webdesign

Pengantar Komprehensif untuk Grid di Web Design

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Puuma (you can also view the original English article)

Jika Anda sudah pernah berkecimpung dengan menggunakan grid dalam desain Anda, ini adalah artikel yang ditulis untuk Anda. Di dalamnya, Anda akan belajar dasar-dasar, teori, dan akan melihat melalui situs-situs asli bagaimana grid yang di alam liar.

Topik

Dalam panduan ini, kami akan mencakup cukup banyak, termasuk:

  • Grid?
  • Terminologi
  • Aturan pertiga
  • 12 unit Grid
  • Penekanan
  • Keterbatasan
  • Peta mental

Grid?

Grid dapat membuat struktur dasar, desain untuk Anda. Mereka terdiri dari garis-garis "tak terlihat" di mana elemen Anda dapat ditempatkan. Menyusun bersama-sama secara keseluruhan "sistem" dan mendukung Anda-secara rasional.

BBC

Grid membantu Anda mencapai keselarasan dan konsistensi yang efektif dengan sedikit usaha. "Bersayap" dan buang usus Anda tidak menskalakan dengan baik. Jika dieksekusi dengan benar, desain Anda akan terlihat bijaksana, teratur, rapi, dan berstruktur.

Kesejajaran yang baik, seperti banyak desain, harus hampir pergi tanpa diketahui oleh pengguna. Kurang lebih. Menjadi terlalu pandai dan Anda risiko mengganggu pengguna dari tujuan utama mereka mencari konten yang spesifik dan mencerna cepat. Yang harus fokus Anda — tidak memamerkan bagaimana bagus Anda bisa dengan keterampilan desain. Lebih buruk lagi akan dapat menciptakan kembali kemudi untuk proove titik. Kurangnya keselarasan sangat terlihat dan menciptakan kesan yang ceroboh. Hal ini sangat baik dapat mengakibatkan kurangnya kepercayaan dari pengguna yang mengkonsumsi desain Anda — kecuali kurangnya kesejajaran adalah sesuatu yang Anda akan untuk sengaja untuk alasan apa pun kreatif.

Terminologi

Unit

Unit yang blok bangunan dasar dari setiap grid. Beberapa unit membentuk grid secara keseluruhan. Dalam contoh di bawah ini dari BBC Anda mencari di kotak 12 unit. Garis ungu masing-masing mewakili satu unit.

Selokan

Garis-garis kuning sempit pada ilustrasi di bawah ini mewakili selokan yang memisahkan masing-masing unit. Talang adalah bentuk mikro spasi yang memberikan grid beberapa ruang untuk bernapas.

Kolom

Sekarang ia mendapat lebih menarik. Beberapa unit dan Talang bersama-sama membentuk kolom yang efektif wadah di mana untuk menempatkan konten Anda — strategis. Mungkin tidak muncul untuk menjadi kasus pada awalnya, tetapi bekerja dalam batasan tersebut dapat membebaskan. Kendala dapat membuat keputusan tentang di mana untuk menempatkan konten jauh lebih mudah dan lebih cepat.

Dalam contoh di bawah ini, Anda dapat melihat tiga kolom yang berbeda di tempat kerja. Setiap kolom adalah ukuran untuk bentuk konten tertentu atau untuk menciptakan penekanan.

Seperti yang Anda lihat, Anda memiliki banyak pilihan untuk mencampur berbagai bentuk konten dan desain elemen. Apa yang Anda dapat juga mengamati adalah bahwa kolom ini bersama-sama membentuk struktur yang solid yang bernafas konsistensi dan pesanan melalui penyelarasan. Tidak buruk harga yang harus dibayar untuk menyiapkan beberapa baris dan untuk beberapa kendala, tidak ada?

Bidang

Kolom isian konten yang horisontal pembagian halaman. Itu bukanlah ide yang buruk untuk berjuang untuk bidang sama tinggi turun halaman Anda. Dalam praktek ini tidak selalu mudah untuk mencapai. Jika bidang Anda berakhir dengan ketinggian yang sama dan itu bekerja untuk desain Anda, besar, jika tidak, bergerak dan goreng ikan yang lebih besar.

Aturan pertiga

"Aturan pertiga" menggunakan mini grid dan menyiratkan bahwa ketika Anda menempatkan konten pada baris-baris tertentu yang membagi konten menjadi tiga bagian, hasilnya akan lebih menyenangkan untuk mata manusia. Ini adalah pendekatan yang sangat sering digunakan dalam fotografi, misalnya. Walaupun itu mungkin menjadi titik awal yang baik dan sering membuat Anda dalam rata-rata benar, saya akan menyarankan mengambil ini dengan sebutir garam.

Ketika orang berbicara tentang "persimpangan ajaib" yang seharusnya untuk membantu Anda menempatkan elemen desain, saya akan mendorong Anda untuk mengambil napas dan mempertimbangkan potensi bulu. Sangat mudah untuk hanya minum bantuan keren, terutama karena tidak sulit untuk mengikuti "aturan" ini, tapi apa-apa tentang ini tampaknya matematis atau biologis khusus dengan cara apapun- dan itu pasti tidak magis.

Dan jangan lupa bahwa kita tidak semua visual melihat dunia dengan cara yang sama. Kami semua berbeda. Kami bukan mesin yang mematuhi beberapa sudut pandang matematis tepat ketika melihat dunia. Lihatlah Reddit misalnya. Apakah terlihat seperti mereka peduli tentang persimpangan magis?

Ya, aturan pertiga adalah petunjuk yang baik — atau dapat setidaknya — ketika ini cocok dan "menyelaraskan" dengan gambar, Desain, atau apa pun, tapi jangan bawa terlalu serius. Melanggar aturan setiap kali masuk akal. Melakukan apa yang terasa benar dan pergi dengan usus Anda dalam pedoman dan teknik yang Anda pelajari untuk pekerjaan desain Anda. "Tidak ada benar, semuanya diperbolehkan" dalam desain — untuk mengutip beberapa Nietzsche keluar dari konteks. Filosofis ini bisa dikatakan mati — memang seharusnya begitu, tetapi dalam desain, ini merupakan pedoman perusahaan untuk menjelajahi kreativitas Anda tanpa pembatasan "magis".

Gila, melanggar aturan, memiliki beberapa menyenangkan dan jika Anda beruntung, menemukan wilayah baru!

Proporsi ilahi?

Sementara kita berada di dunia magis hal dalam desain, biarkan aku berteriak-teriak sec tentang sesuatu yang terkait: orang-orang telah lama percaya bahwa menggunakan proporsi "Ilahi" golden ratio hasil dalam sesuatu yang khusus, ilahi dan yang berkenan kepada mata manusia. Ada eksperimen yang mempertanyakan asumsi ini "pra-modern" dengan tujuan baik.

Vitruvian Man
Vitruvian Man oleh Leonardo da Vinci

Putusan final adalah masih keluar pada isu-isu ini kurasa — dan mungkin untuk waktu yang lama- tetapi tidak harus menghalangi kita dari menjaga pikiran yang terbuka untuk pertanyaan ini diturunkan asumsi. Kami benar-benar harus melampaui pemikiran magis. Untuk sementara itu masuk akal bagi saya bahwa "golden berarti" mungkin akan super menyenangkan kita manusia karena di alam kita juga dikelilingi oleh itu. Tapi sekali lagi, bukti meyakinkan akan menyenangkan. Mungkin, mungkin tidak, tapi ini bukan sesuatu yang ingin mengambil untuk diberikan dan membangun di atas.

Dua belas Unit Grid

Kembali ke perairan yang lebih pragmatis. Saya ingin mendiskusikan grid sangat fleksibel dan Anda mulai dengan sesuatu yang nyata yang membuat sistem pertama yang baik untuk membangun tata letak Anda. Dua belas unit grid adalah teman Anda.

Etsy

Mengapa Apakah dua belas unit yang berguna? Untuk pemula, karena mereka melanggar baik menjadi tiga, empat dan enam kolom, yang cukup fleksibel untuk menangani semua jenis konten agak mudah. Selain itu, Anda dapat membuat mereka simetris atau asimetris-yang memberi Anda banyak pilihan untuk baik bermain aman atau untuk membuat beberapa layout dinamis yang melampaui simetri sederhana.

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

Empat kolom Grid

Manfaat utama dari sebuah grid empat kolom adalah kesederhanaan, keseimbangan dan bahwa itu juga sangat bisa diandalkan. Setiap kolom di sini mencakup tiga unit. Sisi lain adalah bahwa hal itu sangat simetris yang bisa terlihat sedikit membosankan.

Seringkali, Anda memerlukan bagian utama untuk menekankan konten dan kemudian sidebar untuk masalah sekunder. Dalam contoh pertama di bawah ini, Anda dapat melihat bahwa kolom pertama digunakan untuk branding, tengah dua kolom adalah untuk konten utama, sedangkan yang terakhir adalah untuk konten yang menyoroti kurang.

bentuk
Majalah Desain Harvard
Etsy
Wallpaper
marie claire

Tiga kolom Grid

Dengan grid ini, setiap kolom mencakup empat unit. Variasi ini sedikit lebih terlibat karena merupakan grid asimetris dan Anda harus cerdas tentang menemukan keseimbangan dalam desain Anda. Asimetris layout seperti ini sering dianggap lebih aktif dan lebih terampil. Yang dapat dan harus dipertanyakan tentu!

Wallpaper
Kickstarter
Kickstarter
Wallpaper
KABEL

Enam kolom Grid

Dalam contoh ini setiap kolom mencakup dua unit, membuat hal-hal yang sedikit lebih menantang daripada tiga kolom grid. Membagi up setiap kolom dari tiga kolom grid menjadi dua kolom yang lebih lanjut. Grid enam kolom menyediakan Anda dengan lebih banyak pilihan dan kesempatan untuk baik tune detail kecil. Jika Anda bekerja pada situs konten-kaya dan perlu untuk memarkir banyak informasi, grid enam kolom bisa menjadi titik awal yang cerdas untuk eksperimen. Karena mungkin grid maju, saya mungkin tidak akan merekomendasikan dimulai dengan ini pada rodeo pertama Anda.

Wallpaper
New York Times

Kombinasi

Anda juga dapat menggabungkan grids dalam desain Anda, itulah sebabnya dua belas unit sistem grid sangat berguna. Hal ini mudah memungkinkan Anda untuk menggabungkan blok kolom tiga, empat dan enam rapi.

Etsy
BBC
Etsy
Etsy
BBC
Etsy
Etsy
Etsy

Penekanan

Layout yang seimbang dan sederhana sering merasa lebih nyaman daripada terlalu rumit. Sisi lain adalah bahwa Anda harus hati-hati untuk tidak bermain terlalu aman semua waktu dan risiko yang tampak membosankan. Untuk penekanan, Anda dapat melepaskan diri dari grid atau menyoroti elemen-elemen desain tertentu melalui ukuran — dengan menggabungkan beberapa kolom, misalnya. Ini dapat membuat bunga visual dan membentuk hirarki lebih baik dalam elemen rancangan utama Anda.

Etsy

Breaking keluar dari grid untuk membuat penekanan dapat baik secara besar-besaran meningkatkan desain Anda dengan menyorot bagian penting, atau dapat terlihat benar-benar, baik, bodoh. Wallpaper melakukan pekerjaan besar di melanggar keluar dari empat kolom dan sangat menekankan mereka ingin Anda untuk menonton video.

Wallpaper
bentuk
Wallpaper

Tapi Anda harus berhati-hati, mengatasi irama grid Anda juga akan menghasilkan tata letak yang terlihat Lebih banyak atau lebih banyak bagian tidak lagi yang menonjol lagi.

Keterbatasan

Apa yang dimaksud dengan kapan menggunakan grid dalam desain? Selalu! Itu selalu merupakan keputusan yang baik untuk pergi dengan grid karena mereka membantu dengan keseimbangan, hierarki, keselarasan dan konsistensi.

Maka selalu ada argumen bahwa grid membatasi pekerjaan Anda. Tapi itu hal yang baik karena grid benar-benar dapat memfasilitasi kreativitas Anda dan memandu keputusan Anda dengan cara yang konstruktif. Pembatasan semacam itu dapat menjadi titik awal yang baik untuk pekerjaan Anda. Jadi ketika Anda memiliki konstanta, seperti ukuran iklan yang diberikan kepada Anda oleh klien Anda, Anda memiliki titik awal untuk membangun desain Anda di sekitarnya. Ukuran grid Anda dapat dan harus memperhatikan batasan tersebut.

Dalam contoh di bawah ini dari The Wall Street Journal , Anda dapat melihat bahwa ukuran iklan, ditandai dengan warna hijau, menghasilkan keputusan desain untuk membangun bagian dari grid dengan dimensi tersebut dalam pikiran.

Peta Mental

Jika Anda berhasil, grid Anda akan membantu membangun model mental dari situs Anda dan halaman individualnya. Itu juga menyiratkan bahwa struktur halaman Anda tidak boleh benar-benar berbeda satu sama lain — penyebut umum yang menyesuaikan dengan setiap tingkat dari produk harus menjadi bagian dari rencana Anda.

Mari kita lihat lagi beberapa contoh bagaimana Etsy berhasil memecahkan masalah ini. Hanya kali ini, mari kita fokus pada bagaimana grid mereka mendukung kebutuhan konten mereka yang berbeda dan bagaimana mereka mencampurnya dari halaman ke halaman. Menurut pendapat saya, mereka melakukan pekerjaan yang hebat dengan menjaga konsistensi yang menciptakan kesan terpadu, mengikat halaman bersama dengan rapi. Dengan demikian, mereka memandu pengguna melalui konten dan pengguna tahu apa yang diharapkan. Peta mental mereka adalah suara dan tidak memiliki kejutan yang dapat menggagalkan pengalaman pengguna secara struktural.

Mereka menciptakan irama yang bagus untuk halaman mereka dan grid mereka terlihat elegan karena mereka memainkannya sederhana.

Pikiran Akhir

Secara keseluruhan, menyelaraskan konten secara sistematis adalah hal utama yang harus diambil dari seluruh topik ini. Tidak ada yang lebih efektif dalam mengikat berbagai bentuk konten bersama daripada garis grid yang konsisten. Buat sumbu kuat yang dapat diikuti pengguna untuk orientasi dan untuk memandu mata dan tindakan mereka seperti jangkar visual. Ini biasanya menghasilkan hubungan yang lebih kuat yang menghubungkan Anda dan menciptakan kohesi. Keep it simple! Desain Anda akan lebih mudah dipelihara dan dibangun.

Advertisement
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.