Jangan Anggap Enteng Desain Web

Membaca milis-masterweb akhir-akhir ini yang ramai mengenai cakupan kerja Desainer Web yang “kemana-mana”, saya jadi teringat perkataan seorang programmer, kebetulan dia lebih senior di tempat kerja saya sekitar 3 tahun yang lalu; “Ah… Desain Web mah gampang, 2-3 jam juga beres”.

Perkataan rekan kerja saya itu memang terdengar sangat menyepelekan, andai saja dia pernah merasakan bagaimana sulitnya memilih warna, mengatur space, memilih font, mengkombinasi grafis sampai mengkoding HTML dan CSS. Tidak hanya itu, sang klien esoknya sudah menunggu desain yang telah dibuat dengan segala kriteria-kriteria yang dimiliki, alhasil, kita harus menyesuikan kembali dengan keinginan klien.

Percayalah, membuat desain yang baik itu tidak semudah yang dibayangkan. Setiap hari kita berpikir bagaimana untuk membuat desain yang terlihat baik dan lain dari pada yang lain. Tentunya kita tidak ingin situs yang dibuat tampil biasa-biasa saja karena akan berpengaruh kepada citra kita sebagai desainer dan kepuasan klien.

Desain memang mudah, bila tanpa melalui proses berpikir dan kreatifitas. Tinggal mencontoh, meniru, atau bahkan membajak, maka bereslah desain dalam waktu yang singkat. Namun tentunya, kita bukan tipe orang-orang seperti diatas, kepuasan terhadap hasil karya yang kita buat berasal dari jerih payah dan kerja keras kita untuk menciptakan sebuah karya.

Sekali lagi, jangan menganggap mendesain Web adalah pekerjaan sepele. Seni memang tidak dapat diukur secara kuantitatif, nilai-nilai yang ia miliki akan berubah tergantung dari sisi mana ia dilihat. Namun dalam Web, sebuah hasil karya memiliki ukuran-ukuran baku yang berlaku untuk umum yaitu waktu downloading dan aksesibilitas.

Alur Struktur Pembangunan Sketsa Digital Desain Web

Dalam membuat perencanaan, seseorang biasanya melalui tahapan-tahapan tertentu. Tahapan tersebut dimaksudkan untuk mempermudah dan memfokuskan segala ide yang ada agar lebih teratur. Setiap desainer Web memang memiliki kebebasan bagaimana ia akan membangun sebuah halaman Web, toh sebenarnya, yang diinginkan oleh klien adalah hasil akhir, mereka tidak peduli sama sekali akan proses pembuatan situs Web tersebut.

Sebelum kita berlanjut, ada baiknya Anda membaca-baca kembali artikel saya yang lalu mengenai teknik sketsa pembangunan desain Web. Alur struktur ini biasa saya terapkan ketika memasuki sketsa digital, mengapa? Karena dalam sketsa digital kita dapat menetapkan secara detil mulai dari presisi warna, tipografi, bentuk, dan lain-lain.

Sadar atau tidak, diketahui atau tidak, kebanyakan desainer Web secara Alami melalui tahapan ini ketika membangun desain Web, saya pun demikian. Namun karena ketidak-tahuan tersebut, kita tidak terpaku pada alur, terkadang sering juga melompat-lompat. Tahap-tahap tersebut adalah:

1. Heading dengan Logo dan Titel.

Hal pertama yang Anda bangun adalah Heading dengan Logo dan Titel. Secara umum bagian header akan sangat menentukan “Look and Feel” dari sebuah situs Web. Terlebih bila logo sudah ditetapkan sebelumnya (sudah ada) tentunya Anda tak ingin tampilan kacau gara-gara logo tidak sesuai dengan desain bukan? Ok, kita ambil kasus desain Web sebuah organisasi exportir-importir yang baru-baru ini saya kerjakan. Organisasi tersebut memiliki logo yang sangat sederhana, perhatikan header yang telah saya bangun, hasil realisasi dari sketsa dalam kertas:

Awalnya logo tersebut bukan berwarna putih, tapi warna merah marun, namun setelah melakukan lobi (untuk menyesuaikan) pihak klien tidak keberatan bila warna logo diubah menjadi warna putih, asalkan ada unsur merahnya dalam desain Tersebut.

Dalam mendesain bagian tersebut, berkonsentrasi penuh merupakan kunci utama, tetapkan tata-letak, dan tipografi yang sesuai menurut rencana. Hasil diatas memang terlihat sepele, tapi itulah hasil berpikir selama 20-30 menit termenung di depan layar monitor.

2.Tataletak Dasar Halaman

Kemudian kita berlanjut kepada tataletak dasar dari situs Web tersebut. Tataletak ini lah saatnya kita mengembangkan daya khayal, pikiran, dan kreasi mengenai apa yang telah kita tetapkan dalam sketsa kertas, yang sebagian telah kita tuangkan dalam header. Pada bagian ini, kita mulai menentukan kolom-kolom yang akan kita pergunakan. Anda dapat mempergunakan garis guides untuk membantu menandai area satu dengan yang lainnya. Perhatikan perkembangan desain diatas:

3.Navigasi

Navigasi adalah hal yang harus dipikirkan kemudian setelah tataletak di tentukan. Dala menentukan navigasi ini, Anda harus berpikir ekstra, karena navigasi yang baik tidak hanya eye-catching dan mudah dikenali, tapi juga harus mudah dibaca dan diakses.

4.Grafis

Setelah bingung berpikir menentukan heading, dan navigasi, saatnya kita melangkah kepada hal yang lebih menuntut kreatifitas dan daya khayal kita. Grafis disini adalah pengolahan dari foto yang sudah ada agar sesuai dengan tataletak yang sudah dibuat sebelumnya. Dalammembuat situs profil, grafis ini merupakan bagian yang paling eye-catching, jadi kerahkan ide yang ada agar dapat mendongkrak tampilan secara keseluruhan.

5.Konten, Heading dan Form

Pada tahap ini, biasanya saya memerlukan waktu lebih lama untuk mendesain, terkadang sampai satu hari penuh, 2 hari atau 3 hari. Masukan konten-konten yang akan mengisi halaman Web, tentukan juga dimana harus meletakan form. Pertimbangan dan feeling Anda akan estetika, tipografi, dan whitespace s angat diperlukan disini. Bagian ini, memang seringkali dianggap sepele dan mudah. Percayalah, pada bagian ini, nama perusahaan (atau Anda, desainer) dipertaruhkan. Sesuaikan tampilan footer dengan layout yang telah kita buat untuk konten.

6. Footer dan Copyright

Bagian ini, memang seringkali dianggap sepele dan mudah. Percayalah, pada bagian ini, nama perusahaan (atau Anda, desainer) dipertaruhkan. Sesuaikan tampilan footer dengan layout yang telah kita buat untuk konten.

4 Responses

  1. minta tutorial yang lainnya dong?
    yang lebih lengkap lagi..

    makasih.

  2. ternyata kl mau mengacu ke w3c jg, ktnya bs lbh mahal lg biayanya ya😦

  3. tutorial paan kira2 yah…kamu maunya apa?

  4. mungkin🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: