![Page 1: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/1.jpg)
Dasar Desain
Antamuka
Pengguna
Pertemuan 05
![Page 2: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/2.jpg)
Layout
![Page 3: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/3.jpg)
Grid System
![Page 4: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/4.jpg)
Struktur yg terdiri dari serangkaian garis
horizontal dan vertikal, digunakan untuk
mengatur konten.
![Page 5: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/5.jpg)
“..the grid system is a means to
introducing order into a design”- Josef Müller Brockmann
![Page 6: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/6.jpg)
Leonardo DaVinci, “The Vitruvian Man” 1492 Luca Pacioli and Leonardo da Vinci, 1498
![Page 7: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/7.jpg)
![Page 8: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/8.jpg)
![Page 9: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/9.jpg)
![Page 10: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/10.jpg)
Why Grid System?
• Grids enable you to build solid structure and
form into your designs
• Grid system helps designers to structure and
present content and imagery in a much more
readable, manageable way
• Creating consistency and familiarity in your
design
• It’s flexible!
![Page 11: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/11.jpg)
Grid Anatomy
![Page 12: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/12.jpg)
960 Grid System
![Page 13: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/13.jpg)
Columns
![Page 14: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/14.jpg)
Rows
![Page 15: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/15.jpg)
Modules
![Page 16: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/16.jpg)
Regions
![Page 17: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/17.jpg)
Gutters
![Page 18: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/18.jpg)
Margins
![Page 19: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/19.jpg)
Flowlines
![Page 20: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/20.jpg)
![Page 21: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/21.jpg)
![Page 22: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/22.jpg)
Baseline Grid
![Page 23: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/23.jpg)
Baseline
![Page 24: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/24.jpg)
A baseline grid is an underlying structure that
helps guide the vertical spacing
of your design.
![Page 25: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/25.jpg)
![Page 26: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/26.jpg)
![Page 27: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/27.jpg)
Video:
Using Baseline Grids in Web & UI Design
InVision Design Snack #7
http://blog.invisionapp.com/design-snack-7-baseline-grids-in-web-ui-design/
![Page 28: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/28.jpg)
Web & UI
Structure
![Page 29: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/29.jpg)
http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
![Page 30: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/30.jpg)
![Page 31: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/31.jpg)
![Page 32: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/32.jpg)
Guidelines:
• Google Material Design
https://material.google.com/
https://design.google.com/
• iOS Human Interface Guidelines
https://developer.apple.com/ios/human-
interface-guidelines/
• Website Design
https://guidelines.usability.gov/
![Page 33: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/33.jpg)
Web & UI
Elements
![Page 34: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/34.jpg)
![Page 35: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/35.jpg)
![Page 36: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/36.jpg)
Responsive Web
![Page 37: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/37.jpg)
![Page 38: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/38.jpg)
![Page 39: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/39.jpg)
Aspek-aspek RWD
Sumber: http://www.tutorial-webdesign.com/prinsip-dasar-responsive-web-design/
![Page 40: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/40.jpg)
1. Flow
![Page 41: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/41.jpg)
2. Relative vs
Static Unit
![Page 42: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/42.jpg)
Relative
percent (%)
em
2. Relative vs
Static Unit
Static
pixel (px)
point/px
widht/height
font
![Page 43: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/43.jpg)
3.
Breakpoints
![Page 44: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/44.jpg)
4. Minimun & maximum
value
![Page 45: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/45.jpg)
5. Nested
Objects
![Page 46: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/46.jpg)
6. Mobile or
Desktop First
![Page 47: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/47.jpg)
7. Web vs System
Fonts
![Page 48: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/48.jpg)
8. Bitmap vs
Vector
![Page 49: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/49.jpg)
Wireframe
![Page 50: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/50.jpg)
Sketsa/wireframe
• sketsa atau wireframe (istilah yg biasa digunakan dalam desain
web) berguna sebagai acuan dasar sebuah desain website.
• Wireframe juga digunakan ketika presentasi ke klien untuk
menghemat waktu dan effort revisi.
Tool:
1. Lumzy
2. Frame Box
3. Creately
4. Mockingbird
5. Hotgloo
http://bisakomputer.com/9-tahap-utama-dalam-mendesain-website/
6. Pidoco
7. Mockflow
8. Pencil Project
9. SimpleDiagrams
10.Prototyper
![Page 51: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/51.jpg)
![Page 52: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/52.jpg)
![Page 53: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/53.jpg)
![Page 54: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/54.jpg)
Tugas
3
1. Membuat wireframe website pribadi sesuai konsep yg
dibuat di Tugas 2 yang terdiri dari satu halaman
website.
2. Tentukan informasi apa saja yang akan dimuat di
website
3. Gambarlah sketsa wireframe dari konsep yang telah
dibuat di tugas 2 (gambar tangan) dengan
menggunakan grid sistem dan pendekatan responsive
web design (3 versi: desktop, tablet, mobile phone)
4. Download template: template-grid-tugas3
![Page 55: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/55.jpg)
Tugas
2
• Pengumpulan tugas berupa hardcopy di
pertemuan selanjutnya (pertemuan 6)
![Page 56: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/56.jpg)
Contoh
![Page 57: Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System. ... (istilah yg biasa digunakan dalam desain web) berguna sebagai acuan dasar sebuah](https://reader030.vdocuments.pub/reader030/viewer/2022021603/5d20018588c993ce268e136d/html5/thumbnails/57.jpg)
Contoh