desain web

Desain
1
DESAIN WEB
Setelah mempelajari bab ini, Anda diharapkan dapat:
l
Setelah mempelajari bab ini, Anda diharapkan dapat:
l
Memahami cilent-side dan server-side.
l
Memahami penggunaan client-side Flash dan server-side Flash.
l
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:
l
Digunakan untuk interaksi user, seperti perhitungan, visualisasi,
game, dan lain-lain.
l
Digunakan untuk background dengan efek tertentu.
Desain
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:
l
Pengolahan data untuk menentukan hasil polling, yang mencerminkan data yang paling baru.
l
Registrasi user dan konfirmasi password.
l
Penambahan record dalam database.
l
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:
l
Kalkulator untuk suatu perhitungan, seperti angsuran rumah
sesuai perhitungan real estate.
l
Game
l
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:
l
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.
l
Feedback dan aplikasi lain yang berhubungan dengan file text
eksternal dapat dilakukan karena Flash dapat membaca variabel
yang terdapat dalam file text.
Desain
l
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
Desain
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.
WEB DEVELOPMENT
Gambar 1.1 Tahap pengembangan Web
Gambar 1.1 Tahap pengembangan Web.
ement Analysis
Analysis. Pada tahap ini ditentukan tujuan dari web, bagaimana
1. Requir
Requirement
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
Selanjutnya, Web site dipelihara dan dievaluasi. Proses desain berulang lagi dari
awal.
Evaluation
Evaluation. Pada setiap tahap selalu dilakukan evaluasi untuk mendapatkan
tanggapan dari berbagai pihak, sehingga merupakan bahan pertimbangan dalam
Desain
meningkatkan Web site .
1.4
Navigasi
D. Struktur
Struktur
Navigasi
Beberapa desainer web menggunakan teknik yang biasa seperti dalam
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
pembuatan diagram untuk bermacam-macam halaman, seperti storyboarding
film dan video, kemudian hubungan detail yang diperlukan antara halaman-halaman secara
pembuatanDalam
film pengembangan
dan video, kemudian
hubungan
detailnavigasi
yang diperlukan
keseluruhan.
web, terdapat
beberapa model
dasar, yang antara
halaman-halaman
keseluruhan.
Dalam
pengembangan
harus
dikenal dengan baiksecara
oleh desainer,
karena setiap
model
memberikan solusiweb,
untukterdapat
beberapayang
model
navigasi
dasar, yang harus dikenal dengan baik oleh desainer,
kebutuhan
berbeda.
[SUT03]
karena setiap model memberikan solusi untuk kebutuhan yang berbeda.
pengembangan multimedia pada umumnya yaitu storyboarding
storyboarding. Pertama-tama
1.4.1 Linear navigation model
1. Linear navigation model
Linear navigation model digunakan oleh sebagian besar Web site. Informasi
Linear navigation model digunakan oleh sebagian besar Web site.
Informasi diberikan secara sekuensial dimulai dari satu halaman. Beberapa
satu halaman untuk masuk atau keluar dari Web site.
desainer menggunakan satu halaman untuk masuk atau keluar dari Web site.
diberikan secara sekuensial dimulai dari satu halaman. Beberapa desainer menggunakan
Gambar 1.2 Struktur
linear
navigation
model model
Gambarnavigasi
1.2 Struktur
navigasi
linear navigation
WEB DEVELOPMENT
Perancangan Web
Gambar 1.3 Struktur navigasi hierarchical model
Gambar 1.3 Struktur navigasi hierarchical model
1.4.2 Hierarchical model
2. Hierarchical model
Hierarchical model diadaptasi dari top-down design. Konsep navigasi ini dimulai
Hierarchical model diadaptasi dari top-down design. Konsep navigasi
dari satu node
yang
homepage.
Dari
homepage
dapat Dari
dibuat
beberapadapat
cabang
ini dimulaimenjadi
dari satu
node yang
menjadi
homepage.
homepage
dibuat
ke halaman-halaman utama. Apabila diperlukan, dari tiap halaman utama dapat
dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi dalam
perusahaan.
1.4.3 Spoke-and-hub model
Gambar 1.3 Struktur navigasi hierarchical model
Desain
1.4.2 Hierarchical model
beberapa cabang ke halaman-halaman utama. Apabila diperlukan, dari tiap
Hierarchical model diadaptasi dari top-down design. Konsep navigasi ini dimulai
halaman utama dapat dikembangkan menjadi beberapa cabang lagi. Hal ini seperti
dari satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang
struktur organisasi dalam perusahaan.
ke halaman-halaman utama. Apabila diperlukan, dari tiap halaman utama dapat
dikembangkan
menjadi beberapa
cabang lagi. Hal ini seperti struktur organisasi dalam
3. Spoke-and-hub
model
perusahaan.
Spoke-and-hub model hanya menggunakan satu node untuk
berhubungan dengan node lain. Pada model ini hanya terdapat dua macam link,
1.4.3
model
yaituSpoke-and-hub
dari homepage ke
halaman tertentu, dan dari halaman tersebut kembali ke
WEB DEVELOPME
homepage
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 homepageGambar 1.4 Struktur
navigasi spoke-and-hub model
Gambar 1.4 Struktur navigasi spoke and hub model
Perancangan
Web
Gambar 1.4 (kiri) Struktur navigasi spoke-and-hub model.
Gambar 1.5 Struktur navigasi full web model
Gambar 1.5 (kanan) Struktur navigasi full web model.
1.4.4 Full web model
4 Full web model
Full web model memberikan kemampuan hyperlink yang banyak. Full web mod
banyak digunakan karena user dapat mengakses semua topik dengan subtopik deng
Full web model memberikan kemampuan hyperlink yang banyak. Full
cepat. Namun kelemahan dari model ini, yaitu dapat berakibat user kehilangan cara unt
web model banyak digunakan karena user dapat mengakses semua topik dengan
kembali ke topik sebelumnya.
subtopik dengan cepat. Namun kelemahan dari model ini, yaitu dapat berakibat
user kehilangan cara untuk kembali ke topik sebelumnya.
1.5 Desain Visual
E. Desain Visual
Beberapa desainer menggunakan teknik storyboarding untuk meranca
halaman-halaman web seperti yang dilakukan pada pengembangan multimedia, terutam
Beberapa desainer
menggunakan teknik storyboarding untuk merancang
film.
Teknik
lain adalah
pembuatan
desain web sesuai
dengan desain graphical us
halaman-halaman web seperti yang
dilakukan
pada pengembangan
multimedia,
interface, karena banyak berhubungan dengan user dan teknologi informasi. Desain w
diadaptasi dari pedoman pembuatan desain grafis secara umum. Elemen desain tid
hanya harus dirancang dengan baik, tetapi juga harus dapat bekerja sama. Oleh kare
manusia berorientasi pada visual, sehingga komunikasi yang efektif dipengaruhi ol
desain visual. [SUTO3]
Desain visual mencakup elemen grafik yang digunakan pada interface, termas
Desain
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:
l
Kesamaan - dua bentuk visual mempunyai properti yang kelihatan
dimiliki oleh keduanya.
l
Pendekatan - dua bentuk visual mempunyai properti yang dimiliki
bersama-sama.
l
Penutupan - bentuk visual dapat menutup suatu area yang sama.
l
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.
Desain
Untuk memperoleh konsistensi dapat dilakukan sebagai berikut:
l
Penggunaan warna pada elemen yang sama harus sama, sehingga
tidak menimbulkan penafsiran yang berbeda.
l
Pesan dari sistem ditampilkan pada lokasi tertentu secara logika.
l
Posisi menu sebaiknya diletakkan pada lokasi yang sama, sehingga
user tidak selalu mencari-cari untuk menemukannya.
l
Penggunaan ikon dan simbol harus sama untukWEB
operasi
yang sama
DEVELOPMENT
1.5.3
3. Estetis
Estetis
Seperti
desainpada
grafis
pada desain
umumnya,
desain
Web harus
Seperti
halnyahalnya
desain grafis
umumnya,
Web harus
komunikatif
dan
komunikatif
dan estetis. Untuk
mendapatkan
desaindan
yang
komunikatif
dan estetis,
estetis.
Untuk mendapatkan
desain
yang komunikatif
estetis,
perlu diperhatikan
perlu diperhatikan
pedoman
pembuatan
tata letak
suatu
tampilan,
yaitu dengan
pedoman
pembuatan tata
letak suatu
tampilan, yaitu
dengan
mengatur
elemen-elemen
layelemen-elemen
layout
image,
animasi
Empat
outmengatur
seperti teks,
image, animasi
serta seperti
video. teks,
Empat
prinsip
dasar serta
layoutvideo.
user interface
prinsip dasar layout user interface adalah:
adalah:
Kesatuan. Elemen-elemen desain harus ditempatkan sedemikian
sehingga merupakan
kesatuan
informasi.
Kesatuan
Kesatuan.rupa
Elemen-elemen
desain harus
ditempatkan
sedemikian rupa sehingga
l
z
merupakan
kesatuan informasi.
l
Keseimbangan.
Elemen-elemen
z
desain harus ditempatkan
sedemikian
rupa sehingga
terdapat
(balance) untuk
Keseimbangan
Keseimbangan.
Elemen-elemen
desain
haruskeseimbangan
ditempatkan sedemikian
rupa
setiap
halaman,
maupun
secara
keseluruhan.
Penempatan
menu
sehingga terdapat keseimbangan (balance) untuk setiap halaman, maupun secara
utama
di sebelah
kanan
merupakan
yang tidakcontoh
seimbang,
keseluruhan.
Penempatan
menu
utama
di sebelahcontoh
kanan merupakan
yang
karena tidak layak bila mata user tertuju pada sebelah kanan bidang
tidak seimbang, karena tidak layak bila mata user tertuju pada sebelah kanan
layout untuk mencari menu utama.
bidang layout untuk mencari menu utama.
Gambar 1.6 Pola halaman web dengan grid horisontal dan vertikal untuk membuat kesinambungan
Gambar 1.6 Polaantara
halaman
web dengan
grid horisontal
halaman
satu dengan
lainnya. dan vertikal untuk membuat kesinambungan antara halaman
satu dengan lainnya.
z
Irama
grid
Irama. Garis irama(grid
grid) vertikal dan horisontal digunakan untuk menempatkan
elemen-elemen desain, yang diatur dalam bentuk simetris maupun asimetris.
z
Kontinuitas
Kontinuitas. Informasi dapat dikatakan kontinyu dan harmonis bila tampilannya
mencerminkan kesinambungan dari satu bagian ke bagian lain. Kontinuitas dapat
WEB DEVELOPMENT
Langkah pertama pembuatan Desain
desain visual adalah membuat desain miniatur
miniatur.
Tujuan pembuatan desain minatur adalah untuk menentukan pola halaman web secara
l Desain
Irama. miniatur
Garis irama(grid)
vertikal
dan horisontal
digunakan
untukdilihat
keseluruhan.
dibuat dengan
ukuran
kecil, dan seluruh
halaman
menempatkan
desain, yang
diatur dan
dalam
bentuk dapat
bersama sebagai
satu kesatuan.elemen-elemen
Dengan menempatkan
grid vertikal
horisontal
simetris
maupun
asimetris.
ditentukan bentuk
semua
halaman
secara kasar. Layout halaman dapat menggunakan
l
Kontinuitas.
InformasiPenggabungan
dapat dikatakan
kontinyu
dan harmonis
simetris,
maupun asimetris
asimetris.
kedua
bentuk dalam
satu Web site
bentuk simetris
bila tampilannya
mencerminkan kesinambungan dari satu bagian
akan menimbulkan
gangguan konsistensi.
ke bagian lain. Kontinuitas dapat dibuat dengan membuat halamandesain miniatur
Setelahhalaman
selesai
dibuat,
langkah
selanjutnya
adalah membuat
mempunyai
gaya,
bentuk
atau warna
yang memberikan
desain komprehensif
keypage
keypage)
rinci.
Halaman yang
darimerasakan
halaman yang
penting (keypage
pengguna
kesinambungan
dengansecara
halaman
lainnya.
dianggap penting dari suatu Web site tidak sama dengan Web site lain, namun homepage
Langkah pertama pembuatan desain visual adalah membuat desain
dan
halaman
yang pembuatan
mewakili tiap
level minatur
sangat diperlukan.
miniatur. Tujuan
desain
adalah untuk menentukan pola
halaman
web secara keseluruhan. Desain miniatur dibuat dengan ukuran kecil,
Dalam pembuatan desain komprehensif diutamakan bentuk visual, seperti
dan seluruh halaman dilihat bersama sebagai satu kesatuan. Dengan menempatkan
penempatan elemen-elemen desain. Desain ini digunakan sebagai pedoman pada waktu
grid vertikal dan horisontal dapat ditentukan bentuk semua halaman secara
implementasi menggunakan editor HTML, seperti Macromedia Dreamweaver, Microsoft
kasar. Layout halaman dapat menggunakan bentuk simetris, maupun asimetris.
FronPage, dan lainnya. Teks pada halaman web tidak perlu menggunakan teks yang
Penggabungan kedua bentuk dalam satu Web site akan menimbulkan gangguan
sebenarnya,
konsistensi. karena teks yang sebenarnya baru akan dibuat pada saat implementasi.
Namun, Setelah
penyajian
teks dengan
dan typestyle
yang benar
desain
miniaturtypeface,
selesai typesize
dibuat, langkah
selanjutnya
adalahsangat
diperlukan.
Hal ini
disebabkan oleh
penggunaan
tipografi
membuat desain
komprehensif
dari beberapa
halaman aturan
yang penting
(keypage)
secarapada
rinci.desain
grafis.
Pada
umumnya,
desain
komprehensif
menggunakan
draw program,
Halaman
yang
dianggap
penting
dari suatu dibuat
Web site
tidak sama dengan
Web siteseperti
lain, namunAdobe
homepage
dan halaman
yang mewakili
tiap level
sangat
CorelDraw,
Illustrator,
dan Macromedia
Freehand,
atau
paintdiperlukan.
program seperti
Adobe Photoshop.
Gambar 1.7 Desain visual homepage
Gambar 1.7 Desain visual homepage
0
Perancangan Web
Desain
WEB DEVELOPMENT
WEB DEVELOPMENT
Gambar 1.8 Desain visual halaman level 1
Gambar 1.8 Desain visual
halaman
1 visual halaman level 1
Gambar
1.8 level
Desain
Gambar 1.9 Desain komprehensif halaman web level 2
Gambar 1.9 Desain komprehensif halaman web level 2
Gambar 1.9 Desain komprehensif halaman web level 2.
1.5.4Nilai
Nilaivisual
visualbagi
bagiuser
user
1.5.4
Dalam
komprehensif
diutamakan
bentuk
visual,
Salah
satupembuatan
konsep alur
alurdesain
baru dalam
dalam
pengembangan
berasal dari
dari riset
riset
mengenai
Salah
satu
konsep
baru
pengembangan
berasal
mengenai
seperti penempatan elemen-elemen desain. Desain ini digunakan sebagai pedoman
eCommerce dan
dan eBusiness
eBusiness yang
yang dilakukan
dilakukan oleh
oleh Kierzkosky
Kierzkosky (1996)
(1996) dalam
dalam bukunya
bukunya "Mar"MareCommerce
pada waktu implementasi
menggunakan
editor HTML,
seperti Macromedia
keting to
to the
the Digital
Digital Consumer".
Consumer". Nilai
Nilai visual
visual terdiri
terdiri dari
dari lima
lima elemen
elemen dalam Web
Web site
keting
Dreamweaver,
Microsoft FronPage,
dan lainnya.
Teks pada
halaman dalam
web tidak site
eBusiness yang
yang sukses
sukses adalah:
adalah:
eBusiness
Perancangan Web
Perancangan Web
10
Desain
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:
l
Menarik
l
l
l
l
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.
l
Animasi besar. Beberapa Web site melengkapi dengan gambar dan
suara yang sangat menarik pada saat pertama halaman web muncul.
11
Desain
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.
l
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.
l
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.
l
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
Desain
tool khusus, seperti newsletter online, maka berarti Anda membangun hubungan
baik dengan audiens. E-mail merupakan cara yang baik untuk berhubungan
dengan customer. Pada umumnya Anda dapat menambah fitur e-mail 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. E-mail 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.
1.5.5 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
Desain
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 1.11.
1. 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
4.4. Pemrograman
4,5. Pendaftaran domain name
4.6. Hosting
5. Launching
Desain
5.1 Testing user
interface
5.2 Serah terima dengan Universitas Multimedia Millenium
Gambar 1.10 WBS pengembangan web
Gambar 1.11 WBS pengembangan web dengan gambar grafis.
Perancangan Web
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.
WEB DEVELOPMENT
Gambar 1.11 Organisasi proyek
Gambar 1.11 Organisasi proyek
1.7 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.
DAFTAR PUSTAKA
[BRI02] Brinck, Tom. Usability for the Web. Morgan Kaufmann Publishers. San Diego,
CA. 2002
[PRO00] Project Management Body of Knowledge. Project Management Institute. Newton Square, Pennsylvania. 2000
15