Tips menyusun layout UI untuk app atau website

Dwinawan
Dwinawan
Jul 24, 2017 · 3 min read

Salah satu proses dalam mendesain sebuah User Interface adalah mendesain tata letak atau layout. Berikut adalah studi kasus sebuah konsep aplikasi saat proses pembuatan layout.


1. Taruh semua Komponen yang diperlukan

Langsung taruh semua komponen yang diperlukan. Pada konsep aplikasi ini komponen yang diperlukan pada halaman ini diantaranya: Nama Restaurant, Alamat, Rating, Komentar dan lainnya.

Taruh saja semua komponen tanpa harus memikirkan bentuk dan letaknya. Untuk foto profil atau icon menu kita bisa menggunakan lingkaran dan taruh tulisan di dekatnya untuk mengingatkan kita apa maksud lingkaran itu.

Dengan langsung menaruh semua komponen yang diperlukan pada satu halaman akan membuat kita tidak melewatkan semua komponen itu.


2. Pilih mana yang komponen utama dan pendukung

Pertimbangkan informasi apa yang paling penting untuk dilihat oleh user. Informasi yang paling penting akan menjadi komponen utama dan selain itu akan menjadi komponen pendukung.

komponen utama bisa kita buat lebih menonjol agar user mudah mencari atau membaca. Komponen pendukung bisa kita buat tidak terlalu mencolok agar tidak menjadi gangguan bagi user saat membaca.

Pada design kali ini komponen utama ditandai dengan text bold dan selain itu akan menjadi komponen pendukung


3. Ubah setiap komponen menjadi elemen UI

Kini saatnya merubah setiap komponen menjadi elemen UI. Ingat… untuk komponen yang penting harus lebih menonjol daripada komponen pendukung.


4. Setelah semua komponen selesai diubah menjadi elemen UI, kini saatnya untuk bermain puzzle.

Bayangkan Anda sebagai user dan sedang mengakses halaman ini, kira-kira informasi apa yang ingin segera Anda lihat.

Susun elemen elemen UI tadi sesuai dengan urutan kebutuhan dari user.

Dan jangan ragu untuk menambahkan elemen lainnya seperti mengganti background, menggunakan konsep “card” untuk memperjelas pembacaan informasi, pengelompokan informasi ataupun memperjelas hirarki.


5. Pertimbangkan Faktor Scalability

Tidak selamanya nama restaurant selalu pendek, ada nama restaurant yang mungkin bisa sampai 2 baris.

Tidak selamanya alamat restaurant selalu pendek, ada alamat yang panjang dan sangat mungkin hingga 2 baris.

Tidak selamanya hal hal yang kita design sesuai dengan kondisi di dunia nyata. Maka dari itu design yang kita buat harus bisa menghandle hal hal tersebut.

Pada design kali ini, kita mencoba menguji dengan menggunakan nama restaurant dan alamat yang cukup panjang. Dan ternyata layout seperti ini masih bisa menghandle hal tersebut


6. Persiapkan layout untuk semua kondisi

Akan ada kondisi dimana foto yang tersedia dari sebuah restaurant hanya satu.

Akan ada kondisi dimana sebuah restaurant belum memiliki review atau komentar.

Persiapkan design untuk semua kondisi yang akan terjadi. Hal ini akan membuat setiap kondisi yang terjadi selalu memiliki design bagus.

Bayangkan jika kita tidak membuat design untuk semua kondisi. Ketika restaurant hanya memiliki satu foto dan belum punya komentar, maka yang terjadi akan seperti ini


6. Minta Feedback


Semoga bermanfaat :)

Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Find me on twitter twitter.com/dwinawan_

Insight

Insight

UI, UX, Bisnis Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade