JUNIOR MULTIMEDIA

DESAINER UI/UX

Instruktur :
SATRIA INDRA PRAJA PERSADA S.DS , M.M. M.B.A
G a m b a r / I m a g e

Dalam Membuat Karya Digital Gambar

adalah Elemen Penting yang berfungsi untuk
Menarik Pengguna dalam Memainkan
Aplikasi Tesebut

Selain Sebagai sarana yang baik untuk

menambah Estetika dalam Karya Tersebut
Gambar juga dapat Menginformasikan pesan
dan Mempermudah Pengguna dalam
Memahami Sebuah Konten
B a g a i m a n a G a m b a r d i b u a t

Ada 2 Cara Membuat Sebuah Gambar

- Menggunakan Kamera ( Foto )

- Menggunakan Tangan atau aplikasi
( Menggambar )
F o t o

Foto adalah gambar diam baik

berwarna maupun hitam-putih yang
dihasilkan oleh kamera yang
menangkap atau merekam suatu
objek atau kejadian atau keadaan pada
suatu waktu tertentu.
M e n g g a m b a r

adalah kegiatan kegiatan membentuk

citra, dengan menggunakan banyak
pilihan teknik dan alat. Bisa pula berarti
membuat tanda-tanda tertentu di atas
permukaan dengan mengolah goresan
dari alat gambar.
J e n i s - J e n i s G a m b a r D i g i t a l

Dalam Membuat Karya Digital ada dua Jenis

Gambar yang sering dipakai
- Bitmap
- Vector
B i t m a p

pola gambar berupa kotak-kotak kecil (pixel)

berwarna-warni yang ditumpuk satu sama
lain dengan jumlah yang sangat banyak,
hingga menunjukkan gambar.
V e c t o r

vektor adalah hasil karya grafis (gambar) digital yang terdiri dari titik dan garis dengan
posisi tertentu yang terkoneksi satu sama lain melalui perhitungan matematika.
P e r b e d a a n V e c t o r d a n B i t m a p
I l u s t r a s i

ilustrasi adalah hasil visualisasi dari suatu tulisan dengan teknik menggambar, fotografi,
lukisan, atau teknik seni rupa lainnya yang fokus pada hubungan subjek dengan tulisan
ketimbang pada bentuknya.
F u n g s i I l u s t r a s i

Ilustrasi memiliki beberapa fungsi penting

dalam sebuah tulisan. Adapun beberapa
fungsi ilustrasi adalah sebagai berikut:
D e k s r i p t i f

gambar ilustrasi dapat memberikan

penjelasan ringkas suatu tulisan sehingga
lebih cepat dipahami pembacanya.
E k s p r e s i f

menyampaikan ide dan gagasan dalam bentuk gambar merupakan fungsi

ekspresif dari ilustrasi.
K u a l i t a t i f

penyampaian informasi penting dapat

dilakukan dengan ilustrasi dalam bentuk
grafik, tabel, simbol, dan lain-lain.
A n a l i t i s

dalam proses analitis, suatu ilustrasi dapat digunakan untuk menjelaskan bagian-
bagian suatu benda secara rinci.
I c o n

Icon adalah tampilan suatu

objek atau gambar yang
merepresentasikan fungsi dari
objek itu sendiri. Dalam hal ini,
icon dibuat untuk
mempermudah pengguna
dalam mengakses objek
tertentu. Hal ini disebabkan
karena adanya bantuan visual
yang membantu pengguna
familiar terhadap objek icon
tersebut.
F u n g s i d a n M a n f a a t I c o n

Sebagaimana telah disinggung sebelumnya,

icon dibuat untuk memudahkan pengguna
dalam mengoperasikan komputer. Lebih dari
itu, icon mempunyai fungsi-fungsi lain, yang
detailnya dijelaskan sebagai berikut.
1 . S e b a g a i L a m b a n g d a n I d e n t i t a s

Kini, hampir setiap objek diwakilkan oleh

lambang tertentu yang mengandung makna
sesuai dengan kegunaannya masing-masing.
Adanya sebuah icon membuat benda atau
objek memiliki identitas yang membuatnya
tidak sama dengan objek lain.
2 . R e p r e s e n t a s i C i r i F i s i k

Jika Anda perhatikan, icon sebenarnya

mewakili ciri fisik dari objek atau aplikasi yang
bersangkutan. Misalnya, aplikasi Alarms &
Clock memiliki icon dengan gambar jam.
Begitu pun aplikasi Word 2016 dan Excel 2016
yang memiliki icon berupa selembar kertas
dengan tanda huruf W dan X besar di
dalamnya.
3 . R e p r e s e n t a s i F u n g s i

Fungsi lain dari icon adalah sebagai

representasi dari fungsi aplikasi itu sendiri.
Misalnya, pada icon software Windows
Defender. Dapat terlihat langsung bahwa
icon tersebut menggambarkan fungsi dari
program tersebut, yakni sebagai pelindung
komputer dari serangan virus maupun
malware.

Pada hakikatnya, identitas icon tersebut

menggambarkan fungsi, manfaat, struktur,
dan hal lain dari objek yang bersangkutan.
Entah dengan kandungan makna tersirat
maupun tersurat.
4 . M e m u d a h k a n P e n g g u n a

Semakin sering pengguna melihat icon

tersebut, semakin mudah dikenali dan
familiar pula objek tersebut. Hal ini tentu
menguntungkan bagi pihak tertentu dalam
bidang marketing, yang mana sukses
memperkenalkan objek tersebut kepada
pengguna.

Misalnya saja pada aplikasi yang memiliki

nama rumit, yang menyulitkan pengguna
mengingatnya. Di sinilah, fungsi dari icon
membantu pengguna dalam mengingatnya.

Ini dikarenakan sebagian besar manusia lebih

mudah mengingat gambar daripada nama
yang cukup rumit. Dengan begitu, pengguna
cukup mencari icon yang diingat untuk
mengakses aplikasi tersebut.
5 . M e m p e r c e p a t P e n g g u n a a

Keberadaan icon memungkinkan Anda

untuk menemukan suatu objek dengan
cepat. Contohnya pada icon yang ada pada
desktop komputer, dimana Anda cukup
mengklik ganda icon yang ingin dicari. Jadi,
pengguna tidak perlu mencari aplikasi yang
ingin dibuka melalui kolom pencarian.
C i r i I c o n y a n g B a i k

Icon yang baik adalah icon yang dapat dilihat

dengan jelas dan mudah dikenali oleh
pengguna. Dari sisi desain pun icon yang baik
memiliki beberapa ciri, seperti:
1 . T e r d i r i d a r i B e n t u k B e s a r y a n g D i b e r i
D e t a i l

Layaknya unsur desain grafis lain, icon juga terdiri dari bentuk-bentuk sederhana, seperti
segitiga, persergi, dan elips. Agar menjadi suatu icon yang baik, bentuk sederhana ini
bisa dilengkapi dengan detail-detail lain.
2 . D e t a i l T i d a k B e r l e b i h a n k

Konon, icon yang baik adalah icon yang sederhana. Sebab, icon yang sederhana relatif
lebih nyaman untuk dipandang. Jadi, meski perlu diberi detail, berilah detail secukupnya.
3 . K o n s i s t e n

Terkadang, icon dibuat dalam satu paket. Misalnya, paket media sosial yang berisi logo
Twitter, Instagram, TikTok, dan lain-lain.

Dalam hal ini, konsistensi perlu dijaga agar icon tetap selaras. Konsistensi ukuran dan
kesatuan nilai estetik, seperti tebal garis dan gaya icon, juga perlu diperhatikan.
4 . M u d a h D i k e n a l i

Icon yang baik juga ditandai dengan desain yang mudah dikenali dan
dibedakan dengan yang lain. Sebagai contoh, apabila Anda membuat icon
berdasarkan gambar anjing corgi, maka jangan sampai bentuk icon Anda
terlihat seperti gambar anjing husky.
5 . S e i m b a n g

Keseimbangan merupakan hal yang perlu diperhatikan dalam sebuah desain, terutama
desain icon. Dalam hal ini, seimbang juga tidak selalu terpaku pada angka jarak. Pada
intinya, sesuaikanlah desain Anda dengan komposisi yang ada sehingga hasil yang
diberikan nyaman untuk dilihat.
6 . B e r k e p r i b a d i a n

Icon adalah buah karya dengan gaya tertentu.

Gaya inilah yang membuat desain icon
memiliki ‘kepribadian’. Hal ini tentunya sesuai
dengan pesan apa yang ingin disampaikan.

Tak hanya desain, warna juga bisa

mempertegas kepribadian yang ditunjukkan
lewat icon. Icon dengan warna hitam-putih
tentu akan memberi kesan berbeda dengan
icon berwarna pastel.
7 . S e l a r a s d e n g a n M e r e k

Kepribadian sebuah icon juga harus diiringi

dengan tone of voice dari merek Anda.
Jangan sampai, desain lainnya sudah
konsisten, sementara icon Anda malah tidak.
Ini tentu bisa mengurangi brand experience
audiens Anda.
F o r m a t G a m b a r y a n g B i a s a d i g u n a k a n

Format Gambar yang biasanya digunakan

dalam Media UI/UX

-JPG untuk Gambar Biasa

-PNG untuk Gambar yang tidak memiliki
background Transparan
-SVG - Biasanya untuk Icon agar tidak pecah
C a r a m e m a s u k a n G a m b a r d i F i g m a

Cara Memasukan Gambar di Figma ada

Dengan Cara Menekan Icon Rectangle lalu
Tekan Place Image ( Ctrl + Shift + K )
C a r a m e n g c r o p G a m b a r d i F i g m a

Klik Gambar lalu Ubah Fill Menjadi Crop

> Atur Ukuran > ENTER
C a r a m e m b u a t G a m b a r d i F i g m a

Cara Membuat Gambar Didalam Figma

adalah dengan Menggunakan Toolbar dan
Properties Sehingga di dapatkan Gambar
Sesuai dengan keinginan Kita
L a t i h a n

Silahkan ada Membuat Icon yang dibutuhkan

untuk Melengkapi Karya Multimedia Anda