Tips Mendesign Tampilan Web System Table

Sebagai web desainer, tentunya Anda harus tahu dahulu teknik-teknik dasar dalam mendesain suatu website. Berbagai macam desain website yang tentunya menarik, cantik, apik dan lain sebagainya dibuat berdasarkan 3 (tiga) teori dibawah ini yaitu:
– Teknik disain es (ice design technic)
– Teknik disain air (water design technic)
– Teknik disain jelly (jelly design technic)

Teknik desain es
Dari namanya “es” berarti adalah suatu zat beku yang solid dan telah dibentuk sesuai dengan keinginan pembuatnya. Dalam dunia web, ini berarti desain tampilan homepage atau website Anda sifatnya adalah fixed sized. Artinya adalah ukuran elemen-elemen webnya telah ditetapkan oleh web desainernya. Contoh:

Di atas adalah contoh suatu tag TABLE (untuk pembuatan tabel) yang sudah di-set fix lebarnya sebesar 770 pixel. Penggunaan satuan pixel menyebabkan tampilan tabel akan menjadi “mati” atau bersifat tidak proporsional, pada hal ini ada beberapa kekurangan yaitu:
– Jika sesuai pada contoh di atas lebar tabel adalah 770 pixel dan resolusi yang digunakan browser adalah 640×480, maka akan terjadi scrolling pada browser. Ini tentu saja akan mengganggu navigasi dan tampilan.
– Dengan lebar 770 pixel berarti tampilan akan terlihat rapi bila browser menggunakan minimal resolusi 800×600.
– Kadang harus disesuaikan dahulu dengan content yang ada dalam web agar terlihat lebih rapi.
Kelebihan teknik ini adalah:
– Cara ini mudah diterapkan, karena tidak perlu membandingkan antara desain dan tampilan, jadi tidak perlu bolak-balik mengetest hasilnya antara HTML editor dan browser.

 

Teknik desain air
Ibaratnya suatu zat cair akan berubah bentuk sesuai dengan wadahnya. Dalam web ini berarti desain website Anda akan bersifat fleksibel sekali. Contoh teknik ini adalah ditandai dengan penggunaan angka persentase pada sebagian elemen tag website Anda.
Contoh:

Contoh di atas adalah contoh tag TABLE (dalam pembuatan tabel) yang akan mengalokasikan lebar tabel sebesar 70% dari lebar browser yang digunakan saat itu.
Hal tersebut juga mengandung kelebihan dan kekurangan yaitu:
Kekurangan:
– Anda akan menemui kesulitan dalam proses bolak-balik mengetest hasilnya antara HTML editor dan browser. Hal ini disebabkan Anda harus mencoba range persentase dan tampilan browser dan resolusi layar.
Kelebihan:
– Hasil desain website akan terlihat bagus walau Anda menggunakan resolusi layar berapapun. Ini disebabkan kemudahan dan fleksibilitas teknik air. Tentu saja ini juga harus disesuaikan dengan jenis content dari website Anda.

 

Teknik desain jelly
Teknik ini adalah gabungan dari kedua teknik diatas, air dan es. Jelly adalah sebuah substansi yang tidak bisa dibilang cair atau dibilang padat. Jika Anda pernah menemui produk makanan jelly ini dipasaran Anda akan melihat bahwa jelly ini kelihatan unik sekali baik bentuk ataupun rasa.
Contoh:

Pada contoh di atas adalah suatu tag TABLE (untuk pembuatan suatu tabel) dimana tag TABLE ini memiliki beberapa elemen yaitu WIDTH (untuk mengatur lebar tabel) dan HEIGHT (untuk mengatur tinggi tabel). Pada contoh di atas diberi contoh pada saat pengaturan elemen WIDTH digunakan fixed size sebesar 770 pixel tetapi untuk elemen HEIGHT nya di set proporsional yaitu sebesar 100% dari tinggi browser saat itu.
Untuk teknik jelly Anda harus butuh tenaga ekstra karena kelebihan dikedua teknik di atas digabung menjadi satu dan kelemahannya juga digabung tetapi hasilnya akan luar biasa sekali bagusnya.
Demikianlah tulisan sederhana mengenai tiga macam jenis website berdasarkan dari sifat desain elemen-elemen webnya. Semoga bermanfaat bagi Anda semua.

 

6 responses to this post.

  1. wah makasih atas idenya

    Reply

  2. sudah saya coba dengan lebar persentase, tetapi tetap tidak proporsional pada resolusi 600/800.
    Kira2 masalahnya dimana ya?

    Reply

  3. thanks bro..

    Reply

  4. ya, model jelly memang lebih cocok untuk segala ukuran pixel.

    Reply

  5. thanks
    langsung praktek

    Reply

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: