Ini adalah artikel yang me-review desain UI hasil belajar dari temen temen. Bagi yang tertarik untuk di-review desain UI nya, bisa kirim DM via Instagram.
Dan sebaiknya desain yang di-review adalah desain hasil belajar. Bukan desain hasil kerjaan kantor, kerjaan freelance, ataupun tugas kuliah.
Desain yang dibahas di artikel ini telah mendapat persetujuan dari pemilik desain untuk di-review dan di-publish di medium
Saran saran sangat bersifat subyektif, dan sebagian besar dipengaruhi oleh style design saya
Untuk tampilan… secara keseluruhan bersih dan rapi. Mari langsung saja kita mulai review tiap elemen nya satu persatu
1. Your Project Progress
Jarak antar elemen nya masih terlalu berdekatan sehingga menimbulkan kesan padat. Antara “80%” , “to complete” dan progress bar nya terlalu mepet. Sehingga terlihat padat dan kurang lega.
Saran
Jaraknya antar elemen nya bisa ditambah
Visual
Dari sisi penyusunan informasi, tidak ada masalah. Karena sudah menampilkan informasi yang cukup jelas. Tapi dari segi visual bisa di-eksplorasi lagi.
Seperti menambahkan icon, menyusun ulang peletakan elemen nya, lalu menggunakan grafik atau chart yang melengkung agar menambah variasi elemen, seperti dibawah ini
Atau seperti ini…
2. Earning
Tidak ada masalah. Satu satu nya saran saya adalah untuk mengeksplorasi informasi pada elemen ini
Saran saya adalah menambahkan icon dan juga ornamen agar secara visual terlihat menarik, salah satunya seperti contoh dibawah ini
Dan tampilan jika nominal nya panjang
Eksplorasi Elemen
Karena ini adalah informasi jumlah pendapatan selama seminggu, maka bisa ditambahkan grafik jumlah pendapatan harian nya.
Tetapi…. jika ini adalah real project, Anda harus meng-konsultasikan penambahan grafik ini kepada developer. Karena menambahkan grafik bisa menambah load time sebuah website dan menambah beban server untuk mengolah data.
Berikut tampilan setelah ditambahkan grafik
Versi background berwarna
Versi perpaduan background putih dan berwarna
3. Today Visitors
Sama dengan elemen lain nya. Secara fungsionalitas, tidak ada masalah dengan elemen ini. Informasi nya cukup jelas dengan penggunaan label yang jelas dan huruf yang besar dan bold.
Tapi secara visual masih bisa di eksplorasi, seperti dibawah ini…
Atau dengan penambahan informasi perbandingan dengan hari kemaren…
4. Sidebar
Untuk sidebar, tidak ada masalah. Sudah sangat jelas dan lega karena jarak nya sangat diperhatikan
Coba kita lihat apa yang bisa di-improve dari sidebar nya…
- Bisa dihilangkan border pada avatar-nya agar lebih clean
- Huruf pada teks “Edit Profile” masih terlalu berdekatan
- Garis garis pemisah yang terkesan membuat design jadi terlihat kurang clean
Dan berikut setelah di-iterasi….
Untuk sidebarnya berikut perubahan nya…
- Nama ditaruh di bawah avatar untuk mengantisipasi jika nama nya panjang
- Menu yang aktif di highlight dan pinggir nya diberi aksen warna untuk memperjelas state aktif nya
- Menu yang tidak aktif, icon nya berwarna abu abu dan teks nya juga berwarna abu abu, hal ini agar menu yang aktif terlihat lebih menonjol
- Untuk memisahkan group menu atas dan group menu bawah menggunakan jarak dan tidak menggunakan garis pemisah agar lebih clean.
Semoga bermanfaat :)
