Day 4 : Visual Design - Basic & Fundamental

Topic 1 : Visual Design Elements

Pekerjaan day-to-day yang dilakukan dalam proses UI design selalu berkaitan dengan visual desain,
dan user experience. Setelah mengetahui cakupan UX di modul sebelumnya, sekarang mari kita
lihat dari sudut pandang visual desain.

Visual design utamanya bertujuan untuk meningkatkan daya tarik dan kegunaan estetika desain /
produk dengan gambar, typography, space, tata letak, dan warna yang sesuai.

 
Visual Design Elements
Elemen atau unsur dasar yang membentuk visual design meliputi garis, shape, warna,
tekstur, typography dan whitespace

 
Line (Garis)

menghubungkan dua titik dan dapat digunakan untuk membantu menentukan bentuk, membuat
pembagian, dan membuat tekstur. 

Garis dapat memiliki beragam properti yang memungkinkan kita menyampaikan berbagai ekspresi.
Misalnya, garis dapat tebal atau tipis, lurus atau melengkung, memiliki lebar seragam atau lancip,
menjadi geometris (yaitu, terlihat seperti digambar oleh penggaris atau kompas) atau organik (yaitu,
terlihat seperti digambar dengan tangan) .
 
Shape (Bentuk) 

Shape adalah area yang berdiri sendiri, biasanya dibentuk oleh garis walaupun mereka juga dapat
dibentuk dengan menggunakan warna, nilai, atau tekstur yang berbeda. Bentuk memiliki dua
dimensi: panjang dan lebar.

Colour (Warna) 
Warna digunakan untuk membedakan item, membuat kedalaman, menambah penekanan, dan/atau
membantu mengatur informasi. Teori warna meneliti bagaimana berbagai pilihan berdampak secara
psikologis kepada pengguna.

Desainer menggunakan warna dalam visual design untuk menyampaikan emosi dan menambahkan

variasi dan interest pada desain, memisahkan area halaman yang berbeda, dan membedakan
desain dengan kompetitor (brand color).

 
Tekstur 
Tekstur mengacu pada kualitas permukaan suatu objek. Dengan mengulangi suatu elemen, tekstur
akan dibuat dan pola terbentuk. Tergantung pada bagaimana tekstur diterapkan, itu dapat
digunakan secara strategis untuk menarik atau menghalangi perhatian.

Tekstur dapat dibuat dengan pola garis berulang, atau dengan menggunakan gambar tekstur ubin.
Di atas, garis-garis diagonal menambahkan efek 'pegangan' ke persegi panjang.

 
Typography 
Typography mengacu pada font mana yang dipilih, ukurannya, pelurusan, warna, dan jaraknya.

Typography dapat memunculkan perasaan, mengingatkan pada merek tertentu, atau menciptakan

suasana.Namun ketika typography itu buruk, bisa mengganggu estetika desain dan bahkan tidak
dapat dibaca.
 
Whitespace 
Negative space atau juga dikenal sebagai whitespace adalah area kosong di sekitar shape (positive
space). 

Objek utama desain disebut figure, dan ruangan kosong di sekitar figure adalah negative space.

Topic 2 : Visual Design Principles

Elemen visual design menggambarkan building-block atau dasar untuk membangun estetika suatu
produk. Sedangkan di sisi lain, ada prinsip-prinsip visual design yang memberi tahu kita bagaimana
elemen-elemen ini dapat dan harus berjalan bersama untuk hasil terbaik.

“The best designers sometimes disregard the principles of design. When they do so, however, there
is usually some compensating merit attained at the cost of the violation. Unless you are certain of
doing as well, it is best to abide by the principles.” – William Lidwell

 
Scale / Skala
Prinsip skala mengacu pada penggunaan ukuran untuk menandakan tingkat kepentingan dan
peringkat elemen dalam suatu komposisi.

Dengan kata lain, ketika prinsip ini digunakan dengan benar, elemen terpenting dalam desain lebih
besar daripada elemen yang kurang penting. Alasan di balik prinsip ini sederhana: ketika ada
sesuatu yang besar, kemungkinan besar akan lebih dahulu diperhatikan.
Ketika prinsip skala digunakan dengan benar dan elemen yang tepat ditekankan, user akan dengan
mudah mengurai visual dan tahu bagaimana menggunakannya.

Desain yang cantik secara visual umumnya menggunakan tidak lebih dari 3 ukuran berbeda.
Memiliki serangkaian elemen dengan ukuran berbeda tidak hanya akan membuat variasi dalam tata
letak, tetapi juga akan membentuk visual hierarchy.

Visual hierarchy
Tata letak dan visual hierarchy yang baik akan membuat informasi dalam desain lebih mudah
dipahami. Prinsip visual hierarchy mengacu pada mengarahkan perhatian user untuk melihat
elemen desain sesuai dengan urutan kepentingannya

Hirarki visual dapat diimplementasikan melalui variasi dalam skala, warna, jarak, penempatan, dan
lainnya.

Untuk membuat visual hierarchy yang jelas, gunakan 2–3 ukuran jenis huruf untuk menunjukkan
kepada user konten apa yang paling penting atau pada tingkat tertinggi dalam arsitektur informasi
pada halaman. Atau, pertimbangkan untuk menggunakan warna-warna cerah untuk item-item
penting.

Balance (Keseimbangan)
Sama seperti saat menyeimbangkan berat, jika desain memiliki satu elemen desain kecil dan satu
elemen desain besar di kedua sisi sumbu, desain akan terasa agak tidak seimbang. Area yang diisi
oleh elemen desain penting saat menciptakan keseimbangan, bukan hanya jumlah elemen.
Keseimbangan dalam desain bisa berarti :

 Simetris: elemen didistribusikan secara simetris relatif terhadap sumbu imajiner pusat
 Asimetris: elemen terdistribusi secara asimetris relatif terhadap sumbu pusat
 Radial: elemen memancar keluar dari pusat, titik umum dalam arah melingkar.

Jenis keseimbangan yang digunakan dalam visual design tergantung pada apa yang ingin
disampaikan. Asimetri bersifat dinamis dan menarik, menciptakan rasa energi dan gerakan. Simetri
itu tenang dan statis. Keseimbangan radial akan selalu mengarahkan mata ke tengah komposisi
desain.

Contrast
Prinsip contrast digunakan yang membuat bagian-bagian tertentu dari desain lebih menonjol.

Prinsip kontras sering diterapkan melalui warna. Misalnya, merah sering digunakan dalam desain
UI, terutama pada iOS, untuk menandakan penghapusan. Warna cerah menandakan bahwa elemen
merah berbeda dari yang lain.

Seringkali, dalam UX kata "kontras" mengingatkan kita pada kontras antara teks dan latar
belakangnya. Terkadang desainer sengaja mengurangi kontras teks untuk mengurangi penekanan
teks yang kurang penting. Tetapi pendekatan ini berbahaya - mengurangi kontras teks juga
mengurangi keterbacaan dan membuat konten Anda tidak dapat diakses. Gunakan pemeriksa
kontras warna untuk memastikan bahwa konten Anda masih dapat dibaca oleh user.

Gestalt Principles
Prinsip-prinsip Gestalt menjelaskan bagaimana manusia menyederhanakan dan mengatur gambar-
gambar kompleks yang terdiri dari banyak elemen, dengan secara tidak sadar mengatur bagian-
bagiannya menjadi sistem yang terorganisir yang menciptakan keseluruhan, daripada
menafsirkannya sebagai serangkaian elemen yang berbeda.
Gestalt adalah alasan kenapa kita dapat melihat persegi, lingkaran, dan segitiga meskipun garis-
garisnya tidak lengkap. 

Dengan kata lain, prinsip-prinsip Gestalt menangkap kecenderungan kita untuk menganggap
keseluruhan elemen desain sebagai kebalikan dari elemen individu.

Kita juga sering melihat pengaplikasian teori Gestalt dalam desain logo. Dalam logo NBC, tidak ada
burung merak di whitespace nya, tetapi otak kita menangkap dan memahami bahwa ada burung
merak di situ. 

Ada beberapa prinsip Gestalt, termasuk similarity, continuity, closure, proximity, figure/ground, 

simetri dan order/urutan. 

Proximity sangat penting untuk UX karena mengacu pada fakta bahwa item yang secara visual
disimpan berdekatan dianggap sebagai bagian dari kelompok yang sama.
Artikel rekomendasi mengenai Gestalt Principle

Dominance
Dominance atau dominasi menciptakan fokus pada satu elemen desain. 

Kita dapat menggunakan warna, shape, kontras, skala, dan/atau menentukan tata letak untuk
mencapai dominasi. 

Misalnya, sebagian besar situs web memiliki gambar "hero" utama, yang menggunakan dominasi
untuk menarik pengguna, untuk secara alami memperhatikan elemen tersebut.

Unity
Unity berkaitan dengan menciptakan rasa harmoni antara semua elemen dalam sebuah halaman.
Saat merancang situs web, kita dapat menggunakan kotak untuk mencapai unity, karena elemen
yang diatur dalam kotak akan mengikuti pengaturan yang teratur.

Kurangnya Unity dalam desain dapat menciptakan rasa tidak nyaman dan kekacauan. Mata kita
mengatur bagaimana penilaian kita.

Topic 3 : Colors
Warna adalah persepsi. Mata kita melihat sesuatu (langit, misalnya), dan data yang dikirim dari mata
kita ke otak kita memberi tahu kita bahwa itu warna tertentu (biru). 
Saat kamu berjalan menyusuri koridor display minuman, lalu memindai rak-rak berisi 82 juta kaleng
dan botol. Jika kamu mencoba menemukan enam kaleng Coca Cola, apa yang kamu cari? Logo
scripted atau kaleng merah? Ya, kaleng merah akan kamu persepsikan sebagai Coca Cola saat
memindainya.

Orang-orang memutuskan apakah mereka menyukai produk atau tidak hanya dalam 90 detik atau
kurang, dan 90% dari keputusan itu hanya berdasarkan warna. Jadi, bagian yang sangat penting
dari branding kamu dan produkmu harus fokus pada warna.

Mampu memahami istilah dan proses yang sesuai dengan warna akan membantu kamu
mengkomunikasikan visi produk dan brandingnya

Saya rekomendasikan salah satu artikel tentang ilmu dasar warna disini

Pernah bertanya-tanya bagaimana desainer menemukan kombinasi warna yang sempurna? Mereka
menggunakan teori warna. 

Color Palette
Color palette adalah koleksi warna yang digunakan untuk memberi batasan pilihan warna yang akan
digunakan dalam desain atau brand. Color palette juga dikenal sebagai palet.

Tools untuk Memilih Color Palette

Ketika kamu harus menemukan skema warna yang sempurna untuk desain, saya sangat
merekomendasikan untuk menemukan palet yang sudah ada di luar sana (premade). Namun bukan
berarti kamu tidak perlu memiliki pemahaman yang kuat tentang dasar-dasar pemilihan warna,
meskipun menggunakan premade palette, desainmu tetap perlu disesuaikan lagi dengan desain
yang kamu buat.

Jika kamu sudah memikirkan warna utama brand kamu yang akan kamu gunakan untuk mendesain,
ambil kode hexa warna tersebut. Lalu gunakan tools generator yang membolehkanmu memasukkan
warnamu sendiri.

Sebagai contoh, saya memilih warna utama pilihan saya dan memasukkannya ke mycolor.space :
Setelah menekan tombol generate, muncul palet berdasarkan warna pilihan tadi :

Kemudian yang saya lakukan adalah men-snip bagian palet yang saya inginkan dan menyalin kode-
kode hexa tersebut untuk disimpan di daftar warna pilihan di dalam aplikasi Adobe XD / Figma.

Di gambar di bawah bisa dilihat di bagian kanan pada local colors, warna palet sudah berhasil
masuk pada dokumen
Palet warna contoh

Tips: 

 Simpan dalam bentuk gambar palet warna pilihanmu, dengan kode hexa tercantum di
samping atau di bawahnya.
 Palet warna bisa digunakan tidak hanya untuk digital visual design saja, tapi bisa jadi warna
tema personal brand kamu, seperti mengatur warna pada dokumen dan atau slide
presentasi, . 
 Kode hexa warna, bisa digunakan untuk mengatur warna pada aplikasi lain.

Di bawah ini beberapa tempat untuk menemukan premade palette yang bisa kamu coba :

ColorHunt
ColorHunt adalah generator palet warna acak yang diperbarui setiap hari dengan palet baru buatan
komunitas. Halaman web nya terlihat sederhana dan elegan, dan kamu bisa dengan mudah
menemukan apa yang kamu cari.

Coolors

Coolors menawarkan cukup banyak fitur, selain menjadi palette generator. Setelah kamu menekan
tombol "Generate", web akan menampilkan palet yang dapat disesuaikan dengan serangkaian opsi.

Di sini kamu bisa mengedit setiap warna, seret dan lepas untuk menemukan urutan yang sempurna,
memperluas warna, dan mengubah beberapa pengaturan tampilan dasar.

Selain itu, Coolors dapat berfungsi sebagai palette generator dengan menggunakan gambar yang
kamu unggah atau kamu masukkan sebagi link.

Adobe Color Wheel

Adobe Color Wheel (juga dikenal sebagai Adobe Color Picker) adalah pencipta palet warna online.
Alat ini penting untuk desainer untuk proyek mereka karena memungkinkan pengguna untuk
menyimpan palet warna dan mengunggahnya sebagai contoh untuk pengguna lain.

BrandColors

Galen Gidman yang memulai proyek ini sebagai basis data kecil berisi palet warna dari brand
terkenal, sekarang berubah menjadi koleksi color scheme resmi. Jika kamu bertanya-tanya warna
apa yang digunakan oleh merek-merek terkemuka dunia, kunjungi situs web yang luar biasa ini.

Colormind

Colormind menyediakan palet warna yang terus di-update setiap hari. Dengan menekan tombol
‘generate. Warna pada simulasi palet akan berubah dan bisa menjadi pilihan untuk kamu gunakan.

Beberapa website lain penyedia palet generator online:

  ColorPalettes
 ColorHex
 Color Designer
 Mycolor Space
 Paletton
 Color Scheme Designer

 
Mempertimbangkan unsur psikologi warna
Psikologi warna adalah studi tentang warna dalam kaitannya dengan perilaku manusia.

Studi ini bertujuan untuk menentukan bagaimana warna mempengaruhi keputusan kita dalam
membuat keputusan sehari-hari seperti barang yang kita beli.

Arti warna dapat berdampak pada mengapa kita lebih suka warna tertentu daripada yang lain.
Warna yang sama juga dapat memiliki arti berbeda yang tergantung pada cara kita dibesarkan, jenis
kelamin, lokasi, nilai, dan berbagai faktor lainnya. 
Topic 4 : Typography
Mencari Typeface 
Lisensi Penggunaan
Perlu diperhatikan, font yang digunakan untuk digital product tidak sembarangan. Kita sebagai
desainer harus memahami bahwa ada license atau lisensi yang mengatur batas penggunaan
typeface yang kita dapatkan sampai mana

 Personal use, berarti font-font yang ada dalam typeface ini tidak boleh dibagikan, tidak boleh
digunakan untuk keperluan komersil, dan utamanya tidak boleh digunakan untuk media
digital seperti web dan aplikasi. Dan jika ingin menggunakan typeface dengan lisensi
personal use untuk keperluan komersial, maka kita harus membeli 1 font atau keseluruhan
typeface nya untuk mendapatkan lisensi commercial use.
 Commercial Use, lisensi commercial use berarti memperbolehkan penggunaan typeface
untuk digunakan pada barang atau jasa komersial. Biasanya lisensi ini disertai syarat-syarat
penggunaan tertentu.
 100% Free, lisensi ini adalah lisensi yang paling aman, karena kita bebas menggunakan
typeface dengan lisensi ini untuk tujuan apapun.

Sumber Download Font Gratis dengan Lisensi Commercial

Use
Google Font

Google Fonts adalah salah satu situs pertama yang muncul di atas hasil pencarian ketika mencari
font gratis. Perpustakaan font ini menampilkan lebih dari 800 keluarga font dari berbagai jenis, dari
sans serif ke font tulisan tangan, font monospace, dan banyak lagi.

Google Fonts banyak digunakan oleh perancang web untuk keperluan font hosting yang cepat dan
dapat diandalkan. Font yang ada di Google Font juga dapat diunduh.

Dan bagian terbaiknya adalah semua font di Google Font adalah open-source. Kamu bisa
menggunakannya suka-suka.
Font Squirrel

Font Squirrel adalah sumber terpercaya lainnya. Sebagian besar font yang ditampilkan dalam Font
Squirrel sudah dilengkapi dengan lisensi komersial. Untuk menghindari kebingungan, situs ini
memudahkan pengguna untuk memeriksa lisensi untuk setiap font sebelum mengunduhnya.

Font Squirrel juga dilengkapi dengan seperangkat alat yang bermanfaat, termasuk Generator
Webfont untuk membuat font web Anda sendiri dan Font Identifier yang keren, yang membantu
Anda mendeteksi dan menemukan font berdasarkan gambar.

Font Space
Situs ini menampilkan koleksi lebih dari 32.000 font gratis dari lebih dari 2.100 desainer. Situs ini
juga rumah bagi lebih dari 746.000 anggota yang menikmati mengunduh font gratis.

Kamu bisa menggunakan FontSpace untuk menemukan banyak font gratis untuk digunakan
dalam private project kamu. 

DaFont

DaFont adalah platform populer lainnya untuk mengunduh font gratis. Sebagian besar font di situs
hanya mendukung lisensi personal use, tetapi ada banyak font yang datang dengan lisensi
komersial juga.

Salah satu fitur yang membuat DaFont menonjol adalah sistem kategorinya. Yang memungkinkan
Anda meramban koleksi fontnya berdasarkan tema yang berbeda seperti font bertema horor, font
video game, font bertema valentine, dan banyak lagi. Ini menawarkan desainer cara mudah untuk
cepat menemukan font untuk berbagai jenis proyek.

1001Font
Jangan tertipu dengan namanya, 1001font memiliki lebih dari 9000 font. Situs ini menampilkan
koleksi font yang sering diperbarui. Banyak font tersedia untuk penggunaan komersial.

Jangan lupa mengaktifkan filter “only show font with commercial use license” yang berada di
sebelah kotak contoh teks seperti gambar di bawah:

Selain 5 di atas masih banyak tempat lain yang bisa dijadikan tempat untuk menemukan font gratis.
Namun kembali lagi perhatikan lisensi penggunaannya.

Tips Memasangkan Font

Melalui sumber yang sudah ada
Memilih font yang tepat untuk mendukung desain bisa mengubah hasil akhir dari desain yang kamu
buat. Di bawah ada sumber-sumber yang memuat tips untuk memasangkan font :

 https://fontpair.co/ : fontpair memberikan list contoh pemasangan 2 tipe font yang ada di
google font dengan mengetes langsung seperti apa kelihatannya jika kedua font
dipasangkan secara langsung. Fontpair juga menyediakan link untuk mendownload font-font
tersebut tanpa kamu harus mencarinya lagi di google font.
 https://www.befunky.com/learn/font-pairing/
 https://www.smashingmagazine.com/2010/11/best-practices-of-combining-typefaces/

Membuat pasangan font sendiri

Beberapa tips memasangkan font yang ditulis oleh visme.com :

 Jangan menggunakan lebih dari 3 tipe typeface, contohnya : menggunakan Montserrat,

Playfair Display dan Courier New dalam desain.
 Pasangkan font serif dan sans-serif
 Membuat hierarki ukuran teks.
 Membuat kontras melalui ketebalan font
 Memperhatikan 'personality' atau 'vibe' yang diberikan oleh font.
 Jangan menggunakan font dengan personality menonjol untuk dipasangkan dengan font lain
yang sama-sama memiliki personality khusus. Pasangkanlah dengan font
dengan personality netral dan terlihat biasa, seperti font-font sans-serif
 Jika menggunakan font dari 1 typeface yang sama, gunakan perbedaan kontras ketebalan
warna.

Topic 5 : Moodboard
Tempat mencari inspirasi desain paling populer di kalangan UI/UX designer adalah
melalui Behance, Dribbble, Pinterest, dan Awwwards
Dengan menggunakan kata kunci, akan muncul sederet gambar-gambar pilihan yang bisa jadi
inspirasi dalam mendesain interface. 

Saat bicara tentang sebuah halaman atau screen di mana terdapat desain yang dibuat dengan
hanya mengaplikasikan warna dan typography. Kegiatan ini mungkin tanpa kamu sadari biasa kamu
lakukan di instagram dengan membuat instagram story dengan mengandalkan tool text dan
merubah warnanya, instagram membiarkan user bermain dengan typography meski dalam kondisi
terbatas. hal ini bisa menjadi langkah kecil untuk menguasai typography dalam visual design.

Mengumpulkan contoh untuk menjadi Moodboard

Mari kita coba mencari inspirasi desain untuk membuat desain dengan hanya warna dan
typography.

Melalui pinterest, saya mencari dengan kata kunci “simple typography design”. Lalu pinterest
memunculkan hasil pencarian seperti pada gambar di bawah.

Dengan melihat beberapa desain, saya bisa mengumpulkannya sebagai board pada pinterest, atau
langsung mengambil gambar tersebut untuk membuat kurasi inspirasi desain yang biasa
disebut moodboard.
Yang dilakukan adalah mengumpulkan inspirasi desain yang sesuai dengan keinginan/visi yang
sudah dipikirkan, sebagai proses mencari ide atau inspirasi.

Gambar moodboard di atas, mengkurasi foto dan poster inspirasi perpaduan warna kuning dengan
warna netral (putih, abu, dan hitam).

Gambar di atas adalah contoh moodboard dalam eksplorasi mood yang dilakukan oleh fotografer

Dengan adanya moodboard, desainer bisa melihat visi desain yang akan dibuat nantinya. Utamanya
akan sangat membantu sebuah tim dengan beberapa designer untuk menyamakan persepsi dan
tujuan akan seperti apa desain ini dibuat dan seperti apa batasannya.

Hal-hal yang dijelaskan di atas ini akan lebih memudahkanmu jika dilakukan dengan bantuan tools
(personally i use one design tool : adobe xd to design almost everything), maka langkah selanjutnya,
kamu perlu mengenal design tools yang akan jadi senjata proses UI designing kamu.

Di titik ini, kamu sudah mengenal dasar proses UX dan sudah mengenal dasar visual design.
Selanjutnya kamu bisa mulai mengeksplorasi tool yang biasa digunakan oleh UI/UX designer untuk
membuat prototype yang biasa disebut dengan istilah prototyping tool seperti Adobe XD dan Figma.

Topic 6 : Basic Design Tool Knowledge

Basic Design Tool Knowledge
Berkarir di bidang UI/UX design bisa dimulai dari background apa saja. Dengan mempelajari
beberapa prinsip visual design dan mengenal tahapan dari metode yang dilakukan, disertai dengan
pengetahuan dalam mengaplikasikan prinsip-prinsip tersebut ke dalam sebuah desain, hal ini tidak
mustahil. Dengan terus belajar dan berlatih, meski terasa seperti membanting setir, tetap bisa
dicapai.

Salah satu tahap dalam proses yang dilakukan UI/UX designer adalah mendesain sebuah high-
fidelity prototype, yang orang sering sebut interactive prototype atau mockup, yang dibuat dengan
tujuan menunjukkan bagaimana suatu produk aplikasi akan terlihat dan berfungsi jika sudah
dibangun (dikembangkan oleh developer) nantinya.

Bagi kamu yang sama sekali belum kenal dengan workspace menggunakan Figma atau Adobe XD,
saya rekomendasikan untuk menonton video perkenalan Figma dan tools yang ada di dalamnya
melalui video buatan Kukuh Aldy yang berbahasa Indonesia di bawah ini:

YT: