Langsung ke konten utama

Kotras dalam desain

Ketika menyebutkan kontras kebanyakan kita langsung terpikir warna. Padahal kontras warna adalah salah satu dari jenis atau alat untuk mencapai kontras. Kontras bisa tercapai dengan warna, bentuk, ukuran atau properti sejenis dari elemen-elemen yang berbeda.

Kontras memberikan 2 (dua) fungsi yang sangat penting. Pertama, itu akan membuat satu elemen/objek lebih menonjol dibandingkan dengan objek yang lainnya. Fungsi penting yang kedua yaitu aksesibilitas atau kemudahan dalam menerima informasi (dari desain).

Contoh penerapan prinsip kontras dalam desain:

Kontras dalam bentuk 

Ketika kita melihat 2 bentuk yang serupa, yang satu sederhana dan satunya lebih rumit maka mata kita akan lebih tertarik dengan bentuk yang lebih rumit. 


Kontras dalam warna 

Terlepas dari bentuk yang beraneka ragam, dari gambar di atas kita akan lebih tertarik pada warna yang lebih gelap. Warna yang berbeda dari kebanyakan elemen akan memberikan perhatian yang lebih. 


Kontras dalam skala

Berlaku juga untuk kontras dalam skala. Elemen yang lebih besar dari kebanyakan elemen atau lebih kecil akan memberikan perhatian. 


Kontras dalam tulisan atau tipografi 

Sering digunakan untuk membuat struktur dan hierarki. Ada beberapa metode untuk membuat kontras dalam tipografi: alignment, typeface (jenis tulisan), ukuran teks, warna dan berat teks. 





https://dribbble.com/resources/principles-of-design

https://254-online.com/contrast-principle-of-design/

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Tips Affinity Designer

1. Color coding, yaitu penanda warna pada layer untuk membedakan dengan layer lainnya. Cari di klik kanan layer yang dipilih.  2. Save history, untuk menyimpan history bersama dengan dokumen yang kita buat. 3. Isolation mode, untuk fokus melihat/mengubah layer tertentu tanpa gangguan gambar secara keseluruhan. Caranya, klik layer/group layer yang akan kita edit sambil klik tombol alt .  4. Shortcut untuk opacity, tekan angka 1 untuk 10%, 2 untuk 20%, dst.  5. Rasterize. Ini untuk membuat layer/group menjadi gambar/pixel.   Sumber : 
Posting Komentar
Baca selengkapnya

Cara Optimasi Largest Contentful Paint (LCP)

Sebelumnya, telah kita ketahui apa itu Largest Contentful Paint (LCP) dan faktor apa saja yang mempengaruhinya. Selanjutnya kita ukur LCP pada website.  Berikut ini rekomendasi Google untuk mengukur LCP : PageSpeed Insights Search Console  (Core Web Vitals report) Chrome User Experience Report  (membutuhkan akun Google dan Google Cloud Project Ada beberapa masalah yang timbul ketika melakukan optimasi pada LCP ini, yaitu: Slow server response times Render-blocking JavaScript and CSS Slow resource load times Client-side rendering Setelah kita tahu beberapa masalah yang sering muncul, sekarang tentu pertanyaannya bagaimana cara mengoptimasinya? Sebenarnya untuk melakukan optimasi, harus dengan mengevaluasi langsung website yang bermasalah. Karena tiap website memiliki script dan konfigurasi yang berbeda. Tapi secara umum optimasi bisa dilakukan pada image, CSS, JavaScript, dan server.  Jika anda perhatikan pada bagian “elemen yang dihitung pada LCP” yang dibahas sebelumnya, empat dari 5
Posting Komentar
Baca selengkapnya

Bullets and Numbering Affinity Designer 1.8

Aplikasi Affinity Designer (versi 1.8.5) ini sudah cukup lengkap (MasyaaAllah) , termasuk ketika kita mendesain layout yang tidak bisa lepas dari text dan segala macamnya. Bullets and Numbering yang biasanya ada di aplikasi pengolah kata dan layout pun tersedia di aplikasi pengolah vector ini.  Untuk mengubah jarak antara bullet atau nomor dengan text buka tab Charracters. Di sana ada pengaturan yang cukup lengkap. Sedangkan untuk menambahkan paragraf baru tanpa menambahkan nomor atau bullet tekan shift + enter. Jika ingin paragraf baru tersebut sejajar dengan text di atasnya, ubah tabstop sesuai dengan text di atasnya dan tekan tab pada keyboard. 
1 komentar
Baca selengkapnya