Mengubah design versi desktop menjadi design versi mobile (Responsive)

Dwinawan
Dwinawan
Jul 23 · 4 min read

Kali ini kita akan membahas beberapa hal yang perlu diperhatikan saat mengubah sebuah design versi desktop menjadi design versi mobile.

Mari kita lihat design dibawah ini…

Sebelum mengubah menjadi design versi mobile, yang perlu kita perhatikan adalah komponen nya.

Dari design diatas, berikut komponen nya:

  • Daftar Project
  • Elemen pencarian
  • Elemen untuk menambahkan task
  • Burger Menu
  • Teks sapaaan
  • Tempat untuk menampilkan daftar task dari suatu project

Setelah membuat daftar komponen, langkah selanjutnya adalah membuat urutan elemen yang harus dilihat oleh user dari atas sampai bawah. Urut berdasarkan prioritasnya.

Dari design diatas, berikut urutan komponen berdasarkan prioritas nya:

  1. Burger Menu
  2. Teks sapaaan
  3. Elemen pencarian
  4. Daftar Project
  5. Tempat untuk menampilkan daftar task dari suatu project
  6. Elemen untuk menambahkan task

Setelah mengetahui urutan elemen yang akan kita tempatkan pada design versi mobile, langkah selanjutnya adalah membuat canvas untuk design versi mobile.

Biasanya saya menggunakan ukuran canvas 320 x 600 untuk design versi mobile


Setelah itu mari kita mulai mendesign. Dimulai dengan mengubah warna background menjadi hitam lalu menempatkan burger menu di sebelah kanan atas

Kok burger menu nya di sebelah kanan? bukan nya di versi desktop di sebelah kiri ya?

Menjaga konsistensi itu bagus. Tapi, tujuan meletakkan burger menu di sebelah kanan pada versi mobile adalah agar user mudah menjangkau burger menu nya dengan jempol. (Asumsi nya banyak pengguna yang memegang handphone menggunakan tangan kanan)


Setelah itu kita lanjutkan dengan menempatkan teks sapaan,elemen pencarian dan juga ornamen nya.

Kok “Hi Samantha” nya jadi kecil? Padahal di versi desktop lebih besar

Jika kita menggunakan ukuran yang sama dengan yang digunakan di desktop, akan terlalu besar dan memakan banyak ruang. Sehingga pada design versi mobile adalah hal yang wajar mengecilkan ukuran font asalkan tetap dapat terbaca dengan jelas.


Lalu setelah itu kita tempatkan daftar project nya

Hmmm… tempat untuk menampilkan daftar task nya diletakkan dimana?

Kita bisa saja meletakkan tempat untuk menampilkan daftar task di bawah daftar project, menjadi seperti ini….

Tapi ada baiknya, kita cari tahu dulu bagaimana interaksi nya agar kita paham bagaimana nanti user memakai nya.

Jadi interaksinya adalah…

Ketika user meng-klik salah satu project, maka pada bagian sebelah kanan akan menampilkan daftar task sesuai dengan project yang diklik

Sehingga…

Pada versi mobile, sebaiknya tidak meletakkan tempat menampilkan daftar task di bawah daftar project

Kenapa?

Coba kita lihat gambar dibawah ini…

Tempat untuk menampilkan daftar task nya tidak terlihat.

Lalu Bagaimana?

Kita pikirkan interaksi lain yang bisa berfungsi dengan baik dan memudahkan user. Kita bisa membuat interaksi tempat untuk menampilkan daftar task nya akan muncul ketika user meng-klik salah satu project.

Seperti dibawah ini….


Setelah itu, kita bisa fokus pada bagian menampilkan task nya. Pertama, kita bisa menempatkan judul dan deskripsi nya. Oiya, jangan lupa tombol close nya.


Lalu setelah menempatkan elemen daftar orang orang yang tergabung dalam project tersebut


Lalu setelah itu menempatkan header untuk kategori task


Lalu setelah itu menempatkan daftar task nya

Hmmm… kok kepanjangan ya?.

Karena keterbatasan area, maka nama task nya bisa kita jadikan 2 baris seperti dibawah ini


Setelah itu kita bisa menempatkan status task nya

Waduh, mepet banget

Karena keterbatasan area, kita bisa mengubah status task hanya dengan menggunakan indikator warna, seperti dibawah ini


Setelah itu kita bisa menempatkan semua task nya


Lalu setelah itu kita bisa tempatkan tombol untuk menambah task nya


Lengkaplah sudah

Berikut adalah design versi desktop…

Dan berikut design versi mobile nya…


Semoga bermanfaat :)

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar and Insight Design • UI Designer • Story Teller • Love to create design exploration @ dribbble.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