Ukuran untuk website dengan desain Full Screen

Ukuran untuk website dengan desain Full Screen

Di artikel ini saya akan bahas mengenai ukuran untuk website dengan desain Full Screen. Desain Full Screen disini maksudnya adalah tampilan desain yang memenuhi keseluruhan layar monitor atau browser.

Biasanya cara ini dipakai oleh beberapa website-website untuk tampilan slider utamanya. Atau tidak jarang untuk halaman muka websitenya.

Ukuran untuk website dengan desain Full Screen
Bahe - WordPress Theme

Seperti yang kita lihat pada gambar disamping, slider utamanya memiliki ukuran 100% untuk lebar (width) dan tinggi (height). Dan ukuran slider tersebut akan tetap 100% di setiap layar monitor ataupun di tablet & HP smartphone.

Namun jika kita mau menerapkan rasio gambar (image ratio) gambar yang selalu sama, maka nanti gambar ini akan terlihat terpotong, entah di lebarnya atau tingginya.

Seperti yang kita lihat dari gambar disamping, untuk monitor yang mendatar(misal di komputer) gambar fullscreen, akan terpotong sedikit di atas dan bawah.

Sedangkan untuk layar yang agak tinggi (misal smartphone), gambar akan terpotong di sisi kiri dan kanan.

Jadi berapa ukuran untuk website dengan desain Full Screen sebenarnya?

Tergantung dari layar monitor/mobile devices(tablet/smartphone) yang digunakan.

Jadi tidak ada ketetapan yang pasti untuk ukuran website Full Screen tersebut. Cuma yang pasti website seperti itu (slidernya) memiliki width & height yang selalu 100%.

Standar ukuran layar untuk PC/komputer, laptop, tablet, smartphone (dalam pixel):

  •  360 x 640 , 360 x 740 , 480 x 853, 411 x 731 – ukuran ini biasanya digunakan pada Smartphone. Cuma untuk ukuran ini hanya untuk viewport(lebar fisik layar). Bukan resolusi Smartphone nya sendiri.
  • 1024 x 768 – ukuran ini biasanya digunakan pada Tablet & Smartphone.
  • 1280 x 720 – ukuran ini biasanya digunakan pada Laptop, beberapa Tablet & Smartphone(mid-end).
  • 1366 x 768 – ukuran ini biasanya digunakan pada Laptop.
  • 1920 x 1080 – ukuran ini biasanya digunakan pada Laptop dan juga Monitor Komputer (FullHD).
  • 2560 x 1440 – ukuran ini biasanya digunakan pada Monitor Komputer dan beberapa High-end Laptop dan juga Smartphone(Quad HD).
  • 3840 x 2160 – ukuran ini biasanya digunakan pada (high-end) Monitor Gaming (4k)
  • 7680 x 4320 – ukuran ini biasanya digunakan pada (high-end) Monitor Gaming (8k)

Nah jadi berdasarkan ukuran-ukuran layar diatas kamu bisa mengira-ngira berapa ukuran yang digunakan oleh website-website dengan desain Full Screen.

Tapi ada yang perlu kamu perhitungkan juga, yaitu ukuran browser menu dan juga taskbar menu(diwindows) atau menu bar (di Mac). Jadi bukan berarti ukuran website yang menggunakan desain full screen tingginya selalu sama dengan list yang diatas.

Tapi kalau kamu ingin mendesain website, di Photoshop misalnya, saya sarankan minimal mulai dari resolusi 1280x720px. Cuman perlu diingat, hasil desain(gambar di Photoshop/sketsa) akan berbeda dengan kenyataan. Nanti kalau misal di sketsa foto orang berada di tengah, di website nanti bisa saja berpindah jadi agak kekiri atau kenanan.

Karena sekali lagi, semua tergantung ukuran layar yang dituju/kita gunakan.

Berapa ukuran yang baik untuk background image(gambar latar belakang) yang harus digunakan website dengan desain Full screen?

Sama seperti jawaban diatas. Tergantung ukuran yang kita tuju.

Jadi maksudnya begini, kalau kamu mau membuat website sendiri, lalu ingin menggunakan desain layout ini, coba kamu pahami dulu target pengunjung ke website kamu ini.

Misal, kamu mengejar yang yang rata-rata ukuran monitornya 1280×720. Nah, kalau begitu sebaiknya kamu membuat gambar latar belakangnya minimal berukuran 1280×720 pixel.

Kenapa harus 1280×720 pixel minimal?

Karena kalau kita menggunakan gambar yang berukuran dibawah dari itu, maka nanti pengunjung kamu yang bermonitor berukuran 1280×720 itu akan melihat gambar latar belakang kamu agak pecah-pecah(pixelated) sedikit.

Hal ini dikarenakan gambar tadi, akan dibuat mengikuti (minimal) 100% lebar & tinggi si monitor pengunjung tersebut.

Nah untuk menghindari hal seperti itu saya sarankan kamu menggunakan gambar yang minimal menggunakan ukuran 1280×720 pixel.

Tips untuk ukuran gambar

Berdasarkan pengalaman saya, kalau misal kamu mau menggunakan website dengan desain fullscreen seperti ini, saya sarankan minimal gambar latar belakangnya berukuran diatas 1280×720 pixel.

Seperti website contoh diatas, dia menggunakan 1600×1100 pixel untuk gambar slidernya. Mungkin website ini mengejar pengunjung yang memiliki monitor ukuran 1280×720 keatas.

Tapi ingat, ukuran gambar berukuran besar ada kelemahannya, apalagi kalau kamu ingin menggunakannya di website kamu. Semakin besar ukuran gambarnya (lebar & tinggi) maka semakin besar juga (file)sizenya.

Oleh karena itu coba di optimize dulu menggunakan program seperti Photoshop atau bisa menggunakan plugin seperti plugin Smushit atau Imagify jika website kamu menggunakan WordPress.

Selain itu, kamu juga bisa menambahkan semacan “image mask” di atas gambar tersebut. Jadi nanti terdapat garis-garis pola diatas gambar latar belakang tersebut. Contohnya bisa dilihat di website ini.

Berapa ukuran yang baik untuk background video(video latar belakang) yang harus digunakan website dengan desain Full screen?

Sama seperti halnya di image/gambar, tergantung kepada ukuran yang kita tuju.

Video juga harus kita perlakukan sama seperti gambar. Cuma, menurut saya tidak harus menggunakan ukuran yang terlalu besar seperti yang kita lakukan pada background image(gambar latar belakang).

Karena video sendiri punya kualitas gambar yang agak berbeda dengan gambar biasa.

Contohnya anda coba buka youtube, lalu tonton video dengan resolusi 480p, sedangkan monitor anda 1280×720, apakah gambar videonya pecah? Tidak terlalu kan? Nah, karena itu, saya sarankan minimal kalau kamu ingin menggunakan video sebagai latar belakang di website kamu, minimal kualitas videonya 720p atau 1080p (ukuran youtube).

Tips untuk ukuran video

Gunakan ukuran video sesuai kebutuhan kita

Untuk video disini, saya sarankan menggunakan ukuran paling-paling buruk di 480p. Dan jangan lupa memakai “image mask” juga di atas videonya. Cari image mask yang berpola garis menyamping. Ini tujuannya memberi kesan videonya tidak terlalu pecah juga menambah kekerenan 100%.

Lalu hindari menggunakan menggunakan self-hosted video.

Maksudnya, jangan menggunakan video yang kamu simpan di website kamu sendiri. Karena selain memakan space hosting kamu, kecepatan dan peforma website & hosting kamu juga akan terkena pengaruhnya. Contohnya website kamu nanti menjadi lambat ketika membuka halaman yang menggunakan video tersebut.

Gunakan Youtube video atau Vimeo video

Nah solusi untuk diatas, gunakan selalu video dari pihak ketiga, seperti Youtube atau Vimeo ini. Cuma karena vimeo rata-rata diblokir oleh ISP Indonesia, saya sarankan pake Youtube aja.

Kesimpulan

Oke sampe disini dulu pembahasannya mengenai ukuran untuk website dengan desain Full Screen ini. Semoga bisa bermanfaat dan bisa kamu coba juga tips dan trik nya di website kamu. Silahkan tinggalkan komentar jika masih ada hal yang belum jelas atau pengen kamu ketahui lagi.

Kamu bisa buka link ini kalau kamu pengen tahu tutorial membuat background image (gambar latar belakang) yang full screen.

Buat kamu para pemula yang ingin mencari WordPress theme yang keren, kamu bisa buka link ini.

Buat kamu para pemula yang ingin menyewa hosting buat website kamu, kamu bisa membaca cara mencari hosting yang tepat disini.

    Tulis komentar anda