Jika Anda mencari Gambar Desain Website maka Anda berada di tempat yang tepat. Dalam posting ini, kita telah membahas 5 grid desain situs web yang berbeda.
Grid adalah tulang punggung desain; mereka membantu Anda dalam membangun ketertiban dan mengatur konten desain Anda. Kami akan membahas apa itu grid, mengapa Anda harus menggunakannya dalam desain web, dan bagaimana membuatnya di posting ini.
Anda membuka aplikasi desain pilihan Anda dan itu dia, kanvas kosong menatap Anda. Ini adalah sentuhan yang menakutkan di kali.
Bagaimana Anda memulai? Posisi apa yang Anda beri judul? Di mana Anda menempatkan karya seni dan foto Anda? Sebuah grid adalah semua yang diperlukan untuk memulai.
Grid adalah struktur yang digunakan untuk mengatur konten desain; itu membangun keselarasan dan ketertiban.
Baik Anda mendesain tata letak untuk dicetak, seperti majalah, atau menggabungkan foto dan teks untuk membuat halaman arahan, kisi akan membantu Anda membuat pilihan desain dan memberikan pengalaman pengguna yang positif.
Pertimbangkan bagaimana desain halaman arahan ini menggunakan kisi 12 kolom untuk mengatur komponennya. Menggunakan kisi menghilangkan kemungkinan membuat keputusan acak.
Daripada memposisikan potongan secara acak, dengan menggunakan kisi dengan benar, Anda akan tahu persis di mana menempatkan elemen seperti logo, item menu, judul, isi isi, dan foto. Selain itu, ini akan membantu dalam percepatan proses desain Anda.
Pada artikel ini, saya akan memberi tahu Anda semua yang perlu Anda ketahui tentang cara menggunakan grid dalam desain web. Jadi, tetaplah bersamaku sampai akhir.
Konten
- Dari Mana Grid Berasal?
- Mengapa Grid Penting dalam Desain Web?
- 5 Jenis Grid yang Berbeda
- 4 Praktik Terbaik Menggunakan Grid dalam Desain Web
- Anatomi Grid – Apa yang Harus Anda Ketahui?
- Pertanyaan yang Sering Diajukan: Grid Desain Situs Web 2024
- Apa kisi terbaik untuk desain web?
- Apa itu situs web tata letak kotak?
- Bagaimana cara kerja kisi situs web?
- Bagaimana tata letak kotak meningkatkan desain web?
- Mengapa desainer menggunakan grid?
- Berapa banyak kolom yang harus dimiliki grid dalam desain web?
- Mengapa kami menggunakan kisi 12 kolom?
- ️ Apa itu kisi 12 kolom?
- Bagaimana Anda menggunakan templat kisi?
- Kesimpulan: Kisi Desain Situs Web 2024
Dari Mana Grid Berasal?
Sebelum kita masuk ke bagaimana grid mempengaruhi desain web hari ini, mari kita lihat sejarah grid dan bagaimana mereka digunakan. Grid diperlukan untuk organisasi tipografi.
Kisi-kisi awalnya digunakan dalam tata letak manuskrip untuk memesan jenis. Pertimbangkan bagaimana urutan penyebaran ini dari halaman teks awal.
Untuk melihat lebih dalam tentang sejarah percetakan, lihat esai kami tentang sejarah desain grafis.
Maju cepat ke Revolusi Industri dan munculnya manufaktur massal, di mana surat kabar, poster, iklan, dan barang cetakan lainnya diproduksi dalam jumlah besar.
Desainer suka Jan Tschichold dan Josef Muller-Brockmann menciptakan sistem grid baru pada abad kedua puluh, yang berkembang menjadi apa yang sekarang dikenal sebagai Gaya Swiss atau Gaya Tipografi Internasional.
Mereka membentuk struktur modular dengan spasi yang cukup.
Mengapa Grid Penting dalam Desain Web?
Dalam hal penerapannya pada proses desain web, sistem grid membantu penyelarasan komponen halaman menggunakan kolom dan baris yang berurutan.
Setelah fondasi hierarkis ini ada, kita dapat mengatur teks, grafik, dan hampir semua elemen desain lainnya di dalam antarmuka dengan cara yang konsisten dan teratur.
Saat mendesain untuk web dan seluler, halaman atau antarmuka yang kami kembangkan dimaksudkan untuk memfasilitasi aliran pengguna yang berbeda.
Kisi memfasilitasi proses perancangan gambar rangka, templat, atau tata letak standar untuk situs yang sebanding karena alur pengguna sering kali terdiri dari beberapa layar atau jendela yang mengulangi skema dan tata letak desain yang serupa.
Kisi memungkinkan pembagian halaman secara horizontal dan vertikal melalui baris dan kolom. Sistem grid adalah teknik sistematis yang memungkinkan desainer untuk mengatur item secara teratur dan mengembangkan komponen untuk beberapa halaman atau tata letak secara modular.
Selain itu, grid menetapkan satu set standar unit pengukuran tetap yang menentukan ukuran, jarak, dan keselarasan setiap elemen desain.
Tata letak kotak berasal dari desain cetak ketika digunakan bersama dengan tipografi untuk mengatur tulisan tangan di atas kertas, terutama di buku dan surat kabar.
Karena itu, banyak aspek desain kontemporer bergantung dan berkembang pada tata letak berbasis grid. Ini mencakup desain web, desain antarmuka, dan, yang paling penting, desain responsif.
Sebelum kita menggali bagaimana dan mengapa tata letak berbasis grid adalah alat yang sangat berharga untuk proses desain kita sebagai pengembang web, mari kita lihat lebih dekat komponen fisik yang membentuk sistem grid.
5 Jenis Grid yang Berbeda
Grid diklasifikasikan ke dalam lima kategori berbeda. Sementara beberapa lebih cocok untuk desain web daripada yang lain, Anda hampir pasti telah menggunakan kelimanya pada suatu waktu sepanjang karir kreatif Anda.
1. Kisi Hirarki:
Penggunaan yang paling umum dari kisi hierarkis ada di desain web. Tujuan dari grid ini adalah untuk memprioritaskan item. Mereka mungkin lebih mudah beradaptasi, tetapi mereka masih mengandalkan kolom, baris, dan modul untuk pengorganisasian.
Mereka secara alami dibangun dengan terlebih dahulu mengatur elemen paling signifikan pada halaman dan kemudian mengelilinginya dengan kotak.
Situs web berita dan terkait media sering menggunakan gaya kisi ini untuk membantu menarik perhatian ke artikel dan pos tertentu. Pertimbangkan bagaimana ' beranda menggunakan kisi hierarkis.
2. Kotak Modular:
Kisi-kisi modular mirip dengan kisi-kisi kolom tetapi menyertakan baris-baris. Sementara surat kabar dan majalah sering menggunakan kisi-kisi modular untuk mengatur materi, mereka juga dapat digunakan dalam desain situs web dan aplikasi, misalnya, di bagian kisi-kisi produk.
Pertimbangkan bagaimana Everlane mengatur koleksi denimnya menggunakan kotak modular. Itu Youtube homepage adalah contoh lain dari situs yang menggunakan grid modular.
Meskipun mereka menyertakan bilah sisi kiri untuk tautan yang sering muncul seperti bagian tren dan langganan, semua materi video disusun dalam kisi modular empat kolom untuk memaksimalkan jumlah video yang dapat dibaca pemirsa saat menelusuri sesuatu untuk ditonton.
3. Kisi Kolom:
Kisi-kisi kolom membantu dalam organisasi teks, gambar, dan grafik. Untuk situs web, jumlah kolom yang menutupi lebar halaman arahan dapat berkisar dari dua hingga dua belas atau bahkan enam belas.
Teks dan grafik dapat dimuat di dalam satu kolom atau mencakup banyak kolom. Talang adalah ruang antar kolom; mereka harus seragam dalam ukuran di semua.
Kisi-kisi kolom tidak harus simetris. Misalnya, Anda dapat menggunakan kisi kolom asimetris di mana kolom tertentu lebih sempit daripada yang lain, yang mungkin menguntungkan tergantung pada hierarki desain Anda.
Kisi kolom asimetris sering digunakan di situs web blog, di mana materi utama disertakan dalam wadah dua pertiga tata letak yang lebih besar, sedangkan sepertiga yang lebih kecil dapat menampilkan informasi tentang blog dan penulisnya.
Pertimbangkan bagaimana beranda blog ini menggunakan kisi kolom asimetris.
4. Pita Naskah:
Semua buku, surat kabar, dan majalah dibangun di atas kisi-kisi manuskrip. Selain itu disebut sebagai kisi satu kolom, ini adalah salah satu pola kisi paling sederhana dan sangat cocok untuk blok teks dan grafik besar yang terus menerus.
Intinya, ini adalah ruang persegi panjang besar di dalam halaman yang berfungsi sebagai kotak pembatas untuk teks.
5. Kisi Dasar:
Sebuah grid dasar sedikit lebih teknis; itu ditentukan oleh lokasi teks. Intinya, ini mengacu pada leading atau ruang antara baseline.
Kotak ini membantu dalam memberikan pengalaman membaca yang positif bagi pembaca, terutama ketika ada banyak konten untuk dibaca. Meskipun sangat penting untuk desain cetak, seperti tata letak buku, ini sama pentingnya untuk desain online.
Pertimbangkan efek spasi baris pada keterbacaan halaman arahan. Jika teks terlalu padat, pengguna dapat meninggalkan situs sepenuhnya. Pertahankan perpaduan yang tepat antara teks dan ruang putih.
4 Praktik Terbaik Menggunakan Grid dalam Desain Web
Ada beberapa kata dan ide untuk berkenalan dan memahami dalam bidang desain web, tetapi tidak lebih dari pentingnya grid dalam desain web.
Di antara beberapa komponen yang membentuk struktur kisi, banyak jenis kisi yang tersedia, dan proses kognitif terlibat dalam menentukan jenis kisi mana yang paling cocok dengan konten dan desain Anda, ada banyak hal yang perlu diperhatikan.
1. Patuhi Aturan Sepertiga:
Konsep desain web lainnya adalah Aturan Thirds, yang membantu desainer dalam menciptakan tata letak kotak dan penempatan gambar yang seimbang secara estetis.
Pendekatan ini melapisi kisi-kisi yang membagi area desain secara horizontal dan vertikal menjadi tiga bagian. Ini membagi setiap gambar atau bagian halaman/ruang menjadi sembilan segmen yang sama yang ditentukan oleh perpotongan garis.
Menurut Rule of Thirds, menempatkan "objek yang menarik" pada "sepertiga" gambar akan mengarahkan perhatian pengguna kepada mereka dengan cara yang lebih kuat dan menarik secara estetis.
Dalam desain web, desainer sering menggunakan Aturan Sepertiga untuk membantu mereka membuat beberapa pilihan kisi dan tata letak yang paling penting.
2. Hormati Rasio Emas:
Banyak desainer menggunakan konsep yang dikenal sebagai Rasio Emas untuk mengoptimalkan skala, keseimbangan, dan tata letak desain kisi mereka. Itu Rasio Emas adalah proporsi yang sama dengan 1.6180 dalam bentuk paling sederhana.
Persegi panjang emas adalah persegi panjang yang panjangnya 1.6180 kali lebarnya berdasarkan Rasio Emas. Ini menunjukkan bahwa jika lebar elemen adalah 100 piksel, panjangnya akan menjadi 161.80 piksel.
Hal ini berlaku untuk lebar dan panjang gambar, objek, atau bentuk yang berdekatan, serta pengembangan bentuk atau elemen tunggal.
Dengan menggunakan Rasio Emas, desainer dapat menentukan antara lain bagaimana membagi ruang horizontal yang tersedia pada halaman dan berapa banyak ruang yang diperbolehkan untuk dan di sekitar setiap bagian.
Salah satu contoh di mana hal ini dapat terjadi adalah saat mengembangkan bagian pahlawan situs web. Jika Anda memilih tata letak lebar penuh dan membaginya secara vertikal menjadi dua bagian: gambar pahlawan dan teks pahlawan.
Selain itu, Anda harus memutuskan ukuran gambar, ukuran teks, dan sebagainya dalam prosedur desain mikro ini.
Namun, Anda harus terlebih dahulu memutuskan rasio kolom, yang akan memandu Anda dalam menentukan ukuran gambar dan jenis huruf Anda, serta elemen mana yang ingin Anda tekankan lebih atau kurang, atau jika Anda ingin memberikan fokus yang sama pada masing-masing.
Ini adalah saat keputusan tentang bagaimana membagi bagian pahlawan dalam hal komponen mana yang harus lebih besar atau lebih menonjol mulai dimainkan. Di sinilah Golden Ratio berguna.
Pedoman ini mempertimbangkan berbagai elemen, termasuk lebar halaman, ukuran konten, dan jumlah serta ukuran modul yang dibutuhkan konten pada kisi.
Dalam hal aksesibilitas, Rasio Emas mengarahkan perhatian pengguna ke titik atau lokasi tertentu di layar, persis seperti yang ingin dilakukan desainer saat mereka menetapkan dan menerapkan hierarki informasi skema konten dan desain mereka.
3. Buat Ruang untuk Ruang Putih:
Sebagai desainer web, kami memahami betapa pentingnya ruang putih dalam hal keterbacaan, hierarki informasi, skalabilitas, dan ruang bernapas umum di sekitar dan di antara komponen desain.
Mengingat peran penting ruang putih dalam desain tata letak, wajar jika situs web dan kisi tata letak menggunakannya.
Tata letak kisi ditentukan, pada dasarnya, tidak hanya oleh lebar dan tinggi kolom dan barisnya, tetapi juga oleh lebar dan tinggi ruang putih di antara keduanya, yang disebut sebagai spasi.
Misalnya, salah satu metode desain berbasis grid yang sering digunakan desainer web dikenal sebagai Sistem Grid 8pt, sebuah gagasan yang ditetapkan oleh pedoman Desain Material Google.
Metode Desain Material memanfaatkan kisi 8 kali 8 pt. Setiap elemen di situs web akan kelipatan / habis dibagi delapan dalam praktiknya.
Hal yang menarik adalah bahwa aturan ini tidak hanya berlaku untuk item kisi seperti foto, tombol, atau teks, tetapi juga untuk unit spasi putih, yang harus kelipatan delapan.
Oleh karena itu, sambil mempertimbangkan cara memberi spasi pada kolom atau baris, Anda juga harus menghitung dan menentukan jumlah spasi, dalam hal ini dalam kelipatan delapan.
Ini menunjukkan betapa pentingnya ruang putih dalam desain kisi, sampai-sampai dimensi dan persyaratannya sama pentingnya dengan kolom dan baris.
Beranda Elementor Expert mencontohkan betapa kuatnya ruang putih, terutama di beranda situs web.
Karena tujuan utama beranda adalah untuk memaksa pemirsa bertindak dan belajar tentang platform Pakar, ruang kosong mendukung proses ini dengan memprioritaskan informasi.
Ini menyiratkan bahwa karena proposisi nilai platform diberikan keunggulan dan "waktu untuk bersinar" di beranda, pengunjung situs web segera memahami peningkatan nilai yang akan mereka alami.
4. Desain Responsif Kehormatan:
Desain responsif mengacu pada kemampuan tata letak dan konten halaman atau situs untuk menyesuaikan dengan beberapa perangkat dan ukuran browser. Ini menyiratkan bahwa ketika ukuran layar bervariasi, jumlah kolom dan, tentu saja, lebarnya, juga akan bervariasi.
Namun, ada perbedaan intrinsik antara kisi desain standar dan kisi responsif.
Sementara kisi-kisi desain diatur ke kisi dasar, kisi responsif fleksibel, memungkinkan kolom kisi untuk mengubah ukuran dan memposisikan ulang sendiri tergantung pada area pandang pengguna.
Dengan grid tetap, menurunkan ukuran layar akan secara otomatis membawa Anda ke breakpoint berikutnya, dan margin samping juga akan berkurang secara otomatis hingga breakpoint berikutnya tercapai.
Kisi responsif, atau kisi cair, adalah apa yang Anda lihat saat item berubah secara dinamis sebagai respons terhadap penciutan browser/layar. Kisi-kisi responsif akan menyelaraskan dan mengatur materi Anda secara logis.
Ini menyiratkan bahwa ketika viewport berkurang, konten ubin dan kisi juga akan menyusut secara proporsional.
Anatomi Grid – Apa yang Harus Anda Ketahui?
Semua kisi dalam desain situs web, terlepas dari ukuran atau kerumitannya, memiliki komponen tertentu yang mencirikannya sebagai tata letak kisi:
1. Margin:
Margin adalah ruang negatif antara format dan batas luar konten, terkadang dikenal sebagai "talang luar". Di seluler, margin samping biasanya berukuran 20-30 piksel dan sangat bervariasi antara desktop dan seluler.
Margin mungkin akrab dengan istilah HTML & CSS, di mana ia digunakan sebagai properti untuk menghasilkan ruang di sekitar elemen desain atau wadah. Ingatlah bahwa ukuran margin tidak mempengaruhi ukuran teks yang berdekatan.
Ini hanya menentukan jumlah ruang di sekitar elemen, yang dalam konteks grid tata letak secara eksplisit mengacu pada ruang antara format dan batas luar konten.
2. Talang:
Talang adalah garis yang membagi kolom dan baris menjadi unit individu. 20px adalah ukuran selokan yang cukup khas. Tujuan dari talang adalah untuk menyediakan ruang negatif (berapa pun ukuran) antara kolom dan baris.
Dalam pengertian yang paling sederhana, talang adalah area antara kolom dan baris. Talang sangat penting dalam tata letak pasangan bata, di mana lebar talang adalah salah satu elemen yang paling penting.
3. Modul:
Modul adalah unit pengisi ruang yang dibentuk oleh persimpangan baris dan kolom. Modul, atau modul konten, seperti yang sering disebut, adalah blok bangunan halaman, karena setiap elemen desain (teks, grafik, dan tombol, misalnya) cocok dengan modul yang dihasilkan oleh pola persegi panjang dalam kotak.
4. Baris:
Seperti yang Anda asumsikan, baris adalah bagian horizontal kisi. Anehnya, desain web sering mengabaikan pentingnya baris dalam kotak. Namun, ini bukan praktik yang bagus.
5. Kolom:
Kolom adalah bagian vertikal yang menjangkau ketinggian area konten dan dianggap sebagai "blok bangunan" grid. Apa yang membuat kolom berbeda adalah semakin banyak kolom dalam kisi, semakin fleksibel kisi tersebut.
Kami akan membahas ini secara lebih rinci segera. Meskipun lebar kolom selalu disesuaikan dengan perancang, praktik umum menentukan bahwa 12 kolom digunakan di desktop, 8 di tablet, dan 4 di seluler.
Sebagian besar kisi memiliki lebar kolom 60–80 piksel. Lebar kolom memiliki dampak signifikan pada lebar konten asli Anda.
Pertanyaan yang Sering Diajukan: Kisi Desain Situs Web 2024
Apa kisi terbaik untuk desain web?
Bootstrap adalah kerangka kerja front-end mobile-first yang apik, lugas, dan kuat yang membuat pengembangan web lebih cepat dan lebih sederhana. Bagi kami, ini adalah pilihan paling populer. Seringkali, dua belas kolom dengan indentasi. Metode standar dan langsung.
Apa itu situs web tata letak kotak?
Grid situs web adalah teknik untuk mengatur dan menyelaraskan materi pada halaman. Ini berfungsi sebagai kerangka atau kerangka dasar antarmuka pengguna Anda. Kisi situs web membantu desainer membuat pilihan desain dan menghasilkan pengalaman pengguna yang positif.
Bagaimana cara kerja kisi situs web?
Sistem grid adalah kerangka kerja tak terlihat yang digunakan dalam desain web yang mengelompokkan semua komponen pada halaman bersama-sama. Grid bertindak sebagai kerangka kerja atau angker di mana seorang desainer dapat mengatur komponen visual (gambar, glyph, paragraf, dll.) dengan cara yang logis dan mudah diserap.
Bagaimana tata letak kotak meningkatkan desain web?
Kisi dapat secara signifikan mempersingkat dan meningkatkan waktu desain Anda dengan bertindak sebagai panduan tempat meletakkan, memposisikan, dan menskalakan objek. Daripada sembarangan menempatkan bagian sampai Anda mendapatkan komposisi yang menyenangkan, grid akan membantu Anda dalam menemukan solusi alami.
Mengapa desainer menggunakan grid?
Kisi memudahkan desainer untuk berkolaborasi dalam ide dengan menguraikan di mana potongan harus ditempatkan. Sistem grid membantu dalam memisahkan pekerjaan desain antarmuka dengan memungkinkan beberapa desainer untuk bekerja pada komponen tata letak yang berbeda sambil tetap yakin bahwa pekerjaan mereka akan terintegrasi dengan lancar dan konsisten.
Berapa banyak kolom yang harus dimiliki grid dalam desain web?
Meskipun tidak ada kebutuhan formal untuk jumlah kolom, sebagian besar arsitektur kisi situs web menggunakan kisi 12 kolom. Selain itu, kisi situs web berisi ruang reguler di antara kolom, yang disebut sebagai talang, dan jarak di luar kisi disebut sebagai margin.
Mengapa kami menggunakan kisi 12 kolom?
Sebagian besar versi Bootstrap hanya memerlukan 12 kolom untuk mengakomodasi hal berikut: Pembuatan tata letak disederhanakan. Tata letak yang ramah seluler. Blok proporsional untuk mempertahankan simetri.
️ Apa itu kisi 12 kolom?
Untuk situs web, desainer dapat menggunakan antara dua dan dua belas, atau bahkan enam belas kolom untuk menutupi luasnya halaman arahan. Mereka dapat mengatur teks dan grafik dalam satu kolom atau di banyak kolom.
Bagaimana Anda menggunakan templat kisi?
Atribut grid-template-areas mendefinisikan area tata letak grid. Anda dapat memberi nama item kisi dengan mereferensikannya di properti area-templat-grid melalui properti area-grid. Apostrof menunjukkan setiap wilayah. Untuk merujuk ke objek kisi yang tidak memiliki nama, gunakan simbol titik.
Link Cepat:
Kesimpulan: Kisi Desain Situs Web 2024
Sekarang setelah Anda memahami mengapa kisi sangat penting dalam desain web dan bagaimana menggunakannya di situs web Anda, inilah saatnya untuk mulai mengukur dan menyelaraskan.
Ingatlah bahwa prinsip ini berlaku untuk setiap elemen desain: menyelaraskan widget dan komponen secara horizontal dan vertikal, menyelaraskan elemen teks ke garis dasar, dan memusatkan setiap jenis konten di situs web dengan benar.
Proses desain dan produk akhir Anda akan sangat dihargai, dan kami ingin melihat apa yang Anda miliki.
