Desain Web dari Dulu Hingga Kini (Bagian 2)

Bismillaah…

Postingan ini adalah lanjutan dari bagian pertama, Desain Web dari Dulu Hingga Kini (Bagian 1).

2005 – 2008

Rentang masa yang ini sepertinya lebih beragam tipikalnya. Mungkin karena perkembangan teknologi web waktu itu pas sedang dalam kondisi hebat-hebatnya **apa sih**. Atau mungkin sayanya saja yang merasa demikian karena baru merasakan keluar dari kungkungan dunia perkuliahan lalu masuk dunia kerja. Tapi yang jelas memang terlihat banyak pernak-pernik yang mewarnai desain web di rentang 2005 – 2008.

XHTML + CSS + Tableless Layout

Yang paling kentara adalah perubahan dari HTML biasa menjadi XHTML. Maksudnya piye? Mulai ada standardisasi yang harus diterapkan untuk penulisan format web. Yang semula bebas meriah, kini harus benar-benar well formed, disiplin dalam penulisan format, dan biasanya mengacu pada standar lengkap yang ditetapkan oleh W3C, dengan referensi teknis yang dapat dilihat di w3schools. Sebenarnya aturan ini tidak mempengaruhi dunia desain secara langsung. Tapi dengan adanya standardisasi ini desainer web sudah bisa langsung ikut “nimbrung” dalam dunia pemrograman web. Setidaknya untuk level UI.

Karena standar yang diimplemen banyak dan macam-macam, akibatnya muncul tren layouting yang agak berbeda dan lebih bebas dari sisi desain, yaitu tableless layouting. Tag populer yang digunakan untuk model layout ini adalah div. Yang saya tahu, waktu itu ada satu penyedia template XHTML yang terkenal, Zen Garden. Template yang disediakan cantik-cantik, semua sudah standar W3C, dan menggunakan tableless oriented layouting.

Sehingga, parameter style desain yang tadinya lebih sering dituliskan secara inline, berubah perlahan dengan dikelompokkan menjadi file atau blok CSS (Cascading Style Sheet) tersendiri.

Blog Style: WordPress

Untuk konten, sepertinya yang lagi in pada waktu itu adalah konsep center layout-nya WordPress. Masih ingat kan theme klasik legendaris yang di-release pertama kali oleh WordPress? Namanya kubrick.

CMS

Eh, ternyata saya juga pernah “nyontek” style seperti model theme klasiknya WordPress. Tapi kebanyakan digunakan untuk membuat CMS (Content Management System), halaman web yang diakses hanya untuk keperluan mengubah, menambah, atau menghapus konten di web utama atau aplikasi yang mengakses data yang sama.

Web 2.0

Ada banyak perdebatan tentang pengertian Web 2.0 sendiri. Ada yang mengacu pada proses bisnisnya. Ada juga yang langsung merefer pada gaya desain visualnya. Jika jauh waktu sebelumnya, web hanya memberikan informasi secara searah kepada pengguna, maka Web 2.0 sudah memperluas interaksinya menjadi antar sesama pengguna. Itu secara prosesnya. Kalau secara desain ada banyak kriteria yang saya sendiri terus terang kurang paham. Hanya saja dari yang saya amati dan alami, tipikal tampilannya itu: layout sederhana, navigasi model tab menu, permainan gradasi warna soft pada setiap elemen, dan tetap mengacu pada standar W3C. Kira-kira seperti ini:

Yang paling ingat adalah tool yang digunakan untuk membuat elemen bergradasi. Tinggal menggunakan sotosop, dengan layer style 2.0 yang sudah banyak tersedia pada waktu itu. Download and applied… that’s it.

Beberapa rekan saya pernah membuat tim yang khusus bergerak di bidang pembuatan Web 2.0. Nama brand-nya kalau tidak salah WebWae. Tapi sepertinya sekarang sudah tidak aktif lagi webnya. Sayang sekali.

Reflective & Glossy Surfaces

Sedikit variasi lebih lanjut dari style gradasi Web 2.0 standar. Arah-arahnya ditujukan ke pseudo 3D metaphore. Maksudnya, secara visual nampak seperti objek 3D, tapi sebenarnya hanya menggunakan gradasi warna tertentu sehingga mengesankan efek 3D. Ciri yang paling kelihatan adalah efek seperti pantulan kaca bening.

Grunge

Aliran cadas dengan menyematkan efek grunge pada background. Istilah yang mungkin pas untuk mendeskripsikan grunge adalah “tekstur yang kotor”. Biasanya dikombinasikan dengan retro style (sepengamatan saya kurang begitu populer di Indonesia), atau tema urban (kehidupan kota yang keras). Tapi konon “katanya”, tema grunge ini tidak lekang oleh waktu. Buktinya ada teman saya yang masih menggunakan efeknya di web yang didesainnya baru-baru ini.

Untuk aset gambar, efek grunge sudah banyak yang menyediakan materialnya. Baik itu berupa brush, texture, atau shape. Yang familiar dengan sotosop mungkin sudah tidak asing lagi dengan istilah-istilah tersebut. Contoh-contoh inspirasinya bisa dilihat di sini.

Model Objek Realistis

Ternyata perkembangan Web 2.0 tidak hanya sampai pseudo 3D metaphore saja. Objek-objek yang tadinya murni berbasis vektor, dijadikan berbentuk lebih realistis. Entah apakah menggunakan foto asli, atau di-trace menggunakan tool vektor, seperti Flash, Illustrator, atau Corel.

Website Pemerintahan: Masih Menggunakan `marquee`

Di tengah-tengah gonjang-ganjingnya dunia desain web pada rentang 2005 – 2008 ini, ternyata ada pihak-pihak yang masih adem ayem dengan konsep desain lama. Siapa lagi kalau bukan website-nya instansi pemerintahan. Tapi tidak semua kok. Ada beberapa yang saya tahu sudah cukup up-to-date. Terutama instansi-instansi pusat. Kalau di daerah yaa tahu sendiri lah bagaimana alokasinya. Yang membuat jadi semakin gemes adalah web-web itu rata-rata masih menggunakan efek teks berjalan yang di awal sudah sempat kita bahas, namanya marquee. Saya tidak berani mencontohkan lah. Sungkan. Silahkan ditanyakan saja ke mbah Google. Nyarinya jangan yang departemen ya, tapi yang dinas. Hehehe.

Bersambung lagi…

_______________________________________
Referensi:
https://www.butterfly.com.au/thinking/blog/entry/ui-design-a-history-of-web-design-trends

https://creativemarket.com/blog/2013/05/13/evolution-of-web-design

https://creativemarket.com/blog/2013/04/02/2013-web-design-trends

https://blog.kissmetrics.com/evolution-of-web-design/

http://en.wikipedia.org/wiki/Web_design

http://www.slideshare.net/rsm/web-design-history

http://www.slideshare.net/monicatailor/a-visual-history-of-the-web

http://www.webdesignai.com/flat-design-history/

http://blog.templatemonster.com/2014/12/04/web-design-trends-infographic-2004-2015/

http://www.templatemonster.com/infographics/web-design-trends-years-2004-2014.php

http://www.onextrapixel.com/2014/11/07/flat-design-a-history-past-present-and-future/