Apa itu WEB 2.0 - Sebelum menjabarkan arti dari Desain Web 2.0, mari kita bahas dulu pengertian dari web 2.0. Wikipedia menuliskan kata “web 2.0″ pertama kali digunakan pada januari 1999 oleh Darci Di Nucci seorang konsultan arsitektur informasi. Secara pengertian web 2.0 adalah sebuah website dengan konsep yang meletakkan user atau pengguna sebagai platform untuk mengoperasikan, berbagi informasi dan berkolaborasi. Contoh dari web 2.0 adalah social network (Facebook, Twitter, Friendster, dan lain-lain), blog (WordPress, Tumblr, Plurk, dan lain-lain), wiki (Wikipedia), video sharing (YouTube dan Vimeo).
Kunci dari sebuah web 2.0 selain dari kemampuan untuk berbagi informasi dan berkolaborasi, hal lainnya yang terpenting adalah kemampuan untuk bisa diakses di berbagai media dan desainnya yang berfokus kepada pengguna. Dari kunci tersebut dirumuskanlah istilah Desain Web 2.0, yaitu bagaimana sebuah website harus bisa memberi kemudahan untuk pengguna dalam berbagi informasi dan berkolaborasi.Desain Web 2.0 merumuskan poin-poin penting tersebut berdasarkan dari kebiasaan dan pengalaman-pengalaman para pengguna (user experience) dan faktor-faktorusability (kemudahan penggunaan sebuah desain antarmuka atau interface). Desain Web 2.0 mengalami perkembangan dan inovasi-inovasi terbaru dari berbagai desainer diseluruh dunia, berikut saya akan mencoba untuk memetakan poin-poin dari sebuahDesain Web 2.0.
1. Penyederhanaan Desain
Penyederhaan desain (
simplicity) dalam web 2.0 mempunyai arti fokus, bersih, rapi dan langsung ke tujuan yakni kemudahan untuk pengguna mengaksesnya. Membuang elemen-elemen yang tidak penting dan bersifat dekoratif sembari menonjolkan konten utama untuk pengguna. Berkaca dari slogan Steve Jobs:
“simplicity is the new sophisticated” bahwa kesederhanaan adalah sebuah bentuk kecanggihan yang baru. Yup, seperti Anda yang mampu menyederhanakan rumus-rumus yang rumit maka Anda benar-benar canggih! :). Lihat bagaimana website
Apple yang bersih, rapi dan fokus utama langsung kepada produk terbarunya.
Penyederhanaan Desain (Simplicity)
2. Layout Tengah dan Utama
Tren baru
Desain Web 2.0 dengan layout tengah dan menjadi fokus utama. Berbeda dengan desain website dulu yang statis, meletakkan dan mengisi kolom di kiri dan kanan dengan berbagai informasi yang tidak dibutuhkan. Lihat bagaimana website
Media Temple,
Postmark, dan
Mint meletakkan layout tengah dan mengisi konten baik teks dan gambar menjadi fokus informasi utama.
Layout Tengah (Centered Layout)
3. Ruang Kosong (Whitespace)
Agar pengunjung website dapat dengan mudah mendapatkan informasi dari sebuah
website 2.0; maka poin
“readability” (mudah dibaca) menjadi sangat penting. Tentunya pemilihan ukuran huruf dipadukan dengan ruang-ruang kosong (
whitespace) menjadi sebuah solusi yang utuh. Dengan tingkat level yang tinggi
readability sebuah
website, berbanding lurus dengan banyaknya ruang kosong dari
website tersebut. Lihatlah bagaimana
website Checkout App,
Printstagram dan
37Signals sukses melakukannya.
Ruang Kosong (Whitespace)
4. Logo yang lebih Modern dan Simpel
Penggunaan logo pada desain
website 2.0 cenderung lebih simpel dan bisa dikatakan modern. Dengan menggunakan jenis huruf yang tebal, berciri khas dan dengan sedikit simbolisasi, logo tersebut bisa menjadi lebih mencolok.
Facebook,
Twitter dan
Vimeo menerapkannya dan menjadikan logonya lebih
memorable.
Logo yang Modern (New Era of Logo)
5. Pemilihan Ikon
Penggunaan stok foto dirasa kurang kreatif dan menarik bagi sebuah
Desain Web 2.0. Pemilihan ikon yang detail dan memukau layak untuk menjadi alternatif pengganti. Sebuah ikon yang kaya akan kreatifitas dan sangat memperhatikan pada detail sanggup memenuhi harapan akan sebuah
Desain Web 2.0 yang lebih modern. Bisa dicermati bagaimana ikon dapat memberikan nuansa personal dan kreatif pada website
Wunderkit,
iCloud dan
Macrabbit.
Pemilihan Ikon (Engaging Icons)
6. Pemilihan Warna
“Desain Web 2.0″ kini mulai memerhatikan pemilihan sebuah warna ataupun skema warna. Tinggalkan warna-warna yang
bright dan tajam menusuk mata ataupun pemilihan warna secara serampangan,
please leave it! :). Gunakan teori dasar warna pada desain grafis dan pilihlah skema warna yang bisa anda dapatkan dari
artikel ini. Lihat bagaimana
Skype,
Stickybits dan
Evernote memilih warna-warna yang tepat pada desain
website-nya.
Pemilihan Warna (Color Schemes)
7. Detail Pixel
Kecermatan detail hingga satu
pixel menjadi sesuatu yang penting dalam
Desain Web 2.0. Setiap garis, bentuk, gradasi, dan elemen lainnya perlu benar-benar dicermati oleh seorang desainer antarmuka
website. Inilah yang membawa perubahan besar dari
website statis (1.0) dengan
website 2.0. Beberapa website yang benar-benar cermat pada poin ini adalah:
Project Noah,
Metalab dan
WPbundle.
Detail Pixel (Perfect Pixels)
8. Font Besar
Penggunaan teks pembuka dengan jenis huruf (
font) dengan ukuran yang besar seringkali dapat Anda temukan pada
Desain Web 2.0. Strategi ini bertujuan untuk menjabarkan poin penting ataupun layanan yang menjadi unggulan dari
websitetersebut. Pemilihan
font-nya pun tidaklah sesederhana dengan hanya memilih
fontstandar
website. Disinilah
sense seorang desainer untuk memilih
font yang tepat. Sudah banyak sekali
font yang mendukung teknologi website. Anda bisa menggunakan layanan
font gratis di
Google Font atau di
Font Squirrel sedangkan untuk yang lebih eksklusif Anda bisa memilih layanan berbayar seperti
Typekit dan
MyFonts. Website:
Basecamp,
Innovative Resume dan
Photoshop Etiquette menjadi contoh yang bagus untuk dicermati.
Font Besar (Big and Bold Font)
9. Gambar Gadget yang Besar
Penggunaan sebuah gambar
gadget (iPhone, iPad, Android Phone, dan lain-lain) pada sebuah
website bisa ditemui pada berbagai
website yang mempromosikan sebuah aplikasi
mobile (
apps). Berbagai contoh
website dengan gambar
gadget yang besar yaitu:
Instagram,
Flud dan
Flipboard.
Gambar Gadget yang Besar (Big Gadget Images)
10. Ilustrasi Unik dan Besar
Cukup banyak
website 2.0 yang menggunakan berbagai ilustrasi yang unik dan dengan ukuran yang besar hampir memenuhi setengah ruang ukuran
screen. Penggunaan Ilustrasi disini bertujuan untuk memberikan nuansa personal, tidak biasa dan kreatif. Beberapa website yang menggunakan ilustrasi, yaitu:
Mailchimp,
6wunderkinder dan
Tapbots.
Gambar Ilustrasi Besar (Big Illustration)
11. Animasi HTML5
Tren yang baru-baru ini berkembang adalah penggunaan teknologi HTML5 untuk animasi yang berulang (
looping) sebagai pengganti Flash. Teknologi HTML5 yang diprediksi akan menggeser posisi Flash dan merupakan cikal bakal
Semantic Web ini banyak digunakan para developer
website untuk mempercantik tampilan
website 2.0. Animasi HTML5 bisa dilihat pada website
Teehan Lax,
Scotch Soda dan
Nike Better World.
Animasi HTML5 (HTML5 Animation)
Kesimpulan
Mulai memahami bagaimana sebuah desain website dikatakan sebagai Desain Web 2.0? Ada poin-poin lain yang belum dimasukkan ke list ini? Atau punya pemahaman lain mengenai Desain Web 2.0? Mari berdiskusi di sini :)
