Rangkuman Desain

Filosofi Desain
· Elemen visual ekonomi
· Tidak berlebihan
· Jelas dan terorganizir dengan baik

Pada umumnya memperhitungkan aspek fungsi, estetik dan berbagai macam aspek
lainnya, yang biasanya datanya didapatkan dari riset, pemikiran, brainstorming,
maupun dari desain yang sudah ada sebelumnya. Akhir-akhir ini, proses (secara
umum) juga dianggap sebagai produk dari desain, sehingga muncul istilah
“perancangan proses”. Salah satu contoh dari perancangan proses adalah
perancangan proses dalam industri kimia.

Prinsip Desain Grafis

6 Prinsip Desain Grafis

Desain Grafis merupakan suatu porsi dari apa yang dilihat dan dirasakan pada
tampilan
suatu website. Desain grafis memiliki enam buah prinsip yang mendasar. Prinsip-
prinsip tersebut adalah sebagai berikut :

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.
Contohnya, website suatu toko online yang memiliki metafora, dimana
pengunjung dibawa ke tempat seolah-olah mereka benar ada di toko online
tersebut.

2. Clarity (Kejelasan)
Harus ada alasan yang kuat/masuk akal dan jelas mengapa menggunakan setiap
elemen yang berada dalam suatu interface yang kita buat,contohnya dalam
peletakan suatu button,pembuat harus memiliki alasan mengapa diletakkan di
tempat tersebut. Penggunaan elemen yang lebih sedikit akan lebih baik.

3. Consistency (Ketetapan)
Konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography (model form
yang digunakan pada suatu website), teks, dll. Harus ada konsistensi baik dalam
layar maupun antar layar. Dan harus selalu ada metafora dimanapun juga. Setiap
platform mungkin memiliki panduannya.

4. Alignment (Perataan)
Untuk perataan dapat digunakan rata kiri, kanan atau tengah. Pada umumnya
suatu teks pada website dimulai dari kiri atas (left alignment), dimana left
alignment akan mengijinkan mata untuk menguraikan tampilan dengan lebih
mudah. Selain itu dengan menggunakan bantuan garis akan membantu dalam hal
 perataan. Sembunyikan garis horizontal dan vertical untuk membantu
mengalokasikan komponen window/jendela. Garis juga membantu
menghubungkan hal-hal yang berhubungan dan memudahkan perataannya.

5. Proximity
Item-item yang berkaitan ditampilkan bersama pasti memiliki hubungan karena
jarak yang jauh mengimplikasikan bahwa tidak ada hubungan antara item-item
tersebut.

6. Contrast (Keserasian Tampilan)

Keserasian tampilan akan membuat pengunjung web tertarik pada web tsb.
Kontras juga dapat memandu mata pengunjung untuk melihat keseluruhan
interface. Keuntungan dari keserasian adalah untuk memperkuat fokus atau untuk
memperkuat suatu interface. Kontras digunakan untuk membedakan aktifitas
kendali. Juga dapat digunakan untuk men-set item yang paling utama. Item yang
paling utama diberi highlight. Dengan mempergunakan geometri dapat membantu
pengurutan. Kontras juga mendukung skimming secara cepat.

Teknik Koding
 Blinking (berkelap-kelip)
o Baik untuk menangkap atensi tetapi gunakan dengan hemat
 Reverse Video, bold
o Baik untuk membuat sesuatu sangat menonjol
Sekali lagi gunakan dengan hemat

Tipografi
 Karater-karakter dan simbol-simbol harus mudah dinyatakan dengan jelas dan
dapat dibedakan.
o Menghindari penggunaan huruf besar yang berlebihan.
o Dari penelitian menemukan bahwa dengan mencampur huruf akan
meningkatkan kecepatan membaca.
 Mudah dibaca
o Memudahkan membaca dengan teks yang banyak.
 Mempunyai sifat yang mudah dibaca
Memudahkan untuk mengenali teks

Fonts
Ukuran huruf yang digunakan

Warna (atribut, asosiasi)

 Atribut warna
o Hue (corak)
- Native color, pigment
o Saturation (penjenuhan)
- Kebersihan relatif, keadaan terang, atau mengintensifkan warna
o Value (nilai)
- Keadaan terang atau gelap dari warna
WARNA MAKNA POSITIF
Merah Kekuatan, energi, tenaga,
hasrat , cinta. Dengan sedikit
memberikan warna merah
bisa
menimbulkan gairah,
membangkitkan semangat,
mendorong keinginan.
Merah Kewanitaan (feminim),
Muda keremajaan (masa muda).
Orange Kehangatan, bersemangat,
ceria, keseimbangan, musim
gugur, menimbulkan getaran.
Kuning Sinar matahari, emas,
kekayaan, keberuntungan,
kehidupan.
Hijau Alam, lingkungan, hidup,
pertumbuhan, stabil, santai
kesuburan, harapan.
Biru Kepercayaan, kesetiaan,
ketenangan, kedamaian,
ketulusan, kesejukan, air,
awan,
harmoni, kebersihan,
konservatif, percaya diri,
penyembuhan.
Ungu Kebangsawanan, perubahan,
spiritual.
Coklat Tanah, bumi, netral, hangat,
keamanan, perlindungan.
Abu – abu Modern, cerdas, bersih, Umur tua, kesedihan, bosan.
kokoh,
masa depan, intelektual.
Putih Kesucian, kebersihan,
kemurnian, kesederhanaan,
damai, kebaikan, disiplin,
perawan, perkawinan, musim
dingin, musim salju.
MAKNA NEGATIF
Bahaya, perang, kekejaman,
kekerasan, api, darah. Terlalu
banyak warna merah bisa
disangka terlalu agresif.
Naif, kelemahan,
kekurangan
Meminta dan mencari
perhatian
Tidak jujur, pengecut,
cemburu, iri hati,
penghianatan, penipuan,
kebohongan, resiko, sakit
Kecemburuan, nasib buruk,
iri hati, dengki.
Merupakan
warna yang aman dipakai untuk
Kesedihan, kedinginan,
depresi, penurunan vitalitas.
Kesombongan, keangkuhan,
kejam, kasar, duka cita, royal,
rumit
Tumpul, kotor,
membosankan.
Kematian ( budaya timur ),
dingin, mandul, steril, klinik,
hampa.
 Hitam Kekuatan, keanggunan, Kematian ( budaya barat ),
kemewahan, misteri, takut, setan, kesedihan, duka
kecanggihan, kemakmuran, cita, marah, anonim,
kepuasan, pengalaman, penyesalan.
keras,
kokoh, sangat kuat.

 Petunjuk Pewarnaan

o Tampilkan image-image warna pada latar belakang hitam

o Pilih warna terang yang mudah dilihat
o Hindari coklat dan hijau sebagai warna-warna untuk latar belakang
o Pastikan warna-warna foreground (tampilan luar)kontras dalam keadaan
terang dan hue dengan warna-warna background
o Gunakan warna dengan hemat—Desain dalam b/w kemudian tambahkan
warna yang sesuai
o Gunakan warna untuk mengambarkan atensi, komunikasi organisasi, untuk
mengindikasi status, untuk mendirikan hubungan-hubungan

Hindari penggunaan warna dalam cara-cara yang berkaitan dengan non tugas

Desain Icon

 Mempresentasikan obyek atau tindakan yang mudah dikenal secara luas

 Mewakili obyek atau tindakan dalam cara yang lazim dan dikenali
 Batasan jumlah icon-icon yang berbeda
 Buat icon yang menonjol dari latar belakang
 Pastikan bahwa icon-icon yang telah diseleksi satu persatu secara jelas dapat
dilihat jika dikelilingi dengan icon-icon yang tidak terseleksi.
 Buat setiap icon berbeda
 Buat anggota-anggota icon-icon yang harmonis dari kumpulan icon
 Hindari perincian yang berlebihan

Icon/Tombol Nama Keterangan

New Untuk membuat document baru

Open Untuk membuka document yang sudah ada

Save Untuk menyimpan document

Print Untuk mencetak document

Print Preview Untuk preview document

Cut Memindahkan objek dari document ke clipboard

Mengcopy/menggandakan objek dari document ke 
Copy clipboard
Paste Menempelkan objek dari clipboard ke document

Undo Menampilkan kembali kondisi sebelumnya

Redo Menampilkan kembali kondisi sesudahnya

Font Memilih jenis font/huruf

Font size Memilih ukuran huruf

Bold Memberi efek cetak tebal pada teks

Italic Memberi efek cetak miring pada teks

Underline Memberi efek bergaris bawah pada teks

Subscript Membuat huruf kecil di bawah huruf dasarnya

Superscript Membuat huruf kecil di atas huruf dasarnya

Merubah format huruf menjadi huruf kapital atau huruf
Cange case kecil

Align left Memformat teks rata kiri

Center Memformat teks di tengah-tengah

Align right Memformat teks rata kanan

Justify Memformat teks rata kiri dan kanan

Numbering Memberikan urutan penomoran pada item

Memberikan karakter tertentu pada point-point yang
Bullets ditekankan

Table Menyisipkan/membuat tabel

Picture Menyisipkan gambar dari file komputer

Clip art Menyisipkan clip art

Menyisipkan shapes yang berupa bangun ruang, tanda
Shapes panah atau bentuk lainnya
Menyisipkan objek yang digunakan untuk
mengkomunikasikan suatu informasi, misal struktur
Smart art organisasi, proses sesuatu dll.
Menyisipkan grafik yang berguna sebagai perbandingan
Chart suatu data

Header Memberi catatan atas suatu dokumen

Footer Memberi catatan kaki suatu dokumen

Page number Menyisipkan nomor halaman

 Word art Menyisipkan teks dekorasi
Membuat sebuah huruf yang lebih besar di awal
Drop cap paragraf
Membuat penulisan matematika, termasuk di dalamnya
Equation simbol matematika
Menyisipkan simbol-simbol yang tidak terdapat pada
Symbol keyboard

Margin Memberi ukuran tepi halaman

Mengubah layout kertas yang berupa landscape
Orientation (mendatar) atau potrait (vertikal)

Paper size Memilih ukuran kertas yang digunakan

Columns Membagi naskah kedalam 2 atau lebih kolom

Page borders Menambah atau merubah bingkai halaman

Dialog Berbasis Perintah Tunggal (Command Line Dialogue)

 Dialog berbasis perintah tunggal : ragam yang paling konvensional yang dapat
dioperasikan biasanya tergantung dari sistem komputer yang dipakai dan berada
dalam suatu domain yang disebut bahasa perintah (command language).

 Beberapa contoh sederhana yang dapat dilihat pada perintah-perintah yang

dimiliki oleh DOS dan UNIX :
- DOS ;
 Internal command : DIR, COPY, dll
 External command : FORMAT, DEL, dll
- UNIX ; vi, ls, who, lpr, dll
 - DOS lebih alamiah dibandingkan dengan UNIX

 Keuntungan dan Kerugian penggunaan Dialog berbasis perintah tunggal bagi

pengguna ahli

Tabel 2. Keuntungan dan Kerugian dialog berbasis perintah tunggal

Keuntungan Kerugian

 Cepat  Memerlukan pelatihan yang lama

 Efisien  Membutuhkan penggunaan yang teratur
 Akurat  Beban ingatan yang tinggi
 Ringkas  Jelek dalam menangani kesalahan
 Luwes
 Inisiatif oleh pengguna
 Appealing

 Tetapi keuntungan yang atraktif bagi pengguna ahli dapat menakutkan bagi tipe
pengguna yang lain, untuk meminimalisasikan beban ingatan dan kesalahan
adalah :

- Pilihlah kata kunci yang mudah diingat

- Gunakan format perintah yang konsisten
- Gunakan untaian kata yang pendek
- Tambahkan fasilitas bantuan
- Gunakan nilai-nilai default untuk mengurangi kesalahan ketik
- Sediakan pesan-pesan yang jelas
- Gunakan ragam inisiatif oleh komputer