PRINSIP DESAIN

INTERAKSI MANUSIA DAN KOMPUTER

 Pembahasan Persentasi
❑ Pengertian & Prinsip Design ❑ Pembuatan User Interface

❑ Ide dalam membuat Design ❑ Fonts

❑ Tantangan dalam Design ❑ Warna

❑ Contoh Design ❑ Design Icon

❑ Filosofi Design
❑ Prinsip Design Grafik
Pengertian Desain
▪ Desain merupakan pola rancangan yang menjadi dasar pembuatan suatu
benda.

▪ Desain merupakan langkah awal sebelum memulai membuat suatu benda,

seperti baju, furniture, bangunan, dll.

▪ Pada saat pembuatan desain biasanya mulai memasukkan unsur berbagai

pertimbangan, perhitungan, cita rasa, dll. Sehingga bisa dibilang bahwa sebuah
desain merupakan bentuk perumusan dari berbagai unsur termasuk berbagai
macam pertimbangan di dalamnya.
Desain Berpusat pada Sistem

• Fokusnya pada teknologi

− Apa yang dapat dibangun dengan mudah
menggunakan alat yang tersedia di platform
khusus ini?
− Apa yang menarik bagi saya, sebagai
pengembang, untuk dibangun?
 Desain yang Berpusat pada Pengguna
• Desain didasarkan pada pengguna
− Tugas
− Kemampuan
− Kebutuhan
− Konteks

• Mantra: Kenali pengguna!

 Prinsip – Prinsip Desain
Prinsip-prinsip desain adalah untuk membantu menggabungkan berbagai
elemen desain ke dalam tata letak yang baik.

Ada empat prinsip desain:

◦ Keseimbangan
Susunan visual yang telah ditentukan oleh ukuran, kegelapan atau
keringanan, dan ketebalan dari baris. Keseimbangan/balancing dapat
diperoleh dari warna, nilai, ukuran, bentuk, tekstur.
Prinsip – Prinsip Desain
◦ Irama

Repitisi menciptakan ritme dan memperkuat desain keseluruhan dengan

menyatukan elemen-elemen yang konsisten seperti logo, jenis warna,
hingga jenis font.

◦ Penekanan

Tata letak setiap kebutuhan yang penting untuk menarik para

pembaca ke bagian penting dari tata letak.
Prinsip – Prinsip Desain
◦ Kesatuan

Menyatukan elemen elemen oleh kelompok yang saling berdekatan

sehingga terlihat seperti milik bersama. Seperti membuat kerangka
untuk margin, kolom, jarak, dan proporsi.
Ide Dalam Membuat Desain
Bagaimana kami membuat dan mengembangkan ide dan desain antarmuka
baru?

• Ide datang dari : • Pinjam dari bidang lain:

− Imajinasi − Animasi
− Analogi − Teater
− Tampilan informasi
− Pengamatan praktik
saat ini − Arsitektur
− Pengamatan sistem − ...
saat ini
 Tantangan Membuat Desain
Tantangan bisa diartikan yaitu suatu rintangan atau suatu hambatan dalam
pembuatan desain.

Tantangan dalam membuat desain antara lain:

➢ Proses pembuatan

➢ Metode merancang

➢ Produk yang dihasilkan (rancangan).

➢ Serta disiplin ilmu yang digunakan (desain).

Contoh Desain
▪ Advertising (Periklanan)
▪ Business (Bisnis)
▪ Political (Politik)
▪ Education (Pendidikan)
▪ Film and animation (Film dan animasi)
▪ Seminar (Acara)
Desain Grafik
▪ Bagian "tampilan & nuansa" dari sebuah antarmuka

▪ Apa yang awalnya ditemui seseorang

− Menyampaikan kesan, suasana hati

▪ Desain Grafik adalah kombinasi kompleks antara kata-kata, gambar, angka,

grafik, foto dan ilustrasi yang membutuhkan pemikiran khusus dari seorang individu
yang bisa menggabungkan elemen-elemen tsb, sehingga dapat menghasilkan
/menginformasikan pesan yang seefektif mungkin dalam bidang seni desain.
Filosofi Desain
✓ Economy of visual elements
✓ Less is more
✓ Clean, well organized
Prinsip Desain Grafis
▪ Metafora

▪ Kejelasan

▪ Konsistensi

▪ Penyelarasan

▪ Kedekatan

▪ Kontras
 Metaphor (Metafora)
▪ Menampilkan dan menggambarkan elemen-elemen
(titik, garis, warna, ruang dan tekstur) yang relefan
dan dikenali.
▪ Menggunakan desktop yang berhubungan dengan
perancangan interface (Adobe Photoshop, Corel
Draw, Macromedia flash dll).
▪ Contoh dari Metaphor adalah website toko online
yang dimana pengunjung dibawa ke tempat
seolah-olah mereka benar ada di toko online
tersebut.
Clarity (Kejelasan)

• Setiap elemen dalam antarmuka harus memiliki alasan untuk

berada di sana

− Buat alasan itu jelas juga!

− Less is more
Clarity (Kejelasan)

• White space
‒ Leads the eye
− Memberikan simetri dan keseimbangan melalui penggunaannya
− Memperkuat dampak pesan
− Memungkinkan mata untuk beristirahat di antara elemen aktivitas
− Digunakan untuk mempromosikan kesederhanaan, keanggunan,
kelas, penyempurnaan
Contoh Clarity (Kejelasan)

penampilan Jelas, bersih

www.schwab.com
Contoh Clarity (Kejelasan)

Penampilan Jelas, bersih

www.schwab.com
Consistency (Ketetapan)
▪ Konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography (model
form yang digunakan pada suatu website), teks, dll.

▪ Contoh untuk website http://www.santafean.com memiliki prinsip

konsistensi yang baik, baik dalam layar maupun antar layar.
 Alignment (Perataan)
◦ Alignment berperan penting dalam menciptakan koneksi visual yang mulus

antara elemen-elemen desain.

◦ Prinsip ini memberikan tampilan yang teratur untuk shape, gambar, dan

baris teks, dengan menghilangkan elemen-elemen yang ditempatkan

secara acak-acakan.

◦ Untuk perataan dapat digunakan rata kiri, kanan atau tengah.

Alignment (Perataan)
Alignment (Perataan)

▪ Western world
Mulai dari kiri atas

▪ Memungkinkan mata untuk mengurai tampilan

dengan lebih mudah
Alignment (Perataan)

▪ Grids (kisi-kisi)

▪ Sembunyikan garis horizontal dan vertikal untuk membantu

mengalokasikan komponen window/jendela

▪ Sejajarkan hal-hal terkait

▪ Kelompokkan item secara logis

Alignment (Perataan)

• Grid
Proximity
▪ membantu dalam menciptakan
hubungan antara elemen-
elemen yang serupa atau saling
terkait.

▪ Elemen-elemen ini tidak perlu

dikelompokkan bersama, melainkan
harus dihubungkan secara
visual dengan font, warna,
ukuran, dll.
Proximity
contoh penggunaan Proximity dimana kita bisa
mengelompokkan menu berdasar fungsi dan
jenisnya.
Contrast (Keserasian Tampilan)

Kontras terjadi apabila terdapat perbedaan antara dua atau lebih

elemen desain yang berlawanan.

Yang paling umum adalah hitam vs putih, gelap vs terang, besar vs kecil,
tradisional vs modern, dan seterusnya.
Contrast (Keserasian Tampilan)
▪ Keserasian tampilan yang akan membuat pengunjung web tertarik pada web tsb.
▪ Kontras juga dapat memandu mata pengunjung untuk melihat keseluruhan
interface.
▪ untuk memperkuat fokus atau untuk memperkuat suatu interface.
▪ untuk membedakan aktifitas kendali.
▪ Juga dapat digunakan untuk men-set item yang paling utama.
▪ Item yang paling utama diberi highlight.
▪ Kontras juga mendukung skimming secara cepat.
Desain Grafik
▪ Tipografi (Typography)

Merupakan suatu ilmu dalam memilih dan menata huruf dengan

pengaturan penyebarannya pada ruang-ruang yang tersedia,
menggunakan gabungan bentuk huruf cetak, ukuran huruf, ketebalan
garis, spasi antar huruf, garis pandu dan jarak antar baris. Sehingga dapat
menolong pembaca untuk mendapatkan kenyamanan membaca
semaksimal mungkin.
Desain Grafik
▪ Tipografi (Typography)

Tipografi adalah salah satu elemen utama desain, dan dapat membuat
identitas merek atau karya seni apabila dieksekusi dengan gaya yang
disesuaikan.
Desain Grafik
▪ Tipografi (Typography)
Karakter dan simbol harus mudah terlihat dan dapat dibedakan
− Hindari penggunaan huruf besar semua
− Berdasarkan studi di temukan bahwa penggunaan campuran huruf kecil dan
besar mempercepat proses membaca

APA SAJA YANG MENYENANGKAN? Betapa menyenangkannya

UNTUK MEMBACA SEMUA TEKS INI untuk membaca semua teks ini
Desain Grafik
▪ Tipografi (Typography)

✓ Readability

✓ Legibility

✓ Jenis huruf = font

Desain Grafik
▪ Fonts

Adalah kumpulan lengkap dari karakter / huruf dalam satu bentuk

desain, ukuran (size), dan gaya (style).
Desain Grafik
▪ Fonts

‒ Menggunakan serif untuk badan teks; sans serif untuk judul

‒ Menggunakan 1-2 jenis huruf (maksimum 3 jenis huruf)

‒ Menggunakan jenis huruf normal,italic,bold

‒ Jangan sering menggunakan bold, italic, dan huruf besar untuk sebagian besar
teks/naskah,memperlambat proses baca

‒ Ukuran huruf maksimum 1-3 jenis ukuran

‒ Perhatikan warna dari background teks

Contoh Desain Grafik
▪ Fonts

KERAJINAN DAN PERMAINAN Kerajinan dan Permainan

FESTIVAL SENI
DARI ATLANTA DAN DECATUR
Festival Seni
Dari Atlanta dan Decatur
19-24 SEPTEMBER 19-24 September

Datang dan nikmati!

DATANG DAN NIKMATI

Anda lebih suka yang mana?

 Desain Grafik

▪ Warna

Warna adalah komponen utama yang tidak bisa

dilepaskan dari proses desain grafis. Karena
warna adalah bagian esensial dengan
menggunakan warna suatu desain bisa terlihat
hidup dan menarik.
 Desain Grafik

▪ Warna

Hal-hal yang perlu dipertimbangkan dalam penggunaan warna, yaitu:

– Buta warna (cacat warna)

– Monitor monochrome (hanya mengenal satu warna)

– Pengkodean ekstra meningkatkan tampilan interface

·
Desain Grafik
▪ Desain Icon

Adalah proses merancang grafik simbol yang mewakili beberapa fantasi atau motif
abstrak yang nyata, entitas atau tindakan.

Menampilkan objek atau aksi dalam tata cara yang mudah dikenali dan di ingat
Desain Grafik
▪ Desain Icon

‒ Jadikan ikon menonjol dari latar belakang

‒ Pastikan bahwa pada salah satu icon yang dipilih terlihat lebih terang dari yang lain

‒ Tiap icon menggunakan simbol yang berbeda satu dengan yang lain

‒ Membuat icon yang sejenis ke dalam kelompok icon yang berkaitan

‒ Menghindari penggunaan icon terlalu terinci