A Simple UI Design Using Figma

Apa sih Figma itu?

Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web serta fitur offline tambahan yang diaktifkan oleh aplikasi desktop untuk Mac OS dan Windows, atau dalam pengertian sederhananya adalah salah satu tool yang biasa digunakan untuk membuat tampilan aplikasi, salah satunya adalah mobile.

Ini adalah contoh design sangat sederhana yang bisa saya buat menggunakan Figma dengan Frame dari Iphone 8.

Tampilan layer pertama pada saat aplikasi mulai dibuka.

Tampilan layer ke dua.

Tampilan layer ke tiga untuk log in.

Tampilan layer ke empat untuk create an account atau sign up.

Tampilan layer ke lima, berisi popup untuk membatasi aktivitas user yang tidak mau log in atau sign up, bisa juga diisi newsletter. Apa gunanya newsletter? Newsletter bisa digunakan untuk membuat user berlangganan dan memberi informasi dari produk-produk milik kita secara berkala melalui email, itulah sebabnya beberapa popup langsung memuat informasi yang wajib diisi oleh pengguna, salah satunya adalah email.

Sampailah kita ke home page, ketika kita akan menggunakan tool atau aplikasi online untuk pertama kalinya, mungkin kita bisa “skip” atau melewatkan beberapa proses krusial misalnya sign in atau sign up. Namun tentu saja, akan ada banyak akses yang dibatasi sehingga kita tidak bisa bebas untuk menggunakannya.

Ini adalah salah satau contoh isi dari fitur-fitur yang sudah dibuat di atas, sprinkle of doughnut.

Mari kita lihat seperti apa tampilan seluruh design-nya, apakah terlihat normal?

Kita lanjutkan untuk melihat susunan prototype-nya.

Coba kita perbesar ukurannya.

Terlihat rumit bukan? Tentu saja sama seperti jalan hidup kita saat ini. Padahal judul yang saya buat “simple”,namun ternyata yang sederhana belum tentu benar-benar sederhana.

Bagaimana jika design-nya kita jalankan, apakah akan berfungsi dengan baik?

Nah, ini kalau kalian menggunakan aplikasi tapi tidak mau log in, jalan satu-satunya adalah, silakan keluar saja dari aplikasi.

Jika kalian memilih OK, apa yang akan terjadi selanjutnya? Silakan menikmati setiap akses yang ada.

Last but not least.

Kesimpulan yang dapat dibuat adalah, hal paling sulit selain membuat design, menemukan ide seperti apa yang akan dibuat, membuat gradasi warna yang selaras, menentukan siapa target user kita, berapa usianya, pemilihan font, size, colors dari setiap kalimat, slide yang kita gunakan, dan perbedaan interactions dari masing-masing komponen adalah, semuanya sulit. Selain itu, untuk membuat tampilan animasi yang bisa bergerak pada bagian atau shape tertentu, tidak bisa dibuat melalui Figma (atau saya yang tidak bisa), jadi kita harus mengkombinasikan menggunakan tool lain, yang mana hal ini tetap terasa sulit bagi saya, karena membutuhkan banyak waktu untuk saya buat, selain itu mungkin judul tulisan saya akan terlihat lebih panjang jika menggunakan banyak tool (atau mungkin harus saya ganti), namun saya tetap menikmati setiap proses yang membingungkan dan membutuhkan lebih banyak waktu yang harus saya keluarkan untuk mempelajarinya satu persatu.

Tulisan ini dibuat bukan sebagai tutorial, namun sebagai sebuah keresahan yang bisa dibagikan kepada reader.