Konsep Dasar Desain bag. 1 (Kontras)

Assalamualaikum Wr. Wb. Selamat malam saudara semua sebangsat setanah kusir. Setelah sebelumnya saya pernah ngebahas tentang cara install Corel Draw X4 yang kehilangan file Ica.msi disini. Sekarang saya pengen berbagi sedikit ilmu tentang dasar-dasar desain sebelum nantinya saya pengen bagiin tutorialtentang cara desain itu sendiri baik pake Corel, Illustrator maupun Photoshop. Udah pasti untuk menghadirkan atau menciptakan desain yang baik, kita ga cuma butuh skill, teori juga akan menentukan seberapa profesional desain yang kita buat. Diantara konsep-konsep tersebut yang termasuk kategori vital adalah Perbedaan Bentuk dan Warna (Kontras), Teori Simetris dan Asimetris dan Typografi. Nah, mari kita preteli konsep dasar yang saya referensi dari Sribu. Cekidot!!!

1. Mempelajari Perbedaan Bentuk dan Warna

Dalam desain, perbedaan kecil dapat dikatakan perbedaan yang signifikan. Terkadang, hal yang menurut Anda sepele adalah hal yang sangat besar. Contohnya saja mengenai kontras. Anda tidak boleh hanya memahami mengenai kontras pada warna, tetapi anda juga harus memahami mengenai ukuran dan bentuk kontras. Dalam artikel ini, Saya akan menjelaskan mengenai kontras secara rinci.

Apa Itu Kontras?

Kontras dapat didefinisikan sebagai perbedaan visual yang membuat suatu objek dapat dibedakan dari benda lain maupun dari latar belakang. Kontras digunakan oleh semua desainer, tetapi sebagai desainer web, kontras adalah hal yang sangat dasar tapi sangat penting untuk dimengerti. Untuk mulai memahami apa itu kontras, coba Anda bayangkan hal yang paling mudah, yaitu hal yang berlawan seperti hitam dan putih, cepat dan lambat, atau tebal dan tipis. Jika anda sudah mengerti, coba anda bayangkan ke tingkat yang lebih sulit seperti dalam web. Kontras terlihat dari tombol “add to cart” dengan tombol “check out”. Sudah mengerti? Mudah bukan? Nah mari kita lihat perbedaan – perbedaan yang terletak dalam kontras.

Kontras Warna

Ini adalah hal yang paling dasar dalam memahami kontras. Kontras menggunakan warna sangat penting terutama pada web. Tentunya Anda menginginkan web yang menarik tetapi terpadu bukan? Nah, dengan memadukan warna yang baik Anda akan mendapatkan kontras yang baik. Anda pun harus pintar-pintar melihat perbedaan pada warna. Contohnya, jika Anda memadukan warna hitam dan putih, Anda akan mendapatkan kontras yang tinggi, karena warna hitam dan putih sangat berlawanan. Sedangkan jika Anda memadukan warna merah dan orange, maka Anda akan mendapatkan kontras yang rendah, karena warna merah dan orange sangat mirip.

TekRoc menggunakan kontras warna yang sangat jelas di websitenya dengan memadukan warna gambar yang cerah dan latar belakang yang gelap. Warna orange yang cerah serta biru yang bersih membuat mata pengunjung website langsung tertuju padanya.



Gowalla juga menggunakan kontras warna yang luar biasa. Dimulai dengan garis multi warna yang terletak pada atas website, sampai penambahan bayangan halus sebesar 1px pada tombol-tombol penting ditambah warna orange yang tentunya menarik perhatian pengunjung website.

Envato adalah masternya kontras halus. Mengapa demikian? Coba anda perhatikan baik-baik. Mereka menggunakan garis sebesar 1px. Semua situs mereka memiliki garis pixel tunggal untuk menciptakan kontras antar bagian. Sebenarnya pada gambar diatas, dua daerah konten dapat dibagi dengan satu ruang atau satu baris, tetapi mereka menggunakan dua baris untuk menciptakan kontras yang halus antara dua bagian yang efektif.

Kontras Ukuran

Selanjutnya mari kita lihat perbedaan kontras menggunakan ukuran. Dengan menggunakan huruf besar disamping huruf kecil, hal tersebut menandakan si huruf besar tersebut adalah hal yang paling penting.

MadeByWater adalah salah satu desain dari Jordan Vitanov. Ia menggunakan ukuran tipografi untuk mewujudkan kontras yang luar biasa. Dengan menggunakan huruf besar, Ia dapat menyampaikan sesuatu yang penting.

28Thiers adalah salah satu bar kelas atas yang sangat menarik di Perancis. Situs mereka membuat mata pengunjung website langsung tertuju foto besar Martini dengan berbagai bahan disekitarnya. Hal tersebut seolah menunjukkan bahwa 28Thiers sangat berkelas.

SlideScreen menggunakan gambar produk mereka dengan ukuran yang sangat besar pada website ini. Mereka juga menggunakan tombol yang sangat besar sebagai tombol penting yang pastinya akan dicari oleh pengunjung. Mereka ingin anda menonton videonya kemudian mendownloadnya. Dengan ukuran besar inilah, saat anda memasuki website ini anda secara tidak langsung sudah tau apa yang akan anda lakukan

Kontras Bentuk

Perbedaan lainnya dapat dilihat dalam bentuk. Dengan menggunakan bentuk yang unik atau berbeda dengan konten lain, Anda dapat menunjukkan bahwa hal tersebut adalah hal penting yang Anda sampaikan dalam website Anda.

Anebstar menggunakan tiga bentuk lingkaran sebagai header dalam website mereka. Hal ini adalah hal yang paling mudah untuk mewujudkan kontras bentuk. Walaupun pada website ini kontras bentuk bukanlah satu-satunya kontras yang digunakan, tetapi dengan lingkaran inilah dapat terlihat jelas struktur penting dalam website ini.

Carbonmade adalah situs yang menakjubkan dengan menyajikan konten yang baik dan menggunakan ilustrasi yang cantik. Sebuah tombol Sign Up dibuat sangat sederhana tetapi fungsional. Pasti anda berpikir dimana letak kontras bentuknya? Coba Anda buka website ini. Pasti mata Anda tertuju langsung pada tombol Sign Up nya bukan? Karena dibalik dari tombol tersebut, terdapat gambar gurita yang sangat lucu dan adanya box tulisan disampingnya.

WireframePlus melakukan pekerjaan yang sangat sederhana pada kontras bentuk. Mereka menambahkan lingkaran kecil untuk memberi tahukan harga layanan mereka.

Kontras Posisional

Selain ada warna, ukuran dan bentuk, perbedaan kontras dapat dilihat secara posisional. Menciptakan kontras dalam posisional adalah hal yang sangat mudah dan rapi. Hal ini telah dipopulerkan oleh Elliot Jay Stocks.

Elliot Jay Stocks menggunakan grid rinci untuk menentukan keselarasan dari semua elemen di websitenya. Dan jenis penyelarasan ini, sudah banyak menginspirasi desainer – desainer web untuk menggunakan kontras posisional yang sama.

SimpleBits adalah brand dimana Dan Cederholm bekerja. Bagi anda yang tidak tahu siapa Dan Cederholm, coba saja anda cari proyek-proyeknya yang luar biasa seperti Dribbble. Saat pertama kali anda membuka website ini, kontras posisionalnya memang tidak terlihat, tetapi jika anda perhatikan baik-baik, anda pasti mengerti dimana letak kontras posisionalnya.

SquaredEye adalah toko desain yang dijalankan oleh Matthew Smith. Ia berhasil memanfaatkan kontras posisional pada halaman studi kasus di portofolionya. Ia menciptakan kontras yang fantastis antar bagian dan menciptakan minat visual untuk pembaca tanpa sama sekali terasa terganggu.

Okeh, dibagian 1 ini saya rasa segini dulu. Kita akan lanjutkan konsep dasar ini di Bagian 2 yang akan membahas Teori Simetris dan Asimetris. Sampai jumpa besok.




Credit : Gubug Desain
Sumber : Sribu