Desain Grafis
Diini Salma Lutfi & Kholil/TI 3A
Desain Grafis
Desain grafis adalah suatu bentuk komunikasi visual yang
menggunakangambar untuk menyampaikan informasi atau pesan seefektif
mungkin. Dalam disain grafis, teks juga dianggap gambar karena
merupakan hasil abstraksi simbol-simbol yang bisa dibunyikan.
disain grafis diterapkan dalam disain komunikasi dan fine art.
Seperti jenis disain lainnya, disain grafis dapat merujuk kepada
proses pembuatan, metoda merancang, produk yang dihasilkan
(rancangan), atau pun disiplin ilmu yang digunakan (disain). Seni
desain grafis mencakup kemampuan kognitif dan keterampilan visual,
termasuk di dalamnya tipografi, ilustrasi, fotografi, pengolahan
gambar, dan tata letak.
A. Filosofi Desain
Sebuah filosofi desain adalah panduan untuk membantu membuat
pilihan saat merancang, seperti Elemen visual ekonomi , metode
re-desain dan Jelas dan terorganizir dengan baik. Sebuah contoh
dari filosofi desain adalah "perubahan dinamis" untuk mencapai
tampilan elegan atau bergaya yang Anda butuhkan.
B. Prinsip Desain
1. Metaphor (Metafora)
Metaphor atau metafora adalah aplikasi dari nama atau deskripsi
istilah objek lain yang tidak dapat diartikan secara harafiah.
Menghubungkan presentasi dan elemen-elemen visual dengan item-item
yang berkaitan. Metafora akan membuat para pengunjung seolah-olah
berada di tempat yang sebenarnya, atau bisa dikatakan juga bahwa
metafora dibuat mirip seperti tempat yang dikunjungi. Contoh
www.worldwidestore.com/Mainlvl.htm2. Clarity (Kejelasan)
Harus ada alasan yang kuat/masuk akal mengapa kita menggunakan
setiap elemen yang berada dalam suatu interface yang kita buat.
Penggunaan yang sedikit akan lebih baik.
White Space:
- Berperan penting bagi mata.
- Menyediakan simetris dan keseimbangan melalui
penggunaannya.
- Memperkuat dampak pesan.
- Membiarkan mata beristirahat dari setiap kegiatan elemen.
- Digunakan untuk mengembangkan kesederhanaan, keanggunan,
kemewahan, dan kemurnian.
3. Consistency (Ketetapan)
Konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography,
teks, dll. Harus ada konsistensi baik dalam layar maupun antar
layar. Dan harus selalu ada metafora dimanapun juga. Setiap
platform mungkin memiliki panduannya.
Tampilan home
Page content4. Alignment (Perataan)
Untuk perataan dapat digunakan rata kiri, kanan atau tengah.
Dunia barat dimulai dari kiri atas.
Mengijinkan mata untuk menguraikan tampilan dengan lebih
mudah.
Grids:
- Garis horisontal dan vertikal (tersembunyi) untuk membantu
mengalokasikan komponen-komponen jendela.
- Meratakan konteks yang berkaitan.
- Mengelompokkan item-item secara logis.
- Meminimalisasi banyaknya kendali, mengurangi kekacauan.
Gunakan Grid:
Contoh Grid:
5. Proximity
Item-item yang berkaitan ditampilkan bersama. Karena jarak
yang
jauh mengimplikasikan bahwa tidak ada hubungan antar
item-item
tersebut.
Time
Time:
Contoh:
6. Contrast (Keserasian Tampilan)
Membuat anda tertarik, memandu mata anda melihat keseluruhan
interface. Keuntungan dari keserasian adalah untuk memperkuat fokus
atau untuk memperkuat suatu interface. Contrast dapat digunakan
untuk membedakan aktifitas kendali. Juga dapat digunakan untuk
men-set item yang paling utama. Item yang paling utama diberi
highlight. Gunakan geometri untuk membantu pengurutan.
Contoh:
www.delta.comImportant
element
C. Tipografi Karakter dan simbol-simbol yang dapat dengan mudah
diketahui dan dibedakan.
Menghindari penggunaan huruf kapital yang terlalu banyak
Studi telah menemukan bahwa huruf campuran meningkatkan
pembacaan lebih cepat
HOW MUCH FUN IS IT
TO READ ALL THIS
TEXT
WHEN ITS ALL IN
CAPITALS AND YOU
NEVER GET A REST
How much fun is it
to read all this text
when its all in
capitals and you
never get a rest
Readability
Seberapa mudah membaca teksnya
Legibility
Seberapa mudah untuk mengenali short burst of ttext
Typeface = font
Tipografi
a. Serif font - readability
b. Sans serif font - legibility (setiap variabel dispasi)
c. Monospace font
Petunjuk tipografi
Gunakan serif untuk teks yang panjang, sans serif untuk
headlines
Gunakan 1-2 font atau typefaces (maks. 3)
Penggunaan huruf normal, italic, bold tidak apa
Jangan pernah menggunakan bold, italic, kapital untuk teks yang
panjang
Gunakan 1-3 point size maksimum
Hati-hati untuk masalah teks dengan warna background
D. FontsFonts adalah kumpulan lengkap dari karakter / huruf
dalam satu bentuk desain, ukuran (size), dan gaya (style). Font
menjadi sangat penting karena mewakili isi yang akan disampaikan
oleh pemberi pesan, dengan font tersebut desainer dapat menuangkan
pesan yang ingin disampaikan. Agar pesan dapat sampaikan dengan
lebih efektif kepada pembaca pesan maka perlu diperhatikan
pemilihan jenis font yang tepat dengan isi pesan yang ingin
disampaikan. hal ini sangat penting karena font yang dipilih dapat
mewakili atau menggambarkan isi pesan yang disampaikan. Dahulu,
Istilah Font dipergunakan pada balok-balok huruf yang biasa
dipergunakan untuk keperluan percetakan, namun kini istilah Font
lebih sering dipergunakan di komputer.
Secara garis besar huruf-huruf digolongkan menjadi:
Roman, pada awalnya adalah kumpulan huruf kapital seperti yang
biasa ditemui di pilar dan prasasti Romawi, namun kemudian
definisinya berkembang menjadi seluruh huruf yang mempunyai ciri
tegak dan didominasi garis lurus kaku.
Serif, dengan ciri memiliki serif di ujungnya. Selain membantu
keterbacaan, serif juga memudahkan saat huruf diukir ke batu.
Contoh penggunaan huruf serif di nisan Johanna Christine, Museum
Taman Prasasti
Egyptian, atau populer dengan sebutan slab serif. Cirinya adalah
kaki/sirip/serif yang berbentuk persegi seperti papan dengan
ketebalan yang sama atau hampir sama. Kesan yang ditimbulkan adalah
kokoh, kuat, kekar dan stabil. Salah satu contoh huruf slab serif
di nisan Thomas de Souza, di pintu masuk Museum Taman Prasasti
Sans Serif, dengan ciri tanpa sirip/serif, dan memiliki
ketebalan huruf yang sama atau hampir sama. Kesan yang ditimbulkan
oleh huruf jenis ini adalah modern, kontemporer dan efisien.
Script, merupakan goresan tangan yang dikerjakan dengan pena,
kuas atau pensil tajam dan biasanya miring ke kanan. Kesan yang
ditimbulkannya adalah sifast pribadi dan akrab.
Miscellaneous, merupakan pengembangan dari bentuk-bentuk yang
sudah ada. Ditambah hiasan dan ornamen, atau garis-garis dekoratif.
Kesan yang dimiliki adalah dekoratif dan ornamental.E. Warna
Warna dapat didefinisikan secara obyektif/fisik sebagai sifat
cahaya yang dipancarkan, atau secara subyektif/psikologis sebagai
bagian dari pengalaman indera pengelihatan. Secara obyektif atau
fisik, warna dapat diberikan oleh panjang gelombang. Dilihat dari
panjang gelombang, cahaya yang tampak oleh mata merupakan salah
satu bentuk pancaran energi yang merupakan bagian yang sempit dari
gelombang elektromagnetik.
Atribut Warna:
- Hue : warna asli, pigmen
- Saturation : relatif lebih asli, lebih terang, atau intensitas
warna
- Value : tingkat kegelapan atau terangnya suatu cahaya
Gunakan warna untuk suatu tujuan, jangan hanya untuk membuat
tampilan lebih berwarna.
Hal-hal yang harus diperhatikan dalam penggunaan warna:
1. Tampilkan gambar berwarna pada warna latar hitam.
2. Pilih warna latar depan yang terang (putih, cyan, dll).
3. Hindari warna coklat dan hijau sebagai warna latar.
4. Pastikan bahwa warna latar depan dan warna latar belakang
serasi baik segi brightness maupun hue.
5. Gunakan warna sedikit mungkin, pada rancangan hitam-putih
tambahkan warna yang sesuai.
6. Gunakan warna untuk menarik perhatian, menghubungkan
organisasi, menyatakan status, atau untuk mengadakan suatu
hubungan.
7. Hindari penggunaan warna yang tidak diinginkan oleh user.
8. Pewarnaan sangat baik untuk mendukung pencarian.
Asosiasi Warna
- Merah : panas, peringatan, agresi, cinta.
- Pink : wanita, cute, kembang gula.
- Oranye : musim semi, hangat, Halloween.
- Kuning : gembira, perhatian, sukacita.
- Coklat : hangat, musim gugur, kotor, bumi.
- Hijau : lush, pastural, bingung.
- Ungu : kekayaan, lembut, Barney.
Pasangan Warna
Para perancang biasanya memilih satu palette yang terdiri dari 4
atau 5 warna.
Perancangan Ikon
- Merepresentasikan objek atau tindakan yang mudah dikenal
secara luas.
- Jumlah ikon yang berbeda terbatas.
- Ikon lebih ditonjolkan dari latar belakang.
- Pastikan bahwa ikon-ikon yang terpilih dapat terlihat jelas di
antara ikon-ikon yang tidak terpilih.
- Buat setiap ikon berbeda.
- Buat ikon sesuai dengan ikon-ikon yang satu kelompok.
- Hindari detail yang berlebihan.
Pembuatan User Interface dalam membuat sebuah Website
Dalam membuat sebuah website tentunya yang pertama kali harus
tentukan adalah tema desaign, yang pertama kali kita tentukan
adalah dalam memilih kombinasi warna dan kerangka desaign.
1. Pembuatan User Interface
Pertama kali yang harus dilakukan yaitu pembuatan Kerangka
Desaign,Kerangka yang akan dibuat adalah sebagai berikut:
2. Teknok Coding
a. Membuat Menu Header
Pada pembuatan Menu header kita bisa membuat pada file khusu
yaitu menutop.html dan style.css untuk membuat desaign dari seluruh
tampilan yang akan kita buat.
Pada menu header kita bisa membuat seperti ini:
Dan style.cssnya seperti berikut:
Maka hasilnya akan tampil seperti berikut:
b. Membuat Gambar Slide
Membuat Gambar slide bisa cukup memanggil file jquery slider
cukup memanggil file yang sudah di save dalam folder yang sama
seperti berikut:
Pada coding dibawah menu maka tampilnya akan seperti
berikut:
c. Membuat menu kanan
Sama halnya dengan pada membuat slide, kita buat terlebih dahulu
pada file terpisah kita kasih nama rightmenu.html dengan coding
kurang lebih seperti berikut:
Maka tampilannya akan muncul seperti berikut:
d. Membuat isi content pada pembuatan isi content kita cukup
memanggil link yang sesuai kita klik
Dan hasil ahirnya adalah sebagai berikut:
Halaman Utama:
Halaman Gallery:
Bagian Footer
Isi Content
Menu Kanan
Video Profil
GAMBAR BERUPA SLIDE
MENU HEADER