BAB III TEORI PENUNJANG Untuk menunjang laporan kerja praktek ini dibutuhkan beberapa teori-teori penunjang sebagai referensi penulis untuk membuat sebuah perancangan dari proyek yang telah diberikan oleh perusahaan kepada penulis. Berikut teori-teori penunjang yang digunakan sebagai berikut :
A. Desain Grafis dalam perancangan web page Proses desain 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. Desain grafis adalah suatu bentuk komunikasi visual yang menggunakan gambar untuk menyampaikan informasi atau pesan seefektif mungkin. Dalam desain grafis, teks juga dianggap gambar karena merupakan hasil abstraksi simbol-simbol yang bisa dibunyikan. Desain grafis diterapkan dalam desain komunikasi dan fine art. Seperti jenis desain lainnya, desain grafis dapat merujuk kepada proses pembuatan, metoda merancang, produk yang dihasilkan (rancangan), atau pun disiplin ilmu yang digunakan (desain). Unsur dalam desain grafis sama seperti unsur dasar dalam disiplin desain lainnya. Unsur-unsur tersebut (termasuk shape, bentuk (form), tekstur, garis, ruang, dan warna) membentuk prinsip-prinsip dasar desain visual. Prinsip-prinsip tersebut, seperti keseimbangan (balance), ritme (rhythm), tekanan (emphasis), proporsi (“proportion”) dan kesatuan (unity), kemudian membentuk aspek struktural komposisi yang lebih luas. Pengertian 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 1
fungsional dari sebuah situs web, serta desain posisi web sebagai semacam desain grafis. Tujuan dari 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 runtime dan lain-lain. Plug-in juga dimasukkan ke dalam halaman web dengan menggunakan HTML / tag XHTML. Tugas seorang desainer Web secara umum adalah penentu dari sebuah situs Web. Secara langsung ataupun tidak langsung, kita harus menguasai dan memahami hal-hal yang berkaitan dengan tampilan dari sebuah situs Web. Seorang desainer Web harus pula memahami penerapan aspek-aspek yang terdapat di dalam desain Web, walaupuan tidak menguasai. Seperti halnya Java Script, kita tidak wajib mengetahui dan mampu membuat Java Script sendiri untuk kebutuhan desain, namun bagaimana dan estetika penerapan Java Script pada desain akan sangat menguntungkan apabila kita memahaminya. Dalam membuat Web, seorang desainer Web menentukan aspek-aspek desain yang diperlukan seperti pemilihan Font, warna, tataletak, dan lainnya. Tugas seorang desainer Web tidaklah semudah yang dibayangkan, penguasaan software-software grafis dan animasi dan HTML authoring saja tidak cukup untuk membuat situs Web yang baik. Banyak hal yang harus menjadi pertimbangan, terlebih bila dihadapkan dengan keinginan Klien, kita akan dihadapkan dengan kepuasan klien. Terkadang idealisme kita sebagai desainer Web akan kalah dengan idealisme klien. Ada beberapa software yang digunakan dalam desain grafis diantaranya : 1. Publishing
Adobe Photoshop
Adobe Illustrator
Adobe Indesign
Coreldraw 2
Gimp
Inscape
Macromedia Freehand
2. Webdesign
Macromedia Dreamweaver
Microsoft Frontpage
Notepad
3. Audio Visual
Adobe After Effect
Adobe Premier
Final Cut
Adobe Flash, atau sebelumnya Macromedia Flash
Rendering 3 Dimensi
3D StudioMax
Maya AutoCad
Untuk membangun suatu website yang baik, seorang web desainer sebaiknya memperhatikan prinsip-prinsip yang ada, terlepas ia mempunyai bakat seni /tidak. Adapun prinsip-prinsip yang harus diperhatikan antara lain : 1. Unik Yang di masud dengan unik dalam mendesain suatu website adalah kesadaran seorang desainer untuk tidak meniru dan menggunakan karya orang lain,
2. Komposisi Memperindah tampilan halaman web, seorang web designer harus betul-betul memahami komposisi, baik bentuk maupun warna yang akan digunakan dalam website yang akan di buatnya. 3. Simple Hal ini di tujukan agar tampilan website terlihat bersih rapid an informatif 4. Semiotik
3
Arti semiotik adalah ilmu yang mempelajari tentang tanda-tanda, dalam hal ini di harapkan pengunjung dapat mengerti dengan mudah dan cepat ketika melihat tanda dan gambar yang ada dalam suatu website. 5. Ergonomis Ergnomis dalam mendesign website adalah kepunyaan yang akan di dapat kan pengunjung dalam membaca dan kecepatan yang akan di peroleh pengunjung dalam mencari informasi. Hal yang perlu di perhatikan oleh webdesigner untuk mencapai prinsip ini adalah : a) Pemilihan ukuran font yang tepat sehingga mudah di baca b) Menempatkan link sedemikian rupa sehingga mudah dan cepat untuk di akses dan lebih penting lagi adalah suatu website terlihat informatif. 6. Konsistensi Konsistensi dalam pemilihan bentuk atau style yang digunakan pada elemenelemen perancangan web dan digunakan pada semua halaman website. Website yang konsisten akan memberikan identitas tersendiri dan mampu memperlihatkan visi dan misi dari website tersebut.
B. Elemen Grafis-Multimedia Desain grafis khususnya dalam halaman-halaman web terdiri dari beberapa elemen sebagai berikut (ariesto Hadi sutopo,2002) : 1. Teks adalah bagian yang paling utama untuk menampilkan informasi, 2. Grafik atau Image merupakan elemen yang dapat membantu menjelaskan informasi. Dengan penggunaan grafik maupun image orang dapat memahami suatu pesan. 3. Animasi merupakan sarana untuk menampilkan informasi dengan baik, di samping animasi merupakan daya tarik yang mudah di ingat pengunjung. 4. Interactive Link dapat menggunakan button yang berupa teks, symbol, grafik, maupun image, yang berfungsi untuk memudahkan pengunjung dalam menyelusuri suatu website.
C. Kode warna & Karakter Huruf dalam web Page 4
a. Kode Warna
Gambar 3.1
b. Karakter Huruf Apakah tipografi itu? Tipografi adalah seni merancang huruf, kata, paragraf, dan bagaimana mereka bisa berinteraksi satu sama lain. Banyak web designer dan web developer juga sering menyebut tipografi sebagai seni dalam memilih font atau jenis huruf yang akan digunakan dalam web design. Tipografi memegang peranan yang sangat penting dalam web design. Mengingat 95% dari web design terdiri dari font, maka pengetahuan tipografi harus menjadi prioritas utama bagi web designer dan web developer. Salah satu pengetahuan di bidang tipografi adalah anatomi huruf. Anatomi huruf ialah bagian-bagian penyusun huruf. Setiap jenis font memiliki anatominya masing5
masing dan tentunya ini akan memiliki dampak psikologis dan komunikasi yang berbeda-beda pula bagi pembacanya. Setiap aspek pembentuk anatomi font juga menentukan karakter dari font.
Gambar 3.2
Berikut ini penjelasan ringkas mengenai font yang sering digunakan dalam web design: 1) Serif Font Keluarga Serif font adalah salah satu jenis font tertua, font ini sudah ada sejak tahun 1200. Salah satu jenis keluarga Serif font yang sering kita kenal adalah Times New Roman, Georgia, Book Antiqua, Palatino dan Garamond. Serif Font juga sering disebut sebagai huruf 'bersepatu' karena memiliki pemanjangan pada bagian serif-nya (lihat gambar di atas). Font-font ini mencerminkan kualitas dan ketegasan. Selain itu, serif font juga dipercaya lebih mudah dibaca, diingat, dan mudah diserap oleh otak. Surat kabar dan majalah sering sekali menggunakan font ini sebagai main tipografinya.
Tetapi karena detil anatominya menjadi tidak sempurna saat muncul di monitor
(resolusi 72 dpi), maka Serif font lebih cocok untuk digunakan dalam media offline beresolusi tinggi (300 dpi) seperti buku dan surat kabar, di mana mereka dapat tampil secara detil dan lebih mudah dibaca. Mereka tidak cocok untuk teks online kecuali bila diset lebih besar dari biasanya.
6
2) Slab-Serif Font Slab-serif font adalah subclass dari font serif. Font ini seperti Serif font tetapi memiliki garis lurus yang tegas (tidak melengkung). Slab-serif font menyajikan sebuah keharmonisan antara keterbacaan font serif dan tampilannya di monitor. Meskipun font ini sebenarnya juga kurang pantas untuk disajikan dalam ukuran kecil karena akan kehilangan detilnya dan menjadi sulit dibaca.
Salah satu tipe Slab-Serif Font yang cukup populer ialah Rockwell
3) Sans-Serif Font Sans-serif font ialah font yang tidak memiliki serif sama sekali ("sans" berasal dari bahasa Perancis yang berarti "tanpa"). Keluarga Sans-serif font adalah font yang paling tepat untuk digunakan dalam web design. Karena font ini tetap nyaman dibaca di layar monitor. Sansserif font juga cocok untuk judul, karena mereka cukup menonjol dan mudah dibaca dari jauh.
Keluarga sans-serif font yang paling sering dipakai ialah Helvetica (yang dikenal sebagai Arial di Windows), Trebuchet MS, Lucida Grande, dan Verdana. Semua font ini memiliki karakter yang 'bersih' dan mudah dibaca walau berukuran kecil.
4) Character Proportion Yang dimaksud 'Character Proportion' adalah font yang memiliki lebar karakter sama, tidak peduli itu huruf 'w' atau 'i' semuanya dicetak dalam lebar yang sama (seperti huruf di mesin ketik manual). Hal ini membuat karakter lebih sulit untuk dibaca dalam ukuran normal karena bentuk huruf-hurufnya yang kurang proporsional. Salah satu anggota keluarga Character Proportion font ialah Courir New.
7
Font tipe ini jelas kurang sesuai untuk digunakan sebagai main tipografi dalam web, tetapi tipe font ini memang wajib digunakan dalam pemrograman atau penyajian kode-kode HTML karena memiliki lebar huruf yang sama dan mudah dihitung spasinya.
5) Cursive dan Fantasy Font Dua keluarga font lain yang paling sering digunakan ialah Cursive dan Fantasy. Dua keluarga font ini adalah font-font khusus yang tidak sesuai untuk digunakan dalam teks tubuh tetapi cukup tepat jika diterapkan dalam situasi tertentu (untuk judul atau header misalnya).
Font Cursive, seperti Comic Sans MS di atas memang kelihatannya cukup 'ramah' dibaca, tetapi akan memunculkan kesan 'kurang profesional' sehingga umumnya tidak disukai. Sedangkan font tipe Fantasy seperti Jokerman tampaknya tidak berperan besar dalam web, tetapi dapat digunakan sebagai judul atau bagian-bagian menonjol lainnya. Cursive dan Fantasy Font dianggap terlalu-dekoratif jika terlalu banyak digunakan karena membuat teks tersebut sulit dibaca. Kesimpulannya, web designer biasanya akan cenderung menggunakan Verdana - dan memang Verdana-lah yang paling banyak digunakan di web design. Hal ini karena tingkat keterbacaannya yang tinggi. Verdana akan tampak sempurna jika disajikan dalam ukuran 11 piksel. Makin besar ukurannya, biasanya Verdana makin susah dibaca. Verdana yang berukuran standar juga dinilai mampu memberikan kesan profesional. Helvetica/Arial sebenarnya juga memiliki variasi font (bold, italic, dsb) yang cukup bagus. Tetapi font ini jarang dipakai karena 'bentuknya' tidak sebagus Verdana. Trebuchet MS juga cukup baik, lebar dan spasinya mirip dengan Arial, dan akan memunculkan karakter tersendiri karena font ini cukup jarang digunakan. Sedangkan Times New Roman adalah font yang dirancang untuk desain cetak dan sebaiknya tidak digunakan dalam web design, kecuali jika dipasang dalam ukuran besar. Courier New juga berguna untuk menampilkan potongan kode-kode pemograman tetapi jangan gunakan font ini untuk body teks apalagi main tipografi. 8
Sedangkan untuk masalah ukuran huruf, yang harus diketahui ialah: Makin besar ukuran font, maka font akan makin susah dibaca dan sulit dipahami karena akan membuat fokus/konsentrasi si pembaca buyar, akibatnya informasi pun menjadi tidak tersampaikan secara sempurna; Sedangkan Makin kecil ukuran font, akan membuat pembaca harus makin konsentrasi untuk membacanya, yang biasanya akan membuatnya jadi malas membaca. Memang, sebagian besar orang Indonesia beranggapan bahwa font yang makin besar adalah makin 'jelas', tetapi berbagai penelitian psikologi komunikasi dan berbagai survey malah membuktikan bahwa ukuran yang efektif adalah ukuran font yang 'pas' (untuk paragraf/body text, untuk tipe sansserif adalah 12-14px). Seorang web designer harus bisa menentukan ukuran font yang 'pas'. Font di buku anak-anak misalnya, tentunya akan di-set dengan ukuran yang lebih besar (biasanya sekitar 16-22pt), karena anak-anak lebih tertarik pada 'bentuk' daripada 'makna' di balik tulisan tersebut. Semakin dewasa, maka pengertian ini akan menjadi makin bergeser, yaitu lebih tertarik pada 'makna' dari pada 'bentuk' nya. Sebenarnya, selain bentuk font, banyak hal lain yang menentukan bagustidaknya atau komunikatif-tidaknya tipografi dalam web design, sepertiwarnafont, tingkat kontras, proporsi, bloking, sinergi bentuk, dan lain sebagainya. Kesesuaian pemilihan font dengan konsep web design keseluruhan sepertiminimalis,retro,paper style, dan lain sebagainya juga harus turut diperhitungkan.
D. Layout Web Page 1. Pembuatan Layout Bermacam-macam langkah yang digunakan untuk membuat layout dari suatu website.Berikut ini merupakan proses yang secara umum banyak dilakukan dalam pembuatanlayout. a. Membuat sketsa desain Seorang desainer bisa saja menuangkan ide dalam pembuatan interfacedengan terlebih dahulu membuat sketsa di atas kertas. Namun untuk kebanyakan orang, langkah ini biasanya dilewatkan dan langsung pada langkah pembuatan layoutdesain dengan menggunakan software. 9
b. Membuat layout desain Banyak software yang dapat digunakan membuat layout.Salah satu diantaranya adalah Macromedia, proses ini dikerjakan setelah pembuatan sketsa desain. Namun terkadang pembuatan layout merupakan proses yang pertama kali dikerjakan. c.
Membagi gambar menjadi potongan-potongan kecil Proses ini diperlukan untuk meng-optimize waktu download.
d. Membuat animasi Animasi diperlukan untuk menghidupkan atau menjadikan websitelebih interaktif e. Membuat HTML Setelah merapikan layout desain lengkap dengan tombol, image, teks, script HTML, hal yang perlu dilakukan kemudian adalah membuat layout ke dalam format HTML
10
