BAB V

HASIL DAN PEMBAHASAN

5.1 Hasil

Pengerjaan desain web sandingan ARMATIM (ARMADA

TIMUR) Surabaya yang dikerjakan selama kerja praktek 1 bulan lamanya di

Disinfolahta ARMATIM (ARMADA TIMUR) Surabaya dalam pembuatan

website sandingan memperoleh hasil sebagai berikut :

Gambar 5.1 index Koarmatim

Gambar 5.2 tampilan layout

Gambar 5.3 Tampilan menu button

Gambar 5.4 Tampilan motion jquery info Laksamana Muda

Gambar 5.5 Tampilan motion jquery gallery

Gambar 5.6 Tampilan jquery news

5.2 Pembahasan

Pembuatan website ini menggunakan beberapa software yaitu Adobe

Photoshop, dan Adobe Dreamweaver.

1. Pembuatan Layout desain

Gambar 5.7 Pilihan sket awal tampilan halaman awal

Dari beberapa pertimbangan maka penulis memilih desain awal web

sebagai berikut :

Gambar 5.8 Sket tampilan halaman awal yang terpilih

Gambar 5.9 Final desain tampilan halaman awal

Gambar 5.10 Pilihan sket tampilan halaman web

Dari beberapa pertimbangan maka penulis memilih desain halaman

web sebagai berikut :

Gambar 5.11 Sket tampilan halaman web yang terpilih

Gambar 5.12 Final desain tampilan halaman web

Layout desain dibuat menggunakan adobe Photoshop kemudian di

export menuju dreamweaver. Dengan ukuran 293x373 px untuk

tampilan awalan dan 900x848 px untuk halaman konten web. Halaman

awal di buat dengan background gradient dari biru tua ke putih dan

gambar siluet dari tentara serta loga ARMATIM yang berfungsi

sebagai button. Kemudian pada halaman konten dibuat dengan

background putih dan gambar Patung Jalaseva Jayamahe serta logo

ARMTIM yang dbuat transparan.

2. Membuat Button

Gambar 5.13 Tampilan button halaman web

Pembuatan button untuk web ini modern minimalis dengan

menggunakan jquery, berupa kotak berwarna hitam dengan text

didalamnya yang menggunakan warna putih ketika kursor mengarah

ke menu akan berubah warna biru sehingga kontras dengan wrna

dasarnya.

3. Tampilan animasi slide show foto video

Gambar 5.14 Tampilan halaman gallery pada web

Disini saya menggunakan slide show dengan jacquery. Yaitu script

untuk penampilan slide show foto produk dengan script sebagai berikut

Gambar 5.15 Proses editing pada dreamweaver

4. Finishing Edit

Pada tahap ini tahap terakhir dari pembuatan layout serta website

sandingan dengan memasukan semua source kedalam adobe dremweaver

untuk di edit secara total. Pada tahap ini dilakukan beberapa kali editing

meng-fungsikan tiap-tiap button yang terdapat pada tiap halaman website.

Memasukan script-script yang dikehendaki. Tiap-tiap halaman dibuat

sesuai dengan link yang terdapat pada menu.