Upload
orinda
View
83
Download
1
Embed Size (px)
DESCRIPTION
PRINSIP DAN DASAR-DASAR DISAIN WEB. Materi 8. I WAYAN ORDIYASA, S.KOM, M.T. Ciri Disainer Berbakat. Selalu tertarik pada disain dan Grafik Latihan Ketajaman Mata Belajar Program Aplikasi Komputer untuk Aplikasi Pengolah Grafik Konsisten terus belajar dan mencoba. - PowerPoint PPT Presentation
Citation preview
PRINSIP DAN DASAR-PRINSIP DAN DASAR-DASAR DISAIN WEBDASAR DISAIN WEB
I WAYAN ORDIYASA, S.KOM, M.T.
Ciri Disainer BerbakatCiri Disainer Berbakat
Selalu tertarik pada disain dan GrafikLatihan Ketajaman MataBelajar Program Aplikasi Komputer
untuk Aplikasi Pengolah GrafikKonsisten terus belajar dan mencoba
Kualifikasi Disainer HandalKualifikasi Disainer Handal
Pandangan atau Visi: Kemampuan dan menemukan ide atau gagasan kemudian mengolahnya dalam pikiran dan ide
Imajinasi atau daya khayal: Kemampuan untuk menggunakan ide yang didapat secara efektif, yaitu dengan membawa inti dari ide tersebut agar bisa diterapkan kreatifitas menjadi salah satu elemen penting.
Keputusan atau ketepatan memilih: Kemampuan untuk menentukan nilai dari ide tersebut dan menerapkannya dengan benar.
Dasar Disain yang baik mencakupDasar Disain yang baik mencakup
Tata letak (layout) yang rapiPewarnaan yang baikBentuk yang menarikTipografi yang menarikYang pang penting aksesnya cepat
WarnaWarna
Warna adalah sebuah sensitivitas yang berhubungan dengan indra kita, seperti halnya rasa dan bau.
Warna biasanya dipakai untuk menampilkan arti dari aktivitas kehidupan sehari-hari
Warna dapat menimbulkan kesan pertama pada pengunjung ketika menjelajahi sesuah situs web.
Aspek Psikologis WarnaAspek Psikologis Warna
Semua warna mempunyai emosi yang melekat padanya
Emosi ini bisa ditimbulkan dengan memperhatikan keserasian warna dengan cara yang benar.
Makna warna tidak selalu menunjuk pada masalah pribadi.
MaknaMakna yang terkandung pada Warna yang terkandung pada WarnaWarna Makna Positif Makna Negatif
Merah Kekuatan Energi, tenaga, hasrat, cinta. Dengan sedikit memberi warna merah menimbulkan gairah, membangkitkan semangat dan mendorong keinginan
Bahaya, perang, kekejaman, kekerasan, api darah. Terlalu banyak warna merah bisa disangka terlalu agresif
Merah Muda
Kewanitaan (Feminim), Keremajaan (masa muda) Naif, Kelemahan , kekurangan
Orange Kehangatan, bersemangat, ceria, keseimbangan, musim gugur, menimbulkan getaran. Saat ini merupakan warna yang sedang digemari/disukai untuk situs web.
Meminta dan mencari perhatian
Kuning Sinar matahari, emas, kekayaan, keberuntungan, kehidupan
Tidak jujur, pengecut, cemburu, iri hati, dengki
Hijau Alam, lingkungan, hidup, pertumbuhan, stabil, santai, kesuburan, harapan.
Kecemburuan, nasib buruk, iri hati, dengki.
Biru Kepercayaan, kesetiaan, ketenangan, kedamaian, ketulusan, kesejukan, air, awan, harmoni, kebersihan, konservatif, percaya diri, penyembuhan. Aman dipakai disain
Kesedihan, kedinginan, depresi, penurunan vitalitas.
Makna yang terkandung pada WarnaMakna yang terkandung pada Warna (Lanjutan) (Lanjutan)
Warna Makna Positif Makna Negatif
Ungu Kebangsawanan, perubahan, spiritual
Kesombongan, keangkuhan, kejam, kasar, duka cita.
Coklat Tanah, bumi, netral, hangat, kemauan, perlindungan
Tumpul, kotor, membosankan
Abu-Abu
Modern, cerdas, bersih, kokoh, masa depan, intelektual
Umur tua, kesedihan, bosan
Putih Kesucian, kebersihan, kemurnian, kesederhanaan, damai, kebaikan, disiplin, perawan, perkawinan, musim dingin, musim salju.
Kematian (budaya timur), dingin, mandul, steril, klinik, hampa
Hitam Kekuatan, keanggunan, kemewahan, misteri, kecanggihan, kemakmuran, kepuasan,pengalaman, keras, kokoh, sangat kuat.
Kematian (budaya Barat), takut, setan, kesedihan, duka cita, marah, anonim, penyesalan.
Warna Dalam Disain WebWarna Dalam Disain Web
Warna untuk penekanan, penegasan, penyorotan pada suatu topik tertentu dan dapat juga menuntun pengunjung untuk menuju pada tema atau link yang penting
Warna mengidentifikasikan tema (biasanya judul dan sub judul menggunakan warna yang sama)
Sebaiknya warna dapat membedakan antara suatu obyek dengan lainnya. Misalnya perbedaan warna grafik, baik grafik yang berbentuk blok atau bundaran.
MENGENAL JENIS WARNAMENGENAL JENIS WARNA
WARNA PRIMER: Terdiri dari Merah, Kuning Buru.
MENGENAL JENIS WARNA (LANJUTAN)MENGENAL JENIS WARNA (LANJUTAN)
Warna Sekunder: Dibuat dengan mengkombinasikan Warna-Warna Primer
Terdiri dari:Kuning + Merah = OrangeMerah + Biru = UnguBiru+ Kuning = Hijau
MENGENAL JENIS WARNA (LANJUTAN)MENGENAL JENIS WARNA (LANJUTAN)
Warna Tersier: Adalah warna menengah, warna ini dibuat dengan mengkombinasikan warna primer dengan warna Perbatasan warna Sekunder:
Kuning Orange Orange Merah Merah Orange Biru Ungu Biru Hijau Kuning Hijau
Metode Pemilihan WarnaMetode Pemilihan Warna
Keserasioan adalah: Keseimbangan Dinamis, karena jika sesuatu tidak serasi bisa membosankan, semrawut, berantakan dan kacau balau.
Metode Pemilihan Warna Beruntun: Dengan Memilih Warna yang berdekatan sehingga menghasilkan warna yang Lembut dan Serasi. Contoh: Kuning-Kuning Orange-Orange
Metode Pemilihan Warna Berlawanan: Dengan meilih warna-warna yang berlawanan (kontras) yang menghasilkan warna yang hidup(kontrasnya tinggi) Contoh: Biru dan Orange, Kuning dan Ungu
Metode Warna Segitiga: Dengan memilih warna yang posisinya Segitiga. Contoh: Merah-Kuning-Biru
TIPOGRAFITIPOGRAFI
Aadalah Seni dalam huruf meliputi: Pemilihan Huruf, Penentuan Ukuran yang Tepat, dimana teks dapat diputus, spasi jarak, dan bagaimana teks dapat dibaca dengan mudah.
Untuk mengatasi dibrowser pemakai jika tidak tersedia jenis-jenis huruf yang sesuai dengan jenis kita gunakan kita sebaiknya memilih Jenis Huruf/Font Standar seperti: Times New Roman, Helvetica, Arial dan lain-lain
PENGARUH JENIS HURUFPENGARUH JENIS HURUF SERIF: Jenis huruf yang pakai kaki dan ekor Contoh: Times New
Roman, Garamond, Paltino => Merupakan Jenis Huruf Tradisional SANS-SERIF: Diambil dari Bahasa prancis yang artinya tidak
mempunyai sans(kaki), Misalnya: Helvetica, Arial, Verdana dan Avant Grade
DEKORATIF: Jenis huruf yang mempunyai disain yang rumit , sesuatu yang baru membuka sesuatu yang baru.
SKRIP: Jenis huruf yang menyerupai tulisan tangan. Jenis huruf ini juga sering disebut kursif. Pemakaiannya sama dengan dekoratif. Jangan terlalu banyak.
MONOSPACE: Jenis huruf yang mempunyai jarak dan lebar yang sama pada setiap huruf, misalnya Courir atau huruf seperti mesin tik. Biasanya digunakan untuk menulis kode bagi programmer.
Penggunaan Huruf dalam Disain WebPenggunaan Huruf dalam Disain Web
Buatlah kontras yang tinggi antar teks dengan latar belakang (Background) atau antara teks dengan gambar
Pilihlah jenis huruf yang mudah dibaca, biasanya jenis serif dan sanserif
Kadang-kadang jenis huruf sans-serif lebih mudah dibaca daripada serif ketika karakter yang digunakan berukuran kecil
Atur Leading dan Kerning. Leading adalah spasi antara dua baris teks, sedangkan kerning adalah jarak spasi antara huruf.
Gunakan semua huruf standar yang ada pada semua komputer atau browser, seperti Times New Roman, Helvetica, Arial dan Verdana.
Petunjuk Pemilihan HurufPetunjuk Pemilihan Huruf Secara formal, pasangkanlah jenis huruf Serif
untuk isi halaman dan sans-serif untuk judul. Apabila menggunakan beberapa jenis huruf dalam
halaman biasanya jenis huruf dekoratif atau skrip digunakan untuk judul dan serif atau sans-serif untuk isi halaman, ini lebih bervariasi.
Usahakan jangan lebih dari 12 kalimat dalam satu baris karena mempersulit pembacaan, kadang-kadang menjadi terulang-ulang dan sulit untuk membaca baris berikutnya.
Petunjuk Pemilihan Huruf (lanjutan)Petunjuk Pemilihan Huruf (lanjutan)
Hindari pemakaian kombinasi dua jenis huruf yang sangat mirip, misalnya dua jenis huruf san-serif (Times New Roman dikombinasikan dengan Garemound). Atau dua jenis huruf skrip(Brush Script dengan Larissa). Kombinasi tersebut menghasilkan kontras yang rendah, ini menyebabkan ketidakserasian dan ketidakcocokan dalam pandangan.
Batasi pemakaian jenis huruf dalam satu halaman, jangan sampai melebihi tiga atau empat jenis huruf.
Hindari Penggunakaan Slider (Penggulung halaman) lebih dari sekali. Apabila banyak artikel yang ingin ditampilkan, buatlah link ke halaman lain.
Petunjuk Pemilihan Huruf (lanjutan)Petunjuk Pemilihan Huruf (lanjutan)
Ukuran huruf yang baik untuk isi halaman 10-14 point dan Judul adalah 14-30 point.
Berikan Ketebalan dan huruf besar(kapital) pada teks untuk judul, ini untuk membedakan dengan isis halaman.
Hindari pemakaian huruf besar terlalu banyak karena akan memperlambat kecepatan membaca dan membosankan ruang, pakaialah untuk menandai teks yang sangat penting saja
Hindari pemakaian huruf monospace untuk isi halaman, karena jenis huruf ini kalau banyak memerlukan perhatian yang banyak pula untuk membacanya, ini bisa mengalihkan pesan yang ingin disampaikan dan bisa membingungkan juga.
BentukBentuk
Penggunaan bentuk yang efektif akan memberikan motivasi, inspirasi dan tantangan kepada pengunjung, walaupun ini terjadi tanpa disadari.
Bentuk-bentuk dasar meliputi: Lingkaran, Persegi/Kotak, daan segitiga.
Biasanya bentuk dikombinasikan dengan bentuk laian untuk memberikan kesan yang kuat pada pengunjung. Misalnya dikombinasikan dengasn persegi menghasilkan kesan kehangatan dan keamanan.
Bentuk paling banyak diimplementasikan untuk membuat logi karena logo membentuk Brand.
Pengaruh BentukPengaruh Bentuk
Lingkaran: Koneksi, komunitas, keseluruhan, ketahanan, pergerakan, keamanan, kehangatan, kenyamanan, sensual dan cinta – lebih cendrung feminim.
Kotak atau Persegi: Keteraturan, Logis, Keamanan, Kepadatan dan Berat.
Segitiga: Energi, kekuatan, keseimbangan, hukum, ilmu pasti, agama, kekuatan, agresi dan pergerakan yang dinamis- lebih cendrung maskulin.
Layout (Tata Letak)Layout (Tata Letak)
Model Layout Top Index biasanya digunakan untuk menampilkan link yang banyak ke situs lain
Model Layout Bottom index biasanya diguanakan apabila halaman banyak berhubungan dengan topik tunggal
Model Layout Left index biasanya digunakan untuk layardengan resolusi yang lebar, sehingga mudah dalam peyediaan navigasi, tanpa menimbulkan kekacauan penyajian informasi pada halaman utama
Model Layout Split merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman.
Model Layout Alternating index biasanya digunakan untuk halamanyang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah dan lain-lain
MODEL TOP INDEXMODEL TOP INDEX
Model Top Index
Bannner atau iklan
Daftar Isi atau Navigasi
Body Content (Isi)
Informasi tambahan atau lain-lain
MODEL BOTTOM INDEXMODEL BOTTOM INDEX
Model Top Index
Bannner/ Judul
Body Content (Isi)
Daftar Isi / Lain-Lain
MODEL LEFT INDEXMODEL LEFT INDEX
Model Left Index
Daftar Isi
Bannner
Body Content (Isi)
Lain-Lain
MODEL SPLIT INDEXMODEL SPLIT INDEX
Model Split Index
Daftar Isi
Banner
Daftar IsiBody atau
Content (Isi)
Lain-Lain
MODEL ALTERNATING INDEXMODEL ALTERNATING INDEX
Model Alternating Index
Text / Daftar Isi Gambar
Gambar Text / Daftar Isi
Lain-Lain