(Tutorial Visual Design - Part 1) Introduction to Visual Design

1. INTRODUCTION

Awal mula pemaparan materi, kami diberikan penjelasan bahwa Visual Design dan penataan-nya tidak sama dengan pengertian art yang biasa, karena ada banyak unsur - unsur / komponen yang bermain didalamnya. Visual Design sendiri seharusnya merupakan sebuah "functional art" dan sebuah "wrap system", mempunyai interface design yang jelas dan dapat digunakan seperti misalnya gagang pintu , keran air, dll.

Dikatakan bahwa visual design bukan sebuah art biasa karena dalam pembuatannya, harus mencakup penyediaan informasi, harus ada interaksi , memberikan sebuah "experience" dan dapat diterapkan diberbagai bidang terapan. Contoh salah satu "well design" dalam kehidupa sehari - hari adalah kursi yang biasanya digunakan pedagang - pedagang kaki limia dipinggir jalan. Kursi - kursi itu bernilai karena dapat dibawa - bawa, dapat ditumpuk ketika disimpan, harganya murah dan dapat digunakan di banyak tempat untuk berbagai keperluan.

2. VISUAL DESIGN COMPONENTS

Terdapat enam komponen visual design yang harus diperhatikan ketika hendak membuat design yang baik :

COLORS

Salah satu elemen yang paling sulit untuk dimainkan dan digunakan secara efektif oleh para desainer. Warna - warna digunakan untuk mempengaruhi emosi dan menarik perhatian.

Pyschology of Colors

Secara umum kita sudah mengenal mengenai warna RGB (Reg-Green-Blue) / (Merah-Hijau-Biru) sebagai warna - warna dasar. Disini, setidak-tidaknya ada 8 ragam warna yang dibahas, perinciannya sebagai berikut :

• Warna Merah : membutuhkan perhatian, kewaspadaan, tanda bahaya, tanda berhenti, "passionate", sesuatu yang penting. Contoh situs yang menggunakan banyak warna merah adalah situs CocaCola dengan warna merah sebagai focal point. 
• Warna Oranye : mengganbarkan suasana musim semi (autumn), enerjik, diasosiasikan dengan warna – warna bumi. 
• Warna Kuning : menggambarkan musim panas, kegembiraan, kreatifitas. 
• Warna Hijau : Menggambarkan pertumbuhan terus menerus, kekayaan, stabilitas dan pembaharuan. Contoh situs - situs yang banyak menggunakan ini adalah situs perbankan, situs aktifis lingkungan hidup, dll. 
• Warna Biru : menggambarkan kesan profesional, diasosiasikan dengan warna laut, langit, dikaitkan dengan integritas dan kepercayaan. Jika biru laut, memberikan kesan misterius.Contoh situs yang ada : Hardvard University. 
• Warna Ungu : menggambarkan kreatifitas, diasosiasikan dengan royal / bangsawan bagus digunakan untuk portofolio. Contoh : situs kampanye Barrack Obama. 
• Warna Putih : Netral , suci. 
• Warna Hitam : Netral, misterius 

Color Relationships

Color Relationships adalah konsep perpaduan warna - warna berdasarkan "Wheels of Color" yang bisa dijadikan acuan - acuan ketika hendak membuat website dan menampilkan karakteristiknya menurut psychology of color. Bagian - bagiannya antara lain sebagai berikut :

• Monochromatic : terdiri dari 1 deret warnna, misalnya hjiau daun dan hijau toska. 
• Complementary : saling mengisi , misalnya biru dan merah. 
• Split Complementary : tiga warna dengan komposisi segitiga sama kaki. 
• Double Complementary : Adalah dua set warna complementer yang bergabung. 
• Analogous : merupakan gabungan warna - warna yang berdekatan di Wheels of Color 
• Triad : gabungan tiga warna dengan komp;osisi segiiga sama sisi 
• Warm Color : perpaduan yang berasal dari warna - warna hangat, biasanya tercampur dari warna merah menjadi oranye, kuning. 
• Cold Color yaitu perpaduan yang berasal dari warna - warna dingin, biasanya tercampur dari warna biru menjadi hijau, ungu. 
• Image : sebaiknya ambil palette-nya , karena umumnya image mempunyai kombinasi warna yang unik. 

Sample Sites Ada beberapa slide yang ditampilkan dan saya juga jabarkan informasi yang didapatkan mengenai hal - hal itu disini :

• Situs Coca Cola menggunakan banyak warna merah untuk menyatakan suasana panas, sebaiknya minum coca cola. 
• Situs Envato menggunakan background hijau dan gambar lampu sebagai focal point untuk menunjukkan pertumbuhan terus menerus melalui pembelajaran. 
• Situs Election Obama, menggunakan warna biru sebagai warna dasar. 

FONTS

Penjelasan tentang fonts dibuka dengann menjelaskan jenis - jenis dan ragam bentuk dari huruf - huruf yang ada :

• San-Serif (Arial, Helvetica) -> untuk website content, karakteristik misalnya huruf A dan L berbeda. 
• Serif (Times New Roman, Lingua) 
• Slab - Serif -> dengan aksen yang cukup kental. 
• Script Fonts -> umumnya terdapat di ijazah - ijazah. 
• Monospaced -> misalnya digunakan pada ID dan huruf - huruf waktu coding, karena kerapatannya. 
• Display Fonts -> misalnya di Michigan University 
• Backletters, dll 

Tips untuk memilih Font sebaiknya tidak perlu banyak jenis, cukup untuk heading. Penggunaan font design yang baik adalah membuat user / pengguna memperhatikan bukan tulisan tetapi kontennya.

CONTRAST

Permainan contrast digunakan untuk mengatur fokus yang ingin ditonjolkan dari dua atau lebih baris text.

LAYOUT DESIGN

Layout Design digunakan untuk mengatur "Information Flow" dan sebaiknya disesuaikan dengan masing - masing kultur yang ada. Salah satu contoh kasus dari model kultur yang berbeda adalah kebiasaan membaca dari kiri dan kanan dan dari kanan ke kiri. Untuk ilustrasi bisa melihat di slide Layout dengan model yang dibuat seolah - olah nampak miring dan dibaca dari kanan ke kiri.

VISUAL DESIGN

Salah satu cara untuk mengatur visual hierarchy agar nampak menarik adalah dengan menggunakan banyak Whitespace (padding dan margin untuk jeda antar element). Hal lain adalah penempatan logo, yang tidak perlu terlalu besar tetapi dapat dimengerti oleh user.

IMAGE

Penggunaan Image juga sebaiknya digunakan secara bijaksana tergantung dari kebutuhan. Contoh kasus untuk situs - situs perusahan lebih banyak menggunakan icon - icon daripada image. Kemudian, disarankan juga sebaiknya image dan ilustrasi tidak dicampuradukkan dengan foto karena dari segi "Look and Feel"-nya akan nampak dan terasa berbeda.

3. VISUAL DESIGN STYLE

Terdapat 6 Jenis Visual Design yang dipaparkan pada sesi ini. Berikut Penjelasannya :

Flat

• Menggunakan color scheme tanpa gradient, tetapi solid. 
• Umumnya mempunyai layout dengan banyak whitespace dan terlihat cukup clean. 
• Contoh yang paling jelas adalah Microsoft Tiles. 
• Biasanya digunakan jika mempunyai konten yang cukup banyak dan padat, namun tidak kehilangan fokus ke design. 

Minimalist

• Tipografi dan fokusnya lebih banyak ke font sebagai "Center-piece", mempunyai banyak whitespace. 
• Mempunyai konten yang cukup terbatas, sebaiknya tidak perlu terlalu banyak font / tulisan. 
• Jenis ini sebaiknya tidak digunakan untuk bisnis karena minim kontentnya. 
• Contoh yang paling jleas biasanya digunakan untuk situs - situs personal branding , jewelry, wedding dan photography. 

Professional

• Standard, color scheme-nya sederhana, dengan warna putih dan abu - abu, biru juga bisa. Lebih banyak permainan dari segi contrast. 
• Umumnya menggunakan layout design yang sudah banyak digunakan. 
• Hindari penggunaan warna - warna kuning, merah, kuning, oranye yang lebih menarik perhatian dari pada contentnya. 
• Gunakan icon untuk representasi product, boleh 1 aksen warna dengan permainan contrast. 

Elegant

• Banyak menggunakan font serif, meskipun susah dibaca tetapi menampilkan kesan mewah. 
• Menjual sesuai dengan content, yaitu dengan banyak-nya Image berkualitas HD, retina ,dll. 
• Biasanya untuk situs - situs perhiaasan dan merek - merek fashion terkenal seperti Guess, dll. 

Graphics Intense

• Menggunakan image yang besar untuk menampilkan kesan yang hebat. 
• Umumnya isinya sendiri cukup sederhana / hampir tidak ada content yang menarik. 
• Biasanya digunakan untuk promosi film, event. Contoh : Promosi Film The Avengers. 

Contemporary :

• Bergaya retro, dengan tampilan font yang menarik, dan layout yang lebih bebas. Contoh-nya quick silver. 

4. SESI TANYA JAWAB

Bagaimana cara untuk menggabungkan fitur multimedia seperti video ke dalam website dengan visual yang baik ?
Caranya adalah dengan menggunakan background yang lebih netral, seperti hitam atau putih. Hal ini biasanya diterpkan di You Tube. Untuk menampilkan video beresolusi tinggi dan dengan tingkat kecerahan (brightness) yang tinggi sebaiknya menggunakan background hitam. Faktor lain adalah menghindari design yang saling tarik menarik perhatian user.

Bagaimana konsep - konsep Industrial Design saat ini ?
Indistrial Design sebenarnya tidak menerapkan sebuah standard baku yang kaku, tetapi menggunakan berbagai best practice yang sudah berjalan saat ini, kemudian diserap dan diaplikasikan sesuai kebutuhan.

Apakah ada contoh - contoh bentuk best practice Color Wheels, terutama jika mau memilih kombinasi warna yang pas ?

Referensi yang menarik ada di colourlovers.com untuk mempelajari palette dan kombinasi warna yang menarik.

5. KESIMPULAN

• Design proses yang baik selalu mengkombinasikan warna, tipography, kontrast, layout dan design dengan baik, sesuai kebutuhan. 
• Dengan begitu banyaknya trend yang berkembang, yang perlu diperhatikan tetap adalah karakter dan kebutuhan yang sesuai dengan kenyamanan user. 
• Target utama dari Visual Design terutama dan akan senantiasa mengedepankan faktor kegunaan atau "usability."