Ragam Layout dan Gambar Pada Desain Grafis Berbasis Web

 

Ragam Layout dan Gambar Pada Desain Grafis Berbasis Web

 

Layout sebuah webiste adalah pola (atau kerangka kerja) yang mendefinisikan struktur situs web. Layout memiliki peran menyusun informasi yang ada di situs baik untuk pemilik situs web maupun untuk pengguna. Hal ini dapat memberikan jalur yang jelas untuk navigasi dalam halaman web dan menempatkan elemen terpenting dari situs web di depan dan di tengah.

Layout sebuah situs web menentukan hierarki konten yang berada di dalamnya. Konten ini harus memandu pengunjung untuk berkeliling website, dan harus menyampaikan pesan pembuat dengan sebaik-baiknya kepada mereka.

Memilih sebuah layout untuk website memiliki pengaruh penting dalam menyampaikan informasi. Layout yang buruk akan membuat pengguna frustrasi yang akhirnya membuat mereka untuk pergi dari situs web yang sedang diakses karena tidak menemukan apa yang mereka cari. Karenanya, pemahaman dalam pemilihan ragam layout sebuah website haruslah diperhatikan.

Berikut adalah dasar penggunaan ragam layout website dalam membuat media visual berbasis web

1. Bobot visual dan ruang negatif.

Bobot visual dirasakan oleh orang-orang ketika beberapa objek di situs web membawa bobot visual yang lebih kuat. Bobot visual ini dapat diinduksi dalam elemen tertentu melalui teknik yang berbeda. Salah satunya, ruang negatif adalah yang menarik minat kita secara langsung di sini.

Ruang negatif (ruang yang tidak memiliki elemen apa pun) mengarahkan perhatian ke elemen yang lebih besar dari yang lain melalui kekuatan visual yang terkonsentrasi pada elemen tersebut. Sebagai contoh, berikut adalah contoh bobot visual yang diciptakan oleh ruang negatif:

Ruang antara kotak hitam dan kotak putih mengarahkan mata ke elemen sebelah kiri. Tetapi elemen sebelah kiri sebanding dengan 4 kotak putih yang lebih kecil. Kotak hitam membawa kekuatan visual yang lebih kuat.

2. Tata letak situs web yang seimbang

Dalam desain web yang seimbang, elemen-elemen yang membentuk tata letak saling mendukung sehingga pengguna melihat konten teks dengan sama pentingnya. Selain itu, elemen mudah dipindai dalam tata letak yang menyajikan semuanya secara efisien. Desainnya memberikan kesan stabilitas, dan terasa sangat menyenangkan, dari segi estetika.

Salah satu desain seimbang yang paling populer adalah keseimbangan simetris, di mana, mirip dengan gambar cermin, elemen visual akan terlihat sama di kedua sisi tengah. Simetri membangkitkan keseimbangan, keanggunan, dan kesenangan. Anda mungkin pernah merasakannya juga saat melihat arsitektur beberapa bangunan, taman, bahkan sayap kupu-kupu.

3. Menyediakan section untuk audiens atau fitur tertentu

Susunan elemen yang dapat diubah artinya pengguna dapat dengan mudah beralih ke bagian situs web lain. Untuk membantu Anda mengetahui bagaimana ini mungkin, kami sarankan Anda memikirkan situs web mode yang menangani pria dan wanita.

Tata letak mendukung 2 bagian berbeda dalam situs web, satu didedikasikan untuk pakaian untuk pria, yang lain didedikasikan untuk pakaian untuk wanita. Pemisahan tata letak menyajikan konten fungsional, sangat berguna untuk 2 audiens target yang berbeda.

4. Menggunakan Layout Non-standar.

Sementara beberapa tata letak mengikuti jalur tradisional, dengan tujuan menyajikan fungsionalitas yang terbaik, tata letak lain menggunakan desain dan struktur yang berani, dengan tujuan memberi dampak pada pengguna. Melanggar cetakan berarti pengaturan elemen yang tidak terduga dalam halaman web, dan pengalaman yang dipicunya menonjol di lautan situs web standar, sehingga pengguna tidak dapat tidak mengingat situs web Anda.

5. Buat Ketegangan Visual untuk Tata Letak Merangsang yang Menarik

Dalam desain web, ketegangan visual menarik perhatian pengguna dengan memfokuskannya pada poin-poin utama situs web. Ketegangan visual muncul dengan kontras ruang, warna atau luminositas, dan mudah terlihat jika terjalin dalam keseimbangan elemen yang sempurna secara keseluruhan.

Perannya adalah untuk secara visual merangsang pengguna untuk menghentikan rutinitas web surfer dan memproses informasi di situs web dengan cara yang baru.

6. Gunakan Titik Fokus Untuk Menarik Perhatian Ke Elemen Tertentu

Tombol ajakan bertindak dapat menjadi titik fokus. Sebuah gambar bisa menjadi titik fokus. Judul juga bisa menjadi titik fokus. Itu semua tergantung pada bagaimana mereka mengintegrasikan ke dalam tata letak situs web, sehingga mereka menjadi tempat menarik terbesar di situs web, yang menarik perhatian pengguna.

Titik fokus akan membuat pengguna setengah jalan menuju tujuannya. Pengguna akan memusatkan perhatian mereka pada titik fokus tersebut dan lebih cenderung mengambil tindakan yang Anda inginkan. mengambil.

7. Desain tata letak yang mencapai tujuan situs web

Ini adalah praktik terbaik bahwa, sebelum mulai mendesain tata letak/untuk menelusuri templat tata letak, Anda harus menentukan apa tujuan situs web itu. Mereka mungkin menjual produk, mengumpulkan lalu lintas, atau hanya memikat pengguna dengan beberapa karya seni. Tata letak situs web harus dipilih berdasarkan tujuan situs web. Ini akan memicu perilaku pengguna tertentu yang mengarah pada penyelesaian tujuan tersebut.

8. Tata letak yang menceritakan sebuah kisah

Rancang tata letak/cari tata letak sehingga sesuai dengan pesan yang harus Anda kirimkan. Area bagian harus bersatu untuk menceritakan kisah yang lengkap. Setiap elemen dalam rantai ini adalah bab lain dalam cerita Anda.

Penggunaan berbagai macam format gambar pada desain grafis berbasis web.

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. 

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://colibriwp.com/blog/website-layout-design-ideas/

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