Submitted by Sulistiyo_Hutomo in uiuxdesign (edited )

Kesimpulan:

  1. Ukuran layar yang optimal digunakan saat ini adalah 1920x1080 (desktop), 360x640 (smartphone), 768x1024 (tablet) berdasarkan statistik tren global dari situs Statcounter Global Stats. Namun untuk desktop disarankan 1366x768 dengan alasan agar dapat menyesuaikan dengan resolusi layar yang lebih besar (1920x1080) dan yang lebih kecil (1280x1024).
  2. Dalam mendesain UI, selalu gunakan liquid layout atau margin yang berfungsi memberikan ruang kosong di setiap sudut kanan dan kiri layar untuk mencegah konten menjadi acak-acakan jika digunakan di perangkat yang ukuran layarnya lebih kecil.

Intro


Halo...

Kali ini saya akan sedikit membahas tentang cara menentukan resolusi layar yang sesuai dengan kebutuhan user secara umum.

Salah satu pertanyaan pertama seorang UI Designer adalah "Untuk perangkat apa aku mendesain?".

Saat pertama kali mendesain UI, sebagian dari kita biasanya akan merasa kebingungan untuk memilih resolusi layar yang cocok hingga pada akhirnya kita membuat desain sesuai dengan template yang disediakan oleh aplikasi yang kita gunakan walaupun template tersebut belum tentu sesuai dengan kebutuhan user.

Pembahasan


Ukuran layar yang optimal saat ini adalah 1920x1080 (desktop), 360x640 (smartphone), 768x1024 (tablet) berdasarkan statistik tren global dari situs Statcounter Global Stats.

Pedoman umumnya adalah dengan cara mengoptimalkan resolusi layar yang paling sering digunakan target audiens pada masa itu dan selalu gunakan liquid layout atau margin yang memberikan ruang kosong di setiap sudut kanan dan kiri layar yang berfungsi untuk mencegah konten menjadi acak-acakan jika digunakan di perangkat yang ukuran layarnya lebih kecil.

Ada beberapa situs yang menyediakan statistik penggunaan resolusi layar desktop dan mobile diseluruh dunia dan informasi ini dapat kita akses secara gratis.

Dari sinilah kita bisa tau informasi terkait resolusi layar pengguna, sehingga kita tidak sembarang memilih resolusi layar ketika memulai desain UI.

Berikut beberapa situsnya:

  1. https://www.w3schools.com/browsers/default.asp
  2. https://gs.statcounter.com/screen-resolution-stats, situs ini menyediakan informasi statistik yang sedikit lebih kompleks dari situs w3shools karena terdapat beberapa kategori yang bisa kita pilih sesuai kebutuhan, misal kategori negara jika kita hanya ingin tau statistik penggunaan devices di Indonesia.

Penutup


Nah sekarang kita bisa mendesain UI sesuai dengan kebutuhan user secara umum, sekian post kali ini semoga membantu.

Note : Untuk website umumnya 1366x768 agar dapat menyesuaikan dengan ukuran bisa lebih fleksibel. Lebih baik ukuran canvas nya disesuaikan dengan resolusi laptop / layar komputer Anda. Kenapa? agar Anda bisa menaruh design Anda di browser dan terlihat pas

Referensi :

  1. Screen Resolution and Page Layout | https://www.nngroup.com/articles/screen-resolution-and-page-layout/
  2. Computer Screens Getting Bigger | https://www.nngroup.com/articles/computer-screens-getting-bigger/
  3. Screen Resolution Stats Worldwide - August 2021 | https://gs.statcounter.com/screen-resolution-stats
  4. Understanding Device Resolution for Web Design and Development | https://medium.com/@flik185/understanding-device-resolution-for-web-design-and-development-3bb4a5183478

(Jika anda merasa post ini kurang bermanfaat silahkan berikan feedback di kolom komentar)

2

Comments

You must log in or register to comment.

fahmiidris_ wrote

Ngatur responsive web mending semua devide atau hanya ukuran web sama hp aja ya? cape banget biar responsive semua, posisi pake tailwindcss.

−2

Sulistiyo_Hutomo OP wrote (edited )

Sebelumnya sorry ka, spesialisasi saya UI/UX Designer jadi kurang tau banyak, tapi berdasarkan info yang saya baca dari beberapa referensi diatas, cukup bikin yang versi desktop sama smartphone aja

6