Grid System On Application
-
Upload
de-maulana-anggakarti -
Category
Documents
-
view
1.214 -
download
3
description
Transcript of Grid System On Application
![Page 1: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/1.jpg)
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 |
![Page 2: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/2.jpg)
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.
![Page 3: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/3.jpg)
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
![Page 4: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/4.jpg)
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.
![Page 5: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/5.jpg)
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
![Page 6: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/6.jpg)
Grid System dan Typography
Bentuk / bangun dasar sebuah grid
X
Y
Pengaturan skala perbesaran, dengan titik koordinat tertentu
![Page 7: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/7.jpg)
Grid System dan Typography
Bentuk / bangun dasar sebuah grid
X
Y
Pembagian halaman
![Page 8: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/8.jpg)
Grid System dan Typography
Bentuk / bangun dasar sebuah grid
X
Y
Pembagian halaman, di ikuti dengan pengisian keperluan kolom
![Page 9: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/9.jpg)
Grid System dan Typography
Bentuk / bangun dasar sebuah grid
X
Y
Pembagian halaman dengan adanya margin, kolom dan gutter.
![Page 10: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/10.jpg)
Grid System dan Typography
Bentuk / bangun dasar sebuah grid
X
Y
Pembagian halaman pada umumnya, dengan pola menggunakan margin
![Page 11: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/11.jpg)
Grid System dan Typography
Bentuk / bangun implementasi halaman
Pembagian halaman menggunakan judul
![Page 12: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/12.jpg)
Grid System dan Typography
Bentuk / bangun implementasi halaman
Pola Simetris / Konvensional Pola Modern/ eksperiment
![Page 13: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/13.jpg)
Grid System dan Typography
Bentuk / bangun implementasi halaman
Pola eksperimen Pola Modern/ eksperimen
![Page 14: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/14.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
Aplikasi pada media web
- Format/ LayoutKatalogDisplayDirektoriSimetrisStatisFormal/ teratur
Pola susunSimpelIconik
![Page 15: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/15.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
Aplikasi pada media web
- Format/ LayoutKatalogDisplayDirektoriSimetrisStatisFormal/ teratur
Pola susunLabel/ daftar
![Page 16: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/16.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
Aplikasi pada media web
- Format/ LayoutKatalogDisplayDirektoriSimetrisStatisFormal/ teratur
Pola susunKombinasi kolomAlur membaca
![Page 17: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/17.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
Aplikasi pada media web
- Format/ LayoutKatalogDisplayDirektoriSimetrisStatis/ bersihFormal/ teratur
---------- Pola susun
Kombinasi kolomAlur membacaInsert gambar
![Page 18: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/18.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
![Page 19: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/19.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
![Page 20: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/20.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
![Page 21: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/21.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
![Page 22: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/22.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
![Page 23: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/23.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
![Page 24: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/24.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
![Page 25: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/25.jpg)
Grid System dan TypographyAplikasi grid pada media
Sumber : wordpress.com
![Page 26: Grid System On Application](https://reader034.fdocuments.net/reader034/viewer/2022042521/5571f23049795947648c4dea/html5/thumbnails/26.jpg)
Sumber : wordpress.com
Grid System dan TypographyAplikasi grid pada media