Desain DESAIN WEB. Setelah mempelajari bab ini, Anda diharapkan dapat: Setelah mempelajari bab ini, Anda diharapkan dapat:

Transkripsi

1 1 DESAIN WEB Setelah mempelajari bab ini, Anda diharapkan dapat: Setelah mempelajari bab ini, Anda diharapkan dapat: Memahami cilent-side dan server-side. Memahami penggunaan client-side Flash dan server-side Flash. Memahami metodologi pengembangan web. Macromedia Flash adalah perangkat lunak aplikasi untuk pembuatan animasi yang digunakan untuk halaman web. Macromedia Flash mampu melengkapi Web site dengan beberapa macam animasi interaktif. Penggunaan Flash merupakan hal biasa dalam pengembangan Web site, namun Flash hanya digunakan sebagai pelengkap dalam pengembangan web dinamis, seperti animasi, dan aplikasi client-side interaktif. Belum banyak halaman web menggunakan interface Flash movie dalam aplikasi yang berhubungan dengan inout dan output database. Dengan penggunaan script untuk server-side seperti PHP, CGI/Perl, ASP, dan Java Server Pages (JSP), maka penyajian informasi yang dinamis dan estetis akan membuat Web site Anda tetap menarik bagi pengunjung. A. Client-Side dan Server-Side Pada client-side, proses dilakukan pada browser dengan script seperti JavaScript, ActionScript, dan lain-lain. Client-side digunakan untuk mengadakan interaksi dengan user, dan data yang diolah relatif sedikit. Contoh penggunaan client-side di antaranya adalah: Digunakan untuk interaksi user, seperti perhitungan, visualisasi, game, dan lain-lain. Digunakan untuk background dengan efek tertentu.

2 Proses dilakukan pada client-side dilakukan di browser, yang biasanya diperlukan untuk hal-hal yang berhubungan denkgan interaksi user. Sedangkan pada server-side, proses dilakukan di Web server, dan client hanya menerima hasil dalam bentuk HTML. Contoh server-side adalah PHP, CGI/Perl, ASP, dan Java Server Pages (JSP). Server-side dan client-side saling melengkapi, dan disesuaikan dengan keperluan web itu sendiri. Contoh penggunaan server-side antara lain adalah: Pengolahan data untuk menentukan hasil polling, yang mencerminkan data yang paling baru. Registrasi user dan konfirmasi password. Penambahan record dalam database. Pencarian sesuatu oleh user yang diproses dalam server, kemudian hasilnya diterima oleh user dalam format HTML. B. Client-Side dan Server-Side Flash Flash movie tidak hanya digunakan untuk pembuatan animasi agar halaman web Anda lebih menarik, tetapi juga bisa digunakan untuk menangani client-side. Beberapa contoh penggunaan client-side Flash adalah: Kalkulator untuk suatu perhitungan, seperti angsuran rumah sesuai perhitungan real estate. Game Computer-based training. Flash movie tidak hanya menangani client-side, tetapi dapat juga digunakan dalam hubungannya dengan pengolahan server-side. Flash movie sebagai interface tempat user melakukan sesuatu yang diproses di server, kemudian hasilnya ditampilkan kembali pada Flash movie. Contoh server-side Flash adalah: Registrasi, konfirmasi password, penambahan record dalam database, dan lain-lain. Form input dari user yang biasanya menggunakan form HTML, tetapi dapat digunakan field text input dalam Flash. Dengan PHP, CGI/Perl, atau ASP, maka pengaksesan tabel database dapat dilakukan. Hasil pengolahan di server ditampilkan kembali dalam Flash movie. Feedback dan aplikasi lain yang berhubungan dengan file text eksternal dapat dilakukan karena Flash dapat membaca variabel yang terdapat dalam file text.

3 Polling. Flash dapat digunakan memasukkan data polling yang disimpan ke dalam database. Hasil pengolahan data menggunakan PHP, CGI/Perl, atau ASP dapat ditampilkan kembali pada Flash, dan dapat diatur penampilannya berupa chart, seperti bar chart, line chart, atau pie chart. C. Pengembangan Web Dalam pengembangan web, terdapat beberapa metodologi pengembangan yang diadaptasi dari disiplin ilmu seni atau disiplin ilmu komputer. Model navigasi dasar, harus dikenal dengan baik oleh desainer, karena setiap model memberikan solusi untuk kebutuhan yang berbeda. Walaupun desain visual web cenderung menjadi bagian dari seni dari pada sains, tetapi dapat disimpulkan pendekatan pada proses desain. Menurut Tom Brinck (2002), pengembangan web meliputi beberapa tahap, yaitu: 1. Requirement Analysis. Pada tahap ini ditentukan tujuan dari web, bagaimana mengatasi problem yang ada. Juga ditentukan target audience, target platform, user goals, business goals, dan lainnya. Tujuan dan audiens berpengaruh pada nuansa suatu Web site, sebagai pencerminan identitas dari organisasi yang menginginkan informasi sampai kepada audiens. Tingkat kemampuan audiens sangat mempengaruhi pembuatan desain. Dengan demikian Web site dapat dikatakan komunikatif. 2. Conceptual Design. Desain konseptual ini merupakan konsep pengembangan suatu Web site, dan harus dilihat dari semua aspek. Desain konseptual merupakan sketsa kasar yang harus dikembangkan terlebih dahulu. Pembuatan desain harus mempertimbangkan bahwa sebaiknya desain sederhana dan bersifat umum. Desain menggambarkan bagaimana fungsionalitas produk bekerja. Metode desain seperti use case, task analysis, dan arsitektur informasi (seperti flowchart dan object diagram) digunakan dalam tahap ini. Fokus dari desain ini pada perintah (command) dan bagaimana mengerjakan perintah tersebut. Desain fungsional dibuat untuk mengurangi kemungkinan kesalahan pada aplikasi. 3. Mockeup and Prototype. Tujuan dari tahap ini adalah membuat contoh dengan cepat dan mengevaluasinya sebelum dibuat produk akhir. Dalam tahap ini dibuat visual representation (mockeup) dan interactive reresentation (prototype). Mockeup dapat berupa

4 sketsa manual atau ilustrasi dengan komputer. Desain ini dibuat secara keseluruhan bersama-sama, dan lebih baik dari pada dibuat secara terpisah. Desain ikon, dialog, dan menu termasuk dalam tahap ini. Dalam pembuatan desain visual, ditentukan elemen utama yang merupakan identitas dari web. Elemen tersebut dapat berupa logo, nama, warna, dan lainnya yang mungkin telah lama dikenal oleh user. User interface seperti menu dan ikon yang sama sekali baru memerlukan pelatihan yang harus diberikan kepada user, karena user telah terbiasa dengan interface yang lama. Untuk menyelenggarakan pelatihan dipmerlukan biaya, dan perlu diperhatikan bahwa penggunaan interface baru harus layak secara ekonomis. 4. Production. Pada tahap ini dibuat produk akhir, teks final, isi grafik, dan program harus dibuat semuanya. Evaluasi yang umum mencakup penjaminan kualitas, user testing, dan field testing. 5. Launch. Pada akhirnya,produk diluncurkan dan siap untuk diakses oleh umum. Selanjutnya, Web site dipelihara dan dievaluasi. Proses desain berulang lagi dari awal. Evaluation. Pada setiap tahap selalu dilakukan evaluasi untuk mendapatkan tanggapan dari berbagai pihak, sehingga merupakan bahan pertimbangan dalam meningkatkan Web site. Gambar 1.1 Tahap pengembangan Web.

5 D. Struktur Navigasi Beberapa desainer web menggunakan teknik yang biasa seperti dalam pengembangan multimedia pada umumnya yaitu storyboarding. Pertama-tama pembuatan diagram untuk bermacam-macam halaman, seperti storyboarding pembuatan film dan video, kemudian hubungan detail yang diperlukan antara halaman-halaman secara keseluruhan. Dalam pengembangan web, terdapat beberapa model navigasi dasar, yang harus dikenal dengan baik oleh desainer, karena setiap model memberikan solusi untuk kebutuhan yang berbeda. 1. Linear navigation model Linear navigation model digunakan oleh sebagian besar Web site. Informasi diberikan secara sekuensial dimulai dari satu halaman. Beberapa desainer menggunakan satu halaman untuk masuk atau keluar dari Web site. Gambar 1.2 Struktur navigasi linear navigation model Gambar 1.3 Struktur navigasi hierarchical model 2. Hierarchical model Hierarchical model diadaptasi dari top-down design. Konsep navigasi ini dimulai dari satu node yang menjadi homepage. Dari homepage dapat dibuat

6 beberapa cabang ke halaman-halaman utama. Apabila diperlukan, dari tiap halaman utama dapat dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan. 3. Spoke-and-hub model Spoke-and-hub model hanya menggunakan satu node untuk berhubungan dengan node lain. Pada model ini hanya terdapat dua macam link, yaitu dari homepage ke halaman tertentu, dan dari halaman tersebut kembali ke homepage Gambar 1.4 (kiri) Struktur navigasi spoke-and-hub model. Gambar 1.5 (kanan) Struktur navigasi full web model. 4 Full web model Full web model memberikan kemampuan hyperlink yang banyak. Full web model banyak digunakan karena user dapat mengakses semua topik dengan subtopik dengan cepat. Namun kelemahan dari model ini, yaitu dapat berakibat user kehilangan cara untuk kembali ke topik sebelumnya. E. Desain Visual Beberapa desainer menggunakan teknik storyboarding untuk merancang halaman-halaman web seperti yang dilakukan pada pengembangan multimedia,

7 terutama film. Teknik lain adalah pembuatan desain web sesuai dengan desain graphical user interface, karena banyak berhubungan dengan user dan teknologi informasi. Desain web diadaptasi dari pedoman pembuatan desain grafis secara umum. Elemen desain tidak hanya harus dirancang dengan baik, tetapi juga harus dapat bekerja sama. Oleh karena manusia berorientasi pada visual, sehingga komunikasi yang efektif dipengaruhi oleh desain visual. Desain visual mencakup elemen grafik yang digunakan pada interface, termasuk layout secara keseluruhan, menu, desain form, penggunaan warna, coding, dan penempatan tiap unit dari informasi. Beberapa pedoman untuk membuat desain Web site yang baik, yaitu mencakup kejelasan, konsistensi, estetis, dan kecepatan download. 1. Kejelasan visual Penyajian visual tidak boleh memberikan pengertian ambigu, sehingga tidak membingungkan user, yang berarti bahwa tampilan visual harus jelas. Beberapa persyaratan yang harus dipenuhi untuk mendapatkan kejelasan visual adalah: Kesamaan - dua bentuk visual mempunyai properti yang kelihatan dimiliki oleh keduanya. Pendekatan - dua bentuk visual mempunyai properti yang dimiliki bersama-sama. Penutupan - bentuk visual dapat menutup suatu area yang sama. Kontinuitas - suatu bentuk visual akan terhubung dengan bentuk berikutnya menurut garis lurus. Supaya bentuk visual mempunyai arti yang jelas, perlu diperhatikan untuk tidak menempatkan sesuatu yang tidak berarti pada halaman web. Pada umumnya penulis senang dengan menulis, desainer senang untuk membuat sesuatu yang indah, sehingga kadang-kadang membuat sesuatu yang sebenarnya tidak perlu. 2. Konsistensi Konsistensi bentuk visual akan memudahkan setiap user dalam menggunakan perintah. Konsistensi harus diatur untuk suatu image tertentu maupun keseluruhan desain. Biasanya, model yang kompleks dan tidak konsisten menyebabkan user sulit memahami dan menjalankan sistem dengan baik. Objek dan operasi dirancang sedemikian rupa sehingga menyajikan bentuk yang konsisten.

8 Untuk memperoleh konsistensi dapat dilakukan sebagai berikut: Penggunaan warna pada elemen yang sama harus sama, sehingga tidak menimbulkan penafsiran yang berbeda. Pesan dari sistem ditampilkan pada lokasi tertentu secara logika. Posisi menu sebaiknya diletakkan pada lokasi yang sama, sehingga user tidak selalu mencari-cari untuk menemukannya. Penggunaan ikon dan simbol harus sama untuk operasi yang sama 3. Estetis Seperti halnya desain grafis pada umumnya, desain Web harus komunikatif dan estetis. Untuk mendapatkan desain yang komunikatif dan estetis, perlu diperhatikan pedoman pembuatan tata letak suatu tampilan, yaitu dengan mengatur elemen-elemen layout seperti teks, image, animasi serta video. Empat prinsip dasar layout user interface adalah: Kesatuan. Elemen-elemen desain harus ditempatkan sedemikian rupa sehingga merupakan kesatuan informasi. Keseimbangan. Elemen-elemen desain harus ditempatkan sedemikian rupa sehingga terdapat keseimbangan (balance) untuk setiap halaman, maupun secara keseluruhan. Penempatan menu utama di sebelah kanan merupakan contoh yang tidak seimbang, karena tidak layak bila mata user tertuju pada sebelah kanan bidang layout untuk mencari menu utama. Gambar 1.6 Pola halaman web dengan grid horisontal dan vertikal untuk membuat kesinambungan antara halaman satu dengan lainnya.

9 Irama. Garis irama(grid) vertikal dan horisontal digunakan untuk menempatkan elemen-elemen desain, yang diatur dalam bentuk simetris maupun asimetris. Kontinuitas. Informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian ke bagian lain. Kontinuitas dapat dibuat dengan membuat halamanhalaman mempunyai gaya, bentuk atau warna yang memberikan pengguna merasakan kesinambungan dengan halaman lainnya. Langkah pertama pembuatan desain visual adalah membuat desain miniatur. Tujuan pembuatan desain minatur adalah untuk menentukan pola halaman web secara keseluruhan. Desain miniatur dibuat dengan ukuran kecil, dan seluruh halaman dilihat bersama sebagai satu kesatuan. Dengan menempatkan grid vertikal dan horisontal dapat ditentukan bentuk semua halaman secara kasar. Layout halaman dapat menggunakan bentuk simetris, maupun asimetris. Penggabungan kedua bentuk dalam satu Web site akan menimbulkan gangguan konsistensi. Setelah desain miniatur selesai dibuat, langkah selanjutnya adalah membuat desain komprehensif dari halaman yang penting (keypage) secara rinci. Halaman yang dianggap penting dari suatu Web site tidak sama dengan Web site lain, namun homepage dan halaman yang mewakili tiap level sangat diperlukan. Gambar 1.7 Desain visual homepage

10 Gambar 1.8 Desain visual halaman level 1 Gambar 1.9 Desain komprehensif halaman web level 2. Dalam pembuatan desain komprehensif diutamakan bentuk visual, seperti penempatan elemen-elemen desain. Desain ini digunakan sebagai pedoman pada waktu implementasi menggunakan editor HTML, seperti Macromedia Dreamweaver, Microsoft FronPage, dan lainnya. Teks pada halaman web tidak 10

11 perlu menggunakan teks yang sebenarnya, karena teks yang sebenarnya baru akan dibuat pada saat implementasi. Namun, penyajian teks dengan typeface, typesize dan typestyle yang benar sangat diperlukan. Hal ini disebabkan oleh beberapa aturan penggunaan tipografi pada desain grafis. Pada umumnya, desain komprehensif dibuat menggunakan draw program, seperti CorelDraw, Adobe Illustrator, dan Macromedia Freehand, atau paint program seperti Adobe Photoshop. 4. Nilai visual bagi user Salah satu konsep alur baru dalam pengembangan berasal dari riset mengenai ecommerce dan ebusiness yang dilakukan oleh Kierzkosky (1996) dalam bukunya Marketing to the Digital Consumer. Nilai visual terdiri dari lima elemen dalam Web site ebusiness yang sukses adalah: Menarik Mengajak Hubungan Belajar Menahan Web site ebusinesss yang memiliki kelima elemen akan lebih berhasil dan bertahan dengan biaya yang tinggi dibandingkan dengan Web site lainnya. Dengan memperhatikan setiap elemen, kita memiliki tujuan yang jelas dalam menentukan apa yang diperlukan di dalam Flash movie dan Web site. Menarik Tampilan yang menarik berarti pengunjung dapat menangkap apa yang ditempatkan pada halaman Web. Proses membuat agar suatu Web site menarik tergantung dari selera customer. Audiens muda mungkin tertarik dengan software game dan action, sedangkan audiens yang lebih tua tertarik dengan software portofolio. Karena itu, aturan pertama untuk membuat menarik adalah memikirkan audiens. Dimulai dengan target audiens, temukan hal yang menarik baginya dan lanjutkan mulai dari hal ini. Salah satu kualitas paling baik dari Flash adalah kemampuannya untuk membuat animasi yang baik dengan ditambahkan suara untuk lebih menarik. Tetapi animasi juga dapat mengecewakan pengunjung, sehingga Anda harus lebih teliti memilih animasi dan suara. Berikut ini adalah beberapa jenis animasi dan suara yang dapat di-render dalam Flash. Animasi besar. Beberapa Web site melengkapi dengan gambar dan suara yang sangat menarik pada saat pertama halaman web muncul. 11

12 Kelebihan dari hal ini adalah orang baiasanya menceritakan kepada teman-temannya. Namun tampilan yang menarik tersebut dapat mengurangi produk dan jasa yang ditawarkan. Setelah melihat sekali, dua kali, atau beberapa kali, tidak lagi menarik. Untuk mengatasi hal tersebut dapat dilengkapi dengan pilihan skip intro, yang berarti bahwa pengunjung dapat meninggalkan animasi dan melanjutkan ke bagian lain. Animasi kecil tetapi menarik. Untuk menambah tampilan lucu, ringan, dan menarik pada Web site, Anda dapat membuat perhatian audiens tertarik dengan menampilkan animasi kecil yang memberikan kejutan pada audiens. Contoh paling sederhana adalah rollover yang menampilkan suatu animasi dan segera kembali ke keadaan semula Anda dapat menempatkannya pada halaman web. Rollover ini memberikan kesegaran, tidak selalu tampil, dan memberikan warna yang lain di samping warna putih halaman Web yang dapat dilihat. Animasi float. Untuk beberapa produk atau jasa yang kurang dramatis, tetapi ada cara yang efektif untuk menggunakan gerakan sehingga menarik perhatian dengan efek fade-in dan fade-out dari image yang berbeda. Lompatan tampilan. Cara terakhir untuk menarik perhatian pengunjung adalah memiliki produk kunci atau produk unggulan. Presentasi mendadak disertai animasi dan kemudian berhenti pada produk tersebut akan membuat pengunjung tertarik dan terpesona. Mengajak Untuk mengajak pengunjung, berikan sesuatu agar dikerjakannya. Sering dalam promosi real estat, pengunjung dilengkapi dengan kalkulator, sehingga dapat menghitung berapa angsuran tiap bulan yang harus dibayar jika membeli rumah. Pada saat menggunakan kalkulator pengunjung diberikan keberanian untuk melihat properti lain dan membandingkannya. Kuis, dan puzzle kecil atau elemen lainnya pada Web site yang dilengkapi dengan aktivitas untuk pengunjung sangat penting untuk membuat pengunjung tetap berada pada Web site tersebut. Hubungan Hubungan dengan sudiens, seperti menarik perhatian audiens, memerlukan pengetahuan tentang audiens. Dengan melengkapi informasi dan 12

13 tool khusus, seperti newsletter online, maka berarti Anda membangun hubungan baik dengan audiens. merupakan cara yang baik untuk berhubungan dengan customer. Pada umumnya Anda dapat menambah fitur dengan formulir kontak. Formulir kontak sangat sederhana, dapat dibuat dengan PHP dan merupakan tool yang baik untuk Web site. Belajar Anda dapat mengumpulkan informasi dari pengunjung Web site dengan berbagai cara, seperti formulir kontak, formulir survey, dan lainnya. Hal ini dapat memperoleh peningkatan informasi yang tidak ternilai. Survey merupakan pengumpulan data mengenai perusahaan yang dilakukan dalam waktu singkat. Survey dapat juga dilakukan dengan meneliti produk dan jasa. Dengan demikian dapat diketahui produk dan jasa apakah yang dikehendaki oleh customer yang akan dapat digunakan untuk mempertimbangkan pengembangan produk. Cara lain yang digunakan untuk mempelajari customer adalah menggunakan button dan menghubungkannya dengan Web site Anda. Pada saat pengunjung mengklik button, Anda dapat memasukkan sedikit ActionScript yang dapatt berhubungan dengan script PHP dan database MySQL untuk mencatat saat customer mengkliknya. Dengan cara demikian Ada dapat mengetahui apakah pengunjung mengklik atau tidak pada saat dia membuka Web site tersebut. Cara ini seperti halnya feedback yang dapat membantu Anda untuk memahami customer dengan sebaik-baiknya. Menahan Web site Anda dapat memiliki mekanisme yang membuat customer kembali lagi. Suatu cookie yang ditempatkan pada komputer pengunjung dapat kembali kepada ucapan selamat dengan nama pengunjung. otomatis, kalender online yang meluncurkan produk baru, sesuatu yang baru tentang perusahaan, dan pesan serta chat online dengan dialog antara customer, merupakan cara yang baik untuk menahan customer agar tidak meninggalkan Web site Kecepatan download Seperti banyak penulis mengatakan, Isi paling utama. Sedangkan seniman grafis mengatakan bahwa Isi paling utama, tetapi bila Anda ingin seseorang membacanya, maka sebaiknya ditambahkan gambar. Sebagai Web developer, kedua hal tersebut harus dipertimbangkan berkaitan dengan masalah kecepatan download. Setiap menggunakan gambar pada halaman web, persoalan yang utama adalah ukuran file, dan berapa lama image akan muncul pada halaman web. Pertimbangan yang harus dilakukan adalah menentukan format file, resolusi, 13

14 browser, dan lain-lain. Namun, perlu digarisbawahi bahwa gambar yang baik harus mempunyai kualitas baik dengan ukuran file yang kecil. 5. Work Breakdown Structure Work Breakdown Structure (WBS) adalah bagian pokok item dalam perencanaan proyek. Tujuan Work Breakdown Structure adalah mengorganisasi proyek menjadi beberapa level yang dapat dikerjakan. Tanpa WBS, tidak ada definisi dari pekerjaan yang harus dilakukan untuk melengkapi proyek. Tanpa menghetahui keadaan sesungguhnya dari pekerjaan yang harus dilakukan untuk melengkapi proyek, kita tidak mungkin dapat menentukan biaya atau jadwal proyek. Berdasarkan deliverables yang telah ditentukan dan disetujui oleh stakeholder, dibuat perencanaan dari daftar yang ada. Perencanaan dibuat untuk tiap bagian menjadi pekerjaan tersendiri yang harus dikerjakan agar memenuhi kelengkapan proyek. Untuk itu diperlukan WBS atau struktur rincian proyek, seperti Gambar 1.10 atau Ganbar Requirement Analysis 1.1 Scoping 1.2 Menetukan kebutuhan 2. Conceptual Design 2.1. Stuktur navigasi 2.2. Memperinci kebutuhan 3. Mokedup and Prototype 3.1. Pembuatan mockedup 3.2. Pembuatan proototype 4. Production 4.1. Pembuatan image 4.2. Layout halaman web 4.3. Pembuatan database 4.4. Pemrograman 4.5. Pendaftaran domain name 4.6. Hosting 5. Launching 5.1 Testing user interface 5.2 Serah terima dengan Universitas Multimedia Millenium Gambar 1.10 WBS pengembangan web 14

15 Gambar 1.10 WBS pengembangan web Gambar 1.11 WBS pengembangan web dengan gambar grafis. 6. Organisasi Projek Organisasi proyek terdiri dari beberapa personil yang mempunyai kompetensi di bidangnya. Organisasi proyek dipimpin oleh seorang manajer proyek. Unntuk proyek kecil pada umumnya namajer proyek dirangkap oleh system analyst. Gambar 1.11 Organisasi proyek 15