Pengantar Web Desain

Arie Yandi Saputra, M.Kom

1 . 05032018
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
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.
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.
Contoh Web Desain
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.
Contoh Web Desain (Fase 1)

Desain web pertama (1991) oleh Desain web yahoo (1996)

Tim Berners-Lee
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).
Contoh Web Desain (Fase 2)

W3C (1998) Yahoo (2002).

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.
Contoh Web Desain (Fase 3)
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.
Contoh Web Desain (Fase 4)
Pengertian Web Desain
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
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
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
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
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
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.
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.
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
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
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
Peran HTML dan CSS
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 .
 Sekian..

Lanjut di pertemuan berikut tentang HTML….