DesignMagz

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.
Anda dapat melihat screenshot untuk dimensi yang sesungguhnya. (Pupung Budi Purnama)