Tipe kontras pada desain

Bagaimana Cara Menambahkan Kontras pada Desain Anda

Sumber by canva.com

01. Kontras Dengan Warna Gelap Dan Terang

Nilai hanyalah sebuah istilah yang mengacu pada terang atau gelapnya suatu warna, dengan warna hitam murni dan putih murni menjadi nilai kontras tertinggi. Tapi Anda tentu tidak harus selalu berpegang pada palet warna hitam-putih untuk menciptakan desain kontras yang tinggi. Memainkan warna yang lebih terang dan lebih gelap satu sama lain adalah salah satu cara termudah untuk menambahkan kontras dan membuat bagian tertentu dari desain Anda lebih terlihat.

Sebagai contoh sederhana, pikirkan teks berwarna gelap dengan latar belakang terang atau sebaliknya, seperti desain ini. Meskipun mungkin sulit untuk membaca tipe yang kecil pada sebuah foto, kontras dalam nilai di sini (tipografi putih terang di atas nuansa gelap ungu dan biru) membuatnya lebih mudah.

02. Kontras Dengan Warna Hue

Hue adalah istilah seorang seniman untuk warna tertentu, yang secara tradisional merupakan salah satu dari 12 warna yang ditemukan di roda warna. Tapi teori warna juga dapat berguna bagi para desainer grafis dan web. Kita dapat menarik sejumlah palet klasik dari roda warna yang telah digunakan para pelukis selama berabad-abad untuk menciptakan komposisi kontras tinggi. Beberapa pilihan meliputi:

Komplementer: Warna yang berlawanan dalam roda warna, seperti merah/hijau atau biru/oranye; Warna komplementer adalah kontras tinggi dan intensitas tinggi.

Lencana ini menggunakan skema warna sederhana dan komplementer yang secara visual mencolok dan praktis, karena dia memisahkan dan mengatur berbagai bagian desain menjadi beberapa bagian.

Split komplementer: Warna apa saja dari roda warna ditambah dua warna yang mengapit pelengkapnya; Skema ini masih memiliki kontras visual yang kuat, namun kurang dramatis dibanding kombinasi warna komplementer.

Triadic: tiga warna yang merata pada roda warna.

Ingatlah bahwa Anda tidak harus menggunakan warna ini dalam bentuk yang paling murni dan paling terang (seperti yang terlihat pada bagan roda warna di atas, yang terkadang dapat bertabrakan). Membuat warna lebih ringan, lebih gelap, atau lebih redup mungkin lebih praktis untuk konteks desain kehidupan nyata, namun tetap dapat memberikan kontras yang bagus dengan desain Anda.

03. Kontras Dengan Suhu Warna

Semua warna dapat dipisahkan ke dalam beberapa kelompok berdasarkan suhu: hangat, sejuk, atau netral. Warna merah, oranye, dan kuning dianggap hangat, sementara warna biru dan hijau dianggap sejuk. Hitam, putih, dan abu-abu adalah netral (beiges dan brown juga dapat masuk dalam kategori ini tergantung bagaimana penggunaannya). Mencampur suhu warna dalam desain, sangat hangat dan sejuk, dapat menciptakan kontras yang dramatis.

Misalnya, layout halaman web ini menampilkan suhu warna yang kontras dengan nuansa biru dan kuning terang. Ini membantu tombol aksi dan gambar utama menonjol dengan sangat baik. Ditambah, karena kedua warna tersebut memiliki latar belakang yang lebih dingin (dengan nada kehijauan), kombinasi ini memiliki tampilan yang kohesif meski kontrasnya sangat tinggi.

04. Kontras Dengan Intensitas Warna

Intensitas warna juga dikenal sebagai saturasi. Warna dalam bentuknya yang paling murni dan paling terang 100% saturasi; Semakin dekat ke abu-abu, semakin kurang saturasi. Menggunakan warna terang atau muted (baik sendiri atau bersama-sama) bisa menjadi cara strategis untuk menciptakan tempat yang kontras tinggi atau rendah dalam disain. Warna cerah selalu menarik perhatian terutama pada warna hitam. Gunakan mereka dengan hemat untuk menyoroti bagian penting dari desain Anda.

Desain website ini melakukan hal itu, menggunakan tulisan saturasi dan berwarna oranye-merah dengan warna muted hutan hijau. Tidak hanya ini adalah skema warna komplementer (yang sudah menarik perhatian), tapi juga menggunakan tingkat saturasi yang kontras untuk meningkatkan drama.

05. Kontras Dengan Bentuk: Organik Vs Geometrik

Sebagian besar bentuk dapat dikategorikan sebagai geometris (empat persegi panjang, segitiga, lingkaran, dll.) Atau organik (cairan, bentuk alami. Sudut yang seragam pada bentuk geometris dapat kontras dengan baik dengan bentuk organik yang seringkali melengkung dan asimetris.

Di sini, suatu desain label menggabungkan bentuk organik dan hampir abstrak yang melengkapi dan meningkatkan garis lurus dan bersih dari tipografi pilihannya.

06. Kontras Dengan Bentuk: Tepi & Sudut

Satu cara lagi yang dapat Anda gunakan dengan halus dalam desain Anda ada di tepinya dan sudut elemen desain Anda, baik tipografi, kotak atau kancing, atau fitur lainnya. Bentuk yang lebih bulat seringkali memiliki penampilan yang lebih lembut, santai, atau ramah, sementara bentuk yang lebih tajam terlihat lebih teratur dan garing. Anda dapat membedakan kualitas ini satu sama lain, seperti yang dilakukan desain di bawah ini dengan cara yang sangat harfiah dengan tipografinya.

07. Kontras Dengan Tekstur

Seperti bentuk, tekstur dapat disandingkan untuk menciptakan kontras jika karakteristik mereka sangat berbeda satu sama lain: kasar vs halus, keras vs lembut, bertingkat vs datar. Kecuali Anda menggunakan efek cetakan khusus atau teknik fisik lainnya, tekstur yang Anda terapkan akan murni visual, dan diantara kemampuan yang ditawarkan oleh berbagai program desain, tekstur dan sumber daya bebas yang dapat Anda temukan secara online, kemungkinannya sangat banyak.

Pada contoh ini tekstur berpasir memberikan kesan berbeda pada logo dengan garis bersih yakni karakter vintage. Tekstur atau kesusahan adalah metode yang hebat untuk membuat desain terlihat sedikit aus atau menambahkan kesan kasar atau kualitas vintage/retro.

08. Kontras Dengan Skala & Ukuran

Selain menambahkan minat visual pada desain Anda, kontras juga membantu menciptakan hubungan antara dan memprioritaskan elemen desain yang berbeda. Jika setiap objek dalam desain Anda memiliki ukuran yang hampir sama, tidak akan banyak hirarki. Bagaimana penonton akan tahu apa yang harus dilihat pada awalnya, atau apa yang paling penting? Menggunakan skala secara efektif tidak hanya penting dari sudut pandang praktis, namun juga merupakan salah satu cara termudah untuk menciptakan layout yang dinamis dan menarik serta menambahkan drama ke desain.

Sampul majalah ini memiliki foto besar untuk menekankan tema dari materinya, namun tidak terlalu mendominasi elemen desain lainnya. Sebenarnya, ukuran, bentuk, dan warna tipografi meningkatkan titik fokus fotografi.

09. Kontras Dengan Bobot Visual

Seperti skala, bobot visual adalah cara lain untuk menunjukkan bagian desain Anda dan berkata, "Bagian ini penting!" Bobot visual hanya mengacu pada cara elemen menonjol dibandingkan dengan desain lainnya-dengan kata lain, Ini kontras tinggi. Bagian dari desain Anda yang memiliki bobot paling visual (kemungkinan besar adalah titik fokus) tidak harus menjadi hal terbesar di halaman. Anda juga bisa membuat sesuatu yang "berbobot" atau lebih terlihat dengan warna, tekstur, bentuk atau karakteristik lain beda dari yag lain dan menarik perhatian mata.

Sebagai contoh, lihat seri kartu pos ini untuk mempromosikan tempat budaya dari kota Cincinnati. Ilustrasi arsitektural tentu merupakan elemen terbesar pada setiap kartu, namun tagline "Enjoy More" menarik perhatian Anda karena tulisan ini adalah elemen yang paling gelap di halaman.

10. Kontras Dengan Spasi & Ruang Putih

Meskipun cukup menggoda untuk mengisi desain Anda dengan informasi sebanyak mungkin, ruang putih (ruang kosong atau negatif) memainkan peran penting dalam memisahkan dan mengatur elemen desain untuk layout yang seimbang. Saat bekerja dengan layout yang padat atau rumit, mengelilingi elemen penting dengan beberapa ruang kosong tambahan (tidak harus selalu berwarna putih) akan menarik perhatian ke tempat-tempat itu dan membantu membuatnya lebih kontras dengan keseluruhan desain.

Perhatikan betapa efektifnya maket halaman web ini menggunakan kombinasi ruang putih dan garis pemisah tipis untuk mengatur informasinya. Kedua kolom di sisi kiri dan kanan halaman dikelilingi oleh sejumlah besar ruang; foto produk bahkan lebih ramai sehingga menjadikannya pusat perhatian dan menarik pembeli.

11. Kontras Dengan Pilihan Komposisi

Sampai batas tertentu, setiap desain harus berurusan dengan konsep keseimbangan dan ketegangan, bagaimana cara Anda membuat desain Anda seimbang, tapi tidak membosankan; dinamis, namun tidak kacau? Salah satu cara untuk membuat garis antara keduanya (dan dalam prosesnya, mencapai kontras yang baik dalam desain Anda) adalah membuat pilihan komposisi yang baik. Untuk memahami bagaimana melakukan ini, dapat membantu mempelajari teknik komposisi klasik yang digunakan oleh seniman dan fotografer. Beberapa di antaranya adalah:

Aturan Ketiga: Bayangkan membagi layout Anda menjadi tiga bagian, baik secara vertikal maupun horizontal. Tempatkan titik fokus Anda pada salah satu dari empat titik di mana garis imajiner itu akan berpotongan. Proses ini tentang mencapai layout yang dinamis; Tidak ada cara yang lebih cepat untuk membuaat desain yang membosankan selain menempatkan segala sesuatunya secara tepat di tengah halaman.

Pada gambar header pertama dari desain website berikut, baik mawar dan judul berita berpusat kira-kira dimana pada dua persimpangan atas

dari grid aturan ketiga, sehingga membuat komposisi yang seimbang dan menarik. Kelompok ketiga (teknik komposisi umum lainnya) juga muncul di seluruh halaman.

• Diagonal: Sebuah diagonal atau layout berbentuk S dapat menciptakan beberapa gerakan pada desain Anda,  membantu mata menuntun mata penonton di seluruh halaman. Ini sering lebih menarik secara visual daripada desain berbasis grid tradisional yang hanya menggunakan orientasi horisontal dan vertikal.

12. Kontras dengan Sesuatu Yang Tak Terduga

Teknik komposisi di atas efektif sebagian karena tidak terduga. Mereka tidak lurus, atau tidak berpusat, tidak khas. Elemen kejutan ini dapat menjadi cara yang bagus untuk menciptakan kontras dalam desain. Menambahkan sesuatu yang tak terduga, misalnya, warna pop yang terang dalam desain netral, memecah kesamaan atau keseragaman dan membuat penonton tetap tertarik.

Cara tipografi berinteraksi dengan fotografi di halaman pendaratan ini tidak biasa dan memberikan desain sederhana dan sederhana sedikit tambahan pizzazz.

13. Kontras Dengan Pengulangan & Pola

Secara strategis menerapkan elemen atau pola desain yang berulang dapat menciptakan minat fokus atau visual dengan cara yang serupa dengan teknik komposisi yang baru saja disebutkan. Atau mengulangi tema visual dapat membantu memberikan dampak yang lebih besar dalam sebuah desain.

Desain kartu nama desainer grafis ini menggunakan pola untuk mengimbangi dan membingkai tipografi, yang merupakan titik fokus. Sebagai sentuhan yang bagus, pola tersebut mencerminkan bentuk logo pribadi perancang untuk mengikat merek tersebut.

14. Kontras Dengan Posisi & Orientasi

Setiap desain membutuhkan beberapa jenis struktur organisasi: teks diselaraskan dengan cara tertentu, elemen ditugaskan ke posisi tertentu dalam layout, jarak diatur. Meski konsistensi adalah kunci untuk desain yang teratur, mencampuradukkan sesuatu dengan cara yang terencana dan terbatas dapat menambahkan beberapa kontras yang menarik.

Logo di bawah ini menggunakan orientasi miring untuk membantu bagian tipografinya menonjol berlawanan dengan teks lurus dan teratur yang mengelilinginya. Ekstra kontras diraih dengan memasangkan naskah dan jenis sans serif.

15. Kontras Dengan Jarak & Pemisahan

Sengaja mengelompokkan objek tertentu dapat menunjukkan jika mereka saling terkait dan membantu mengatur desain Anda agar mudah dinavigasi. Demikian juga, dengan memisahkan benda dapat membantu membagi sebuah desain menjadi bagian yang berbeda. Kontras juga dapat dicapai dengan kuantitas: satu objek tunggal di antara kelompok beberapa objek (atau sebaliknya) tentu akan terlihat menonjol.

Untuk desain teks yang banyak seperti resume, struktur yang baik adalah kuncinya. Di sini, kedekatan, kesejajaran, dan warna semua bergabung untuk membuat sebuah halaman yang penuh informasi mudah dinavigasi.

16. Kontras Dengan Isyarat Visual

Studi menunjukkan bahwa orang-orang mengingat 80% dari apa yang mereka lihat, yang merupakan salah satu alasan mengapa desain dapat menjadi alat yang hebat. Tapi rentang perhatian bisa singkat, dan terkadang pembaca membutuhkan sedikit dorongan ke arah yang benar untuk mengetahui di mana fokus pada desain Anda. Dari situlah isyarat visual dapat berguna. Anda mungkin secara harfiah menunjukkan elemen desain dengan panah atau menyorotnya dengan mengelilinginya dengan lingkaran atau bentuk lainnya. Atau di blok teks, hal ini mungkin dilakukan dengan bentuk garis bawah, titik butir, atau ikon yang memvisualisasikan konsep yang sedang dibahas (seperti di bawah).

17. Kontras Dengan Fitur Kompleks & Sederhana

Desain dapat menggabungkan gaya sederhana dan kompleks atau fitur individual untuk meningkatkan kontras. Ini adalah contoh lain yang menggunakan hal yang berlawanan untuk saling menguatkan. Gagasan ini digunakan untuk efek yang baik pada stiker berikut, di mana pola bunga hiasan memunculkan tipografi yang bersih dan sederhana,  faktanya adalah tipografi dan lingkungan sekitarnya sangat berbeda sehingga membuat hasil keseluruhan lebih dramatis dan menarik.

18. Kontras Dengan Kombinasi Font

Tipografi adalah bagian penting dari kebanyakan desain, dan memberikan kesempatan unik untuk menambahkan kontras. Meskipun pada dasarnya semua metode untuk menambahkan kontras yang telah kami bahas di sini dapat diterapkan pada tipografi, ada beberapa pertimbangan khusus yang harus diperhatikan saat memilih dan menerapkan font atau membuat tipografi khusus untuk desain Anda.

Mari lihat beberapa diantaranya dengan tiga poin terakhir kami; pertama, menggabungkan font Jika Anda menggunakan lebih dari satu font untuk desain, memastikan pilihan Anda cukup kontras akan menjadi kunci sukses desain. Font perlu dibedakan secara visual satu sama lain, cukup berbeda sehingga Anda dapat menetapkan "pekerjaan" yang berbeda dengan mereka dalam desain Anda. Satu jenis huruf mungkin untuk tajuk utama atau judul, dengan judul teks lainnya. Tapi memilih font yang terlalu mirip bisa terlihat membingungkan atau seperti kesalahan.

Aturan dasar praktis adalah memilih satu serif dan satu font sans serif. Ini sering merupakan kombinasi yang saling melengkapi, namun juga memiliki kontras yang bagus. Untuk melihat lebih mendalam proses ini, lihat 10 tip kami tentang penggabungan font.

Logo tipografi di bawah ini memasangkan sans serif dengan font serif lempeng (plus skrip) untuk desain seimbang sempurna yang bergantung pada pilihan jenisnya untuk kontras.

19. Hati-Hati Saat Membandingkan Tipografi

Saat mengkombinasikan font, Anda memang ingin kontras, tapi Anda tidak ingin konflik. Dua pilihan font yang sangat berbeda satu sama lain dapat bertabrakan, yang mana selain jika Anda menginginkan gaya yang disengaja, biasanya tidak terlihat bagus. Apakah tipografi dapat bekerja sama atau tidak sering hanya berdasarkan firasat atau naluri daripada aturan yang jelas; percaya penilaian Anda, perhatikan catatan kombinasi huruf Anda melihat itu bekerja dengan baik, dan terus berlatih, sebelum Anda menyadarinya, menggabungkan font akan tampak seperti naluri alami.

Infografis di bawah ini menampilkan beberapa font berbeda untuk tampilan eklektik yang menyenangkan (yang sesuai dengan nada humornya) namun tidak ada yang begitu "nyaring" sehingga bentrok; Sebenarnya, mereka bekerja sama dengan baik untuk keperluan desain ini.

20. Kontras Dengan Tipografi Gaya & Bobot

Banyak font hadir dengan berbagai pilihan, seperti versi huruf tebal, tebal, miring, rapat, memanjang, atau kecil. Hal ini membuat pekerjaan Anda sedikit lebih mudah, meskipun Anda hanya menggunakan satu font dalam desain Anda, alternatif ini dapat mengatur teks Anda dan menciptakan kontras antara fitur tipografi yang berbeda. Coba tambahkan variasi ukuran titik atau warna untuk kontras ekstra.

Desain ini menggunakan bobot ringan dan berat dari font sans serif yang sama untuk tampilan yang dipoles. Font serif juga membuat penampilan cameo untuk kontras ekstra.

Sekarang setelah Anda mengetahui beberapa cara untuk menambahkan kontras pada desain Anda, kini waktunya untuk menerapkannya. Silahlan membagikan hasil Anda atau memadukan dengan teknik penguat kontras lainnya di bagian komentar di bawah ini. Seperti biasa, selamat mendesain!

Bawa desain hebat ke seluruh hidup Anda

Mulailah merancang!