Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System....
Transcript of Dasar Desain Antamuka Pengguna · Dasar Desain Antamuka Pengguna Pertemuan 05. Layout. Grid System....
Dasar Desain
Antamuka
Pengguna
Pertemuan 05
Layout
Grid System
Struktur yg terdiri dari serangkaian garis
horizontal dan vertikal, digunakan untuk
mengatur konten.
“..the grid system is a means to
introducing order into a design”- Josef Müller Brockmann
Leonardo DaVinci, “The Vitruvian Man” 1492 Luca Pacioli and Leonardo da Vinci, 1498
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!
Grid Anatomy
960 Grid System
Columns
Rows
Modules
Regions
Gutters
Margins
Flowlines
Baseline Grid
Baseline
A baseline grid is an underlying structure that
helps guide the vertical spacing
of your design.
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/
Web & UI
Structure
http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
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/
Web & UI
Elements
Responsive Web
Aspek-aspek RWD
Sumber: http://www.tutorial-webdesign.com/prinsip-dasar-responsive-web-design/
1. Flow
2. Relative vs
Static Unit
Relative
percent (%)
em
2. Relative vs
Static Unit
Static
pixel (px)
point/px
widht/height
font
3.
Breakpoints
4. Minimun & maximum
value
5. Nested
Objects
6. Mobile or
Desktop First
7. Web vs System
Fonts
8. Bitmap vs
Vector
Wireframe
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
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
Tugas
2
• Pengumpulan tugas berupa hardcopy di
pertemuan selanjutnya (pertemuan 6)
Contoh
Contoh