Desain Web

  • ePengertian Desain Web atau definisi Desain Web adalah jenis desain grafis yang ditujukan untuk pengembangan dan styling obyek lingkungan informasi Internet untuk menyediakan dengan fitur konsumen high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan desain web dari pemrograman web, menekankan fitur fungsional dari sebuah situs web, serta desain posisi web sebagai semacam desain grafis.
  • Tujuan desain web adalah untuk membuat situs web atau dokumen elektronik dan aplikasi yang berada pada web server dan menampilkan konten dan fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web. Seperti unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman menggunakan HTML / XHTML / tag XML. Menampilkan media yang lebih kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in seperti Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in juga dimasukkan ke dalam halaman web dengan menggunakan HTML / tag XHTML.Perbaikan sesuai browser dengan standar W3C diminta penerimaan luas dan penggunaan XHTML / XML bersama dengan Cascading Style Sheets (CSS) untuk posisi dan memanipulasi unsur-unsur halaman web dan objek. Kemampuan browser untuk mengirimkan berbagai konten dan pilihan aksesibilitas kepada klien tanpa menggunakan plug-in.Dengan spesialisasi yang tumbuh di bidang teknologi informasi ada kecenderungan kuat untuk membedakan antara desain web (web design) dan pengembangan web (web development).
  • Pada dasarnya ada enam prinsip yang penting untuk diketahui untuk membuat web design yaitu :
  1. Metaphore yaitu suatu penerapan prinsip – prinsip lama untuk digunakan pada suatu prinsip yang baru.
  2. Clarity yaitu suatu prinsip dimana pembuatan web harus mempunyai tujuan/kejelasan dalam pembuatan web.
  3. Consistency yaitu dalam pembuatan web, perancang web harus konsisten sesuai dengan isi web dan tema.
  4. Alignment yaitu mengenai kerapihan tulisan yang dibuat pada suatu artikel. Prinsip ini mempunyai peranan   penting karena mempengaruhi para pembaca supaya merasa nyaman. Umumnya dari kiri ke kanan dan dari atas kebawah. Usahakan dapat membuat mata pembaca seolah dituntun menelusuri alur tersebut.
  5. Proximity yaitu merupakan kelengkapan dari suatu field.
  6. Contrast yaitu prinsip dimana para pembaca nyaman dalam melihat suatu situs dan dibuat smenarik mungkin supaya dapat menarik perhatian bagi pengunjung situs.
  • Tipografi adalah suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin. Dikenal pula seni tipografi, yaitu karya atau desain yang menggunakan pengaturan huruf sebagai elemen utama. Dalam seni tipografi, pengertian huruf sebagai lambang bunyi bisa diabaikan. Seni merupakan induk dari desain grafis.
  • ANATOMI TIPOGRAFI: Ada beberapa hal yang wajib diketahui dalam dunia typografi. Salah satunya adalah anatomy tipografi atau anatomi huruf.
  1. arm
  2. stem
  3. counter
  4. stroke
  5. shoulder
  6. apex
  7. galliard
  8. serif
  9. bracket
  10. crossbar
  11. tail
  12. spine
  13. bowl
  14. ear
  15. loop
  16. link
  17. eye
  18. leg
  19. ascender
  20. cap height
  21. capline
  22. meanline
  23. <x height
  24. baseline
  25. descender
  • KLASIFIKASI TIPE

– Old Syle atau egyptian
– Transisional atau roman
– Modern
– Slab serif
– Sans serif
– Display atau misc atau dingbat atau semacamnya
– Script
– Monospace
– Black Letter

  • TIPE FAMILI

Tipe famili adalah group tipeface yang terikat menjadi satu oleh persamaan karakter visual. Pada tipe famili ini saya menulisnya dari paling kecil ukurannnya hingga paling besar. Tipe famili terdiri dari perbedaan berat dan lebar.

– Light Condensed
– Light
– Light Extended
– Regular Condensed
– Regular
– Regular Extended
– Semibold Condensed
– Semibold
– Semibold Extended
– Bold condensed
– Bold
– Bold Extended
– Black Condensed
– Black
– Black Extended

  • TIPE PENGUKURAN

– Leading
– Kerning
– Tracking
– Baseline Shift
– Left aligned
– Center aligned
– Right aligned
– Justified aligned

Penggunaan Gambar Pada Web

  • Berikut ini adalah daftar bagian dari web yang biasanya memakai gambar namun banyak juga designer web yang menggunakan text untuk bagian tersebut.

1. Tombol Navigasi mutlak diperlukan dalam sebuah web, dengan pengaturan tombol navigasi yang jelas akan membantu pengunjung menemukan informasi yang diinginkanya, berberapa hal yang perlu diperhatikan dalam membuat tombol navigasi adalah Tulisan atau Text harus dapat dilihat dengan jelas dan mudah dibaca.

2. Logo: baik itu logo perusahaan, organisasi atau logo pribadi sering menggunakan gambar, logo berfungsi sebagai gambar identitas dari perusahaan, logo yang bagus dapat meningkatkan brand name suatu perusahaan atau organisasi.

3. Site Map: Penggunaan site map secara gambar memang dapat memudahkan pengunjung dalam mencari informasi namun penggunaan gambar dalam site map harus di pilih benar apakah web anda menjadi terlalu lamabt atau tidak.

4.  Bullet banyak digunakan untuk penekanan point-point tertentu pada dokumen.

5. Banner yang dipasang di website dengan tujuan untuk memperbaiki komposisi bentuk, warna dan informasi penting (Hot Items) sering digunakan dalam website, dengan grafis yang menarik pengunjung akan tertarik untuk mengklik banner tersebut. – Also known as a title graphic. Main function is to let your visitors know which web.

6. Garis Batas antar menu, bagian web, pemisah footer, header dan isi web baik horizontal maupun vertical layak digunakan karena biasanya garis batas mempunyai ukuran file yang kecil.

7. Gambar Background: Bagian ini digunakan untuk memberikan ciri khas, dan komposisi isi dan background pada web yang akan dibuat, asalkan file gambar yang digunakan tidak terlalu besar, gambar Background layak digunakan.

8. Headings: Alasan gambar digunakan untuk heading yang paling sering adalah karena beberapa tipe text tidak terdapat pada computer client, karena itulah digunakan file gambar sebagai gantinya.

9. Photo: Foto kegiatan atau bagian kegiatan yang menonjolkan specific dari website sangat diperlukan, dengan foto yang jelas diharapkan pengunjung langsung dapat mengerti milik siapa,untuk apa website itu dibuat, dan category apakah web site tersebut. Penggunaan foto sering dipakai untuk memperjelas item produk pada website e-commerce.

  • Beberapa hal yang perlu diperhatikan dalam pemilihan dan pemakaian gambar atau grafis agar tampak serasi pada web yang anda buat adalah :

1. Warna semua grafis harus serasi, baik itu antara menu, logo perusahaan atau orgonasisasi, header, footer dan gackground yang digunakan.

2. Warna dalam text tombol navigasi harus dapat dibaca dengan jelas, perhatikan ukuran teks yang akan dimasukkan pada tombol navigasi, apakah terlalu kecil ? apakah sudah enak dibaca?, biasanya warna text dalam tombol navigasi disesuaikan (tidak harus sama) dengan warna Logo atau Judul utama website

3. Jangan gunakan terlalu banyak kombinasi warna, sebab kombinasi warna yang berlebihan akan terkesan norak dan memperlambat proses download browser, cukup gunakan dua sampai 4 kombinasi warna dalam website, kecuali mascot atau icon tertentu.

4. Perhatikan ukuran website anda terhadap setiap penambahan gambar atau grafis, ukuran paling umum adalah 40 sampai dengan 70 K, dengan rata-rata koneksi modem 28.8

5. Pisahkan gambar yang mempunyai warna berbeda, hal ini terjadi pada bagian grafis yang terdapat degradasi warna atau dua warna lebih.lebih baik usahakan untuk memotong perbagian warna yang berbeda, hal ini dapat mempercepat proses download gambar pada browser.

6. Pilihlah jenis file yang benar, kapan anda menggunakan file gamabr jpeg dan kapan menggunakan gif, pemilihan jenis file gamabr yang tepat akan mempercepat proses download browser.

from: narotama.ac.id

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s