desain grafis

16
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)

description

for design

Transcript of desain grafis

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