Graphic Design

“Make it simple, but significant.”
Don Draper

PENGANTAR

Dalam keseharian, manusia banyak sekali berhadapan dengan benda visual di sekelilingnya. Berbicara soal benda visual, iklan kampanye merupakan media yang banyak digunakan perusahaan untuk mempromosikan produk, positioning, dan lain sebagainya.

Mari kita perhatikan beberapa contoh gambar iklan di bawah ini. Dimulai dari 3 gambar dari Faber Castell yang mengkampanyekan “True Colours” untuk produk pensil warnanya. [1] Mobil pemadam kebakaran untuk warna merah, [2] Buah terong untuk warna ungu dan [3] Kulit hiu untuk warna perak.

IKLAN FABEL CASTELL “TRUE COLOURS”

Faber Castell True Colours Campaign (Firetruck)

Faber Castell True Colours Campaign (Eggplant)

Faber Castell True Colours Campaign (Shark)

IKLAN MERAYAKAN RAMADHAN

Kentang goreng McDonalds yang ikonik membentuk dua tangan sedang berdoa

IKLAN PRODUK HEINZ

POSTER FILM

COVID-19

Logo Mobil Audi Mengkampanyekan Social Distancing

Iklan yang misinya untuk tidak dilihat orang

LOGO

WEBSITE DESIGN

Semua contoh desain di atas adalah cara sebuah organisasi atau perusahaan dalam mengkomunikasikan brand atau informasi kepada audiens atau user-nya, dalam bentuk poster, logo dan website. Pada setiap desain, digunakan berbagai elemen-elemen desain yang saling mendukung untuk membuat tampilan informasi yang menarik untuk dilihat dan lalu dibaca. Elemen-elemen desain dapat digunakan untuk menciptakan credibility, mood, simplicity dan contrast.

ELEMEN DESAIN

Terdapat 10 elemen desain, yaitu:

Point
Line
Shape
Pattern
Texture
Space
Size
Typography
Color
Image

POINT

Point atau titik adalah bagian elemen terkecil dari sebuah desain. Titik dapat disusun berulang membentuk texture, gambar, dll.

LINE

Garis adalah tanda yang menghubungkan dua titik.

SHAPE

Segala sesuatu yang memiliki lebar dan tinggi adalah bentuk (shape).

PATTERN

Secara kognitif kita berupaya menemukan makna dengan mengidentifikasi pola dalam berbagai hal.

TEXTURE

Tekstur adalah tampilan atau nuansa/rasa pada sebuah permukaan. Tekstur visual menciptakan ilusi tekstur pada grafik atau halaman web. Anda dapat menambahkan kekayaan dan dimensi pada layout Anda dengan tekstur. Anda dapat menggunakan tekstur untuk menyediakan Affordance. Tekstur dapat menciptakan mood dan kepribadian, membangkitkan rasa berkaitan dengan emosi.

SPACE

Ruang adalah jarak atau area antara atau di sekitar benda. Ruang memisahkan atau menyatukan, menyoroto dan memberi mata untuk istirahat secara visual.

SIZE

Ukuran sangat penting dalam membuat layout yang fungsional, menarik dan teratur. Ukuran dapat menunjukkan apa yang paling penting, menarik perhatian dan membantu menyatukan layout.

TYPOGRAPHY

Tipografi dapat mengatur mood, mengatur nada (tone of voice), mengatur halaman, menciptakan kesatuan antarobyek, dll.

COLOR

Warna dalam layout dapat menyampaikan mood, menciptakan image (kesan), menarik perhatian dan mengidentifikasi obyek. Ketika memilih warna, pikirkan tentang apa yang ingin Anda lakukan dan apa yang sesuai untuk tujuan Anda.

IMAGE

Gambar adalah bagian penting dalam desain grafis. Gambar pada dasarnya terdiri dari tiga jenis:

Foto
Ilustrasi
Lukisan

Gambar dapat diartikan dalam banyak cara dan perbedaan budaya harus diingat ketika “membaca” gambar.

APAKAH KITA HARUS BELAJAR DESAIN GRAFIS?

Bidang User Interface Design (Perancangan Antarmuka Pengguna) dan Human-Computer Interaction (Interaksi Manusia-Komputer) difokuskan pada usability dan interaksi, tetapi Anda tidak dapat menghindarkan bahwa estetika sangat banyak dibahas daripada usability murni. Kesalahan serius dalam desain grafis mempengaruhi usability, jadi Anda harus berusaha untuk membantu menghindari perangkap tersebut. Ada juga sebuah fenomena, kadang disebut Efek Estetika (Aesthetic Effect), bahwa User Interface yang menarik (seperti orang-orang yang menarik) dianggap lebih bermanfaat, meski anggapan initidak selalu benar.

Ada pertanyaan yang lebih luas: dalam praktiknya, haruskah engineer pada software harus mempelajari tentang hal ini (desain grafis)? Tidakkah seharusnya kita hanya perlu merekrut seorang desainer grafis dalam membiarkan mereka yang melakukannya? Beberapa orang berpikir bahwa pelajaran penting yang dapat dipelajari oleh engineer pada software dari kuliah ini adalah “Desain UI itu sulit, serahkan pada ahlinya.”

Tetapi ada beberapa substansi dalam argumen: sedikit pengetahuan bisa menjadi hal yang berbahaya, dan bahwa seorang programmer dengan sedikit pengalaman dalam desain UI tetapi terlalu percaya diri sama berbahayanya dengan seorang seniman yang belajar sedikit HTML dan mereka pikir sekarang mereka tahu cara memprogram. Tetapi kita akan lebih memilih percaya bahwa sedikit pengetahuan adalah langkah menuju pengetahuan yang lebih besar.

Dalam lingkungan komersial, Anda harus merekrut desainer grafis yang berpengalaman, seperti halnya Anda harus menyewa seorang arsitek untuk membangun kantor pusat perusahaan Anda dan Anda harus membuat kontrak dengan perusahaan bangunan berlisensi. Pekerjaan besar untuk budget yang besar membutuhkan para ahli yang memusatkan pendidikan dan pengalaman kerja mereka pada masalah itu. Dengan mempelajari topik desain grafis, Anda dapat menghargai apa yang dilakukan oleh pakar UI dan mengevaluasi pekerjaan mereka, yang akan membantu Anda bekerja dalam tim bersama mereka (mengawasi mereka).

Tetapi juga perlu mempelajari prinsip-prinsip desain grafis ini karena Anda dapat menerapkannya sendiri pada masalah skala kecil. Apakah Anda akan menyewa seorang desainer grafis untuk setiap pembuatan presentasi PowerPoint, untuk setiap bagan yang Anda gambar, untuk setiap halaman web yang Anda buat, untuk setiap postingan blog yang Anda tulis? Banyak interaksi dan komunikasi dalam kehidupan memiliki User Interface dan banyak dari mereka yang dapat kita lakukan sendiri. Jadi Anda harus tahu kapan menyerahkannya kepada ahli, tetapi Anda juga harus dapat melakukan pekerjaan yang dapat dikerjakan sendiri.

DEFINISI DESAIN GRAFIS

Menurut Organisasi AIGA (American Institute of Graphic Arts) yang dituliskan pada website http://www.aiga.org/what-is-design:

Desain grafis, juga dikenal sebagai desain komunikasi, adalah seni dan praktik perencanaan dan proyeksi gagasan dan pengalaman dengan konten visual dan tekstual. Bentuk Komunikasi dapat berupa fisik atau virtual, dan dapat mencakup gambar, kata-kata atau bentuk grafik.

Desain grafis adalah bentuk komunikasi visual yang digunakan untuk menyampaikan pesan atau informasi kepada audiens. Desain grafis adalah representasi visual dari ide yang mengandalkan penciptaan, seleksi dan pengaturan elemen visual.

Desain grafis lahir dari seni dan teknologi. Seorang desainer grafis mulai dengan pertanyaan mendasar berikut:

Apa tujuan dari komunikasi? Apa yang perlu diucapkan pertama kali dan kemudian berikutnya dan kemudian setelah itu? Tingkat hirarki informasi.
Bagaimana Anda ingin men-scan (memindai) dalam sebuah halaman?
Apa nada (tone of voice)-nya?
Kepada siapa Anda berbicara?

CREDIBILITY & MOOD

Perhatikan homepage website Yvette di bawah ini.

Terdapat banyak teks dan kotak dengan warna yang beragam, diletakkan tanpa pertimbangan Layout yang baik. Pengalaman pertama mengakses website adalah susunan obyek yang tidak beraturan, menyebabkan user mempersepsikan bahwa desain ini tidak “diurus” secara profesional, yang akhirnya membuat user tidak punya rasa percaya untuk melanjutkan pencarian informasi dan bahkan transaksi di website ini. Credibility (tingkat rasa percaya) terhadap website Yvette bisa dikatakan rendah.

Desain grafis penting karena pengaruhnya yang kuat pada kredibilitas (dapat dipercaya) yang dipersepsikan (dilihat, dimengerti).

Mood adalah faktor penting lainnya. Grafis pada MailChimp menunjukkan kegembiraan: mendorong user potensial untuk berpikir bahwa mereka akan bersenang-senang dengan (atau saat menggunakan) MailChimp.

Bandingkan halaman web sebelumnya dengan desain web Fidelity; konsep desain ini bukan untuk meyakinkan user bahwa mengelola akun mereka itu menyenangkan, tetapi untuk meyakinkan bahwa Fidelity dapat dipercaya dengan uang mereka. Jadi diperlukan desain yang lebih konservatif dan berhati-hati. Konsep seperti ini banyak dipakai pada aplikasi perbankan dan sejenisnya, yang pada desainnya dapat menyatakan pada user tentang kepercayaan (untuk menggunakan mereka).

SIMPLICITY

Mendesain untuk Simplicity adalah PROSES ELIMINASI, BUKAN PERTAMBAHAN. Simplicity (kesederhanaan) memaksa Anda untuk memiliki alasan yang baik terhadap semua yang Anda tambahkan dan untuk membuang apapun yang tidak perlu dipertahankan.

Meskipun sebagian besar kita akan melihat Simplicity pada desain grafis hari ini, nilai Simplicity untuk desain UI jauh lebih luas dari itu. Menjaga desain tetap sederhana (simple), dengan sesedikit mungkin bagian dan potongan yang ada, cenderung meningkatkan desain pada semua dimensi usability: learnability, efficiency dan safety.

Contoh desain di bawah ini:

Program pada gambar di atas disebut FileMatrix. Kompleksitas UI ini mengganggu banyak tujuan Usability, seperti:

Kurang dapat dipelajari (karena ada Begitu banyak hal yang harus dipelajari)
Kurang efisien (karena menjejalkan semua fungsi ke sebuah window berarti setiap tombol akan menjadi kecil), dan
Kurang aman (karena begitu banyak hal yang mirip, maka Description Slip mudah terjadi).

Gambar di bawah ini adalah Amazon Echo Dot.

Produk ini adalah contoh dari Simplicity. Interface-nya sesederhana mungkin: dial, 2 tombol, lingkaran lampu/cahaya dan speech. Tombol dan fitur yang tidak perlu, dihilangkan.

Simplicity membuat Interface lebih mudah dipelajari karena ada lebih sedikit untuk dipelajari dan juga membuat Interface lebih cepat dan lebih aman untuk digunakan, bahkan oleh seorang ahli dengan Interface. Bayangkan sebuah remote control dengan 20 tombol di atasnya. Misalkan Anda seorang ahli, jadi Anda tahu tombol mana yang harus ditekan. Tetapi Anda hanya menggunakan 3 tombol secara rutin. Manakah lebih cepat – Interface dengan 3 tombol yang besar atau Interface dengan 20 tombol kecil. Manakah yang lebih rawan kesalahan?

Terdapat 3 teknik yang dapat digunakan untuk penerapan Simplicity, yaitu:

Reduction
Regularity
Double-Duty

1 REDUCTION

Reduction berarti menghapus elemen yang tidak penting. Contoh penerapannya adalah pada icon.

Reduction juga berarti menghapus fitur yang tidak penting, seperti pada remote control.

Apple mengurangi fitur-fitur yang terdapat pada radio tape, sehingga lahirlah produk iPod sebagai perangkat pemutar musik.

Reduction pada fitur radio tape (kiri) dan Apple iPod (kanan)

Terdapat tiga cara untuk membuat desain lebih sederhana (kita fokus pada desain grafis atau tampilan visual, tetapi Anda dapat mengeneralisasikan aturan untuk dengan mudah ke aspek desain lainnya):

Fitur yang ditawarkan aplikasi Anda,
Label untuk tombol atau field pada form,
Langkah-langkah dalam sebuah proses, dll.

Reduction berarti menghilangkan apapun yang tidak perlu. Teknik ini memiliki 3 langkah:

Putuskan apa yang paling penting perlu disampaikan melalui desain.
Periksa secara kritis setiap elemen (label, control, color, font, line weight) untuk memutuskan apakah elemen tersebut memiliki tujuan yang penting.
Hapuskan jika tidak penting. Bahkan jika tampaknya penting, cobalah untuk menghapuskan, untuk melihat apakah desain menjadi berantakan.

ICON menujukkan prinsip reduksi yang baik. Contohnya adalah:

Simbol standard US Department of Transportation untuk akses bagi orang cacat adalah contoh baik reduksi. Tidak ada elemen yang tersisa yang dapat dihapus darinya tanpa merusak maknanya.
Remote Tivo adalah contoh penting lainnya tentang meminimalkan fungsionalitas. Remote ini lebih sederhana daripada remote control yang sebanding, yang merupakan array padat dan tombol persegi empat yang kecil, yang semua bentuknya sama. Desainer Tivo secara agresif menghapus fungsi dari remote control untuk membuatnya sesederhana mungkin (“Now Preening on the Coffee Table”, New York Times, Feb 19, 2004, ).

2 REGULARITY

Regularity berarti menggunakan pola reguler (biasa/ rapi/ teratur). Prinsip ini membatasi variasi yang tidak penting di antara elemen-elemen. Contohnya adalah pilihan Layout pada Microsoft Power Point atau pengaturan posisi obyek di Microsoft Word.

Regularity pilihan Layout Microsoft Power Point

Regularity pada pilihan posisi obyek di Microsoft Word

Penerapan Regularity juga dapat dilihat pada website Pinterest.

Untuk elemen penting yang tersisa, pertimbangkan bagaimana Anda dapat meminimalkan perbedaan yang tidak perlu antara mereka dengan Regularity. Gunakan font, color, line width, dimensi, orientasi yang sama untuk banyak elemen. Sebaliknya, jika desain Anda kebanyakan regular, elemen-elemen yang ingin Anda highlight akan menonjol lebih baik. Menu Layout pada Ms PowerPoint menunjukkan Reduction (icon minimalis mewakili setiap Layout) dan Regularity. Title dan bullet ditampilkan dengan cara yang sama.

3 DOUBLE DUTY

Double duty berarti menemukan cara bagi satu elemen untuk memainkan banyak peran. Contohnya adalah:

Title bar
Scrollbar thumb
Breadcrumbs
Pagination
Help prompt

Title Bar

Scrollbar Thumb

Breadcrumb

Pagination

Help Prompt

Star Rating

Teknik lain untuk Simplicity adalah double duty, dimana Anda mencoba menggabungkan elemen untuk membuatnya melayani berbagai peran dalam desain. Interface desktop dan web memiliki sejumlah pola dimana elemennya memiliki beberapa tugas.

Misalnya “thumb” pada scrollbar mengerjakan 3 peran: untuk dragging; untuk menunjukkan posisi scroll window terhadap seluruh dokumen; dan menunjukkan potongan dokumen yang ditampilkan di scroll window.
Title bar pada sebuah window memainkan beberapa peran: label, dragging handle, indikator aktivasi window dan lokasi untuk tombol-tombol kontrol window.
Pola breadcrumb dan pagination juga melakukan double duty, tidak hanya menunjukkan di mana Anda sedang berada tetapi juga menyediakan kemampuan untuk menavigasi ke tempat lain.
Pagination link seperti scrollbar juga dapat menunjukkan berapa banyak halaman yang ada.

CONTRAST

Terdapat beberapa hal yang perlu diperhatikan dalam pengaturan Contrast pada sebuah desain, seperti penggunaan Visual Variable untuk membuat Contrast; memilih Visual Variable; mendesain tampilan informasi; perbedaan penggunaan Simplicity dengan Contrast dan masalah yang mungkin terjadi terkait penerapan Contrast pada desain.

Contrast & Visual Variable

Contrast mengacu pada perbedaan yang dapat dilihat pada dimensi visual, seperti ukuran dan warna. Contrast adalah ketidakteraturan dalam desain yang mengkomunikasikan informasi atau membuat elemen menonjol.

Simplicity mengatakan bahwa kita harus menghilangkan perbedaan yang tidak penting. Namun, ada kalanya membuat perbedaan dalam desain itu penting, sehingga kita harus memilih dimensi dan tingkat contrast sehingga perbedaan itu menonjol, mudah dipahami dan sesuai dengan penugasan.

Contrast dapat diciptakan dengan menggunakan Visual Variable berupa: Brightness (value), Hue, Texture, Shape, Position, Orientation, Size.

Beberapa bentuk atau cara untuk membuat Contrast pada desain

BRIGHTNESS (VALUE)
Contrast dapat dibuat dengan cara memberi brightness yang berbeda pada obyek dalam desain, dibandingkan dengan obyek-obyek lain di sekelilingnya.

Pemberian Brigtness untuk membuat Contrast

HUE
Memberian derajat warna murni yang berbeda bisa memberikan Contrast.

TEXTURE
Texture didesain pada obyek yang ingin dibuat berbeda.

SHAPE
Contrast dapat dibuat dengan membentuk obyek yang bentuknya berbeda dengan obyek di sekelilingnya.

Shape yang berbeda dapat membentuk Contrast

POSITION
Dengan pemberian posisi yang tidak sama, atau pengaturan letaknya yang berbeda.

Contrast dalam bentuk pengaturan Position

ORIENTATION
Orientasi dapat membuat Contrast dengan cara memberi arah yang berbeda dengan obyek di sekitarnya.

Orientasi obyek yang berbeda untuk menciptakan Contrast

SIZE
Ukuran (size) yang berbeda bisa memberi Contrast pada satu obyek dalam desain.

Setelah Anda memutuskan bahwa Contrast sangat penting dalam Interface Anda, pilih Visual Variable yang tepat untuk mewakilinya, dengan mengingat data yang coba Anda komunikasikan dan tugas yang harus dilakukan user dengan data tersebut. Misalnya pertimbangkan hirarki konten teks: judul, bab, bagian, isi teks, footnote. Judul pada dokumen tidak hanya besar (size), tetapi juga terpusat (position), bold (value) dan mungkin memiliki warna yang berbeda.

Cara Memilih Visual Variable Untuk Sebuah Desain

Mari melihat kontak inbox email untuk melihat bagaimana data yang terkait dengan message disusun ke dalam Visual Variable di layar.

Kolom pada email adalah From, Subject, Date, Size. Informasi pada email disandikan secara redundan menjadi Visual Variable yang ditampilkan di atas, untuk menunjukkan Contrast yang lebih baik.

Mendesain Tampilan Informasi

Perhatikan desain informasi hasil search engine dibawah ini. Tidak terdapat Contrast yang memberi perbedaan pada obyek teks di dalamnya, padahal Contrast diperlukan untuk menunjukkan urutan informasi dari yang paling penting ke yang kurang penting.

Desain di bawah ini menggunakan Contrast untuk memberi penekanan pada bagian judul, deskripsi, alamat website.

Judul halaman menyampaikan sebagian besar informasi, sehingga digunakan size, hue dan value (brightness), plus underline.
Ringkasan berwarna hitam agar mudah dibaca, dan URL serta ukuran file berwarna hijau untuk menggolongkan ringkasan.
Tampilan output tidak harus diatur seperti formulir input. Ketika data menggambarkan diri sendiri seperti nama dan tanggal, biarkan data itu menggambarkan dirinya sendiri (Ini adalah contoh teknik Double Duty untuk Simplicity, data bisa bertindak sebagai labelnya sendiri).
Pilihkan Visual Variable yang baik untuk meningkatkan Contrast informasi yang perlu dilihat pengguna.

Selain pemberian Contrast, desain informasi di atas juga menunjukkan adanya hierarki informasi, mulai dari urutan judul di atas, hingga hyperlink untuk alamat website.

Gambar “Penerapan Contrast pada Hasil Pencarian di Google” adalah contoh yang menunjukkan penggunaan Contrast yang redundan untuk membuat tampilan informasi yang lebih mudah untuk di-scan dan lebih mudah digunakan. Hasil search engine pada dasarnya hanya catatan database, tetapi hasilnya tidak ditampilkan dalam tampilan teks sederhana. Sebagai gantinya, digunakan Visual Variable yang kaya (tanpa ada field untuk label) untuk meningkatkan Contrast di antara item.

Contrast pada Publication Style

Pada gambar di bawah ini, Anda dapat melihat title, heading, body text, figure caption dan footnote menunjukkan bagaimana Contrast digunakan untuk membuat artikel lebih mudah dibaca.

Anda dapat melakukannya saat menulis makalah atau dokumentasi. Apakah Contrast berarti harus memaksimalkan penggunaan banyak font yang berbeda? Tidak, untuk dua alasan: Contrast harus diseimbangkan dengan Simplicity; variasi bentuk teks bukan cara terbaik untuk membuat Contrast.

Masalah Contrast

Gambar di bawah ini menunjukkan Contrast yang terlalu sedikit, dan hal ini dapat menjadi masalah dalam satu desain.

Contoh desain dengan Contrast yang terlalu sedikit

Beberapa masalah yang dapat diidentifikasi adalah:

Penting untuk membedakan caption dari text field, tetapi pada desain ini sebagian besar Visual Variable (position, size, hue, value dan orientation) sama untuk keduanya.Posisinya sangat mirip: kotak di sekitar tiap caption dan text field dimulai pada posisi horizontal yang sama.
Teks itu sendiri dimulai pada posisi yang berbeda (left-justified vs aligned), tetapi ini bukan perbedaan yang kuat, beberapa caption mengisi kolom mereka.
Ukurannya sama: caption dan text field mengisi lebar kolom yang sama.
Hue pada background sedikit berbeda (kuning vs putih), tetapi tidak mudah dibedakan dengan squint test.
Value pada background-nya sama (sangat cerah).
Hue dan value pada foreground adalah sama (font hitam, polos).
Orientasinya horizontal, karena tentu saja Anda harus membacanya. Hasilnya adalah sulit untuk men-scan form ini.
Bentuknya juga sangat crowded (ramai) —> masalah LAYOUT.

REFERENSI

Miller, R, Mueller, S. Graphic Design
Visual Design Principles (CMSC 434 Introduction to Human Computer Interaction). University of Maryland.
Graphic Design. Jay Urbain, Ph.D.
What is Graphic Design. Juliette Cezzar. http://www.aiga.org/guide-whatisgraphicdesign
Image Feature: Photo by John Cameron on Unsplash