Proses Eksplorasi Design — Dashboard Design

Ini adalah artikel yang membahas proses saya melakukan eksplorasi design. Akan ada beberapa tips dan bagaimana saya memperoleh ide ide. Selamat menikmati

1. Platform

Saya sedang hobi mengeksplorasi layout. Maka, saya putuskan untuk membuat eksplorasi design pada platform website.

Website memiliki area yang luas sehingga ruang gerak untuk eksplorasi juga luas. Dan untuk jenis UI nya saya memilih dashboard.


2. Ide

Sepertinya seru membuat dashboard untuk website portfolio bagi Fotografer. Dengan dashboard tersebut, setiap user bisa memantau statistik foto yang diupload nya. Berapa kali foto tersebut di download dan dilihat.

Lalu saya juga berpikir, bahwa halaman awal dari dashboard haruslah bisa membantu user untuk fokus terhadap task task penting seperti melengkapi informasi profile atau hal hal yang perlu diperhatikan seperti statistik mingguan.


3. Artboard

Jika saya memilih platform website, saya selalu membuat artboard atau canvas pada ukuran 1440 x 900.


4. Statistik Mingguan

Elemen pertama yang saya buat adalah informasi statistik mingguan. Saya suka sekali mengelompokkan informasi menggunakan card, karena membuat UI terlihat rapi dan clean. Dan inilah design awal informasi statistik mingguan.

Design nya masih standard. Lalu saya membuat sedikit modifikasi dengan membuat grafik nya lebih kecil dan rounded (melengkung di ujungnya)

Hmmm… terlihat sexy, lebih lega dan lebih bersih.

Setelah itu saya berpikir, sepertinya seru juga kalau di bawah grafik terdapat sebuah insight atau masukan dari sistem untuk user, terkait hal apa yang bisa dilakukan oleh user setelah mendapatkan informasi mengenai statistik mingguan nya.

Dan beginilah setelah ditambahkan…

Insight atau masukan bagi user di letakkan di sebuah kotak berwarna hitam, sehingga terlihat kontras dan mencolok. Lalu ditambahkan icon lampu, yang mewakili sebuah ide. Dan sebagai pemanisnya saya tambahkan aksen garis garis melengkung.

Setelah itu saya zoom-out design nya dan melihat nya selama beberapa detik

Hmmm…. card informasi statistik mingguan nya cukup oke. Tapi tidak terlihat cukup bersih (clean) saat berada di atas background warna putih. Mungkin karena kotak hitam dibawahnya itu.

Lalu saya mencoba membuat versi yang lain dan saya bandingkan…

Versi yang baru sepertinya lebih bersih. Maka saya memutuskan menggunakan versi yang baru

Tips: Jangan cepat puas terhadap hasil designmu. Coba buat beberapa alternatif. Dan siapa tahu kamu akan mendapatkan versi yang lebih baik.

5. Sidebar

Elemen selanjutnya adalah sidebar. Untuk sidebar nya menggunakan pattern atau pola yang umum. Yaitu icon plus teks. Teks untuk memperjelas icons, dan icons untuk mempermudah user men-scan menu nya.

Untuk icons nya saya menggunakan Free Icons dari Sketch App Sources, bisa di download disini

Beginilah tampilan setelah diberikan sidebar. Penempatan icon dan teks nya cukup jauh dari pinggir, agar design terlihat lega dan bersih. Lalu diberi garis sebagai pembatas antara area sidebar (navigasi) dengan area konten


6. Tawaran Pekerjaan

Elemen selanjutnya adalah informasi tawaran pekerjaan. Jadi ceritanya… di platform ini, user bisa mengirim tawaran pekerjaan ke user lain nya. Dan tawaran pekerjaan itu akan muncul di dashboard.

Beginilah design awalnya…

Menampilkan satu tawaran pekerjaan. Lengkap dengan foto user, judul tawaran pekerjaan nya, nama pengirimnya dan pesan-nya. Lalu dibawahnya terdapat jumlah tawaran pekerjaan lain nya yang masih belum dibuka.

Setelah dilihat lihat kok sepi banget ya?… saya coba menambahkan beberapa elemen. Dan hasilnya seperti ini.

Terdapat elemen centang sebagai penanda verified account. Dan penambahan aksen titik titik di belakang agar tampilan tidak terlalu sepi

Dan berikut tampilan nya jika disandingkan dengan elemen lain nya


7. Judul dan Deskripsi

Tidak ada yang spesial mengenai ini… berikut setelah ditambahkan


8. Status Kelengkapan Data Diri

Jadi ceritanya… jika data diri user belum lengkap, akan ditampilkan informasi mengenai status kelengkapan data diri. Dan berikut design awalnya

Tapi setelah dipikir-pikir. Seperti nya akan lebih membantu user jika ditampilkan bagian mana saja yang belum lengkap. Maka jadi nya seperti ini…

Dan berikut tampilan nya jika disandingkan dengan elemen lain nya


9. Navigasi Slider

Tidak ada yang spesial, hanya elemen navigasi biasa untuk menggerakan card card pada konten utama


10. Terlalu polos gak sih?

Setelah dilihat agak lama… tampilan UI nya kok terlihat membosankan ya?, terlalu datar dan polos gitu. Lalu saya coba memberikan sedikit aksen background dan shadow pada bagian sidebarnya


11. Masih terlalu polos

Kok masih terlalu polos ya?… mungkin karena bagian sidebarnya terlalu banyak ruang yang kosong. Bagaimana kalau ditambahkan elemen avatar dan nama user yang sedang login?


12. Eksplorasi Layout

Sepertinya kalau ketiga card tersebut ada elemen yang memotong nya atau overlapping sepertinya bakal menarik

Hmmm… sudut-sudut nya terlalu lancip sepertinya. Mari kita buat sedikit melengkung biar enggak terlalu kaku

Lalu…. elemen avatar dan nama user nya kita taruh di pojok kanan atas saja biar terlihat compact. Dan navigasi slider nya kita taruh ke sebelah kiri, dekat dengan konten utama, agar terlihat lebih relevan.

Coba kita kurangi opacity untuk kotak putih besar yang di belakang itu. Apakah akan terlihat lebih oke?

Membuat 3 card nya lebih menonjol, tetapi masih terasa polos dan biasa saja.

Coba kita beri warna…

Cukup oke, tapi penggunaan background abu abu nya kok malah jadi bikin desain nya terlihat kusam ya?. coba kita ubah ke putih…

Oh… terasa lebih clean.

Tapi di bagian kotak berwarna nya masih terasa polos.

Kita coba beri hiasan yang tidak terlalu ramai, agar tidak mengganggu konten utama nya

Untuk memperjelas pergerakan card saat dipencet navigasi slider nya, kita tambahkan efek menumpuk di card paling ujung kiri. Sehingga user tahu ketika navigasi slider di klik, card paling kiri akan bergerak ke belakang dan menumpuk


13. Finishing

Layout sudah terasa oke, kini tinggal menambahkan beberapa elemen tambahan agar design semakin ramai.


Semoga bermanfaat :)