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