Deny Sri Supriyono

Bedah web kali ini menampilkan web portfolio saya yang baru saja dipublish pada 1 Mei 2007. Sebuah web 1 halaman dengan tema museum yang mempunyai ukuran kurang dari 400KB serta memanfaatkan kelebihan dari transparansi PNG yang sangat baik.

OK, enough chit-chat here – let’s get it on.

LATAR BELAKANG

Sebenarnya sudah lama saya ingin membuat sebuah web portfolio di domain name ini, tapi baru terlaksana beberapa waktu yang lalu bersamaan dengan event CSSReboot.

Setelah janjian dengan beberapa teman untuk mengikuti event tersebut, ternyata waktu untuk pengerjaan yang tersisa kurang dari 2 minggu.

PEMILIHAN TEMA

Memilih tema merupakan proses yang penting dalam pembuatan website. Sebuah tema akan menentukan elemen-elemen grafis yang akan digunakan dalam website.

Pemilihan tema museum (lukisan) dengan kesan klasik untuk web portfolio saya tidak melalui proses yang rumit – karena web ini memang dibuat untuk kesenangan saya pribadi. Syukur-syukur bisa memperkenalkan saya ke dunia yang lebih luas dan juga bisa dinikmati oleh orang lain.

Seperti diketahui, sebuah museum merupakan tempat untuk memajang hasil karya para pekerja seni. Karena sangat besar kemungkinannya, hasil karya saya dalam bidang web design tidak akan pernah sampai masuk ke museum, maka saya memilih untuk membuat museum untuk karya saya sendiri – that simple.

MENCARI INSPIRASI

Saya banyak melihat-lihat web portfolio milik orang lain untuk mengetahui cara mereka menampilkan informasi project yang mereka kerjakan.

Diantara sekian banyak web yang bisa dilihat, web portfolio milik Cameron Moll dan Kevin Davis merupakan 2 contoh yang sangat menarik. Design website mereka memiliki sesuatu yang berbeda dari web-web portfolio lainnya – dan itu membuatnya sangat menarik bagi saya.

Untuk mendapatkan kesan ruangan museum lukisan yang saya inginkan, ternyata agak sulit. Melalui mesin pencari, hasil yang didapatkan tidak seperti yang diharapkan. Mungkin juga karena penggunaan kata kunci yang kurang tepat. Dari sekian banyak hasil yang didapat, sangat jarang sekali website museum yang menampilkan photo ruangan yang mereka miliki.

Salah satu website yang memberikan gambaran mengenai ruang pamerannya adalah website museum Van Gogh.

Jadi, modal yang saya punya untuk memulai website ini adalah gambaran ruangan pameran dari museum Van Gogh ditambah sedikit ingatan dari tayangan mengenai museum dari film atau acara TV yang pernah saya tonton.

PROSES PENGERJAAN

Untuk bagian logo, logo sengaja ditaruh di dalam frame yang sejenis dengan frame thumbnail project – untuk memberikan sedikit gambaran bahwa semua yang ditampilkan di dalam frame yang ada di web ini adalah hasil kerja saya.

Untuk frame setiap web yang akan ditampilkan, saya memilih menggunakan image yang dibeli dari salah satu website stock photo, karena frame photo yang coba saya ambil dengan kamera digital tidak bagus hasilnya – selain bentuk frame yang juga kurang saya sukai.

Untuk informasi project, tadinya saya ingin menampilkan detail informasi mengenai project yang telah dikerjakan di setiap item, tapi setelah dicoba sepertinya kurang bagus – tidak seperti tampilan lukisan dengan informasinya seperti yang saya ingat.

Akhirnya dipilih untuk hanya menampilkan nama project di bagian bawah setiap thumbnail dan informasi lengkapnya ditampilkan dengan popup menggunakan bantuan Thickbox.

Untuk bagian kata-kata sebelum footer, saya menambahkan sebuah image lampu dari koleksi photo pribadi. Dengan modifikasi sedikit, saya mendapatkan sinar lampu yang saya inginkan – yang sesuai dengan tema website.

Saya memilih menggunakan format PNG karena saya membutuhkan transparansi yang jauh lebih baik dibandingkan dengan GIF. Paduan background pattern, efek bayangan dan transparansi di bagian frame, kotak nama project, pendaran cahaya dari lampu klasik sepertinya tidak akan memberikan hasil yang maksimal jika menggunakan GIF transparan.

Penggunaan image yang banyak membuat ukuran dokumen menjadi besar. Untuk mengurangi ukuran file, saya menggunakan tool PNGCrush untuk meng-compress image PNG yang saya gunakan. Hasilnya lumayan.

Ketika ukuran dokumen mencapai lebih dari 400KB, setiap byte yang bisa dikurangi akan sangat berarti.

Hasil akhir bisa dilihat di: http://denysri.com/

TAMBAHAN INFORMASI

Windows IE versi 5.5 dan 6.0 tidak mendukung PNG Alpha Transparency dan akan menampilkan image PNG yang transparan dengan background biru muda. Untuk hal ini, biasanya saya menggunakan solusi PNGFix dari Bob Osola.

Untuk web portfolio saya ini, solusi tersebut tidak bisa digunakan karena tidak mendukung penggunaan PNG sebagai background. Setelah mencoba beberapa solusi lainnya yang bertebaran di internet, akhirnya saya menemukan solusi IE PNG Alpha Fix dari Angus Turnbull. Di versi terakhirnya, kita bisa menggunakan PNG transparan sebagai background yang di tile.

Sangat menyenangkan bermain-main dengan transparansi PNG.

Ada yang punya pengalaman dengan transparan PNG? Atau mungkin tahu tool yang lebih baik untuk meng-compress gambar PNG? Atau ingin sekedar berkomentar? Silahkan berbagi – mungkin komentar anda bisa bermanfaat buat teman-teman lainnya.

Bedah web lainnya? Yuuuk.