Warna merupakan sensitivitas yang berhubungan dengan indra, sehingga warna dapat merebut perhatian, menarik, menolak, menggemaskan bahkan warna bisa mempengaruhi emosi. Warna dapat menimbulkan kesan pertama pada pengunjung ketika menjelajah sebuah situs web

1. PEMROGRAMAN WEB
DESAIN (RPL203408)
PEWARNAAN dan TIPOGRAFI

2. Warna
Warna merupakan sensitivitas yang
berhubungan dengan indra, sehingga warna
dapat merebut perhatian, menarik, menolak,
menggemaskan bahkan warna bisa
mempengaruhi emosi.
Warna dapat menimbulkan kesan pertama
pada pengunjung ketika menjelajah sebuah
situs web.

3. Aspek Psikologi Warna
Warna mempunyai emosi yang melekat,
yang bisa ditimbulkan dengan
memperlihatkan keserasian warna
dengan cara atau kombinasi yang benar.
Warna yang digunakan dapat memiliki
makna yang positif sekaligus makna
negatif secara emosional bagi pengguna
atau pengunjung.

4. Aspek Psikologi Warna
• Merah Kekuatan, energi, tenaga, hasrat , cinta.
Dengan sedikit memberikan warna merah
bisa menimbulkan gairah, membangkitkan
semangat, mendorong keinginan
Bahaya, perang, kekejaman, kekerasan, api,
darah. Terlalu banyak warna merah bisa
disangka terlalu agresif

5. Aspek Psikologi Warna
• Merah Muda Kewanitaan (feminim), keremajaan
(masa muda).
Naif, kelemahan, kekurangan.

6. Aspek Psikologi Warna
• Orange Kehangatan, bersemangat, ceria,
keseimbangan, musim gugur, menimbulkan
getaran
Meminta dan mencari perhatian

7. Aspek Psikologi Warna
• Kuning Sinar matahari, emas, kekayaan,
keberuntungan,
kehidupan.
Tidak jujur, pengecut, cemburu, iri hati,
penghianatan, penipuan, kebohongan,
resiko, sakit

8. Aspek Psikologi Warna
• Hijau Alam, lingkungan, hidup, pertumbuhan,
stabil, santai, kesuburan, harapan
Kecemburuan, nasib buruk, iri hati, dengki

9. Aspek Psikologi Warna
• Biru Kepercayaan, kesetiaan, ketenangan,
kedamaian, ketulusan, kesejukan, air, awan,
harmoni, kebersihan, konservatif, percaya
diri, penyembuhan. Merupakan warna yang
aman dipakai untuk desain
Kesedihan, kedinginan, depresi, penurunan
vitalitas.

10. Aspek Psikologi Warna
• Ungu Kebangsawanan, perubahan, spiritual
Kesombongan, keangkuhan, kejam, kasar,
duka cita.

11. Aspek Psikologi Warna
• Coklat Tanah, bumi, netral, hangat, keamanan,
perlindungan
Tumpul, kotor, membosankan

12. Aspek Psikologi Warna
• Abu-abu Modern, cerdas, bersih, kokoh, masa depan,
intelektual
Umur tua, kesedihan, bosan

13. Aspek Psikologi Warna
• Putih Kesucian, kebersihan, kemurnian,
kesederhanaan, damai, kebaikan, disiplin,
perawan, perkawinan, musim dingin, musim
salju.
Kematian (budaya timur), dingin, mandul,
steril, klinik, hampa.

14. Aspek Psikologi Warna
• Hitam Kekuatan, keanggunan, kemewahan,
misteri, kecanggihan, kemakmuran,
kepuasan, pengalaman, keras, kokoh, sangat
kuat.
Kematian (budaya barat), takut, setan,
kesedihan, duka cita, marah, anonim,
penyesalan.

15. Warna dalam Desain Web
Penggunaan Warna dalam Desain Web memiliki beberapa peran
yang sangat penting :
• Menegaskan elemen yang dianggap penting.
• Menarik perhatian.
• Membimbing pembaca untuk menentukan daerah mana yang
seharusnya lebih dahulu dibaca.
• Menghubungkan antara satu elemen dengan elemen yang lain.
• Mengatur informasi yang ditampilkan.
• Menentukan bagian yang berbeda pada sebuah grafik.
• Mengelompokan atau memisahkan elemen yang satu dgn yang lain.
• Membangkitkan respon yang emosional.

16. Jenis-Jenis Warna
• Warna Primer
Warna primer tidak bisa dibuat dengan
mencampurkan warna lain, warna ini
berdiri sendiri.
Warna primer terdiri atas merah, kuning,
dan biru

17. Jenis-Jenis Warna
• Warna Sekunder
Warna sekunder dibuat dengan
mengkombinasikan dua warna primer.
Warna sekunder terdiri atas orange,
hijau dan ungu

18. Jenis-Jenis Warna
• Warna Tersier
Warna Tersier dibuat dengan
mengkombinasikan warna primer dengan
perbatasan warna sekunder. Warna tersier
terdiri atas kuning-hijau, kuning-orange,
merah-orange, merah-ungu, biru-ungu, dan
biru-hijau.

19. Metode Pemilihan Warna
• Warna Beruntun
Warna beruntun terdiri atas tiga warna
yang letaknya saling bersebelahan dan
biasanya ada satu warna yang menonjol
(dominan).
Metode ini menghasilkan warna lembut
yang serasi, misalnya kuning, kuning-
orange dan orange atau kuning, kuning-
hijau dan hijau.

20. Metode Pemilihan Warna
• Warna Berlawanan
Warna berlawanan terdiri dari atas dua
warna yang letaknya saling
bersebrangan.
Metode ini menghasilkan warna yang
lebih hidup (kontrasnya tinggi),
misalnya biru dan orange, merah dan
hijau, atau kuning dan ungu.

21. Metode Pemilihan Warna
• Warna Segitiga
Warna segitiga sesuai dengan
namanya terdiri atas tiga warna
yang letaknya ditentukan dengan
bentuk segitiga.
Metode ini menghasilkan warna
yang serasi, misalnya biru, merah
dan kuning.

22. Metode Pemilihan Warna
• Warna Memudar
Metode ini menggunakan satu warna
yang diturunkan intensitas
warnanya menjadi lebih muda,
misalnya warna merah akan
diturunkan intensitas warnanya
sebanyak 50% atau 75%.

23. Metode Pemilihan Warna
• Warna Kombinasi
Warna kombinasi adalah gabungan dari dua
warna atau lebih yang menghasilkan warna
yang harmonis
• Hitam, putih, abu – abu, merah
• Merah, orange
• Orange, Ungu
• Ungu, Kuning
• Hijau, Ungu
• Biru, Kuning
• Biru, Ungu, Putih
• Hijau, Coklat
• Teal, Ungu/Lilac

24. Metode Pemilihan Warna
• Warna Hangat
Warna hangat cocok digunakan untuk situs yang
penuh semangat dengan tema yang berani dan
tegas. Warna hangat terletak pada bagian kanan
roda warna.
• Kuning
• Kuning-Orange
• Orange
• Merah-Orange
• Merah
• Merah-Ungu

25. Metode Pemilihan Warna
• Warna Dingin
Warna dingin cocok untuk menyampaikan pesan
yang sederhana yang memberi kesan tentram.
Warna dingin terletak pada bagian kiri roda
warna.
• Kuning – Hijau
• Hijau
• Biru – Hijau
• Biru
• Biru – Ungu
• Ungu

26. Metode Pemilihan Warna
• Bagaiman Komposisi yang Sebaiknya Dipilih
Tidak ada yang namanya “warna benar” dan “warna salah”,
maka Tidak Ada Rumusan Pasti bagaimana cara untuk
memadu padankan warna pada desain website.
Yang harus menjadi patokan dan kuncinya adalah,
bagaimana kita memahami target pengunjung website kita
sehingg dapat menerka bagaimana reaksi pengunjung dalam
merespon warna-warna tertentu, memahami mereka dapat
disenangkan dengan pilihan warna yang bagaimana, dan
sebagainya.

27. Tipografi
Tipografi adalah seni dalam huruf yang
meliputi pemilihan huruf, penentuan ukuran
yang tepat, dimana teks dapat diputus, spasi
jarak, dan bagaimana teks dapat dengan
mudah dibaca

28. Jenis Huruf
Serif
• Merupakan jenis huruf tradisional, cirinya mempunyai “kaki” atau
“ekor”, misalnya Times New Roman, Garamond, Palatino.
• Karena bentuk hurufnya yang berkaki membuat garis tidak
kelihatan, ini memudahkan mata pembaca untuk menelusuri dan
membaca teks.
• Cocok untuk teks yang panjang dengan jarak spasi yang sedikit
pada organisasi, pemerintahan, pendidikan dan perusahaan.
• Bentuk huruf ini memberikan kesan formal, intelektual, anggun dan
konservatif.

29. Jenis Huruf
Sans-Serif
• Sans-serif yang berarti tidak berkaki (bahasa perancis),
misal jenis huruf ini adalah Helvetica, Arial, Verdana dan
Avant Garde.
• Jenis ini terlihat sederhana dan tidak formal, sehingga
cocok untuk judul dan subjudul.
• Jika ingin menggunakan jenis ini untuk teks utama,
imbangi dengan memberikan jarak spasi yang agak
lebar pada teks.

30. Jenis Huruf
Dekoratif
• Jenis huruf yang mempunyai desain yang rumit, sesuatu
yang baru dan menciptakan suasana hati yang
membangkitkan emosi.
• Jangan sampai digunakan untuk teks yang panjang atau
isi dari halaman.
• Gunakanlah untuk judul dan grafik, tapi jangan terlalu
banyak.

31. Jenis Huruf
Skrip
Jenis ini menyerupai tulisan tangan. Jenis ini juga sering
disebut kursif. Dan jangan terlalu banyak digunakan.
Bentuk huruf ini memberikan kesan keanggunan, sentuhan
pribadi dan kepuasan.
Monospace
Jenis huruf yang mempunyai jarak dan lebar yang sama pada
setiap huruf

32. Penggunaan Huruf
Tujuan agar huruf dapat dibaca dengan mudah dan enak dilihat.
Misalnya :
• Buatlah kontras yang tinggi antara teks dengan latar belakang
atau antara teks dengan gambar.
• Pilihlah jenis huruf yang mudah dibaca, biasanya jenis serif dan
sans-serif. Jenis huruf dekoratif atau kursif lebih sulit untuk dibaca,
biasanya dipakai untuk judul, itupun harus berukuran besar.
• Kadang – kadang jenis huruf sans-serif mudah dibaca daripada
serif ketika karakter yang digunakan berukuran kecil .

33. Penggunaan Huruf
• Aturlah leading dan kerning. Leading adalah spasi antara dua
baris teks, sedangkan kerning adalah jarak spasi antar huruf.
• Gunakan huruf standar yang terdapat pada semua komputer
atau browser, seperti Times New Roman, Helvetica, Arial dan
Verdana. Jika menginginkan jenis huruf lain yang unik untuk
keindahan, jadikan huruf tersebut sebagai grafik.

34. Petunjuk Pemilihan Huruf
1. Secara formal, pasangkan jenis huruf serif untuk isi halaman
dan sans-serif untuk judul.
2. Jika menggunakan beberapa macam jenis huruf dalam sebuah
halaman, biasanya jenis huruf dekoratif atau skrip digunakan
untuk judul dan serif atau sans-serif untuk isi halaman, agar
bervariasi.
3. Usahakan jangan lebih dari dua belas kalimat dalam satu
baris teks, kanera akan mempersulit pembacaan.

35. Petunjuk Pemilihan Huruf
4. Hindari pemakaian kombinasi dua huruf yang sangat mirip,
karena menghasilkan kontras yang rendah, ini menyebabkan
ketidakserasian dan ketidakcocokan dalam pandangan.
5. Membatasi pemakaian jenis huruf dalam satu halaman.
Jangan sampai melebihi tigaatau empat jenis huruf.
6. Hindari penggunaan slider (penggulungan halaman) lebih
dari sekali. Apabila banyak artikel yang ingin ditampilkan,
buatlah link ke halaman lain.

36. Petunjuk Pemilihan Huruf
7. Ukuran huruf untuk isi halaman adalah 10-14 point dan judul
adalah 14-30 point.
8. Memberikan ketebalan dan huruf besar (kapital) pada teks
untuk judul, agar dapat membedakan dengan isi halaman
9. Hindari telalu banyak huruf besar karena akan memperlambat
kecepatan membaca dan memboroskan ruang
10. Hindari pemakaian jenis huruf monospace untuk isi halaman,
karena memerlukan banyak perhatian untuk membacanya.
Hal ini dapat mengalihkan pesan yang ingin disampaikan.

37. Terima Kasih
www.ngangsuilmu.com