TUTORIAL DREAMWEAVER : BAB 2 KONSEP PEMBUATAN WEB

Sebelum membuat web secara profesional, tugas penting sebagai
seorang pengembang web adalah memberikan ide dan gagasan
tentang point apa saja yang akan ditampilkan dalam sebuah halaman
web. Dengan demikian, seorang pengembang web juga perlu
berkonsultasi dengan pemilik web itu sendiri agar segala sesuatu
yang menjadi tujuan pemilik web dapat terpenuhi.
Lain halnya dengan seorang pengembang web (web developer) yang
diberikan kebebasan dalam membuat sebuah web. Pemiliki web
umumnya mempercayakan sepenuhnya kepada pengembang web
(web developer). Nah, jika demikian maka sebagai seorang
pengembang web harus benar-benar membuktikan keterampilannya
dalam membuat web secara profesional agar para pemiliki web tidak
kecewa dengan karya yang telah dibuat.
Untuk menjadi seorang pengembang web profesional tidaklah mudah
karena harus memadukan antara bahasa pemrograman web dengan
nilai seni yang terdapat dalam setiap halaman web. Keduanya harus
dimiliiki, jika salah satu saja maka belum bisa disebut sebagai
seorang pengembang web profesional. Meskipun pintar bahasa php
dalam membuat web, tapi jika tidak didukung oleh jiwa seni maka
hasilnya kurang maksimal. Begitu pula sebaliknya, jika hanya pandai
membuat tampilan halaman web tapi tidak didukung oleh
pengetahuan tentang bahasa pemrograman web maka hal itu akan
sia-sia saja.
Sebagai seorang pengembang web pemula, tidak perlu berkecil hati
jika ingin menjadi seorang pengembang web profesional. Yang
terpenting adalah adanya kemauan untuk terus belajar dan belajar
lagi agar wawasan tentang pengembangan web terus bertambah.
Ada beberapa hal yang perlu diketahui oleh para pengembang web
pemula ketika pertama kali ingin membangun sebuah web dari awal.
Agar web yang dibuat nampak profesional perlu memahami beberapa
konsep dasar dalam mengolah web, mulai dari tool yang digunakan,
format gambar yang sesuai, hingga pemilihan warna teks dan latar
belakang sebuah halaman web.
Berikut ini terdapat beberapa aspek yang perlu diperhatikan dalam
membuat sebuah website.
DAPAT DIGUNAKAN (USABILITY)
Usabilitas merupakan hal yang sangat penting dalam merancang web
(web design). Memang sangat baik jika memiliki sebuah website
dinamis yang nampak profesional dan bagus , namun jika perlu waktu
yang sangat lama untuk mendownload sebuah artikal atau
penggunaan navigasinya sangat rumit maka tidak heran jika
pengguna akan “hengkang” dari website Anda dan tidak akan kembali
lagi. Perlu diketahui, umumnya pengguna (user) ingin mendapatkan
informasi secara cepat meskipun tampilan website-nya biasa saja.
Jika terlalu lama saat mencari informasi maka para pengguna akan
langsung menutup halaman web tersebut. Ingat, jangan
mengorbankan aspek usabilitas dalam mendesain website.
NAVIGASI (NAVIGATION)
Navigasi juga menjadi hal yang sangat penting dalam sebuah website
yang berfungsi untuk membantu pengguna (user) dalam menjelajah
website kita untuk mencari informasi yang diinginkan secara mudah.
Navigasi yang bagus mencerminkan struktur website yang sangat
baik.
Kadangkala ditemukan beberapa format navigasi, diantaranya:
- Papan Navigasi (Navigation Panel)
o Bisanya dalam bentuk menu-menu yang tersusun rapi.
o Sebaiknya diatur link pada bagian kiri (dari tangan
Anda) atau di bagian atas dari sebuah halaman web.
o Dapat berupa teks maupun grafik.
o Harus mengambil ruang yang tidak terlalu banyak.
o Posisi navigasi sebaiknya konsisten pada setiap
halamannya. Jika terpaksa menggunakan warna yang
berbeda, pastikan bagian tersebut masih merupakan
satu kesatuan.
Gambar Papan Navigasi
- Tombol Home (Home Button) :
o Tombol ini sangat familiar di kalangan pengembang web.
Fungsi utama tombol ini adalah untuk kembali ke
halaman utama (homepage).
o Tombol home dapat ditempatkan pada setiap halaman
web kecuali halaman utama (homepage).
o Tombol home maupun logo perusahaan dapat berfungsi
sebagai navigasi dan sebaiknya diletakkan di bagian kiri
atas (dari tangan Anda).
o Pastikan tombol home maupun logo ada pada setiap
halaman (kecuali halaman utama) agar pengunjung
(visitor) lebih familiar dengan navigasi tersebut.
Gambar Tombol Home
- Link
o Jika teks memiliki hyperlink sebaiknya diberi garis
bawah (underlined).
o Pengunjung mestinya tidak harus disajikan dalam
bentuk mouse over atau hover pada sebuah link untuk
menyadarkan pengunjung bahwa teks tersebut adalah
sebuah link – buatlah link yang nyata.
o Sediakanlah lebih banyak teks link (textual link) dalam
sebuah website untuk mengijinkan pengunjung ke
informasi referensi secara silang.
o Usahakan menyediakan daftar susunan link secara
nyata dibandingkan hidden (adanya hal yang
tersembunyi) dalam sebuah teks. Adanya link dalam
sebuah teks mengakibatkan proses membaca sedikit
lambat, namun hal ini mungkin saja menjadi hal yang
bagus dengan tujuan menandai (highlight) kata-kata
yang khusus.
o Buatlah perbedaan antara internal link (link dalam satu
website) dengan external link (link dengan website lain).
o Jika link tersebut masih dalam satu website (internal
link) buatlah link menggunakan teks yang simple. Jika
link tersebut mengarah ke website lain (external link)
usahakan memasukkan alamat lengkap website
tersebut dalam teks (misal: http://www.websitelain.com).
Hal itu akan memberikan informasi kepada pengunjung
tentang website yang berbeda sebelum mengklik link
tersebut.
Gambar External link
o Apabila menyertakan link eksternal dalam website Anda,
jangan membuat link dengan cara membuka jendela
baru (new window) menggunakan target “_blank”. Ini
dapat mengakibatkan pengunjung merasa terganggu.
o Hindari tombol kembali (back button) – yang merupakan
perintah umum untuk kembali ke halaman sebelumnya.
o Jika memiliki link dalam bentuk file berukuran besar
seperti .avi atau .pdf, sediakan ukuran dalam bentuk KB
dalam tanda kurung untuk memberikan informasi
kepada pengunjung tentang ukuran file tersebut
sebelum mendownloadnya.
o Buatlah kepastian pengunjung untuk mengetahui
tentang link yang sudah dikunjungi (diklik) dengan cara
memberi warna yang berbeda. Misalkan dari warna biru
ke merah (artinya: warna biru memberi arti link tersebut
belum dibuka sedangkan warna merah menandakan
link tersebut telah dikunjungi/dibuka).
- Judul html (HTML Title)
o Umumnya berada pada tag html header.
o Judul html (sebagai header) masih relevan dengan
halaman sekarang.
o Ditampilkan di bagian atas (top title bar) pada sebuah
browser.
o Judul html sangat berguna bagi yang membutuhkan
sebagai bookmark situs Anda.
Gambar Judul
- Peta situs (Site Map)
o Site map merupakan salah satu bagian dari halaman
website yang memberikan informasi tentang peta situs.
o Site map merupakan struktur yang hirarkis dari sebuah
situs dengan link untuk seluruh halaman yang relevan.
o Memiliki link yang menyolok ke peta situs dari setiap
halaman.
Gambar Site Map
- Fasilitas Pencarian (Search Facility)
o Beberapa pengunjung/pengguna lebih memilih fasilitas
pencarian sebelum menggunakan navigasi lain yang
disediakan.
o Ada juga beberapa pengguna menggunakan fasilitas
pencarian sebagai fasilitas terakhir yang akan
digunakan.
o Pastikan situs Anda memiliki sebuah fasilitas pencarian
(search facility).
o Letakkan kotak pencarian dalam posisi yang menyolok
pada setiap halamannya.
Gambar Fasilitas Pencarian
- Grafik sebagai Navigasi dan/atau Link (Graphic as
Navigation and/or Link)
o Sebagian pengembang web menggunakan grafik/
gambar sebagai link maupun navigasi. Berhati-hatilah
jika melakukan hal tersebut.
o Jika garis tepi (border=”0”) pada tag grafik, hal itu
mungkin menjadi jalan yang tidak jelas bagi pengunjung
ketika memberitahukan bahwa gambar tersebut
merupakan sebuah link.
o Jika grafik/gambar tersebut bukan dalam mouseover,
pengunjung mungkin tidak akan melihat kursor berubah
menjadi sebuah tangan.
Gambar Grafik sebagai navigasi atau link
o Usahakan dan sediakan link teks (textual link) untuk
informasi yang sama sebagai grafik.
Gambar Textual link
o Jika nilai estetika lebih penting, berilah garis tepi
(border=”1”) pada grafik/gambar sebagai link.
KONSEP PENULISAN (WRITING CONCEPT)
Teknik penulisan dalam web berbeda dengan penulisan untuk
publikasi (cetak). Waktu merupakan hal sangat penting bagi mereka
yang menggunakan Internet, sehingga para pengguna Internet tidak
akan membuang waktunya hanya untuk membaca teks yang sangat
banyak sekali. Riset membuktikan bahwa para pengguna cenderung
meneliti teks dalam layar monitor. Selain itu, lebih cepat membaca di
layar monitor dibandingkan membaca di atas kertas.
Terdapat beberapa konsep penulisan dalam sebuah web, yaitu:
- Sedikit itu lebih baik – pertahankan konsistensi: buatlah struktur
kalimat sesederhana mungkin, atau buatlah kalimat yang
pendek.
- Seringlah menyorot (highlight) kata atau ungkapan yang penting.
- Buatlah bullet atau nomor jika perlu.
- Buatlah panjang halamannya lebih pendek – hindari terlalu
banyak menggulung layar (vertical scroll).
- Gunakan link untuk menyorot (highlight) dan mengambil
pengguna untuk informasi lebih lanjut.
- Hindari penggunaan ungkapan yang tidak deskriptiv, seperti “klik
di sini” - coba dan gunakan kata deskriptiv untuk link.
- Hindari penggunaan tag

---

(Horizontal Rule), untuk
memisahkan badan teks: gunakan banyak judul, subheading,
dan ruang putih sebagai gantinya (hal ini akan nampak lebih
bagus dan mudah dibaca, tag

---

juga banyak yang tidak
menyukai.
- Hindari perataan teks di tengah-tengah (center) – tidak nyaman
untuk dibaca.
- Jangan menggunakan semua huruf kapital – tidak nyaman untuk
dibaca juga.
- Hindari teks miring (italic) secara berlebihan – hal ini juga tidak
nyaman untuk dibaca.
- Pertahankan isi (content) dari style – gunakan style sheet dan
masukakan file lain yang mendukung.
KESEDERHANAAN (SIMPLICITY)
Kesederhanaan merupakan hal penting dalam membuat sebuah web
profesional. Sederhana di sini bukan dalam arti tampilan sebuah situs,
namun lebih mengarah ke teknik penulisannya.
Ada beberapa hal yang perlu diperhatikan agar konsep
kesederhanaan tetap dipertahankan, yaitu:
- Gunakan Heading dan Sub Heading untuk memisahkan bagian
teks.
- Gunakan ruang kosong dengan warna putih secara bijaksana.
- Pastikan Anda memiliki tidak lebih 12 kata dalam setiap barisnya.
- Tulislah isi secara singkat – bukan sebuah karangan.
- Sorot (highlight) kata-kata yang penting.
- Gunakan warna latar belakang pucat (terang) jika menggunakan
teks utama dengan warna gelap.
- Gunakan warna latar belakang gelap jika teks utama berwarna
terang.
- Hindari penggunaan warna yang terlalu banyak, terutama
kombinasi yang tajam bagi mereka yang buta warna dalam
membaca teks.
MUDAH DIAKSES (ACCESSIBILITY)
Suatu hal yang mudah diakses ke semua orang dengan
mengabaikan browser, paltform, sistem operasi, tersambung atau
putus merupakan hal yang sangat utama untuk mempertimbangkan
ketika merancang sebuah website. Anda tidak perlu menghalangi
seorang pengguna web keluar, siapa saja bisa menjadi potensi
menjadi pengunjung/ pelanggan. Setelah sebuah website mudah
diakses, membuat penggunaan website Anda akan banyak diakses
oleh pengguna/pengunjung. Mudah digunakan = Pengunjung akan
kembali. Sulit digunakan = Pengunjung akan “kapok”.
“Kekuatan Web adalah disukainya web tersebut oleh pengguna di
seluruh dunia (Universality). Akses oleh semua orang dengan
mengabakan kekurangannya adalah aspek yang sangat penting”.
(Tim Berners – Lee, Direktur W3C dan pembuat World Wide Web).
Aspek kemudahan dalam mengakses sebuah website perlu
mempertimbangkan beberapa hal sebelum merancang web, di
antaranya:
- Pastikan website Anda mudah digunakan oleh browser utama
yang sering digunakan banyak orang maupun web browser
lainnya.
- Pastikan website Anda mudah digunakan tanpa harus
mendownload sebuah plug-in tertentu.
- Ujilah website Anda pada tahap pengembangan untuk
memeriksa kinerja pada berbagai sistem operasi dengan versi
browser berbeda.
- Gunakan style sheet untuk memisahkan style dan content.
- Gunakan etika tag html untuk menampilkan teks yang dimaksud
sehingga memungkinkan pengguna yang masih awam dapat
membaca teks secara jelas dengan cara: menggunakan tag
atau pada Heading, usahakan selalu
menetapkan teks alternatif untuk grafik (width=”25” height=”35” alt=”keterangan gambar” />)

- Periksa penggunaan warna yang kurang bagus dengan berbagai
format kebutaan warna (color blindness): jika ragu-ragu –
desaturate (buatlah hitam dan putih) rancangan untuk melihatnya
apabila masih perlu pertimbangan, jangan menggunakan warna
sebagai indikasi adanya perubahan (misal: bagian baru), selalu
menggarisbawahi suatu teks berupa link.
KEBUTAAN WARNA (COLOR BLINDNESS)
Sekitar satu dari sebelas orang mungkin tidak mampu menggunakan
website Anda berkaitan dengan beberapa format kebutaan warna
(color blindness). Yang terbaik, website Anda tidak akan nampak
pada orang yang buta warna seperti yang telah Anda rancang.
Sialnya lagi, hal ini bisa jadi teks tidak terbaca, navigasi yang sulit
digunakan dan elemen lain yang tersembunyi.
Ada beberapa pertimbangan dalam pemilihan warna agar website
Anda dapat digunakan oleh mereka yang buta warna, yaitu:
- Kebanyakan orang yang buta warna tidak bisa membedakan
antara warna merah dengan hijau.
- Warna yang teduh akan nampak terang jika dilihat oleh orang
yang buta warna.
- Format kebutaan warna yang umum adalah: Protanopia tidak
mampu menerima warna merah dan Deuteranopia tidak mampu
menerima warna hijau, sedangkan Tritanopia tidak mampu warna
biru.
Bagaimana cara menetralkan kondisi tersebut?
- Jangan menggunakan warna sebagai satu-satunya kunci rahasia,
oleh karena itu gunakan selalu garis bawah (underline) jika
merupakan sebuah llink, sediakan pula arti lain untuk
membedakan antar bagian.
- Hindari penggunaan warna merah atau hijau saja secara
monoton pada website Anda.
- Pertahankan tingkat kontras antara teks dan latar belakang.
- Gunakan selalu “alt” (teks alternatif) pada setiap grafik.

GRAFIK (GRAPHIC)
Unsur grafik sangat diperlukan dalam sebuah website, karena
memiiki beberapa fungsi. Namun jika terlalu banyak menggunakan
grafik, bisa jadi website kita akan menimbulkan berbagai masalah.
Untuk mengatasi berbagai hal yang tidak diinginkan ketika
mendesain web, perlu mempertimbangkan berbagai sudut pandang
dalam penggunaan grafik, diantaranya:
- Tambahkan grafik seperlunya karena bisa menambah waktu
ketika pengguna mendownload artikel yang diinginkan.
- Ambillah yang terkecil dalam hal ukuran fisik dan file jika
memungkinkan.
- Jangan menggunakan navigasi dalam bentuk grafik jika ingin
dijadikan beberapa bahasa – hal ini memerlukan pemeliharaan
ekstra.
- Usahakan selalu mencantumkan spesifikasi tinggi dan lebar
dalam tag .
- Usahakan selalu mencantumkan nilai border=”1” dalam tag src> atau beberapa browser akan menampilkan warna biru di
sekitar tepi gambar jika grafik tersebut merupakan sebuah link.
- Usahakan selalu menetapkan teks alternatif dalam tag src=”gambar.gif” alt=”keterangan”>. Sebagian orang akan
mematikan grafik agar proses koneksi lebih cepat. Jika grafik
dimatikan, dan tidak memasukkan teks alternatif maka pengguna
tidak mengetahui gambar tersebut.
TEKNOLOGI BARU (NEW TECHNOLOGY)
Perkembangan internet yang begitu pesat membuat beberapa
developer menambahkan teknologi baru dapat menampilkan aplikasi
yang dibutuhkan.
Sebagai seorang web developer, tentu saja harus selalu mengikuti
perkembangan di dunia maya agar ketika merancang web tidak
timbul masalah akibat dari pengguaan teknologi yang sudah
kadaluwarsa.

TUTORIAL DREAMWEAVER : BAB 1 PENGANTAR WEB DESIGN

Dalam dunia maya (internet) kita mengenal beberapa istilah tentang
web, www, website, web pages, dan homepage. Bagi orang awan,
istilah tersebut bisa saja diartikan sama. Ada sebagian masyakat
kita mencantumkan alamat lengkap dengan imbuhan, misalnya
homepage: www.toolkits.com atau website:
www.desain2u.com atau alamat situs:
www.entahkenapa.com dan lain-lain.
Memang, sah-sah saja mencantumkan beberapa kalimat tersebut
karena memang intinya sama yaitu mencantumkan alamat situs
yang dapat dikunjungi. Untuk mengetahui arti yang sebenarnya, di
bawah ini terdapat sedikit ulasan beberapa istilah dalam internet
yang sering ditemui.
www (Word Wide Web) : merupakan kumpulan web server dari
seluruh dunia yang berfungsi menyediakan data dan informasi untuk
digunakan bersama-sama.
Web adalah adalah fasilitas hypertext yang mampu menampilkan
data berupa teks, gambar, suara, animasi, dan multimedia lainnya,
di mana di antara data-data tersebut saling terkait dan berhubungan
satu dengan yang lainnya. Untuk memudahkan dalam membaca
data tersebut diperlukan sebuah web browser seperti Internet
Explorer, Netscape, Opera, maupun Mozilla Firefox
Website (situs web) : merupakan tempat penyimpanan data dan
informasi berdasarkan topik tertentu. Diibaratkan web site ini seperti
buku yang berisi topik tertentu.
Web Pages (halaman web) : merupakan sebuah halaman khusus
dari situs web tertentu. Diibaratkan halaman web ini seperti
halaman khusus dari buku.
Homepage : merupakan sampul halaman yang berisi daftar isi atau
menu dari sebuah situs web.
Mendesain web bukan merupakan pekerjaan yang berat dan bukan
merupakan pekerjaan yang ringan. Apa maksudnya? Merancang
web bukanlah pekerjaan yang berat artinya siapapun bisa
menguasai dan membuatnya asalkan memiliki kemauan untuk
belajar. Namun merancang web (web design) bukanlah pekerjaan
yang ringan artinya tidak semua orang memiliki kemampuan yang
luas tentang beberapa aspek yang harus diketahui agar tampilan
web menarik sehingga banyak pengunjung yang datang.
Sebagai contoh, ketika kita membuat sebuah homepage (halaman
utama web) sangat lama proses aksesnya. Mengapa hal itu bisa
terjadi? Itu semua diakibatkan tidak adanya ketentuan besarnya file
halaman utama tersebut. Agar halaman web kita mudah diakses
oleh para pengunjung tentunya harus memiliki pengetahuan dalam
mendesain sebuah web.

1.1. TIPS MEMBUAT WEBSITE PROFESIONAL
Terdapat beberapa point penting ketika membuat sebuah website
yang profesional.
1. Homepage (halaman utama) situs Anda harus dapat diakses
maksimal 8 detik atau dapat diakses melalui koneksi jaringan
internet minimal 28,8 kbps. Apabila proses koneksi
membutuhkan waktu yang sangat lama, hal ini akan berpotensi
hilangnya customer (pengunjung) yang tidak “betah” menunggu
terlalu lama. Akhirnya situs kita tidak akan dikunjungi olah para
“calon customer”.
2. Pastikan menyertakan META Tag pada masing-masing halaman
website Anda. META Tag adalah kode yang memungkinkan
search engine (mesin pencari seperti: Google) untuk
menentukan kata kunci yang relevan dari website Anda.
3. Pilihlah warna latar belakang (background) yang sesuai, jangan
menggunakan warna yang mempengaruhi teks untuk dibaca.
Warna situs menjadi sebuah ekspresi hati Anda. Warna orange
melambangkan keceriaan sedangkan warna ungu atau hitam
melambangkan kesuraman. Untuk itu pilihlah warna yang sesuai
untuk situs Anda berdasarkan isi yang terkandung dalam situs
tersebut.
4. Gunakan animasi seperlunya, jangan terlalu berlebihan karena
dapat mempengaruhi konsentrasi pengguna ketika sedang
membaca informasi. Selain itu, animasi juga dapat menghambat
akses ke halaman situs Anda. Sebuah animasi yang bagus
bukan menjadi jaminan bahwa situs Anda menarik perhatian
pengunjung.
5. Halaman Utama situs harus lebih spesifik agar para pengunjung
dapat mengetahui produk yang ditawarkan. Sebagai contoh, jika
situs Anda merupakan sebuah lembaga konsultasi maka
sebaiknya jasa-jasa konsultasi yang ditawarkan ditampilkan di
halaman utama. Jangan sampai pengunjung merasa bingung
dengan keberadaan situs Anda yang tidak jelas produk yang
ditawarkan.
6. Hindari pemasangan iklan (banner) di bagian atas website
Anda. Batasi jumlah banner yang akan ditayangkan, maksimal 2
dan idealnya cukup 1 banner. Semakin banyak jumlah banner,
semakin lama proses akses dan akan sangat mengganggu
konsentrasi pengguna ketika mengunjungi situs Anda.
7. Periksa ejaan yang salah dan pastikan gambar dan link
terhubung dengan baik sebelum ditampilkan secara on-line.
Kesalahan dalam mengetikkan alamat url mengakibatkan
halaman tersebut akan “ERROR”. Jika sebuah situs terdapat
salah satu atau beberapa halaman yang error menjadikan situs
tersebut nampak tidak profesional.
8. Lengkapilah website Anda dengan tombol navigasi yang mudah
dan tersusun dengan rapi pada bagian atas, bawah, kiri,
maupun kanan. Jika menggunakan tombol dalam bentuk
gambar, perlu diingat bahwa kemungkinan proses akses lebih
lama. Mengapa? Karena gambar memiliki ukuran yang cukup
besar, dan seperti kita ketahui. Sebuah halaman situs maksimal
berukuran tidak lebih dari 100kb.
9. Jika terpaksa harus menggunakan Frame, gunakan secara
tepat. Pada dasarnya, penggunaan Frame dalam sebuah situs
akan berkesan tidak profesional. Hindari halaman yang
memerlukan “scroll”, ini mengakibatkan pengujung kurang
nyaman untuk mencari informasi sehingga akan cepat-cepat
“kabur” dari situs Anda.
10. Perhitungkan jumlah klik yang dibutuhkan untuk pindah dari
halaman satu ke lainnya. Jika terlalu banyak klik akan sangat
membosankan bagi pengunjung. Anda bisa menerapkan sistem
navigasi yang lebih nyaman dengan menyertakan logo pada
setiap halamannya.
11. Jika menggunakan “JAVA” pada website Anda gunakan secara
tepat. Tawarkan “Java” atau “No Java” kepada pengunjung
karena dapat mempengaruhi kinerja masing-masing browser.
Hindari adanya iklan “pop up” yang akan membuat pengunjung
menjadi bosan.
12. Jangan menambahkan “autoplay” suara ketika seseorang
mengunjungi situs Anda. Sebaiknya tawarkan, apakah
menggunakan intro beserta audio (suara) ataukah langsung ke
halaman utama.
13. Periksa website Anda dengan beberapa jenis browser karena
masing-masing browser memiliki kemampuan yang berbeda.
1.2. PRINSIP DALAM MENDESAIN WEBSITE
Ketika Anda mulai memikirkan merancang sebuah website, Anda
perlu memikirkan bagaimana pemilihan warna yang tepat sehingga
akan memberikan penilaian tersendiri kepada pengunjung tentang
website yang Anda buat dan bagaimana rancangan tata letak
(design layout) dapat membantu “mendesain secara kerja sama”
dalam sebuah tim.
Disain yang bagus hampir tidak kelihatan, namun jika disainnya
jelek maka akan memberikan dampak yang luar biasa. Jika disain
website Anda dirancang bagus dan tata letak informasi juga
membantu para pengunjung mudah menggunakan website tersebut,
pengunjung pasti akan kembali menjelajah website Anda. Namun
jika Anda tidak berpikir bagaimana mendisain dan memilih warna
yang baik maka akan memberikan dampak kepada
pengguna/pengunjung tersebut. Jika hal ini terjadi, jangan harap
pengunjung/pengguna akan kembali lagi mengunjungi situs Anda.
1.3. SOFTWARE DISAIN GRAFIS
Dalam merancang sebuah website, kita tidak bisa lepas dari
perangkat lunak untuk mengolah gambar (image) sebagai bagian
dari website. Ada beberapa alat disain grafis yang dapat digunakan
untuk membantu dalam membuat website yang cantik, diantaranya:
- Adobe Photoshop (http://www.adobe.com) : software ini
sangat populer dan dapat diandalkan untuk membuat dan
mengedit grafik maupun gambar fotografi.
- Adobe Illustrator (http://www.adobe.com) : software ini
digunakan untuk membuat gambar dalam bentuk vektor dan
dapat digunakan untuk membuat ilustrasi.
- PaintShop Pro (http://www.jasc.com) : software ini sama
dengan Adobe Photoshop, sedikit lebih canggih namun
masih kalah populer dibandingkan Adobe Photoshop.
- Macromedia Fireworks (http://www.macromedia.com) :
software ini sangat mirip dengan Adobe Photoshop, namun
tool ini berbasis vektor. Software ini mengijinkan semua
elemen dapat diedit kembali dan dapat berintegrasi dengan
Macromedia Dreamweaver.
- Macromedia Flash (http://www.macromedia.com) :
software ini dapat digunakan untuk membuat animasi dan
berbasis vektor untuk website.
1.4. FORMAT GRAFIS
Grafik/gambar dalam sebuah website dapat memberikan efek visual
yang luar biasa terhadap website tersebut, namun bisa menambah
waktu koneksi akibat banyaknya gambar yang ditampilkan. Grafik
dalam website dapat berupa statik, animasi, dan fotografi.
Agar koneksi ke website kita lebih cepat, perlu memahami beberapa
format file yang sering digunakan pada sebuah website,
diantaranya:
- GIF : memiliki warna 8-bit, mendukung dalam bentuk
transparan, mengkompresi area warna secara solid,
mereduksi jumlah warna dan menjalin untuk proses
download secara cepat, juga dapat digunakan untuk
membuat animasi dalam bentuk grafik (animated graphic).
- JPG : memiliki warna 24-bit,menjaga kualitas brightness dan
hue yang ditemukan dalam sebuah foto, dapat disimpan
dalam format berkualits tinggi maupun rendan (high or low
resolution), sebuah file jpg dapat pula digunakan versi
resolusi rendah (low resolution) dari gambar yang nampak
ketika gambar sedang didownload, tidak mendukung
transparansi.
- PNG : PNG-8 mendukung warna 8 bit, mengkompres area
warna yang pekat, menjaga detail ketajaman, mendukung
transparansi, kompresi lebih canggih dibandingkan gif
karena dapat mengkompresi sekitar 10-30% lebih kecil dari
format GIF.
Setelah melihat perbandingan beberapa format file grafis untuk web,
Anda dapat menentukan format apa yang akan digunakan sesuai
kebutuhan. Pada prinsipnya, semua format file tersebut dapat
dijadikan panduan dalam memilih format file yang tepat. Ada
beberapa bahan pertimbangan ketika memilih salah satu dari
beberapa format file tersebut, diantaranya:
- Usahakan ukuran file seminimal mungkin
- Selalu gunakan mode warna RGB
- Gunakan web pallete (216 web-safe colour)
Jika Anda memilih format file GIF : simpan sedikit warna jika perlu,
simpanlah sebagai interlaced .gif, buatlah latar belakang transparan
berwarna.
Jika Anda memilih format file JPG : pilih kualitas yang paling kecil
jika perlu, simpan sebagai progresive.

bersambung....

Bagaimana memulai belajar Desain Grafis?

Bagaimana memulai belajar Desain Grafis? Memang itu sebuah pertanyaan yang sangat mendasar bagi seorang desiner pemula.

Definisi Desain Grafis: adalah salah satu bentuk seni lukis (gambar) terapan yang memberikan kebebasan kepada sang desainer (perancang) untuk memilih, menciptakan, atau mengatur elemen rupa seperti ilustrasi, foto, tulisan, dan garis di atas suatu permukaan dengan tujuan untuk diproduksi dan dikomunikasikan sebagai sebuah pesan. Gambar maupun tanda yang digunakan bisa berupa tipografi atau media lainnya seperti gambar atau fotografi.Desain grafis umumnya diterapkan dalam dunia periklanan, packaging, perfilman, dan lain-lain.

Ada beberapa tokoh menyatakan pendapatnya tentang desain grafis yang saya ambil dari situs http://id.wikipedia.org/

Menurut Suyanto desain grafis didefinisikan sebagai ” aplikasi dari keterampilan seni dan komunikasi untuk kebutuhan bisnis dan industri“. Aplikasi-aplikasi ini dapat meliputi periklanan dan penjualan produk, menciptakan identitas visual untuk institusi, produk dan perusahaan, dan lingkungan grafis, desain informasi, dan secara visual menyempurnakan pesan dalam publikasi.

Sedangkan Jessica Helfand dalam situs http://www.aiga.com/ mendefinisikan desain grafis sebagai kombinasi kompleks kata-kata dan gambar, angka-angka dan grafik, foto-foto dan ilustrasi yang membutuhkan pemikiran khusus dari seorang individu yang bisa menggabungkan elemen-eleman ini, sehingga mereka dapat menghasilkan sesuatu yang khusus, sangat berguna, mengejutkan atau subversif atau sesuatu yang mudah diingat.

Menurut Danton Sihombing desain grafis mempekerjakan berbagai elemen seperti marka, simbol, uraian verbal yang divisualisasikan lewat tipografi dan gambar baik dengan teknik fotografi ataupun ilustrasi. Elemen-elemen tersebut diterapkan dalam dua fungsi, sebagai perangkat visual dan perangkat komunikasi.

Menurut Michael Kroeger visual communication (komunikasi visual) adalah latihan teori dan konsep-konsep melalui terma-terma visual dengan menggunakan warna, bentuk, garis dan penjajaran (juxtaposition).

Warren dalam Suyanto memaknai desain grafis sebagai suatu terjemahan dari ide dan tempat ke dalam beberapa jenis urutan yang struktural dan visual.

Sedangkan Blanchard mendefinisikan desain grafis sebagai suatu seni komunikatif yang berhubungan dengan industri, seni dan proses dalam menghasilkan gambaran visual pada segala permukaan.

Kategori Desain Grafis
Secara garis besar, desain grafis dibedakan menjadi beberapa kategori:
1. Printing (Percetakan) yang memuat desain buku, majalah, poster, booklet, leaflet, flyer, pamflet, periklanan, dan publikasi lain yang sejenis.
2. Web Desain: desain untuk halaman web.
3. Film termasuk CD, DVD, CD multimedia untuk promosi.
4. Identifikasi (Logo), EGD (Environmental Graphic Design) : merupakan desain profesional yang mencakup desain grafis, desain arsitek, desain industri, dan arsitek taman.
5. Desain Produk, Pemaketan dan sejenisnya.

Program Pengolah Grafis
Oleh karena desain grafis dibagi menjadi beberapa kategori maka sarana untuk mengolah pun berbeda-beda, bergantung pada kebutuhan dan tujuan pembuatan karya.

1. Aplikasi Pengolah Tata Letak (Layout)
Program ini sering digunakan untuk keperluan pembuatan brosur, pamflet, booklet, poster, dan lain yang sejenis. Program ini mampu mengatur penempatan teks dan gambar yang diambil dari program lain (seperti Adobe Photoshop). Yang termasuk dalam kelompok ini adalah:
- Adobe FrameMaker
- Adobe In Design
- Adobe PageMaker
- Corel Ventura
- Microsoft Publisher
- Quark Xpress

2. Aplikasi Pengolah Vektor/Garis
Program yang termasuk dalam kelompok ini dapat digunakan untuk membuat gambar dalam bentuk vektor/garis sehingga sering disebut sebagai Illustrator Program. Seluruh objek yang dihasilkan berupa kombinasi beberapa garis, baik berupa garis lurus maupun lengkung. Aplikasi yang termasuk dalam kelompok ini adalah:
- Adobe Illustrator
- Beneba Canvas
- CorelDraw
- Macromedia Freehand
- Metacreations Expression
- Micrografx Designer

3. Aplikasi Pengolah Pixel/Gambar
Program yang termasuk dalam kelompok ini dapat dimanfaatkan untuk mengolah gambar/manipulasi foto (photo retouching). Semu objek yang diolah dalam progam-program tersebut dianggap sebagai kombinasi beberapa titik/pixel yang memiliki kerapatan dan warna tertentu, misalnya, foto. Gambar dalam foto terbentuk dari beberapa kumpulan pixel yang memiliki kerapatan dan warna tertentu. Meskipun begitu, program yang termasuk dalam kelompok ini dapat juga mengolah teks dan garis, akan tetapi dianggapa sebagai kumpulan pixel. Objek yang diimpor dari program pengolah vektor/garis, setelah diolah dengan program pengolah pixel/titik secara otomatis akan dikonversikan menjadi bentuk pixel/titik.
Yang termasuk dalam aplikasi ini adalah:
- Adobe Photoshop
- Corel Photo Paint
- Macromedia Xres
- Metacreations Painter
- Metacreations Live Picture
- Micrografx Picture Publisher
- Microsoft Photo Editor
- QFX
- Wright Image

4. Aplikasi Pengolah Film/Video
Program yang termasuk dalam kelompok ini dapat dimanfaatkan untuk mengolah film dalam berbagai macam format. Pemberian judul teks (seperti karaoke, teks terjemahan, dll) juga dapat diolah menggunakan program ini. Umumnya, pemberian efek khusus (special effect) seperti suara ledakan, desingan peluru, ombak, dan lain-lain juga dapat dibuat menggunakan aplikasi ini. Yang termasuk dalam kategori ini adalah:
- Adobe After Effect
- Power Director
- Show Biz DVD
- Ulead Video Studio
- Element Premier
- Easy Media Creator
- Pinnacle Studio Plus
- WinDVD Creater
- Nero Ultra Edition

5. Aplikasi Pengolah Multimedia
Program yang termasuk dalam kelompok ini biasanya digunakan untuk membuat sebuah karya dalam bentuk Multimedia berisi promosi, profil perusahaan, maupun yang sejenisnya dan dikemas dalam bentuk CD maupun DVD. Multimedia tersebut dapat berisi film/movie, animasi, teks, gambar, dan suara yang dirancan sedemikian rupa sehingga pesan yang disampaikan lebih interktif dan menarik.
Yang termasuk dalam kelompok ini adalah:
- Macromedia Authorware
- Macromedia Director
- Macromedia Flash
- Multimedia Builder
- Ezedia
- Hyper Studio
- Ovation Studio Pro

sumber : slametriyanto.net

Tutorial: Mengedit Web dengan Dreamweaver

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.

Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
   

2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
   

3. Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
   
   

4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
   

5. Ketikkan images/index_26.gif pada kolom Bg.
   

6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

---

2. Memasukkan Objek

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

1. Letakkan kursor pada tempat yang akan ditambahkan teks.
   

2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
   

3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
   

4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
   

5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
   

6. Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
   

7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.
   

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

1. Membuat Pop-up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.

Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

1. Pertama kali, klik menu PC.
   

2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
   

3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
   

4. Selanjutnya pilih Show Pop up Menu.
   

5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
   

6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
   

7. Kemudian masukkan alamat URL pada kolom Link.
   

8. Selanjutnya pada kolom Target, pilih _parent.
   

9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
   

10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
    

11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
    

12. Klik Tab Position untuk menentukan posisi pop up menu.
    

13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
    

14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

1. Buatlah duplikasi gambar tombol yang telah ada.
   

2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
   

3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
   

4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
   

5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
   

6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
   

7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
   

8. Untuk melihat hasilnya, tekan tombol F12.

sumber : http://slametriyanto.net/2007/05/25/membuat-web-dengan-dreamweaver/