Grid System dan Penerapan Media

Jenjang Profesional DiplomaProgram Studi Desain Grafis (D4) dan Desain Multimedia (D3)Fakultas Desain Komunikasi Visual, Universitas Widyatama _Bandung

Deden Maulana | www.greengrsphicinfo.com | 081809098960 |

Grid System dan Typography

• Pengertian dasar Grid System

- Prinsip dasar berfungsi dalam mengembangkan sebuah rancangan - Pengertian lainya; Pola, Kisi-kisi, Grid (garida), Blok, Kapling, Modul - Menyusun/ menata pola / membangun struktur tampilan desain

- Tesusun dengan pola sebagai garis bantu, terdiri dari ; garis vertikal, horizontal sebagai pijakan dasar. Pengembangannya terdapat susunan garis ; diagonal atau memutar rotasi, gelombang (curve) atau tidak beraturan.

- Setiap rancangan atau pola yang tersusun membentuk tata letak yang mempunyai fungsi. Seperti; susunan berfungsi menempatkan judul, kolom, gambar dan elemen visual lainnya.

Grid System dan Typography

• Pengertian aplikasi Grid System

- Mempermudah dalam menyusun berbagai konten dan elemen/ komponen visual dalam sebuah rancangan media. | Elemen

visual; huruf, foto, gambar, icon, keterangan atau fungsi lain sebagai fasilitas dan kemudahan komunikasi pngguna. ( lihat pada tampilan web)

- Sebagai perbadingan / skala untuk menciptakan kesan/ impresi terhadap tampilan desain sekaligus mengatur fungsi jarak dan ukuran sebagai media baca

- Dapat menjadi pedoman standar/ struktur panduan pada sebuah sistem /identitas visual.

- Fleksibelitas, Sistematika dan Konsistensi sistem rancangan

Grid System dan Typography

• Pengertian fungsi Grid System

- Memecahkan persoalan dalam pengaturan proporsi ruang yang

berhubungan dengan berbagai elemen visual

- Menciptakan impresi/ kesan atau dampak pada setiap rancangan

visual

- Sistematika/ susunan yang terukur sebagai cara untuk menciptakan

konsistensi pada berbagai media aplikasi

- Menciptakan standarisasi.

Grid System dan Typography

Bentuk / bangun dasar sebuah grid

Pola dasar dua sumbu populer- Garis / sumbu X / horizontal- Garis/ sumbu Y / vertical

Fungsi pengaturan tataletak- Konsentrasi pada pola- Alat bantu pengelolaan- Konsistensi ukuran/ skala

X

Y

Grid System dan Typography

Bentuk / bangun dasar sebuah grid

X

Y

Pengaturan skala perbesaran, dengan titik koordinat tertentu

Grid System dan Typography

Bentuk / bangun dasar sebuah grid

X

Y

Pembagian halaman

Grid System dan Typography

Bentuk / bangun dasar sebuah grid

X

Y

Pembagian halaman, di ikuti dengan pengisian keperluan kolom

Grid System dan Typography

Bentuk / bangun dasar sebuah grid

X

Y

Pembagian halaman dengan adanya margin, kolom dan gutter.

Grid System dan Typography

Bentuk / bangun dasar sebuah grid

X

Y

Pembagian halaman pada umumnya, dengan pola menggunakan margin

Grid System dan Typography

Bentuk / bangun implementasi halaman

Pembagian halaman menggunakan judul

Grid System dan Typography

Bentuk / bangun implementasi halaman

Pola Simetris / Konvensional Pola Modern/ eksperiment

Grid System dan Typography

Bentuk / bangun implementasi halaman

Pola eksperimen Pola Modern/ eksperimen

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Aplikasi pada media web

- Format/ LayoutKatalogDisplayDirektoriSimetrisStatisFormal/ teratur

Pola susunSimpelIconik

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Aplikasi pada media web

- Format/ LayoutKatalogDisplayDirektoriSimetrisStatisFormal/ teratur

Pola susunLabel/ daftar

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Aplikasi pada media web

- Format/ LayoutKatalogDisplayDirektoriSimetrisStatisFormal/ teratur

Pola susunKombinasi kolomAlur membaca

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Aplikasi pada media web

- Format/ LayoutKatalogDisplayDirektoriSimetrisStatis/ bersihFormal/ teratur

---------- Pola susun

Kombinasi kolomAlur membacaInsert gambar

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Grid System dan TypographyAplikasi grid pada media

Sumber : wordpress.com

Sumber : wordpress.com

Grid System dan TypographyAplikasi grid pada media