PENGANTAR WEB DESAIN 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. HTTP yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Adapun beberapa kelebihan dari website adalah : • Media advertisement tak terbatas : dapat menampilkan / mempromosikan jasa layanan dan perdagangan secara keseluruhan. • Dapat di akses dari seluruh dunia : beda dengan iklan yang di pasang melalui majalah, surat kabar ataupun brosur yang hanya dapat di baca / di lihat oleh kawasan tertentu saja. • Dapat melakukan transaksi jual beli secara online / langsung melalui internet. • System lebih mudah : cukup sekali untuk mempersiapkan bahan dengan minimum penampilan selama 1 tahun kecuali ada penambahan gambar text (update isi website). • Total harga lebih murah : dihitung dengan minimum periode 1 tahun. Karena iklan anda akan terpasang full / non stop selama 1 tahun. Jenis Website : 1. Website static adalah website yang bersifat non update dengan pengertian sederhananya adalah website yang isi dan tampilannya tidak di ubah - ubah. Website hanya bisa diubah isinya oleh designer web / web developer dengan perjanjian tertentu (akan dikenakan penambahan biaya pada saat update isi web). Sebuah website static adalah salah satu bentuk website yang isi didalam website tersebut untuk di update secara berkala, dan biasanya di maintain secara manual oleh beberapa orang yang menggunakan software Editor. Ada 3 tipe kategori software editor yang biasa dipakai untuk tujuan maintaining ini, mereka adalah : • Elemen 1 Text Editor. Contohnya adalah Notepad atau TextEdit, dimana HTML diubah didalam program editor tersebut. • Elemen 2 WYSIWYG editor. Contohnya Microsoft Frontpage dan Macromedia Dreamweaver, dimana situs di edit menggunakan GUI (Graphical User Interface) dan format HTML ini secara otomatis di generate oleh editor ini. • Elemen 3 Editor yang sudah memiliki template, contohnya Rapidweaver dan iWeb, dimana, editor ini membolehkan user untuk membuat dan mengupdate websitenya langsung ke web server secara cepat, tanpa harus mengetahui apapun tentang HTML. Mereka dapat memilih template yang sesuai dengan keinginan mereka, menambah gambar atau obyek, mengisinya dengan tulisan, dan dengan sekejap mereka sudah dapat membuat website tanpa harus melihat sama sekali kode-kode HTML. 2. Website dynamic adalah website yang bersifat friendly yang bisa juga dikatakan website yang up to date atau website yang dapat di ubah - ubah isinya oleh administrator / webmaster kapan saja. Website ini biasa di gunakan untuk perusahaan yang akan menambah jenis gambar / isi produk jasa usaha dan seringkali digunakan untuk website shopping online. Pada website dynamic ini, untuk penambahan isi website tidak dikenakan biaya karena penambahan isi website dilakukan oleh pemilik sendiri. Sebuah website dynamic adalah website yang secara berkala, informasi didalamnya berubah, atau website ini bisa berhubungan dengan user.
Ada banyak jenis sistem software yang dapat dipakai untuk meng-generate Dynamic Web System dan Situs Dynamic, beberapa diantaranya adalah ColdFusion (CFM), Active Server Pages (ASP), Java Server Pages (JSP) dan PHP, bahasa program yang mampu untuk meng-generate Dynamic Web System dan Situs Dinamis. UNSUR-UNSUR WEBSITE ATAU SITUS. Untuk menyediakan keberadaan sebuah website, maka harus tersedia unsur-unsur penunjangnya, adalah sebagai berikut: 1. Nama domain (Domain name/URL - Uniform Resource Locator) Pengertian Nama domain atau biasa disebut dengan Domain Name atau URL adalah alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh : http://www.baliorange.net, http://www.detik.com Nama domain diperjualbelikan secara bebas di internet dengan status sewa tahunan. Nama domain sendiri mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan website tersebut. Contoh nama domain ber-ekstensi internasional adalah com, net, org, info, biz, name, ws. Contoh nama domain ber-ekstensi lokasi Negara Indonesia adalah co.id (untuk nama domain website perusahaan), ac.id (nama domain website pendidikan), go.id (nama domain website instansi pemerintah), or.id (nama domain website organisasi). 2. Rumah tempat website (Web hosting) Pengertian Web Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di website. Besarnya data yang bisa dimasukkan tergantung dari besarnya web hosting yang disewa/dipunyai, semakin besar web hosting semakin besar pula data yang dapat dimasukkan dan ditampilkan dalam website. Web Hosting juga diperoleh dengan menyewa. Besarnya hosting ditentukan ruangan harddisk dengan ukuran MB(Mega Byte) atau GB(Giga Byte). Lama penyewaan web hosting rata-rata dihitung per tahun. Penyewaan hosting dilakukan dari perusahaan-perusahaan penyewa web hosting yang banyak dijumpai baik di Indonesia maupun Luar Negri. 3. Bahasa Program (Scripts Program) Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam website yang pada saat diakses. Jenis bahasa program sangat menentukan statis, dinamis atau interaktifnya sebuah website. Semakin banyak ragam bahasa program yang digunakan maka akan terlihat website semakin dinamis, dan interaktif serta terlihat bagus. Beragam bahasa program saat ini telah hadir untuk mendukung kualitas website. Jenis jenis bahasa program yang banyak dipakai para desainer website antara lain HTML, ASP, PHP, JSP, Java Scripts, Java applets dsb. Bahasa dasar yang dipakai setiap situs adalah HTML sedangkan PHP, ASP, JSP dan lainnya merupakan bahasa pendukung yang bertindak sebagai pengatur dinamis, dan interaktifnya situs. 4. Desain website Setelah melakukan penyewaan domain name dan web hosting serta penguasaan bahasa program (scripts program), unsur website yang penting dan utama adalah desain. Desain website menentukan kualitas dan keindahan sebuah website. Desain sangat berpengaruh kepada penilaian pengunjung akan bagus tidaknya sebuah website. 5. Publikasi website Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau dikenal oleh masyarakat atau pengunjung internet. Karena efektif tidaknya situs sangat tergantung dari besarnya pengunjung dan komentar yang masuk. Untuk mengenalkan situs kepada masyarakat memerlukan apa yang disebut publikasi atau promosi. Publikasi situs di masyarakat dapat dilakukan dengan berbagai cara seperti dengan pamflet-pamflet, selebaran, baliho dan lain sebagainya tapi cara ini bisa dikatakan masih kurang efektif dan sangat terbatas. Cara yang biasanya dilakukan dan paling efektif dengan tak terbatas ruang atau waktu adalah publikasi
langsung di internet melalui search engine-search engine(mesin pencari, spt : Yahoo, Google, Search Indonesia, dsb) Cara publikasi di search engine ada yang gratis dan ada pula yang membayar. Yang gratis biasanya terbatas dan cukup lama untuk bisa masuk dan dikenali di search engine terkenal seperti Yahoo atau Google. Cara efektif publikasi adalah dengan membayar, walaupun harus sedikit mengeluarkan akan tetapi situs cepat masuk ke search engine dan dikenal oleh pengunjung. 6. Pemeliharaan website Untuk mendukung kelanjutan dari situs diperlukan pemeliharaan setiap waktu sesuai yang diinginkan seperti penambahan informasi, berita, artikel, link, gambar atau lain sebagainya. Tanpa pemeliharaan yang baik situs akan terkesan membosankan atau monoton juga akan segera ditinggal pengunjung. Pemeliharaan situs dapat dilakukan per periode tertentu seperti tiap hari, tiap minggu atau tiap bulan sekali secara rutin atau secara periodik saja tergantung kebutuhan (tidak rutin). Pemeliharaan rutin biasanya dipakai oleh situs-situs berita, penyedia artikel, organisasi atau lembaga pemerintah. Sedangkan pemeliharaan periodik bisanya untuk situs-situs pribadi, penjualan/e-commerce, dan lain sebagainya.
FORMAT GAMBAR 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.
• • • •
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). 256 solid colors 1 transparent color per image Animate gif files Lossless
• • • •
JPG : memiliki warna 24-bit, menjaga kualitas brightness dan hue yang ditemukan dalam sebuah foto, dapat disimpan dalam format berkualits tinggi maupun rendah (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. 16.7 million colors gradients and shadows No transparency No animation Lossy everytime you save a jpeg, the file becomes smaller and loses quality
• • •
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 1030% 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. 16.7 million colors gradients and shadows 256 transparent colors per image Lossless
5 TAHAP DASAR DESAIN WEBSITE Untuk membangun sebuah website, diperlukan suatu langkah - langkah persiapan yang secara umum dibagi dalam lima tahap, diantaranya : 1. Merumuskan tujuan membuat website Berdasarkan isi maupun tujuan, suatu website biasanya dapat digolongkan menjadi seperti berikut:
• • • •
Website marketing, berfungsi sebagai media presentasi dan pemasaran Website customer service, berfungsi sebagai media untuk melayani konsumen Website e-Commerce, berfungsi sebagai media transaksi on-line Website informasi/berita, berfungsi sebagai media informasi berita
Menentukan isi website Faktor yang paling penting dalam suatu website adalah isi dari website itu sendiri. Haltersebut berkaitan dengan manfaat yang akan diperoleh pengunjung dari sebuah website. Menentukan target pengunjung Meskipun suatu website mempunyai sifat terbuka, dalam arti sebuah website bebas dikunjungi oleh semua orang, namun alangkah baiknya jika dalam pembuatan website perlu dilakukan gambaran target yang akan dituju oleh sebuah website. Alasan ini lebih didasarkan kepada penggunaan hardware dan aplikasi browser yang berbeda dengan setiap pengunjung. Menetukan struktur website Struktur website diperlukan untuk memberikan kemudahan dalam mengelola suatu website. Tentunya struktur tersebut harus disesuaikan dengan isi dari website. Dengan memiliki struktur yang teroganisasi dengan baik, suatu website akan memberikan kemudahan dalam navigasi, editing dan pemeliharaan website tersebut. 2. Desain Website Faktor keindahan desain tampilan dari suatu website merupakan salah satu faktor yang paling penting dalam menentukan keberhasilan suatu website, selain faktor kecepatan loading. Suatu situs yang baik memiliki suatu kesatuan desain bisa dikatakan memiliki kesamaan tema dalam halaman - halaman webnya. Hal ini penting dalam segi estestika maupun segi navigasi. Kesamaan desain yang biasanya dipertahankan antara lain kesamaan jenis font yang digunakan, warna, tombol navigasi (menu), letak menu dan sebagainya. Prinsip - prinsip dasar desain Untuk membangun suatu website yang baik, seorang web designer sebaiknya memperhatikan prinsip prinsip yang ada, terlepas ia mempunyai bakat seni atau tidak. Adapun prinsip - prinsip yang harus diperhatikan antara lain: • • • • •
Unik, Yang dimaksud dengan unik dalam mendesain suatu website adalah kesadaran seorang designer untuk tidak meniru atau menggunakan karya orang lain. Komposisi, Untuk memperindah tampilan halaman web, seorang web designer harus betul - betul memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang dibuatnya. Simple, Banyak dari seorang web designer yang memegang prinsip - prinsip “Keep it Simple”. Hal ini ditujukan agar tampilan website terlihat rapi, bersih dan informatif. Semiotik, Arti semiotik adalah ilmu yang mempelajari tentang tanda - tanda. Dalam hal ini diharapkan pengunjung dapat dengan mudah dan cepat mengerti ketika melihat tanda dan gambar yang ada dalam suatu website. Ergonomis, Ergonomis dalam mendesain website adalah kepunyaan yang akan didapatkan pengunjung dalam membaca dan kecepatan yang akan diperoleh pengunjung dalam mencari informasi. Hal - hal yang perlu diperhatikkan oleh seorang webdesigener untuk mencapai prinsip ini adalah : 1. pemilihan ukuran fonts yang tepat sehingga mudah dibaca 2. Menempatkan link sedemikian rupa sehingga mudah dan cepat untuk diakses dan yang lebih penting lagi adalah suatu website terlihat lebih informatif.
• •
Fokus, Fokus adalah hierarki prioritas dari pesan yang akan disampaikan, dengan adanya fokus tersebut, diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dulu harus dibaca atau dilihat. Konsistensi, Konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen - elemen perancangan web dan digunakan pada semua halaman website. Website yang konsisten akan memberikan identitas tersendiri dan mampu memperlihatkan visi serta misi dari website tersebut.
3. Elemen - elemen desain Desain grafis khususnya dalam halaman - halaman web terdiri dari beberapa elemen sebagai berikut : • • • • • •
Teks adalah bagian yang paling utama untuk menampilkan informasi. Grafik atau imgae merupakan elemen yang dapat membantu menjalankan informasi. Dengan penggunaan grafik maupun image orang lebih mudah memahami suatu pesan Animasi merupakan sarana untuk menampilkan informasi dengan baik, disamping animasi merupakan daya tarik yang mudah dingat pengunjung. Video dapat merupakan hasil suatu rekaman dengan kamera video maupun hasil pengolahan dengan komputer Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan animasi serta memberikan kenyamanan bagi pengunjung yang mendengarkannya Interaktive link dapat menggunakan button yang berupa teks, simbol, grafik, maupun image, yang berfungsi untuk memudahkan pengunjung dalam menyelusuri suatu website.
4. Konsep desain Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain grafis, dan pada dasarnya mengikut prinsip desain grafis secara umum. Oleh karena itu alangkah baiknya jika dalam mendesain halaman tampilan website juga memperhatikan prinsip desain. Prinsip - prinsip desain tersebut adalah: • • •
Komunikatif, Prinsip komunikatif berhubungan dengan corporate identity, isi pesan serta audiens Estetis, Fungsi dari estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat pengunjung untuk lebih menggali informasi yang ditawarkan suatu website. Ekonomis, Desain web harus memperhatikan faktor ekonomis, dalam arti ukuran file yang digunakan. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu website
Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang web designer perlu memperhatikan pedoman - pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu dalam mengatur elemen - elemen layout. Pedoman - pedoman yang dimaksud adalah: • • • •
Kesatuan, Elemen - elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga merupakan kesatuan informasi pada satu halaman atau beberapa halaman. Balance, Elemen - elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga terdapat keseimbangan secara keseluruhan Kontras, Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen - elemen layout Kontinyuitas, Informasi lebih dimengerti oleh pengguna bila mempunyai aliran - aliran yang baik, sedikit gangguan yang mengambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian kebagian lain. Konttinuitas dapat dibuat dengan membuat halaman - halaman mempunyai gaya, bentuk atau warna yang memberikan pengguna merasakan kesinambungan dengan halaman lainnya.
5. Pembuatan Layout Bermacam - macam langkah yang digunakan untuk membuat layout dari suatu website. Berikut ini merupakan proses yang secara umum banyak dilakukan dalam pembuatan layout. •
• • • •
Membuat sketsa desain, Seorang desainer bisa saja menuangkan ide dalam pembuatan interface dengan terlebih dahulu membuat sketsa di kertas. Namun untuk kebanyakan orang, langkah ini biasanya dilewatkan dan langsung pada langkah pembuatan layout desain dengan menggunakan software. Membuat layout desain, Banyak software yang dapat digunakan membuat layout. Salah satunya adalah Macromedia, Proses ini dikerjakan setelah pembuatan sketsa desain. Namun terkadang pembuatan layout merupakan proses yang pertama kali dikerjakan Membagi gambar menjadi potongan - potongan kecil, Proses ini diperlukan untuk mengoptimize waktu download Membuat animasi, Animasi diperlukan untuk menghidupkan atau menjadikan website lebih interaktif Membuat HTML, Setelah merapikan layout desain lengkap dengan tombol, image, teks, script HTML, hal yang perlu dilakukan kemudian adalah membuat layout ke format HTML
