Newest Info

Berita, info dan pengumuman terbaru berkaitan dengan perkembangan teknologi

Mengubah design versi desktop menjadi design versi mobile (Responsive)

24 Juli 2019 | Dwinawan via medium
post image

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: Burger Menu Teks sapaaan Elemen pencarian Daftar Project Tempat untuk menampilkan daftar task dari suatu project 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.…. IndonesiaIT 2019, [...], Artikel ini di ambil dari feed medium, untuk pengalaman baca yang lebih baik, silahkan kunjungi situ aslinya. IndonesiaIT - Software Developer Terbaik. Baca Selengkapnya.