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 sebuahwebsite 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 websiteWunderkit, 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 dariwebsite 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 danTapbots.

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)