Pengenalan Web Design

Perancangan web ( Web Design )

         Web design- atau perancangan web- bukan sekedar pengaturan tampilan grafik dan warna- warni halaman web, tapi lebih dari itu, meliputi manajemen isi, struktur,navigasi dan tata –letak (layout). Situs Web- seperti halnya media cetak- mempunyai satu tujuan utama, yaitu menyajikan informasi. Keindahan tampilan tidak kalah penting, karena umumnya pengunjung menilai sebuah situs dari “pandangan pertama”. Namun situs anda tidak mempunyai muatan isi (content) yang diatur dengan baik, maka “pandangan pertama” tidak akan berlanjut ke “ kunjungan kedua” dan seterusnya. Disinilah

Biasanya Letak kesalahan “web designer”. Terlalu asyik dengan tampilan sehinggga melupakan isi dan struktur.Umumnya perancangan web meliputi empat tahap, yaitu perancangan isi, perancangan situs, perancangan halaman, dan perancangan tata- letak.

•      Perancangan Isi ( Content Design )

      Sebelum mulai bekerja dengan komputer, seorang web designer harus sudah mempunyai gambaran yang jelas tentang situs yang akan dibuat. Dua pertanyaan- diantara sekian banyak pertimbangan yang penting untuk diajukan dalam tahap ini adalah :

- Informasi apa yang ingin anda sajikan?. Apakah profil organisasi, penawaran produk, riwayat hidup, resensi buku, atau sekedar kumpulan resep kesayangan?

 - Untuk siapa (target audience) informasi tersebut ditujukan?

 - Apakah anak- anak, orang dewasa, eksekutif, ibu rumah tangga, orang indonesia, orang asing, atau sekumpulan kecil teman- teman anda?

         Jawaban kedua pertanyaan tersebut akan menjadi filter/ saringan untuk menentukan informasi mana saja yang layak atau tidak layak dimasukan dalam situs anda. Jangan ragu- ragu membuang informasi yang tidak sesuai dengan kriteria yang sudah diterapkan, karena lebih baik sedikit informasi yang benar- benar bermanfaat dari pada banyak informasi namun tidak berguna. Setelah terkumpul, tentukan struktur yang tepat untuk informasi tersebut. Pekerjaan ini mirip dengan merancang sebuah buku: kitabharus menetapkan bagian-bagian dan bab- babnya, kemudian memilah informasi kedalam bagian atau bab yang sesuai. Bedanya, tidak seperti buku yang harus dibaca halaman demi halaman maupun yang kita inginkan. Hal ini bisa menjadi keuntungan, namun bisa juga menjadi kerugian jikantidak tahu cara memanfaatkannya dengan baik.

•      Perancangan Situs ( Site design )

        Setelah merancang isi dan strukturnya, pekerjaan selanjutnya adalah merancang situs. Ditahap ini kita masih belum akan bekerja dengan komputer. Yang penting disini adalah menentukan struktur situs. Terdapat beberapa struktur yang umum dipakai, seperti:

• Struktur linear, dengan penekanan pada arus informasi dari satu halaman ke halaman lain    dalam 
• Struktur hirarki, dengan penekanan pada pengelompokan topik- topik secara bertingkat.

• Struktur bebas, dengan penekanan pada kebebasan gerak pengunjung ke segala arah dan level.
• Struktur gabungan, yang merupakan gabungan dari dua atau lebih struktur diatas.

       Pemilihan Struktur disesuaikan dengan jenis informasi dan sasaran pengunjung yang           diharapkan, misalnya struktur linear cocok untuk menyajikan cerita atau tutorial, sedangkan struktur hirarki lebih tepat untuk menyajikan divisi- divisi dalam sebuah perusahaan.

Struktur situs akan menentukan sistem navigasi yang digunakan dalam perancangan selanjutnya, yaitu perancangan halaman web.

•      Perancangan Halaman ( Page Design )

      Dalam tahap ini baru dilakukan penulisan halaman demi halaman yang sesungguhnya. Disini web designer harus membayangkan dirinya sebagai pengunjung. Apa yang dipikirkan oleh pengunjung jika sampai disini? Apa yang mereka inginkan? Apa yang akan mereka lakukan? Yang perlu diperhatikan dalam perancangan halaman web adalah:

•  Konsistensi                                                                                                                        Rancangan yang konsisten menimbulkan rasa aman bagi pengunjung arena mereka selalu dapat menemukan apa yang mereka cari ditempat yang diharapkan. Kreatifitas tidak dilarang, namun variasi harus dilakukan secara konsisten. Untuk itu dapat digunakan beberapa template untuk merancang semua halaman (homepage) atau halaman yang memang ingin ditonjolkan.

•  Navigasi                                                                                                                                               Pengunjung harus selalu tahu dimana mereka sedang berada sekarang dan harus dapat dengan mudah berpindah kemana saja hanya dengan beberapa kali klik mouse. Penataan tombol atau link navigasi yang baik dan konsisten disetiap halaman dapat memenuhi keduanya.

         Kedua hal diatas sangat penting, karena sistem navigasi yang buruk dan struktur halaman yang tidak konsisten akan membuat pengunjung mudah tersesat dan jengkel sehingga menhjadi malas berkunjung lagi.

•   .   Perancangan Tata- Letak ( Layout Design )

         Tahap terakhir adalah yang paling menarik bagi kebanyakan web designer, dan biasanya mereka meluangkan waktu paling lama disini. Dalam tahap inilah dilakukan pemilihan jenis huruf (font), warna, gambar latar belakang, grafik, animasi, musik, film, dan berbagai jenis multimedia untuk memperindah situs web. Beberapa panduan yang perlu diperhatiakn untuk meletakkan sesuatu kedalam halaman adalah:

• Fungsi, apaka suatu elemen grafik, animasi, atau perubahan font dan warna mempunyai nilai fungsional? Lalau tidak, maka elemen atau perubahan tersebut sebaiknya tidak diletakkan atau dilakukan. Godaan terbesar bagi web designer adalah keinginan meletakkan sebuah elemen hanya demi alasan estetika belaka, yang jika  selalu dituruti akan selalu menghasilkan halaman web yang ramai tapi kosong.

• “ wah” tidak selalu berarti indah. Web designer tidak boleh memaksa pengunjung untuk harus memakai browser tertentu, modem dengan kecepatan 56K, monitor yang bisa menampilkan 16 juta warna, dan sound card 64 bit hanya untuk menyaksikan beberapa menit sajian pembukaan. Tidak semua pengunjung memiliki alat yang sama dan situs web harus dirancang sedapat mungkin agar semua orang bisa mendapat informasi yang sama. Kalau hal diatas tidak bisa dihindari, sebaiknya letakkan juga informasi pengganti bagi pengunjung yang tidak memiliki fasilitas yang disarankan. Seperti yang sudah diungkapkan diatas, tata- letak grafik dan warna memegang peranan penting karena menjadi daya tarik pertama bagi sebuah situs web. Namun bukan itu yang utama, karena setelah 30 detik pertama orang akan mengabaikan tampilan dan mulai mencari isi yang bermanfaat bagi mereka, jika kita tidak siap dengan isinya, maka kita  terpaksa harus siap pula untuk ditinggalkan. Jadi, sekarang pertanyaannya adalah, apakah anda sudah siap dengan rancangan situs web anda?

Kebutuhan Sistem dan Aplikasi

       Untuk membangun sebuah situs (website) anda dapat menggunakan beberapa piranti lunak pengembangan web yang umum digunakan, seperti Fontpage, Adobe Go Live, Macromedia Dreamweaver dsb. Dalam bolg ini akan menggunakan Macromedia Dreamweaver 2004 MX sebagai piranti lunak utama untuk pengembangan web, dan beberapa piranti lunak bantu lainnya seperti Adobe Photoshop (untuk membuat/ meng-edit Image/ foto/ gambar) dan Macromedia Flash untuk membuat efek animasi yang diperlukan. Semua piranti lunak tersebut yang berjalan pada platform windows, dalam hal ini akan menggunakan Microsoft Windows XP.

       Untuk menggunakan piranti lunak tersebut diatas, anda memerlukan sistem komputer yang cukup memadai, sehingga dapat bekerja optimal. Adapun perangkat keras sistem komputer yang diperlukan adalah :

-          Komputer dengan prosesor Pentium III atau yang lebih tinggi

-          256 Mb memory

-          Monitor SVGA dengan Resolusi 1024 x 768 pixels

-          Keyboard

-          Mouse

-          Harddisk dengan kapasitas ruang kosong minimum 275 Megabyte

-          Sistem operasi Windows XP atau Windows. Net Server 2003

    

       Gambar 1.0 
Contoh tampilan Website

Mendefinisikan Lokal site

          Sebelum anda mendefinisikan lokal site buatlah folder baru dimana anda akan mendefinisikan folder tersebut sebagai lokal site, yang selanjutnya folder ini akan digunakan untuk pengembangan website yang akan dibuat kemudian.

Lakukan langkah- langkah sebagai berikut:

1.    Dari root level, buat folder baru dan beri nama sites. Contoh : C:/Sites ( bila sudah ada folder Sites, langsung ke langkah ke-2

2.    Buka Sites ( klik ganda pada folder Sites ) kemudian buat folder baru, berinama sesuai dengan nama anda masing- masing.

3.   Buka folder yang baru saja anda buat ( folder nama anda ) kemudian buat 2 buah folder baru dengan nama docs dan images ( folder docs untuk menampung file dokumen html dari website yang akan dibangun, folder images untuk menampung file- file obyek image/ gambar yang akan dibuat)

                          Gambar 1.1
                          Folder Sites

4.   Klik pada menu start -> Programs -> Macromedia -> macromedia Dreamweaver MX20004 Sebuah menu dokumen pembuka muncul (gbr 1.2)

              

                            Gambar 1.2

        Dokumen Menu Pembuka

5.      Pilih Menu Sites -> Manage Site (gbr 1.3)

6.      Dalam kotak dialog Manage Sites, pilih New -> Sites (gbr 1.4)

                      

                                   Gambar 1.3   

                                   Menu Sites

                                   Gambar 1.4

            Kotak dialog Manage Sites

7. Tampilan menu dialog Site Definition, pada pertanyaan What would you like to name your site?  ketikan Personal Homepage -> kemudian pilih Next

                          

                                 Gambar 1.5

        Menu Dialog Sites Definition  

      

 8.   Pada pertanyaan Do you want to work with a server technology such as CouldFusion, ASP. Net, ASP, JSP or PHP ? klik No -> kemudian pilih Next

 9.   Pada pertanyaan How do you want to work with your files during development? Klik pada pilihan Edit Directly on Server using local network

10.  Isi kotak dialog dengan : C:\ Sites\ nama anda\ (sesuai dengan folder sebelumnya telah anda buat) pada pertanyaan Where are your files on the network? Kemudian klik Next

11.  Muncul tampilan menu Site definition (summary) Gambar 16 Kemudian klik Done.

Setelah kembali muncul menu Manage Sites -> kemudian klik Done ( Anda telah selesai mendefinisikan lokal Sites yang akan digunakan sebagai dasar pembuatan Websites.

                                   Gambar 1.6

       Menu dialog Site Definition (summary)