M13 - DPG

Hirarki Visual dalam Desain Website

 

Hierarki Visual berkembang dari Prinsip Gestalt. Focal Point adalah salah satu elemen dalam prinsip Gestalt, dimana prinsip ini akan membentuk Hierarki Visual dalam sebuah komposisi. Ada beberapa cara untuk membuat hierarki dalam desain website menggunakan unsur-unsur dasar desain seperti garis, bentuk, ruang, warna, tekstur, ukuran, dan tipografi. Namun, ini bukan merupakan aturan pokok dalam membuat Hierarki Visual dalam desain. Semuanya tentu bergantung pada bagaimana Anda mengkombinasikan semua unsur desain sesuai dengan tujuan dan selera Anda.

Menggunakan Unsur Garis

Garis merupakan unsur desain yang menghubungkan satu titik dengan titik lainnya baik itu berbentuk lurus maupun kurva. Unsur/elemen garis yang berdiri sendiri dapat membentuk sebuah hierarki visual pada desain website.

Penerapan garis pada website secara umum dapat memberikan kesan pembatas antara bagian satu dengan lainnya. Garis juga bisa digunakan sebagai bidang grafis pembatas untuk memperindah tampilan layout halaman webstite.

Pada tampilan website di atas, Hierarki Visual terbentuk dari unsur tipografi dan garis sebagai pembatas. Mata Anda pertama kali akan tertuju pada headline website Welcome to kemudian akan terarahkan karena tulisan East Room.

 

Bentuk

Bentuk berasal dari titik pertemuan garis yang saling terhubung. Bentuk dapat berupa objek 2 dimensi maupun 3 dimensi. Berdasarkan sifatnya, bentuk dapat dikategorikan menjadi tiga: huruf, simbol, dan bentuk nyata (misalnya kotak, lingkaran, segi tiga, segi enam, dan lain-lain).

Penerapan unsur bentuk dalam desain website bisa berupa foto atau gambar, terlebih karena pada umumnya frame foto berbentuk persegi panjang. Penggunakan foto atau gambar besar pada halaman website sebagai background dapat menarik perhatian pengunjung serta menjaga mata tetap terfokus pada satu pesan Anda selama beberapa detik, sebelum kemudian mengarah ke keterangan berikutnya dengan kata-kata yang berdekatan.

Website ini menggunakan Hierarki Visual yang terbentuk dari foto backgroud berukuran besar, terfokus pada gambar headset. Gunanya tentu saja untuk mencuri perhatian pengunjung, sebelum kemudian pengunjung diarahkan menuju teks copy di sebelah kanan gambar headshet. Website resmi Nike juga menerapkan hal yang sama. Di sini perhatian pertama Anda pasti akan tertuju pada foto background.

 

Ruang/White Space

Merupakan jarak yang memisahkan suatu elemen dengan elemen lain. Meskipun disebut whitespace, bukan berarti ruang yang sebenarnya harus berwarna putih. Ruang kosong/ whitespace dapat diisi dengan warna apapun asalkan bebas dari unsur-unsur seperti teks, gambar, dan sebagainya. Dalam bentuk fisiknya, pengidentifikasian whitespace digolongkan menjadi dua unsur, yaitu objek (figure) dan latar belakang (background).

Whitespace erat kaitannya dengan kemewahan serta kecanggihan. Whitespace terbentuk dari cara mengatur teks, mengatur elemen dan membimbing pengunjung memperhatikan unsur-unsur tertentu.
Contoh penggunaan whitespace yang paling familiar adalah Google. Homepage google penuh dengan spasi sehingga Anda bisa fokus pada kolom pencarian.

 

Warna dan Kontras

Warna adalah spektrum cahaya. Identitas suatu warna ditentukan oleh panjang gelombang cahaya tersebut.

Setiap warna memiliki makna sendiri, penjelasan ini bisa Anda baca pada artikel Kombinasi Warna Efektif untuk Desain Website Anda. Hierarki Visual warna terbentuk dari kontras antar warna, atau warna berlawanan yang juga sering disebut dengan warna komplementer. Namun grafik dari roda warna berikut tak selalu menjadikan acuan sebagai pembentuk Hierarki Visual, karena kontras sendiri bisa antar hitam dan putih. Pada intinya warna yang kontras itu saling bersebrangan satu antar yang lain di dalam grafik lingkar warna.

Hal ini mempunyai pengaruh yang sangat besar pada Hierarki Visual. Sebagai contoh, silakan lihat ilustrasi di bawah ini. Anggap seakan-akan ini adalah tampilan website,terdapat bakcground, konten, dan CTA.

Mata Anda pasti akan lebih tertarik untuk melihat komposisi warna yang di sebelah kanan. Karena sesuai dengan teori komplementer dalam warna, warna yang berlawanan akan menimbulkan kontrast tinggi sehingga lebih menarik perhatian. Meskipun dalam ilustrasi di atas tinggkat kepekatan warna biru tidak pekat namun tetap mewakili biru kontras dengan orange.

 

Hirarki dengan Tekstur

Tekstur merupakan visualisasi permukaan suatu benda. Dalam desain visual, tekstur memang tidak dapat serta merta disentuh maupun diraba. Biarpun demikian, tekstur (kerap disebut sebagai corak) tetap banyak digunakan.

Penerapan tekstur kerap dimanfaatkan untuk Hierarki Visual. Tekstur dapat menyoroti elemen seperti judul, ikon, dan tombol. Ia menarik perhatian mata kepada tombol call-to-action maupun headline dalam sebuah website.

 

Hirarki dengan Ukuran

Ukuran lekat kaitannya dengan perbandingan ukuran suatu bentuk dengan bentuk lain. Dengan menggunakan perbandingan ukuran ini Anda dapat menciptakan kontras pada objek desain. Tujuannya adalah untuk menonjolkan sisi menarik ataupun bagian utama dari sebuah desain.

Format Gambar Yang Paling Banyak Digunakan

 

Raster Image Files 

Raster adalah format gambar yang paling umum dan banyak ditemukan di internet. Gambar-gambar dalam tipe ini dibentuk dari serangkaian titik-titik kecil atau disebut dengan piksel. Nah jika Anda melihat gambar Raster hitam putih, misalnya, gambar tersebut sebenarnya adalah kumpulan titik-titik yang memiliki warna hitam dan putih.

Banyaknya piksel dalam format Raster akan menentukan resolusi suatu gambar, baik itu tinggi maupun rendah. Sayangnya karena dibentuk dari susunan piksel, format Raster cenderung statis dan bergantung kepada resolusi, sehingga menjadi blur ketika diperbesar.  

Dalam format Raster juga dikenal adanya lossless dan lossy compression. Dengan skema lossless compression, Anda bisa memperkecil ukuran gambar tanpa mempengaruhi kualitasnya. Sebaliknya, gambar yang tergolong ke dalam lossy compression akan berkurang kualitasnya jika diperkecil.  

Adapun beberapa format gambar yang masuk ke dalam kategori Raster diantaranya adalah sebagai berikut:

1. PNG (Portable Network Graphics)

PNG adalah salah satu format terpopuler yang bisa menampilkan gambar dengan latar belakang transparan. Format ini banyak digunakan untuk membuat infografis, banner, chart, logo, ilustrasi, komik, dan banyak produk grafis lainnya. 

Selain itu, PNG juga mendukung lossless compression dan menawarkan warna yang tajam. Sayangnya, format ini cenderung mempunyai ukuran yang besar dan hanya bisa disimpan dalam mode RGB.

2. JPEG/JPG (Joint Photographic Experts Group) 

JPEG adalah format yang paling banyak digunakan di internet. Beberapa platform sosial media seperti Facebook dan Instagram bahkan secara otomatis akan mengubah format gambar yang diunggah menjadi JPEG. 

Yang paling spesial, JPEG kompatibel dengan berbagai browser, image viewers, dan berbagai editor software; serta mempunyai ukuran file yang kecil. Namun sisi kekurangannya adalah, JPEG masuk ke dalam tipe lossy compression, sehingga kualitasnya akan menurun jika diperbesar.   

3. GIF (Graphics Interchange Format) 

Sering melihat gambar GIF di sosial media? Ya, GIF dikenal karena kemampuannya dalam menampilkan animasi yang menarik dan kekinian, sehingga banyak digunakan dalam strategi social media marketing. 

Kabar baiknya, GIF mempunyai ukuran file yang kecil, mendukung mode transparan, dan termasuk ke dalam lossless compression. Namun di sisi lain, format ini sayangnya tidak dibekali dengan kualitas gambar yang tinggi serta mempunyai dukungan warna yang terbatas. 

4. TIFF (Tagged Image File Format)

Dengan kualitas gambar yang sangat tinggi, TIFF banyak digunakan dalam industri cetak maupun penerbitan. Tapi ingat, jangan pernah menggunakan format ini untuk web; karena selain tidak kompatibel dengan berbagai browser, TIFF juga mempunyai ukuran file yang besar. 

5. PSD (Photoshop Document)

PSD adalah format file gambar yang dibuat maupun disimpan di aplikasi Adobe Photoshop. Uniknya, PSD bisa diubah ke format lain seperti JPEG dan PNG. Namun sayangnya, format ini tidak bisa dilihat dari browser maupun aplikasi image viewers, sehingga tidak disarankan untuk konten web.  

Nah selain kelima format file di atas, beberapa format lainnya seperti WebP, BMP (Bitmap), Raw, Exif (Exchangeable image file format), ICO, dan HEIF (High Efficiency Image File Format) juga termasuk ke dalam kategori Raster. 

Vector Image File Formats 

Gambar-gambar dalam format Vektor dihasilkan dari titik, garis, maupun kurva berdasarkan formula matematis dalam komputer. Itulah mengapa setiap bentuk dan warna yang dihasilkan dari susunan-susunan vektor tidak terikat pada piksel; sehingga dapat diperbesar tanpa mempengaruhi kualitas atau resolusinya. 

Beberapa format gambar yang termasuk ke dalam kategori Vector antara lain:   

1. SVG (Scalable Vector Graphics)

SVG merupakan format grafis berbasis XML (Extensible Markup Language) dan banyak digunakan untuk membuatkan ilustrasi, diagram, logo, ikon, hingga animasi untuk website. Kabar baiknya, SVG menawarkan ukuran file yang kecil dan dapat diakses dari berbagai web browsers.

2. AI (Adobe Illustrator)

AI merupakan format gambar yang dihasilkan dari aplikasi Adobe Illustrator. Format AI memang tidak bisa diunggah secara langsung untuk web. Tapi kabar baiknya, Anda bisa terlebih dahulu mengubahnya menjadi format lain seperti JPEG, PNG, dan GIF; sehingga pada akhirnya tetap bisa dimanfaatkan untuk konten web. Berbeda dengan PSD, AI bisa ditingkatkan atau dikurangi skalanya tanpa mengurangi kualitasnya.    

3. PDF (Portable Document Format)

Sering membuat dan mengunduh file PDF? Nah, format ini juga termasuk ke dalam kategori Vector dan bisa digunakan untuk menampilkan ilustrasi, poster, desain sampul, serta konten grafis lainnya. Menariknya, Anda juga bisa menambahkan animasi, tombol call-to-action, serta elemen-elemen lainnya dalam PDF. Biasanya, PDF hanya dijadikan lampiran atau pelengkap konten website dalam file terpisah, dan tidak bisa ditampilkan secara langsung layaknya JPEG maupun PNG.   

Tidak hanya tiga format tadi, beberapa format seperti EPS (Encapsulated Postscript) dan CGM (Computer Graphics Metafile) juga termasuk ke dalam kategori Vector.

 

Sumber :

-        https://www.niagahoster.co.id/blog/hierarki-visual-desain-website/

-        https://qwords.com/blog/format-gambar/