DesignMagz » Teori

Mengenal Sistem Grid Dalam Desain

Pupung Budi Purnama — Tue, 13 Jan 2009 08:37:36 +0000

Apakah Anda pernah mendengar Grid? Sistem grid adalah kemampuan dasar yang harus dimengerti dan dipahami oleh seorang desainer. Dahulu sebelum sistem grid web disediakan secara luas oleh para web desainer, saya terbiasa membuat Grid sendiri menggunakan ruler dan guide pada Photoshop. Kini template atau dasar dari Grid telah banyak disediakan untuk dapat segera dipergunakan. Lalu apa dan mengapa Grid harus dipergunakan?

Pada dasarnya, semua yang kita lihat dan saksikan berdasarkan pada Grid, denah bangunan, bentuk gedung, layout majalah atau buku, tata ruang, bahkan desain Web berdasarkan pada Grid.

Perhatikan gambar dibawah ini:

Gambar diatas adalah contoh sebuah grid, yang dibangun dari garis-garis yang beraturan membentuk satu kesatuan. Grid diatas dapat kita tambahkan lebih banyak garis untuk lebih menambahkan detail pada karya kita nantinya.

Keberadaan grid pada dasarnya adalah membantu untuk menempatkan berbagai elemen dalam sebuah desain agar nampak beraturan, lebih harmoni, lebih memiliki alur. Perhatikan pada contoh layout dibawah:

Bandingkan kedua layout diatas, tentunya yang lebih enak untuk dilihat mata adalah yang kedua. Ya tentu saja, grid memberikan patokan-patokan dan ukuran-ukuran yang memungkinkan sebuah area atau objek memiliki ukuran dan posisi yang teratur.

Dalam dunia desain cetak dan web, penggunaan Grid sebagai acuan desain akan sangat membantu seorang desainer menyelesaikan pekerjaannya. Pada artikel selanjutnya, kita akan mempelajari penggunaan grid dalam membuat sebuah desain. (Pupung Budi Purnama)

Browser: Standard Mode dan Quirks Mode

Pupung Budi Purnama — Fri, 08 Dec 2006 12:17:26 +0000

Dukungan browser modern terus berkembang seiring dukungannya kepada (x)HTML dan CSS, terlebih makin maraknya trend “Web Standard” browser makin mendekatkan kepada standarisasi berdasarkan guideline yang telah ditetapkan World Wide Web Consortium (W3C). Namun demikian, pengembang browser tidak serta merta melupakan teknologi-teknologi sebelumnya yang pernah mereka buat untuk mendukung halaman Web yang pernah dibuat pada masa itu.

Browser mengenal 2 Cara untuk menangani dokumen yang ditampilkan, yaitu Standard Mode dan Quirks Mode. Hal yang paling membedakan antara Standard Mode dan Quircks Mode adalah dukungan terhadap CSS. Yang paling “kentara” adalah terdapat perbedaan pada penanganan Box Model, positioning objek, dan tidak berlakunya Inheritance font pada tabel, hal ini lah yang membuat sebuah layout CSS menjadi berubah bila dilihat pada browser-browser lama.

Mode apa yang digunakan browser masa kini?
Hal ini tergantung dari keperluan dokumen yang kita buat, untuk mengaktifkan Standard Mode pada browser modern, diperlukan DTD (Documen Type Declaration) yang sesuai pada sebuah dokumen HTML. Jika tidak, Browser akan menampilkan dokumen Web dengan Quirks Mode. Menyimpan DTD pada baris pertama dokumen HTML akan mengaktifkan Standard Mode pada browser, contoh:

Bila penulisan tidak lengkap atau tidak menyertakan DTD, maka browser akan aktif dengan Quirks Mode.

W3C sangat merekomendasikan penulisan DTD ini untuk mendeskripsikan struktur dokumen yang dipergunakan, pada sebuah halaman XHTML W3C juga merekomendasikan penulisan XML Prolog pada awal dokumen bila memungkinkan.

Pada browser IE 6, sebuah dokumen yang menyertakan XML Prolog justru akan mengaktifkan Quirks Mode, hal ini telah diperbaiki pada release IE 7. Pada awal saya mempelajari CSS layout dengan XHTML saya selalu menyertakan XML prolog ini pada dokumen, dan alhasil saya selalu kebingungan tampilan di IE sangat jauh berbeda.

Bila Anda menggunakan Firefox, keterangan bahwa sebuah halaman menggunakan Quirks Mode atau Standard mode dapat dilihat pada Page Info…

Bacaan lebih lanjut:

Tinggalkan Lorem Ipsum

Pupung Budi Purnama — Wed, 06 Sep 2006 23:02:01 +0000

Saat diminta oleh klien atau manager proyek untuk membuat sebuah desain contoh (biasanya cukup dalam bentuk JPG) untuk dipresentasikan dihadapan klien, kita tidak hanya harus berfikir: layout, warna, tataletak, tipografi, grafis, whitespace, dan lain-lain. Ada hal yang sering kita lupakan, teks dalam konten. Beberapa desainer dapat dengan mudah mengkopi-paste kan teks: “lorem ipsum dolor sit amet…” sebagai pengganti konten.

Saya pernah menulis sebuah artikel mengenai “Kesan pertama pada sebuah desain” pada buku yang pernah saya tulis maupun designworld. Intinya, sebuah kesan pada kali pertama akan selalu diingat oleh seseorang, tak terkecuali calon klien kita.

Preview desain adalah gambaran umum sebuah desain yang nantinya akan “dibeli” oleh klien, berikan kesan “nyata” pada saat Anda mempresentasikannya, yaitu dengan memberikan konten yang “nyata”.

Tak cukup Lorem Ipsum
Konten “nyata” pada sebuah desain tidak hanya mempermudah kita untuk mempresentasikan sebuah desain, tapi juga dapat memberikan masukan-masukan pada klien mengenai konten yang akan mereka rumuskan. Klien akan lebih memahami tiap bagian dari layout diperuntukan.

Dalam menentukan konten yang “nyata” disini kita hanya perlu mengarang bebas, tentunya teks masih seputar tema dan jenis kegiatan atau usaha klien. Tak perlu takut salah, toh bila salah, Klien akan memberikan masukan dengan lebih mudah, “Maaf mas, perusahaan kita itu tidak ada layanan reservasi via SMS” misalnya, kemudian si klien memberikan masukan tentang layanan apa saja yang ada dalam perusahaannya. Dengan ini kita akan lebih dekat dan mengetahui apa dan siapa klien, yang kemudian akan kita aktualisasikan dalam desain.

Bila marketing jeli, konten “nyata” ini bisa jadi sarana pemasaran yang tepat. Pada contoh kasus diatas, klien menyangkal adanya reservasi melalui SMS. Setelah mendengarkan penjelasan dari klien, kemudian marketing Anda berbicara pada saat presentasi, “Kebetulan pak, perusahaan kami memiliki layanan untuk penanganan SMS gateway dengan harga terjangkau, bila bapak berminat…….., tentunya ini demi kemudahan dan kepuasan konsumen”, nice trick huh ? :)

Kebanyakan klien Anda pasti tidak tahu apa artinya dari Lorem Ipsum, termasuk saya sendiri. Dengan bahasa yang tidak dimengerti pada konten, penghayatan klien untuk mengkoreksi dan melihat dengan detil pada tiap bagian akan berkurang.

Berusaha sedikit, dengan hasil nyata, why not !!!

Pupung Budi Purnama

Alur Struktur Sketsa Pembangunan Digital Desain Web

Pupung Budi Purnama — Thu, 01 Jun 2006 12:16:11 +0000

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)

Keseimbangan dalam Desain

Pupung Budi Purnama — Thu, 01 Jun 2006 11:56:06 +0000

Keseimbangan dalam menentukan letak dari sebuah objek, dapat turut menentukan “rasa” dari sebuah situs Web. Sebuah situs Web yang dapat dikatakan ideal akan sangat mempertimbangkan keseimbangan objek dalam tampilannya. Bagaimanakan hendaknya mempertimbangkan keseimbangan dalam sebuah situs Web?
Secara sederhana, kita dapat mengkiaskan keseimbangan dalam desain ini dengan sebuah balok. Bila ia sisi kanan dan kiri memiliki berat yang sama, ia akan tegak / tidak miring. Keseimbangan tidak hanya dipengaruhi oleh ukuran dari objek itu, tapi juga kekontrasan dan bentuk turut mempengaruhi keseimbangan.

Keseimbangan adalah aturan dari kekontrasan visual yang sangat penting. Kekontrasan biasanya memandu mata dan sangat bermanfaat bagi pengunjung. Ketika menyusun elemen-elemen situs dalam halaman, yang harus Anda pertimbangkan adalah “Bobot visual” dari setiap elemen. Bobot elemen biasanya dapat lebih dikenali dari ukuran objek, harga, dan kepadatan dari detail atau tekstur. Bila kekontrasan antar elemen terlalu besar, keserasian dan keseimbangan akan hilang.

Hubungan antara proposi dan ukuran harus benar-benar dipertimbangan ketika Anda ingin menghadirkan keseimbangan. Semua objek dalam halaman Web Anda harus dipertimbangkan hubungannya dengan objek lain. Oleh karena itu, bila sebuah objek yang besar akan terlihat lebih besar bila disampingnya terdapat objek yang kecil, hal tersebut sangat mempengaruhi keseimbangan.

Keseimbangan Simetris

Keseimbangan simetris dapat dikiaskan sebagai keseimbangan cermin, berarti, sisi-sisi yang berlawanan harus sama persis untuk menciptakan keseimbangan.Bila kita menarik garis lurus pada bagian tengah maka, bagian yang satu akan menjadi cerminan bagi yang lain. Keseimbangan simetris ini sering disebut juga dengan keseimbangan formal.

Keseimbangan Asimetris

Keseimbangan yang terjadi bila objek-objek berlawanan tidak sama atau seimbang, misalnya sisi satu memiliki objek lebih kecil dari objek yang lainnya. Keseimbangan Asimetris dapat memberi kesan santai dan casual, namun demikian penggunaan asimetris akan memiliki kesulitan tersendiri bagi desainer, karena ia harus menentukan layout dengan teliti untuk memberikan kesan bahwa desain tersebut masih seimbang. Dalam membuat tata letak yang asimetris agar tetap terlihat seimbang, ada beberapa faktor yang menjadi pertimbangan:

Warna, warna dapat menjadi penyeimbang antara objek yang besar dengan objek yang lebih kecil. Bila sebuah objek lebih besar dari yang lain, pergunakan warna pudah atau warna yang tidak terlalu kuat pada objek besar, sedangkan pada objek kecil, pergunakan warna yang kuat.

Bentuk, Objek yang memiliki kesan datar namun dengan detail bentuk yang sederhana, akan seimbang dengan objek kecil dengan detail yang lebih teliti.

Posisi, Menempatkan objek yang dominan pada posisi agak ke tengah akan terlihat seimbang dengan area dan objek yang lebih kecil pada lawan arahnya.

Keseimbangan Radial

Keseimbangan radial lebih mudah untuk diimplementasikan, dikarenakan objek akan seimbang bila objek berada di tengah. untuk itu, dengan menempatkan objek pada posisi tengah, desain akan nampak seimbang.

Kesan Pertama Itu Penting

Pupung Budi Purnama — Mon, 10 May 2004 05:35:37 +0000

Saya jadi teringat sebuah iklan di televisi, “Kesan pertama begitu menggoda, selanjutnya terserah Anda”. Pertanyaannya, begitu pentingkah kesan pertama? Pernahkah Anda bertemu dengan seseorang untuk pertama kali? mungkin di tempat kerja, perbelanjaan, kampus, atau tempat lain, dalam waktu yang terbatas, namun Anda masih sempat berinteraksi dengan orang itu. Anda mengingat tuturkatanya, cara dia bergaul, keramah tamahannya, atau mungkin penampilan dan kecantikannya. Kesan pertama yang diperoleh seseorang akan berpengaruh terhadap gambaran kepribadian Anda.

Pada sebuah situs Web, kesan pertama itu pun memiliki peranan yang cukup penting. Kesan pertama yang baik, membuat seorang pengunjung akan kembali untuk mengunjungi sebuah situs. Apa saja yang akan terekam dalam benak pengunjung ketika pertama kali ia mengunjungi situs?

Waktu Download
Sebuah situs Web yang tampil lebih cepat akan kembali dikunjungi. Kebanyakan pengunjung tidak metolelir situs-situs dengan waktu tampil yang lama dalam browser mereka (apalagi dengan konten yang kurang menarik), akibatnya mereka menjadi “malas” untuk berkunjung ke situs Web tersebut. Memang, waktu download tidak hanya dipengaruhi dari desain Web (koneksi, server, dll), tapi setidaknya seorang desainer dapat memperhitungkan dan bertanggungjawab atas desain yang dibuatnya agar tampil lebih cepat dengan bytesize yang seminim mungkin. Pada artikel lain, kita akan membahas tip dan trik agar sebuah situs dapat tampil lebih cepat.

Konten yang Bermanfaat
Tentu saja, konten yang bermanfaat akan membuat pengunjung kembali lagi walaupun waktu download yang relatif lama. Konten adalah raja, ia akan dapat membuat pengunjung kembali dengan satu tujuan dalam pikiran mereka yaitu konten yang ada dalam sebuah situs. Bila konten sudah menjadi tujuan utama, maka kebanyakan pengunjung akan mentolelir hal-hal lainnya, seperti tampilan, waktu downloading, dan lain-lain.

Aksesibilitas
Situs yang memiliki aksesibilitas yang baik dalam situsnya, membuat pengunjung lebih mudah untuk menggali konten yang ada dalam sebuah situs. Dalam hal ini aksesibilitas dapat mencakup navigasi dan hal-hal lain yang turut memudahkan pengujung dalam mengakses sebuah situs Web. Aksesibilitas yang baik memungkinkan pengakses situs dapat memperoleh informasi dengan baik dalam berbagai keadaan seperti penggunaan browser yang berbeda, misalnya browser yang dipergunakan oleh orang-orang yang mengalami keterbatasan (cacat).

Tampilan
Seperti penampilan fisik (baca: kecantikan) dari seorang wanita yang baru kita kenal, pada pandangan pertama ia akan sangat menggoda. Pandangan kedua, ia masih terlihat cantik. Pandangan berikutnya, apalagi kita sudah mengenal dengan dekat, penampilan fisik akan mengurangi perannya, dan digantikan oleh kebaikan hati dan keindahan sikap yang diberikannya kepada kita. Sebuah situs Web dengan tampilan yang indah hanya akan dirasakan pengunjung pada saat pertama kali ia mengujungi situs tersebut. Pengunjung akan lebih merasakan manfaat dari desain itu sendiri seperti tipografi yang digunakan agar pengunjung lebih mudah menggali informasi yang ada, layouting dan penggunaan warna yang baik yang memungkinkan pengunjung membaca dengan lebih nyaman. (Pupung Budi Purnama)

CSS Layout atau Table Layout

Pupung Budi Purnama — Thu, 06 May 2004 00:17:50 +0000

Isu tentang layouting dalam desain Web yang akhir-akhir ini mencuat (setelah hadirnya CSS2), adalah penggunaan CSS untuk mendesain layout dan tampilan pada sebuah situs Web. Kedua teknik ini memiliki kelebihan dan kekurangan masing-masing. Pada artikel ini kita akan membahas mengenai Aksesibilitas dan kapabilitas Browser dalam menampilkan dua tipe desain ini.

Penggunaan Tabel
Tabel telah lama kita kenal sebagai tag yang dipergunakan untuk membuat layout sebuah Web. Karena kemudahannya, penggunaan tabel lebih disukai untuk membuat layout situs menggunakan WYSIWYG Editor seperti Dreamweaver atau Frontpage.

Fakta Menggunakan Tabel:

Lebih mudah untuk digunakan dibandingkan dengan CSS Layout
Proses desain layout tabel lebih mudah menggunakan editor WYSIWYG seperti Dreamweaver atau Frontpage
Tabel dapat “rusak” dalam beberapa browser yang biasa kita gunakan, yang menyebabkan disfungsi dalam layout.
Meningkatkan jumlah tag HTML yang tidak perlu, hingga akan menaikan ukuran file.

Kini, tabel telah digunakan pada banyak halaman Web yang online di internet, yaitu sekitar 95% menggunakan tabel untuk layouting. Biasanya, kita mendapati tabel pada situs-situs dengan konten yang “berat” seperti situs Portal, atau pada situs yang lebih sederhana seperti pada situs-situs perusahaan korporat atau pendidikan.

Dari sekian banyak isu dari penggunaan tabel, yang paling “mengancam” adalah mengenai kompabilitas browser baik itu bagi pengguna mapun bagi developer Web. Dari sekian banyak browser yang beredar diantaranya adalah Internet Explorer, Netscape, Mozilla, dan Opera yang memiliki cara kerja yang berbeda. Hal ini berarti pengetesan harus dilakukan untuk mengetes kompabilitas desain pada browser-browser tersebut.

Selain itu, menggunakan tabel untuk layout biasanya menggunakan editor WYSIWYG yang biasanya menghasilkan tag-tag yang tidak perlu dipergunakan yang akhirnya meningkatkan besar File.

Penggunaan Tabel dan Aksesibilitas
Penggunaan tabel mengakibatkan beberapa kelemahan terhadap aksesibilitas bagi orang-orang dengan “handicap” atau cacat. Para penyandang cacat yang menggunakan screen reader, speech output browser, braile browser, dan browser teks, akan mengalami kesulitan dalam membaca tabel. Bila dalam sebuah situs Web terdapat tabel seperti ini:
SEL1 SEL2
Keterangan sel1 Keterangan sel2

dan kodenya akan tampak seperti:

SEL1	SEL2
Keterangan sel1	Keterangan sel2

Pada browser teks atau yang dipergunakan oleh penyandang cacat, akan membaca tabel dengan cara membaca tag dari atas kebawah hingga tidak menghasilkan aliran baca yang seharusnya. Dimana seharusnya setelah membaca SEL1 maka browser membaca Keterangan sel1 yang berada di bawahnya, begitu pula ketika membaca SEL2. Namun dengan penggunaan tabel, browser akan membaca SEL1, SEL2, Keterangan sel1 dan keterangan sel2. Bila terdapat tabel yang lebih panjang, maka si pengguna browser akan kebingungan. Belum lagi penggunaan tabel di dalam tabel yang akan lebih menyulitkan untuk membacanya.

Cara membaca tabel setiap browser berbeda-beda, pada browser-browser seperti Netscape dan IE akan menampilkan isi tabel dihalaman Web begitu ditemukan tag penutup dari tabel. Hal ini tentu akan terkesan bahwa situs terasa lambat dan berat.

Penggunaan CSS
CSS dikenal sebagai alat untuk memformat tampilan pada halaman HTML, namun kini dengan muculnya CSS2 dan dukungan browser-browser terbaru, CSS sering dipergunakan untuk pemposisian dan layouting halaman Web.

Fakta Menggunakan CSS:

Telah didukung oleh kebanyakan browser versi baru, tapi tidak didukung oleh browser-browser versi lama.
Lebih fleksibel dalam penempatan posisi layout.
Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran file.
Dapat menampilkan konten utama terlebih dahulu, sementara gambar dan lain-lain dapat ditampilkan sesudahnya.

Walaupun demikian, pada browser-browser lama, atau CSS di-disable pada browser pengunjung masih dapat membaca dengan baik situs tersebut, dikarenakan cara membaca browser yang secara bertahap dari atas ke bawah, dari kiri ke kanan.

Selain itu, penggunaan CSS pada file terpisah, dapat mempermudah pengubahan tampilan pada situs secara keseluruhan.

Penempatan konten yang lebih fleksibel, pada source code seorang developer dapat menempatkan konten yang penting pada bagian atas, sementara konten yang memerlukan waktu download seperti image atau animasi flash pada bagian bawah, namun tidak mengubah tampilan. (Pupung Budi Purnama)

Sumber dari:
Tables or CSS: Choosing a layout
design and layout, website tips for designers
CSS Layouts Vs. Table Layouts

Merancang Situs dari Sketsa

Pupung Budi Purnama — Sat, 24 Apr 2004 23:58:15 +0000

Bagaimana cara Anda merancang tampilan visual sebuah situs Web? Langsung merancangnya di HTML Editor? merancang terlebih dahulu dengan bantuan editor grafis? atau dengan try and error, bila terlihat bagus diteruskan dan bila mengecewakan ditinggalkan. Setiap desainer mungkin memiliki cara-cara yang berbeda dalam merancang desain situs yang ia buat, dalam artikel ini, saya akan membagikan langkah-langkah merancang membuat situs web yang biasa saya lakukan.

Sketsa Kertas
Ketika mendapatkan ide, saya biasa menggambarkannya dalam secarik kertas. Hal ini sangat bermanfaat bila ketika Anda sedang “banjir” ide, supaya tidak lupa ketika masuk kedalam tahap pengerjaan. Atau ketika Anda sedang “kering” ide, Anda dapat meneruskan dari sketsa ide-ide awal yang telah Anda gambar ketika sedang “banjir” ide. Saya biasa menggambarkan tataletak dan bentuk secara umum, kemudian mengumpulkan kertas-kertas sketsa tersebut menjadi satu dan menggantungkan kertas-kertas ide saya dekat meja kerja agar mudah dilihat. Pada pengerjaan proyek desain situs menggunakan animasi Flash, sketsa ini dapat berupa seperti story board, Anda dapat menggambar rangkaian gerak animasi dalam beberapa gambar, mirip seperti alur gambar dalam komik. Satu saran dari saya, segeralah menggambarkan ide Anda ketika terlintas.

Tentu saja tidak semua ide dari sketsa ini yang maju ke tahap berikutnya, terkadang setelah diamati, kita sering tidak merasa cocok dengan sketsa tersebut, jadi buatlah banyak-banyak sketsa agar pilihan semakin banyak, asal tidak membuat Anda bingung.

Sketsa Digital
Dalam sketsa ini, kita memindahkan gambar sketsa kertas yang kita buat kedalam bentuk digital, yaitu dengan menggambarnya menggunakan aplikasi grafis seperti Photoshop, Fireworks, Correl Draw, Illustrator, dan lain-lain. dalam tahap ini proses sketsa menjadi lebih detil, yaitu dengan penentuan warna, grafis, tipografi, dan lain-lain. Hingga pada tahap ini tampilan sketsa tampak seperti hasil akhir. Pada pembuatan situs Flash, dalam tahap ini Anda dapat menentukan bagian atau elemen mana yang dapat Anda buat di Photoshop atau Anda gambar di Flash nantinya.

Pembuatan
Setelah Anda mendapatkan gambaran desain yang sesuai dengan yang Anda inginkan, mulailah membuatnya dalam Editor HTML yang biasa Anda pergunakan dengan membuat layout tabel secara umum. Kemudian pindahkan bagian-bagian dari sketsa digital yang dianggap perlu, seperti icon atau grafis.

Memang tidak baku apa yang saya sampaikan dalam artikel ini, Anda dapat memulai membuat situs dari tahap mana saja. Tapi kebiasaan mengerjakan sesuatu dalam secara skematis akan mengurangi kesalahan konsep pada saat pengerjaan. (Pupung Budi Purnama)

Mengenal Liquid Design

Pupung Budi Purnama — Fri, 23 Apr 2004 23:59:15 +0000

Dalam dunia desain Web, perbedaan resolusi monitor pada layar monitor pengguna menjadi sebuah tantangan tersendiri, dimana seorang desainer harus menentukan layout desain seperti apa yang akan digunakan. Pilihan terbagi menjadi dua, mendesain halaman web yang fixed, yaitu dengan menetapkan layout dalam satuan pasti seperti pixel, atau dengan menggunakan satuan % (persen) yang lebih fleksibel terhadap resolusi dan keberadaan browser.

Seperti kita ketahui, keadaan browser tiap pengguna akan berbeda-berbeda tergantung dari preferensi masing-masing. Kita Asumsikan pengguna memiliki resolusi yang sama, tapi masing-masing dapat memiliki pengaturan dan kesukaan masing-masing ada yang menambahkan toolbar tambahan seperti Google atau Yahoo!, atau tidak menampilkan browser pada ukuran maksimal. Tidak hanya masalah resolusi, tapi juga penggunaan berbagai macam browser dan versinya mempengaruhi tampilan sebuah situs Web.

Apa itu Liquid Design?
Liquid design diibaratkan seperti benda cair (air) yang berada dalam wadah, ia akan menyesuaikan dengan bentuk wadahnya. Begitu pula dengan dengan situs Web yang kita desain, ia akan berubah sesuai dengan bentuk browser yang digunakan oleh audiens.

Perubahan bentuk browser dan resolusi situs akan menyesuaikan

Bagaimana Liquid Design?
Liquid design dibuat menggunakan satuan yang fleksibel (%) agar menyesuaikan dengan ukuran resolusi monitor dan browser. Satuan ukuran tersebut (persen) berlaku bagi semua tabel yang digunakan dalam layout.

Kesulitan utama yang biasa dirasakan ketika membuat halaman Web yang “Cair” adalah layouting situs yang banyak menggunakan image. Anda harus benar-benar mempertimbangkan bagaimana menampilkan image pada sebuah layout “Liquid”.

Istilah Lain
Pada beberapa publikasi, terdapat juga istilah “Ice Design” yaitu situs dengan layoutnya yang tidak berubah, yaitu dengan menggunakan satuan pasti seperti pixel. Kemudian “Jelly Design” yaitu layoutnya kombinasi antara penggunaan satuan persen dan pixel.

Jelly Design, menggunakan % pada bagian tengah situs.

Liquid Design memungkinkan tampilan situs yang penuh pada tampilan browser, hal ini akan mengurangi whitespace yang terlalu banyak pada halaman Web dikarenakan penggunaan resolusi yang lebih besar oleh audiens dari resolusi yang digunakan pada saat Anda mendesain. Selain itu, liquid design memungkinkan tampilan yang maksimal pada setiap keadaan browser dan resolusi. (pupung budi purnama)

Tak Ada yang Salah dalam Desain

Pupung Budi Purnama — Wed, 21 Apr 2004 23:45:32 +0000

Berbincang-bincang dengan rekan-rekan kerja saya disalahsatu perusahaan IT di Sarijadi Bandung, memang tidak ada habisnya. Tiap topik yang dibicarakan, pasti menambah pengetahuan dan wawasan baru. Begitu serunya percakapan mulai dari IT, Tipografi, Multimedia sampai ke Desain, akhirnya saya jadi teringat akan sebuah buku yang pernah saya baca mengenai seni visual.

Bahwa dalam menciptakan suatu karya seni, seniman tidak terpatok oleh aturan-aturan, sang seniman bebas berkarya. Bila kita kaitkan dengan desain Web, pernyataan tersebut memang benar, tidak ada peraturan yang membatasi kita meletakan menu harus disebelah kiri, Memasang grafis harus selalu dibagian atas, dan lain-lain.

Tidak ada yang salah dalam desain, kita bebas berkreasi sesuai dengan ide yang terlintas dibenak kita. Inilah satu hal yang sangat saya sukai dan alasan mengapa saya lebih memilih desain.

Estetika
Namun demikian, seni memiliki apa yang disebut dengan estetika. Estetika yang berasal dari bahasa Yunani “Aisthesis” yang kemudian dipopulerkan oleh Alexander Gottlieb Baumgarten (1714-1762) dengan nama “Aesthetica”. Secara sederhana estetika dapat diartikan sebagai hal-hal yang berkaitan dengan keindahan.

Tentu saja, sebuah karya seni yang memenuhi nilai-nilai estetika akan tampak lebih indah dan mudah dicerna. Walaupun memang tidak semua karya seni dapat dinominasikan sebagai karya yang memenuhi estetika, tapi keduanya memiliki hubungan erat.

Memahami elemen-elemen desain dengan baik akan membuat seorang desainer menghasilkan karya yang lebih indah dan menarik. Dengan memperhatikan susunan atau komposisi dari elemen yang digunakan (garis, warna, keseimbangan, keserasian, proporsi, dan lain-lain) maka sebuah karya desain akan terlihat lebih teratur.

Dalam desain Web, selain estetika, kita juga dihadapkan dengan masalah fungsi atau kegunaan (usability) dimana setiap elemen yang dipergunakan dalam sebuah situs Web diberi pertanyaan “Untuk apakah ini?”. Disinilah letak keunikan dari desain Web, selain bebas berkarya, kita juga akan dihadapkan dengan masalah (selain usability) waktu downloading, kompabilitas browser, kompabilitas sistem operasi, plugin, dan lain-lain. ( Pupung Budi Purnama )

* Salam buat rekan-rekan kerja saya di Malaka-9; T. “Boss” Budiman, Agung HP, Erwin PS, Tri S, dan semuanya. Selalu Berkarya :)