badge

Tuesday, April 5, 2016

Prinsip Dasar CRAP

"We often look at the people who can accomplish things that we can’t and we just assume they have a talent we’ll never have. They can design things. I can’t. I can’t even draw"

Kalimat di atas saya quote dari sebuah postingan di sebuah blog http://bit.ly/1N5zagk, si penulis menceritakan pengalaman kegagalannya bertahun - tahun melatih anjing peliharaannya. Sewaktu dia berumur 10 tahun mendapatkan anjing peliharaan baru dan di beri nama Ewok. Dia ingin sekali melatih Ewok untuk mengikuti perintah - perintahnya misalnya duduk, berguling, mengambil barang dan sebagainya, namun selalu gagal.

Fast forward ke tahun 2013 penulis ini sudah dewasa dan menikah, suatu hari menemukan anjing terlantar dan mengadopsinya. Anjing tersebut kemudian diberi nama Bailey. Teringat kegagalannya melatih anjing, kemudian dia berencana untuk mendaftarkan Bailey ke tempat pelatihan anjing. Jadwal pelatihan anjing ini adalah 8 kali pertemuan seminggu sekali dan tiap pertemuan durasinya 2 jam. Selama sesi latihan ini pemilik anjing harus ikut mendampingi anjingnya. Bailey menunjukkan kemajuan pesat dan mau mengikuti perintah - perintahnya. Kemudian pemilik anjing ini sadar bahwa selama mendampingi pelatihan ini sebenarnya yang berlatih bukanlah Bailey, tapi dialah yg telah berlatih vocabulary untuk memerintah anjingnya. Dia merasa amazing sekali bahwa 16 jam waktu yg dihabiskan untuk melatih Bailey lebih efektif daripada waktu yang telah dihabiskan bertahun - tahun untuk melatih Ewok.

Geoff Martin seorang SoundMeister mengatakan bahwa orang - orang sering salah mengasumsikannya memiliki kemampuan lebih pada pendengarannya melebihi orang - orang normal. Dia menyangkal hal ini sambil menjelaskan bahwa yang membedakannya dengan orang lain adalah bukan pada kemampuan pendengarannya melainkan dia memiliki vocabulary yang orang - orang lain tidak punya. Jadi contohnya ketika orang - orang mengatakan suara berisik (noise) di loudspeaker terdengar seperti bom, Geoff Martin akan mengatakan bahwa ada gangguan resonansi pada frekuensi 78 Hz. Mereka mendengar problem yang sama, namun Geoff mengekpresikannya dengan berbeda.

Semua ini kuncinya adalah pada Vocabulary, Once you can name something, you’re conscious of it. You have power over it. You own it. You’re in control

Postingan ini memang tentang Vocabulary, dan kebetulan sekali saya sedang tertarik belajar design karena saya ingin juga menampilkan visualisasi pada tulisan saya agar lebih mudah dimengerti oleh pembaca. Saya sadar saya cuma bisa menulis dan bukan orang design, tentunya akan butuh waktu bertahun - tahun buat belajar design. Tanpa menemukan vocabulary yg tepat, belum tentu juga yang saya pelajari ternyata pada track yang benar, alih - alih membuat saya menguasai design malah mungkin membuat saya stuck, malas belajar dan makin menjauhkan saya dari skill tersebut.

Sampai kemudian saya menemukan sebuah ebook di Amazon karangan Robin Williams (bukan aktor  di film Jumanji lho) judulnya “The Non-Designer’s Design Book”, dilihat dari judulnya saja kayaknya pas banget ya, yang artinya Buku Design untuk orang yang gak ngerti design (seperti saya) :)



Yang menarik dari buku ini buat saya adalah tentang 4 Prinsip Dasar Design yang muncul pada karya - karya yang well-designed, yaitu:

  1. Contrast
  2. Repetition
  3. Alignment
  4. Proximity

atau disingkat CRAP, ya.. inilah Vocabulary yang saya maksud, tentunya masih banyak tip - tip menarik di buku ini, saya hanya akan membahas tentang CRAP ini. Saya akan mencoba menjelaskan dengan visualisasi, semoga penjelasan singkat ini bisa dimengerti.

Proximity

Adalah item - item yang saling berelasi satu sama lain sebaiknya di jadikan 1 group yang saling berdekatan. Tujuannya adalah dengan menjadikannya 1 visual unit akan memudahkan dalam mengorganisasi informasi, tidak berantakan dan memberikan struktur yang mudah dipahami oleh pembaca.

Alignment

Maksudnya adalah jangan menaruh item pada halaman secara semaunya. Setiap element harus punya koneksi secara visual dengan element yang lain. Hal ini agar terlihat bersih dan enak dipandang.

Repetition

Maksudnya adalah menampilan visual element dengan pola yang berulang pada suatu page. Bisa diterapkan pada Color, Shape, Texture, Ketebalan Garis, Font, Ukuran, Graphic Concept, dan lain - lain. Hal ini untuk membuatnya terlihat terorganisir dan memperkuat kesatuan makna.

Contrast

Maksudnya adalah agar element - element yang tujuannya berbeda dibikin Contrast, baik dari Color, Type, Size, Ketebalan, Bentuk, Jarak dan lain - lain. Intinya buatlah menjadi sangat berbeda, hingga pembaca langsung tahu dari pandangan pertama. Contrast ini sering menjadi penarik perhatian utama. Itulah sebabnya Contrast ini saya sebut terakhir

Contoh penerapan prinsip CRAP


Agar lebih enak dan lebih mudah dimengerti mendingan langsung praktek aja ya, "a picture worth a thousand words" :)

Untuk contohnya ini saya akan mencoba membuat sebuah Image atau Poster dari sebuah puisi karya Kent M Keith yaitu The Paradoxical Commandments. Mungkin teman - teman bisa Googling dengan keyword "paradoxical commandments" dan klik tab "Images", ada puluhan atau mungkin ratusan image dari puisi tersebut. Kalau jeli kita akan tahu dari image - image tersebut hampir sebagian besar memiliki persamaan, apa persamaannya nanti akan kita bahas.

Berikut contoh illustrasi puisi aslinya sebelum diapa-apain


Penerapan Proximity

Puisi di atas bisa dikelompokkan menjadi bait - bait yang mana tiap baitnya terdiri dari 2 baris. Kemudian Judul, nama pengarang dan copyright bisa dikelompokkan menjadi 1 group seperti terlihat pada illustrasi di bawah ini.

Penerapan Alignment

Saya akan menjawab pertanyaan sebelumnya, "Apa persamaan dari image - image hasil search google tadi?" , jawabannya adalah mayoritas dari image - image tersebut menggunakan Align Center alias Rata Tengah. Saya sebagai pemula juga sering 'terjebak' menggunakan Align Center ini, seperti ini misalnya



Saya tidak mengatakan kalau Center Alignment ini jelek, maksud saya adalah jika harus menggunakannya harus ada alasannya dan melakukannya secara sadar. Untuk bagian penerapan Alignment ini saya memilih Right Align alias Rata Kanan, alasan saya adalah baris ke-2 dari tiap bait puisi ini semua berakhiran sama yaitu "anyway" dan saya ingin semua kata "anyway" ini berada pada satu garis lurus. Sehingga setelah di Right Align menjadi


Penerapan Repetition

Pada tahap repetition ini setiap Bait saya tandai dengan pengulangan daun shamrock, dan setiap baris ke-2 pada bait saya tandai dengan pengulangan cetak tebal, karena baris ke-2 ini berisi inti dari wisdom puisi ini. Penebalan font ini membuat puisinya jadi lebih tegas maknanya.


Penerapan Contrast

Pada tahap - tahap di atas kita masih susah untuk membedakan judul. Pada tahap ini saya mengkontraskannya dengan membesarkan size dari judul dan memberikan cetak tebal, sedangkan copyright saya kecilkan sizenya karena bagian ini tidak penting buat pembaca. Ukuran font dari baris ke-2 tiap bait juga saya perbesar untuk lebih menegaskan perbedaannya.

Hasil Akhir

Berikut adalah hasil akhirnya. Ada penambahan image pohon untuk melambangkan sebuah proses pertumbuhan karakter, oleh karena itu agar repetitivenya konsisten maka daun shamrock sebelumnya saya remove dan ganti dengan daun yang sesuai dari pohon tersebut. Demikian semoga penjelasan singkat ini berguna :) , dan perlu dicatat ini bukan Infographic, karena tidak mengandung informasi data, statistik atau chart :)





22 comments:

  1. Oke, ini keren. Dan saya naksir e-book reader-nya.

    ReplyDelete
  2. Keren tehh... buku design buat yg ga ngerti design, cocok buat sy jg berarti y

    ReplyDelete
  3. Gilingaaan. Keren banget ilmunya Mbak Liiid. Ish jadi mupeng baca bukunya deeeh. *lope-lope

    ReplyDelete
  4. Wah, barakallah Mba Lid, emang lagi nyari2 ebook buat design gitu, secara otak saya selow bener kalau belajar hehehe :D Terima kasih mba Lid udah mau share

    ReplyDelete
  5. ini ngebantu banget buat aku yg gak ngerti apa2 soal desain :D

    ReplyDelete
  6. Huwaaaaaaah, keren Teeeeh *dua jempol*, dan puisinya makjleb bgt ya hohooho

    ReplyDelete
  7. Mbaaak... boleh gak ya dibuat infogragisnya? Lbh efektif loh...

    ReplyDelete
  8. Mbak, ajarin dong bikin gambar kayak yg dikasih liat kemarin hehe

    ReplyDelete
  9. Assalaamu'alaikum wr.wb, mbak Lidya... bagus juga ada usaha mereka yang membantu kekurangan kita yang tidak tahu apa-apa tentang disign ini. Mudahan sesuatu yang bermanfaat akan menambah ilmu dan pengetahuan buat kita, ya mbak. Salam manis dari Sarikei, Sarawak. :)

    ReplyDelete
  10. Keren bgt nih mba post nya. Edukatif.. Inspiring.. Pengennnn

    ReplyDelete
  11. Keren mbak... step by step cara hingga hasil akhirnya dijelaskan dengan mudah. Prakteknya nih yang agak susah.

    ReplyDelete
  12. Bagus ya... Jd pinter gambar ya lid :)

    ReplyDelete
  13. Mbak Lid.. ini keren.. sesuai sm aku yg ga bs desain tp pengen bisa gambar walopu sedikit.. langsung mau cari e booknya. Btw.. ini aku bookmark dulu ya :)

    ReplyDelete
  14. Keren banget, mba Lidya. Gambarnya bagus.

    ReplyDelete
  15. Dek Lia... ini ilmu yang keren nih... pengen nyoba ah.

    ReplyDelete
  16. Bener keren dan bermanfaat nih kaa..
    saya langsung pelajari yaa.. :)

    ReplyDelete
  17. oooo... crap yang itu toh, kiraaain...hehehe. pingin juga punya bukunya mbak lid

    ReplyDelete
  18. Wuah keren banget nih gambarnya. Ajariiin! Eh ini mbuatnya di Mac juga ya?

    ReplyDelete
  19. Keren mba, semangat yah mba untuk belajar designnya ^^ pasti bisaaaa

    ReplyDelete

Terima kasih sudah berkunjung dan berkomentar. Mohon maaf semua komentar di moderasi ya

Related Posts Plugin for WordPress, Blogger...