2. Uraian Umum Pengantar Web Desain
Tujuan : Mengenal sejarah, konsep desain web
yang efektif dan menarik.
Materi :
1. Sejarah Web Desain
2. Pengertian web desain
3. Peran HTML dan CSS
4. Aplikasi Pendukung
3. Pengantar
Sejak awal kelahiran website di awal tahun 1990,
para programer dan graphic desainer
mendapatkan sebuah lahan baru untuk karya
mereka, yang kemudian disebut web design.
Seiring perkembangannya, web design akhirnya
tumbuh menjadi segmen design tersendiri yang
jelas-jelas terpisah dari graphic design. Skill yang
dibutuhkan pun juga berbeda dengan graphic
design, karena web design juga melibatkan
berbagai bahasa pemrogaman.
4. Hingga saat ini, ada dua golongan utama pekerja web
design. Golongan pertama adalah orang-orang yang
dulunya programer, dan golongan kedua adalah
orang-orang yang dulunya graphic designer. Karakter web
yang dihasilkan dua kelompok ini cukup bertentangan.
Mantan programer biasanya lebih mementingkan sistem,
sedangkan mantan graphic designer lebih mementingkan
tampilan. Kami pun juga berpendapat bahwa web
desain yang sempurna selalu dihasilkan oleh
minimal dua orang: satu orang graphic designer
sebagai seniman, dan satu orang programer
sebagai pengatur sistem.
6. Sejarah Web desain (Fase 1)
Website pertama kali dibuat oleh Tim Berners-Lee
pada bulan Agustus 1991. Website pertama itu
bernama World Wide Web. Bentuknya sangat
sederhana. Semua masih menggunakan script
html standar tanpa ada unsur apapun. Website
pertama tersebut masih ada dan bisa diakses
hingga saat ini. Silahkan Klik di sini untuk
melihatnya. Lahirnya website pertama merupakan
babak baru bagi perkembangan komputer dan
teknologi informasi.
7. Contoh Web Desain (Fase 1)
Desain web pertama (1991) oleh
Tim Berners-Lee
Desain web yahoo (1996)
8. Sejarah Web Desain (Fase 2)
Pada tahun 1994, World Wide Web Consortium (W3C)
didirikan. Lembaga ini mengambil keputusan bahwa
script HTML adalah script standar untuk semua website.
Dalam perkembangan selanjutnya, script html tersebut
dikembangkan lagi menjadi XHTML yang bersifat
terbuka terhadap berbagai plugin script tambahan
seperti Java, flash, dan Ajax.
Pada sekitar tahun 1995 muncul website dengan
menggunakan tabel sebagai dasar layoutnya, atau yang
biasa disebut table-based layout. Kehadiran Table-based
layout merupakan gebrakan yang cukup signifikan bagi
web design waktu itu. Dengan table-based layout, web
bisa dibuat dalam beberapa kolom dengan posisi-posisi
layout selangkah lebih maju. Website yang
menggunakan Table-based layout diantaranya adalah
W3C (1998) dan Yahoo (2002).
10. Sejarah Web Desain (Fase 3)
• Pada tahun 1996 flash diintegrasikan dengan website.
Pada awalnya script flash disebut dengan Future Splash
Animator, kemudian Macromedia Flash, dan sekarang
Adobe Flash. Flash sendiri sebenarnya merupakan
pengembangan dari Macromedia Shockwave (sekarang
Adobe Shockwave). Program ini pertama kali ditujukan
sebagai pembuat menu dan daftar multimedia content
pada autorun CD-ROM.
• Dengan adanya flash, gambar-gambar dalam website
dapat ‘bergerak’. Selain itu fitur-fitur klasik html, seperti
‘link’ tetap bisa dihadirkan. Tetapi flash memiliki
kekurangan, yaitu website menjadi berat dan sulit
diakses. Selain itu, pengguna web juga harus memiliki
flash plugin di browsernya, dan hal ini sangat
merepotkan saat itu.
12. Sejarah Web Desain (Fase 4)
• Pada awal tahun 2000, Dynamic HTML (DHTML) diperkenalkan. Pada
awalnya, DHTML merupakan gabungan dari flash dan html. Script ini
dikembangkan lebih lanjut dan menjadi JavaScript. Tetapi seiring
perkembangannya DHTML dan JavaScript tumbuh sendiri-sendiri dan
memiliki platform yang sangat berbeda. Dengan DHTML, script animasi
flash dapat diintegrasikan dengan HTML sehingga web tidak menjadi berat.
Selain itu, DHTML juga mensupport HTML DOM, yang memberi
keleluasaan script untuk melibatkan Operating System yang digunakan user
dalam perintahnya.
• Pada tahun yang sama (2000) Cascading Style Sheets (CSS) mulai
diperkenalkan. CSS adalah platform web design yang sangat populer hingga
saat ini. Dengan adanya CSS, script untuk tampilan bisa dipisah dari file
HTML induknya. Dengan CSS, template web bisa dibuat lebih rapi. CSS
memungkinkan banyak fungsi tampilan yang tidak mungkin dipenuhi oleh
table-based layout. CSS akhir-akhir ini menjadi sangat populer dengan
diperkenalkannya platform CMS opensource seperti Joomla dan
WordPress. Hampir semua template WordPress dan Joomla menggunakan
CSS sebagai basis tampilannya.
15. Pengertian Web Desain
Design hasil karya manusia yang harus dapat berfungsi untuk
memecahkan suatu masalah (problem solving)
Web 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
Web design adalah Seni dalam membuat suatu halaman website
yang melibatkan keindahan dan mekanisme dalam proses membuat
sebuah halaman website. Membuat suatu halaman website terlihat
lebih menarik dengan mengintegrasikan unsur gambar, animasi, text,
dan video
16. Prinsip dasar Mendesain Web (Tujuan Web)
1. Merumuskan Tujuan Membuat Website
Berdasarkan isi maupun tujuan, suatu website
biasanya dapat digolongkan menjadi seperti
berikut :
a. website marketing, berfungsi sebagai media
presentasi dan pemasaran
b. website costumer service, berfungsi sebagai media
untuk melayani konsumen.
c. website e-Commerce, berfungsi sebagai media
transaksi online
d. website informasi / berita, berfungsi sebagai
media informasi berita
17. Prinsip dasar Web Desain
1.1. Menentukan Isi Website
1.2. Menentukan target pengunjung
1.3. Menentukan struktur website
susunan atau kerangka navigasi situs web
a. Struktur Linear
b. Struktur Non-Linear
c. Struktur Hirarki
18. Struktur Website
a. Linear
merupakan struktur yang mempunyai satu rangkaian cerita berurutan.
Struktur ini menampilkan satu demi satu tampilan layer secara
berurutan menurut aturannya
b. Non-Linear
Merupakan Pengembangan dari linear. pada struktur ini semua
kedudukan page sama, sehingga tidak kenal adanya master atau slave
page
19. c. Hirarki
merupakan struktur yang mengandalkan percabangan untuk
menampilkan data atau gambar pada layer dengan kriteria tertentu.
Tampilan pada menu utama disebut master page (halaman utama satu),
halaman tersebut mempunyai halaman percabangan yang disebut slave
page. Jika salah satu halaman pendukung dipilih atau diaktifkan, maka
tampilan tersebut akan bernama Master Page (halaman utama kedua)
dan seterusnya
20. d. Campuran (Composite)
Struktur navigasi composite (campuran) disebut juga struktur navigasi
bebas yang merupakan gabungan dari ketiga struktur yang ada. Struktur
navigasi ini biasa digunakan dalam pembuatan multimedia karena dapat
memberikan keinteraksian yang lebih tinggi.
21. Prinsip dasar Web Desain (Layout Web)
2. Faktor keindahan desain tampilan dari suatu
website merupakan salah satu faktor yang paling
pentingdalam 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 hal estetika maupun segi
navigasi. Kesamaan desain yang biasanya
dipertahankan antara lain kesamaan jenis font
yang digunakan, warna, tombol navigasi (menu)
letak menu dan lain sebagainya.
22. Tahapan Pembuatan Layout
Berikut merupakan proses yang secara umum
banyak dilakukan dalam pembuatan layout :
a. Membuat sketsa design Seorang designer bisa
saja menuangkan ide dalam pembuatan
interface dengan terlebih dahulu membuat
sketsa diatas kertas. Namun untuk kebanyakan
orang, langkah ini biasanya dilewatkan dan
langsung pada langkah pembuatan layout
design dengan menggunakan software
23. b. Membuat layout design Banyak software yang
dapat digunakan untuk membuat layout. Salah
satu diantaranya adalah Macromedia, proses
ini dikerjakan setelah pembuatak sketsa
design. Namun terkadang pembuatan layout
merupakan proses pertama kali dikerjakan
c. Membagi gambar menjadi potonganpotongan
kecil, proses ini diperlukan untuk meng-
optotimize waktu download
d. Membuat HTML
Setelah merapikan layout design lengkap
dengan tombol, image, teks, script HTML, hal
yang perlu dilakukan adalah membuat layout
ke dalam format HTML
24.
25. Prinsip dasar Web Desain
3. Focus adalah hierarki prioritas dari pesan yang
akan disampaikan. Dengan adanya focus tersebut,
diharapkan pengunjung dapat memahami dan
menentukan pesan mana yang lebih dahulu harus
dibaca atau dilihat.
4. 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
27. Peran HTML dan CSS
Menurut rekomendasi dari W3C, untuk pembuatan suatu website, untuk
menjadi kerangka dari web tersebut anda perlu menggunakan HTML dan
untuk design dari website anda dituntut untuk menggunakan CSS.
Sebagai contoh :
Jika anda akan membuat suatu artikel web dengan align center, maka
pada penulisan pada HTML anda tidak dianjurkan untuk membuat Tag
‘Align ‘ tetapi cukup hanya menulis artikelnya saja dan untuk membuat
supaya artikel tersebut sesuai dengan design anda menggunakan CSS.
Kesimpulannya adalah :
HTML untuk membangun dasar kerangka dan penulisan artikel
saja.
CSS berfungsi untuk mendesign halaman website .
