Prinsip Penekanan dalam Desain: Contoh dan Teknik

Penekanan dalam desain menentukan di mana audiens Anda melihat pertama, kedua, dan seterusnya. Ini adalah prinsip yang bertanggung jawab untuk mengubah tata letak yang datar menjadi percakapan visual yang jelas, di mana pesan yang paling penting menarik perhatian sebelum hal lain pada halaman.

Tanpa penekanan, setiap elemen pada kanvas bersaing untuk mendapatkan perhatian sekaligus. Judul mengabur ke dalam teks tubuh. Ajakan bertindak menghilang ke latar belakang. Pemirsa bergulir menjauh, tidak yakin apa yang penting.

Untuk bacaan terkait, lihat panduan kami tentang desain inklusif yang membuat visual dapat diakses.

Dengannya, Anda mengontrol urutan perhatian. Anda memutuskan apa yang mendominasi halaman, apa yang mendukung, dan apa yang surut. Apakah Anda membuat grafik media sosial, presentasi, atau laporan data, penekanan memberi Anda kekuatan untuk mengarahkan mata pemirsa di sepanjang jalur yang disengaja.

Panduan ini menguraikan tujuh teknik untuk menciptakan penekanan, mengeksplorasi psikologi di balik mengapa teknik-teknik tersebut berhasil, dan menunjukkan contoh nyata di seluruh desain web, cetak, dan media sosial.

Penekanan dalam desain melibatkan pembuatan elemen tertentu yang lebih menonjol daripada elemen lainnya. Hal ini membantu Anda menarik perhatian pemirsa ke informasi tertentu dan memandu mereka melalui desain.

Otak kita terhubung untuk memperhatikan hal-hal yang lebih besar, lebih terang, dan lebih berani daripada konten lainnya. Penekanan adalah pilihan yang disengaja untuk menggunakan kecenderungan ini dan mengarahkan perhatian audiens ke tempat yang Anda inginkan.

Dengan menerapkan prinsip-prinsip penekanan, selebaran berubah dari sesuatu yang menjemukan dan membosankan menjadi sesuatu yang langsung menarik perhatian Anda dan mengkomunikasikan pesan yang jelas.

Apakah Anda siap untuk menggunakan metode yang sama dalam desain Anda?

Penekanan adalah perbedaan antara tata letak yang dipindai orang dalam dua detik dan tata letak yang benar-benar mereka gunakan. Ketika Anda mengontrol elemen mana yang paling berat secara visual pada sebuah halaman, Anda mengontrol urutan informasi yang sampai ke otak. Untuk setiap desain yang dimaksudkan untuk menginformasikan, membujuk, atau mendorong tindakan, taruhannya besar: buatlah hierarki yang benar, dan audiens Anda menyerap pesan inti hampir seketika; salah, dan mereka akan pergi.

Ini memandu mata pemirsa di sepanjang jalur yang direncanakan

Penglihatan manusia tidak memproses seluruh halaman sekaligus. Mata bergerak dalam lompatan cepat (saccades) di antara titik-titik fiksasi, dan mata condong ke arah elemen yang memiliki kontras, ukuran, atau isolasi yang paling besar, secara relatif terhadap sekelilingnya. Penekanan memberi Anda pengaruh langsung pada titik-titik fiksasi tersebut. Judul yang tebal di bagian atas infografis, tombol ajakan bertindak berwarna dengan latar belakang netral, statistik besar di tengah laporan: masing-masing berfungsi sebagai rambu-rambu yang memberi tahu pemirsa, “Mulai dari sini.”

Ini menciptakan hierarki komunikasi

Desain jarang sekali membawa pesan tunggal. Sebuah halaman arahan mungkin perlu mengkomunikasikan nama produk, pernyataan nilai, harga, dan langkah selanjutnya. Penekanan memberikan peringkat pada masing-masing pesan ini. Titik fokus utama mendapatkan sinyal visual terkuat (ukuran terbesar, kontras tertinggi). Detail pendukung menerima sinyal moderat. Informasi latar belakang menjadi surut. Tanpa tingkatan ini, pemirsa harus melakukan pekerjaan pengurutan, dan sebagian besar tidak akan repot-repot.

Meningkatkan kecepatan pemahaman

Penelitian tentang pemrosesan visual menunjukkan bahwa pembaca membentuk kesan pertama dari sebuah halaman web dalam waktu kurang lebih 50 milidetik. Pada saat-saat pembukaan tersebut, penekanan menentukan apa yang akan diperhatikan. Titik fokus yang ditempatkan dengan baik mengurangi beban kognitif pada pemirsa dengan menjawab pertanyaan “Apa yang harus saya perhatikan?” sebelum pikiran sadar selesai bertanya. Untuk laporan yang padat data, grafik sosial yang sibuk, dan presentasi multi-bagian, keuntungan kecepatan ini menambah bagian demi bagian.

Anda mungkin juga akan menemukan artikel kami mengenai desain informasi yang bermanfaat.

Mendorong keterlibatan dan konversi

Dalam konteks digital, penekanan adalah alat konversi. Studi e-commerce secara konsisten menemukan bahwa warna tombol, ukuran, dan ruang kosong di sekitarnya memengaruhi rasio klik-tayang dengan persentase dua digit. Ajakan bertindak dengan penekanan yang kuat (kontras tinggi dengan latar belakangnya, padding yang besar, penempatan yang menonjol di atas lipatan) mengungguli tombol yang terkubur di antara elemen-elemen yang bersaing. Logika yang sama berlaku untuk header email, grafik media sosial, dan slide presentasi: elemen yang Anda inginkan untuk ditindaklanjuti oleh orang-orang harus memiliki bobot visual yang paling besar.

Ini adalah prinsip dasar di samping kontras, keselarasan, pengulangan, dan kedekatan

Penekanan tidak bekerja sendiri-sendiri. Hal ini berada di samping empat prinsip inti desain lainnya: kontras, keselarasan, pengulangan, dan kedekatan (kadang-kadang dikelompokkan di bawah singkatan CARP). Kontras memberikan penekanan pada alat yang digunakan. Keselarasan dan pengulangan menciptakan pola dasar yang dapat digunakan untuk membebaskan elemen yang ditekankan. Kedekatan mengelompokkan konten yang terkait sehingga titik fokusnya menonjol. Memahami penekanan sebagai bagian dari keluarga ini, dan bukan sebagai trik yang berdiri sendiri, memisahkan tata letak yang kompeten dari tata letak yang luar biasa.

Cara mata manusia memindai desain adalah sebagian dari biologi dan sebagian lagi dari pengaruh budaya. Ada beberapa pola yang cenderung diikuti oleh mata kita:

• Gerakan sekuensial: Mata kita cenderung melompat-lompat alih-alih memindai dengan mulus
• Pola Z: Dalam budaya Barat, mata kita sering bergerak dari kiri atas ke kanan atas, kemudian melompat secara diagonal ke kiri, lalu bergerak ke kanan bawah
• Pola F: Apabila kita membaca sesuatu dengan banyak teks, mata kita sering mengikuti pola F, terutama berfokus pada konten di sisi kiri

Anda mungkin sudah menggunakan teknik-teknik ini. Mengetahui mengapa setiap teknik tersebut berhasil akan membantu Anda menerapkannya dengan sengaja.

Hasilnya? Grafis yang memikat yang menginspirasi audiens Anda untuk mengambil tindakan.

Elemen yang lebih besar secara alami menarik perhatian dan terasa lebih penting, dan elemen yang lebih kecil memudar ke latar belakang. Otak kita mengasosiasikan ukuran dengan hierarki, jadi semakin besar sesuatu, semakin penting kita melihatnya.

Buatlah konten yang paling penting – seperti judul dan CTA – lebih besar dari elemen lainnya. Namun, jaga agar pilihan ukuran Anda tetap proporsional sehingga elemen yang lebih besar tidak mengerdilkan grafis yang lebih kecil.

Bahkan sebelum membaca judul laporan ini, ikon dan grafik yang besar memperjelas apa yang bisa pembaca pelajari. Karena orang hampir selalu membaca sekilas konten, ini adalah cara yang efektif untuk menarik perhatian mereka.

Warna-warna cerah atau kontras membantu menonjolkan berbagai elemen. Kontras yang tinggi-seperti hitam di atas putih- dan warna-warna yang saling melengkapi untuk menarik perhatian.

Gunakan kontras warna untuk menyoroti elemen-elemen penting seperti tombol CTA atau navigasi situs sehingga orang tidak perlu mencari informasi penting. Namun, 4,5 persen dari populasi buta warna, jadi jangan terlalu mengandalkan prinsip ini saja.

Mata Anda akan langsung tertuju pada bagian figur utama dari brosur rangkap tiga ini, di mana kotak-kotak hijau dan putih yang cerah tampak menonjol pada latar belakang biru tua.

Mencari yang lainnya? Lihatlah prinsip-prinsip desain kesatuan.

Mengelilingi sebuah elemen dengan ruang kosong membuatnya terasa lebih penting dan lebih mudah diperhatikan. Ruang kosong, juga disebut ruang negatif, memberikan mata Anda istirahat dan mencegah pemirsa terlalu terstimulasi oleh desain Anda.

Gunakan ruang putih di sekitar elemen penting apa pun agar mereka tidak tersesat dalam lautan konten. Teknik ini sangat efektif jika Anda ingin menyampaikan kesan mewah atau minimalis.

Ketika Anda menentukan di mana ruang negatif Anda akan berada, pertimbangkan bagaimana Anda dapat menjaga keseimbangan tata letak Anda. Terlalu banyak ruang kosong di satu area akan membuat desain terlihat timpang, dan jarak yang tidak rata dapat terlihat ceroboh.

Banyaknya ruang putih dalam templat resume ini mengkomunikasikan bahwa hanya informasi penting yang disertakan – dan ruang negatif di sekitar detail kontak memudahkan manajer perekrutan untuk menghubungi.

Ukuran, ketebalan, dan gaya huruf Anda mengkomunikasikan berbagai pesan. Huruf tebal menunjukkan perhatian, huruf miring menunjukkan kehalusan, dan huruf besar menandakan bahwa ada sesuatu yang mendesak.

Pada umumnya, sebaiknya menggunakan teks tebal untuk judul dan subjudul, huruf biasa untuk teks isi, dan huruf miring untuk penekanan sesekali.

Jaga konsistensi desain Anda dengan tetap menggunakan dua keluarga font agar tidak membebani pembaca. Kami sarankan untuk menggunakan font utama untuk judul dan font sekunder untuk teks isi. Pelajari lebih lanjut tentang berbagai jenis font.

Percaya atau tidak, semua teks pada sertifikat ini menggunakan jenis huruf yang sama: Palanquin Dark. Dengan mengubah ukuran, berat, dan gaya font, Anda dapat menyoroti bagian tertentu sekaligus mempertahankan konsistensi.

Meskipun koran fisik menjadi semakin usang, menjaga konten penting ‘di atas lipatan’ tetap merupakan teknik yang berharga. Item di bagian atas atau tengah desain Anda lebih mungkin untuk diperhatikan.

Tempatkan konten Anda yang paling penting di tempat yang akan langsung terlihat. Pada halaman web, itu adalah bagian tengah atas, dan untuk materi cetak, itu adalah bagian depan dan tengah.

Anda bisa melanggar aturan penjajaran standar, tetapi Anda tetap harus menciptakan keseimbangan asimetris. Ketidaksejajaran yang disengaja adalah cara untuk menciptakan penekanan, tetapi ketidaksejajaran yang tidak disengaja bisa terlihat tidak rapi.

Tidak mungkin melewatkan desktop yang diposisikan di bagian depan dan tengah selebaran ini, dan karena itu, pemirsa juga lebih cenderung membaca teks di dalamnya.

Mata kita dengan cepat melihat apa yang berbeda – tanyakan saja pada siapa saja yang pola ubinnya tidak sejajar selama renovasi rumah. Ketika Anda menginterupsi pola atau menambahkan tekstur pada sebuah desain, akan sangat mudah untuk menekankan elemen-elemen di dekatnya.

Tambahkan pola pada latar belakang atau tekstur pada elemen aksen Anda untuk menciptakan daya tarik visual. Hal ini juga bisa mengatur suasana hati untuk keseluruhan desain; misalnya, apa pun yang memiliki tekstur kayu akan terasa seperti pedesaan, sementara latar belakang batu bata memiliki kesan yang nyaman.

Kontras adalah hal yang penting apabila memilih pola atau latar belakang. Sesuatu dengan kontras rendah akan menyatu sampai ke titik di mana seluruh desain terasa kacau dan berlebihan.

Kami juga membahas hal ini dalam artikel kami tentang psikologi bentuk.

Latar belakang bertekstur daun pada selebaran ini memungkinkan teks di bagian tengah bersinar, dan warnanya menambah kehangatan pada desain.

Gerakan, baik yang nyata maupun tersirat, memandu mata pemirsa Anda melalui desain. Anda dapat menggunakan animasi, garis, dan panah untuk membantu orang menemukan elemen yang ingin Anda tonjolkan.

Gunakan gerakan dan arah untuk menunjuk ke arah CTA Anda atau buat aliran visual saat Anda menyajikan informasi yang kompleks.

Garis dan panah sangat membantu, tetapi gunakanlah secara hemat. Terlalu banyak gerakan tersirat akan menyulitkan pemirsa untuk mengetahui ke mana harus mencari.

Garis vertikal yang membentang di sepanjang templat ini memandu pembaca ke bawah saat mereka memindai, membantu mereka bergerak ke seluruh halaman.

Merasa buntu? Berikut ini ada beberapa cara untuk memasukkan penekanan dan menyampaikan pesan Anda.

Formulir tangkapan popup email PBH Foods menggunakan ukuran dan warna untuk menarik pengunjung untuk membagikan informasi kontak mereka dengan imbalan diskon.

Gambar mini pada gulungan Milk Makeup ini menggunakan ruang putih untuk menarik perhatian pemirsa ke produk mereka.

Latar belakang bertekstur dari grafik Instagram ini menambah kedalaman, dan warnanya yang gelap, sangat kontras dengan teks putih.

Panah di sebelah kiri poster ini menciptakan gerakan dan memandu mata Anda ke arah teks di sebelah kanan.

Halaman judul bertekstur untuk brosur ini menambah dimensi dan daya tarik visual sehingga pembaca tidak bisa tidak mengambilnya.

Agenda presentasi ini menggunakan gerakan untuk mengindikasikan pengalaman yang mulus saat bergerak melalui slide.

Sementara itu, karena presentasi ini sarat dengan data, presentasi ini menggunakan beberapa prinsip untuk menyoroti informasi keuangan utama. Kontras, spasi kosong, dan ukuran huruf semuanya menarik perhatian pada titik data senilai $145 miliar.

Piktochart dilengkapi dengan berbagai alat dan fitur untuk membantu Anda membuat penekanan pada grafik yang Anda rancang.

Untuk bacaan terkait, baca panduan kami mengenai hierarki visual.

Pada bagian komponen desain, Anda dapat memilih dari Judul & Frasa yang sudah jadi atau Lencana & Stiker. Templat ini menggunakan font dan warna campuran untuk membantu teks Anda menonjol.

Untuk teks biasa, sesuaikan ukuran dan berat font Anda untuk menarik perhatian pada judul atau teks penting lainnya. Anda juga dapat mengubah warna teks dengan menggunakan pemilih warna atau memasukkan kode HEX tertentu.

Pada postingan Instagram di bawah ini, judul aslinya ada di sana, tetapi sulit dikenali di antara semua teks lainnya.

Hanya dengan memindahkan beberapa elemen dan memberikan ruang pada judul untuk bersinar, ini langsung menarik perhatian Anda

Menambahkan teks di dalam bentuk adalah cara yang sempurna untuk menekankan statistik utama atau CTA. Gunakan bingkai untuk mengelompokkan konten yang terkait dan buat bagian berbeda yang menarik perhatian pembaca Anda.

Karena ditekankan dalam persegi panjang ungu, statistik 47% melompat keluar, menyoroti fakta bahwa kandidat harus memiliki pengetahuan latar belakang tentang perusahaan yang mereka lamar.

Ruang kosong tidak membuat desain Anda terlihat kosong – ruang kosong justru membantunya terlihat bersih. Untuk memastikan spasi putih yang merata di sekitar setiap elemen, gunakan kisi dan alat perataan.

Warna-warna yang cerah dan kontras akan membantu pemirsa untuk menemukan informasi penting secara instan. Piktochart menawarkan skema warna siap pakai yang memberikan kontras tinggi, seperti opsi-opsi yang tersedia untuk laporan analisis keuangan-

Jika Anda ingin membuat palet warna Anda sendiri, gunakan pemeriksa kontras untuk menentukan rasio kontras. Meskipun alat ini sering digunakan untuk menjaga aksesibilitas situs, alat ini juga dapat memastikan dua warna cukup berbeda sehingga teks Anda terlihat jelas dengan latar belakang.

Para ahli menyarankan untuk mempertahankan rasio 4,5:1, meskipun 3:1 sesuai untuk teks yang besar, seperti judul.

Membuat visual Anda sendiri menjadi tidak terlalu menakutkan jika Anda memahami prinsip-prinsip yang membantu visual tersebut terlihat bagus dan efektif. Jika Anda siap untuk mulai mendesain, lihat perpustakaan templat kami atau gunakan Piktochart AI.

Alat bantu seperti generator infografis bertenaga AI kami dapat membantu Anda membuat desain berkualitas dalam hitungan detik-tanpa perlu keahlian.

Titik penekanan utama adalah menarik perhatian pemirsa ke informasi utama. Hal ini membantu mengkomunikasikan pesan yang paling penting, sehingga meskipun mereka membaca sekilas konten lainnya, mereka tetap dapat menangkap ide utamanya.

Untuk menciptakan penekanan dalam desain Anda, gunakan strategi termasuk:

• mengubah ukuran dan skala elemen
• menggunakan warna dan kontras untuk menciptakan fokus
• termasuk banyak ruang kosong di sekitar elemen-elemen utama
• mengubah tipografi dan berat huruf Anda
• menempatkan elemen secara strategis
• menyertakan tekstur atau pola dalam desain Anda
• menggunakan panah dan garis untuk menyiratkan gerakan