Mobile UI Technical Guideline

The right technique meets the best design

Kaidah-kaidah fundamental yang penting dalam proses UI design, untuk menciptakan desain aplikasi yang tidak hanya visually pleasing*, tapi juga technically appropriate*.

*menyenangkan mata dan *sesuai secara teknis

Secara umum, platform tujuan development aplikasi mobile didominasi oleh iOS dan Android (setidaknya begitu sampai artikel ini dibuat). Sehingga desainer memiliki 2 sumber referensi dalam menciptakan desain aplikasi mobile. Guideline ini dibuat untuk membantu desainer dalam menentukan spesifikasi dalam desain ciptaannya sehingga desain tersebut memiliki spesifikasi yang lazim dan dapat diterima oleh khalayak dan juga harapannya dapat membantu sesama desainer dan developer.

Di dalam guideline ini coaster juga bisa menemukan dan memahami istilah dari komponen-komponen utama yang membentuk suatu desain halaman aplikasi mobile yang sudah diamini oleh Rolling Glory, sebagai acuan bagi seluruh coaster dalam berkomunikasi ketika membicarakan sebuah desain, supaya tidak menimbulkan kebingungan karena perbedaan istilah maupun bahasa.

Sebelum memasuki guideline, baiknya coaster melihat dulu pemilihan canvas sebagai persiapan awal membuat desain di halaman berikut

Intro: Canvas

Pada dasarnya guideline yang tersedia memiliki tujuan untuk menciptakan design system yang sesuai dengan kaidah-kaidah yang dipaparkan. Design system sebagai hasil akhir dari implementasi seluruh guideline yang akan membantu coasters dalam bekerja. Bersinggungan dengan itu, untuk memudahkan penentuan prioritas desainer dalam mengikuti guideline, digunakan apa yang disebut sebagai design system complexity pyramid, seperti ditunjukkan pada gambar di bawah.

Design system complexity pyramid

Dibaca dari bawah ke atas, dan dimulai dari foundation yang mencakup unsur-unsur dasar dalam UI design, yang menjadi cikal bakal dari rangkaian komponen sebagai tubuh dari layout desain yang diciptakan untuk diimplementasi oleh developer. Unsur-unsur tersebut di antaranya: grid, column, warna, tipografi, jarak (space, margin, padding), icon, dan sebagainya.

Untuk melihat detil dari guideline foundation, coaster bisa pindah ke halaman ini:

Foundation

Selanjutnya adalah core components. Tingkatan ini berisi komponen-komponen dasar yang lazim ada di dalam sebuah aplikasi mobile secara umum, memiliki sifat tersendiri, bersifat sebagai blok-blok untuk membangun sebuah desain halaman dan biasanya terklasifikasi sesuai platform (iOS dan Android). Sehingga dalam guideline core components, coaster akan menemukan berbagai macam komponen yang biasa ditemukan, namun dibedakan sesuai platform dan disediakan pula spesifikasi umumnya.

Untuk melihat detil dari guideline core component, coaster bisa pindah ke halaman ini:

Core Components

Setelah core components, tingkat selanjutnya adalah complex components. Singkatnya tingkatan ini berisi komponen besar/utuh yang dirangkai oleh beberapa komponen dasar (core components) dan dibalut oleh unsur-unsur foundation. Benda-benda kompleks seperti scrolling list baik yang berbentuk horisontal, vertikal, atau grid (gabungan keduanya), carousel, card, serta komponen lain yang menjadi komponen utama dari desain yang diciptakan.

Untuk melihat detil dari guideline complex component, coaster bisa pindah ke halaman ini:

Complex Components

Jika ke-tiga tingkatan di atas sudah diimplementasi, maka secara otomatis sudah tercipta sebuah layout yang menjadi tahap akhir dari desain suatu halaman pada aplikasi mobile. Pada tingkat ini tidak ada guideline spesifik karena pada dasarnya layout merupakan gabungan dari komponen di tahap sebelumnya, baik yang sudah mengikuti spesifikasi anjuran maupun tidak.

Maka dari itu tahap layout tidak akan dipaparkan di dalam sebuah design system, tapi sudah terimplementasi di dalam design file baik yang berbentuk file Adobe XD, Figma, atau software UI design lainnya. Melalui design file inilah coaster bisa berkomunikasi secara non-verbal mengenai spesifikasi desain suatu projek atau produk yang sedang digarap. Namun untuk mengganti ketiadaan guideline khusus mengenai layout, ada beberapa anjuran terkait layout yang bisa menjadi bahan pertimbangan desainer dalam melakukan proses layouting. Untuk hal itu, coaster bisa pindah ke halaman ini:

Layout

Ketika kaidah-kaidah yang sudah dijelaskan dapat diimplementasikan dengan baik, maka seharusnya design system dan design file yang dihasilkan dapat mengurangi--bahkan dalam skenario terbaik, meniadakan--kebingungan yang rentan terjadi dalam proses hand-off dari desainer ke developer, dan sebaliknya.