Intro: Canvas
My canvas, my adventure
Sebelum beranjak ke dalam guideline, perlu diketahui elemen penting mendasar yang dapat mengurangi perbedaan implementasi ketika development sudah dijalankan. Yaitu penggunaan canvas dalam menciptakan desain.
Referensi canvas diambil dari statistik pengguna smartphone dunia, dengan mengambil tipe smartphone yang paling banyak digunakan baik bagi perangkat iOS maupun Android. Dari sini desainer dan developer diberikan kemudahan untuk menentukan ukuran canvas yang tepat dengan cara yang sederhana, yaitu:
Langkah 1: Pilih referensi platform (iOS atau Android)
Bisa dipilih sesuai arahan manajer, atau pertimbangan dari device yang digunakan klien.
Langkah 2: Gunakan canvas di bawah ini sesuai pilihan platform
Platform | iOS | Android |
Device - Phone | iPhone X | Google Pixel 2 |
Canvas Size | 375 x 812 | 411 x 731 |
Device - Tablet | iPad Pro 11" | Surface Pro 3 |
Canvas Size | 834 x 1194 | 990 x 1440 |
Penting: Pertimbangan safe area
Ukuran canvas pada tabel di atas sudah mencakup ukuran keseluruhan dari device yang dituju, seperti pada iPhone X, ukuran 375 x 812 sudah mencakup bagian atas (status bar) dan bawah (home indicator) yang mana merupakan unsafe area di mana sebaiknya tidak menaruh desain di area ini, dan menambahkan padding lebih sesuai ukuran dari area tersebut.
Desainer sebaiknya memberi padding atas sebesar 44px dan bawah sebesar 34px ketika menggunakan canvas iPhone X, atau menambahkan status bar dan home indicator pada desain.
Hal yang sama berlaku pada Google Pixel 2, di mana ukuran 411 x 731 sudah mencakup bagian status bar dan navigation button (back, home, running apps).
Desainer sebaiknya memberi padding atas sebesar 24px dan bawah sebesar 48px ketika menggunakan canvas Google Pixel 2, atau menambahkan status bar dan android navigation bar pada desain.
Referensi untuk bacaan lebih lanjut:
Last updated
