Alternate Sketches

Alit Mahendra Bramantya

August 4, 2008
by Alit Mahendra Bramantya
Comments Off

A List Apart – The Survey 2008

ini adalah kali kedua majalah online A List Apart mengadakan survey untuk para pembuat website diseluruh dunia, dengan harapan bisa mendapatkan gambaran yang cukup jelas bagaimana para pembuat website diseluruh dunia bekerja, berkarya, dan mendapatkan penghasilan.

The Web Design Survey, 2008

dari survey kali ini, majalah A List Apart berharap dapat memberikan efek positif kepada para praktisi dan pekerja web, yang disebutkan sebagai berikut diakhir survey.

The information you’ve so generously shared with A List Apart will help us form a picture of the ways web design is practiced around
the globe. We hope that making this data available will have a positive
effect on best practices and employment, and will enhance public
understanding of, and respect for, our profession.

so, for those who makes websites, why don”t you free your time to take this survey? hehehe

Continue reading

July 29, 2008
by Alit Mahendra Bramantya
Comments Off

Kesalahan Umum Desain Web

banyak sekali faktor yang mempengaruhi prestasi sebuah website di jagat internet ini, dan secara umum ada dua faktor utama yang berperan, yaitu konten dan desain grafis. namun ada beberapa faktor lain yang dapat memperburuk citra dari sebuah website, diantaranya adalah sebagai berikut.

Navigasi yang buruk
pemilik website tidak pernah menginginkan pengunjungnya kesulitan untuk mencari informasi yang dia berikan, hal ini dapat diantisipasi dengan menampilkan link-link utama pada bagian atas website dan bisa juga pada bagian bawah, karena akan lebih memudahkan pengunjung untuk meng-klik link yang berada dibawah daripada harus men-scroll lagi keatas.

drop-down menu juga bisa menjadi pilihan, karena pengunjung cukup meng-klik satu tempat saja untuk berpindah dari suatu halaman ke halaman yang lain. dan biasanya, user akan malas berkunjung jika mereka tidak cepat menemukan apa yang mereka cari.

Loading halaman yang lambat
pengunjung biasanya tidak suka untuk menunggu, seperti halnya diri kita sendiri mungkin, karena seringkali menginginkan segalanya untuk tersedia secepat mungkin.

grafis dengan kualitas tinggi dan media interaktif yang cukup banyak adalah penyebab utama lambatnya loading halaman, grafis bermutu tinggi memang dibutuhkan agar webite menjadi lebih atraktif, but it is not worth it.

proses optimasi grafis dengan menurunkan kualitas gambar dapat menjadi solusi untuk mendapatkan loading halaman yang cepat.

Skema warna yang tidak menarik
faktor ini sangat berperan walau kadang jarang diperhatikan, pemilik website selalu menginginkan pengunjungnya untuk merasa nyaman, sehingga jangan sampai desain website kita memberatkan mata pengunjung.

warna-warna yang menyejukkan dan yang saling berkomplemen dapat menjadi pilihan, jangan lah kita menggunakan warna-warna terang untuk background (seperti merah, kuning, hijau muda) karena warna-warna tersebut dapat mengalihkan perhatian pengunjung dari informasi penting yang disediakan.

penggunaan komplemen warna biasanya dengan menggunakan warna teks terang dengan background gelap dan sebaliknya, desainer website harus mempersiapkan teks yang mudah dibaca dan lebih menonjol daripada backgroundnya.

layout halaman
pada bagian ini, yang utama adalah konsistensi, jangan sampai layout dari halaman satu berbeda dengan halaman yang lain, desainer harus memastikan setiap bagian yang ada terlihat sama dan sesuai pada masing-masing halaman.

penggunaan tema yang sama, kemudian peletakan navigasi dan peletakan informasi-informasi penting pada posisi yang mudah ditemukan dapat menjadi sebuah acuan.

Scroll Horizontal (kiri-kanan)
sebagian besar desainer website telah memperhatikan bagian ini, itu sebabnya, sebagian besar website yang ada memiliki lebar halaman utama dibawah 800 pixel, penggunaan scrolling horizontal biasanya sangat dihindari, karena selain mempersulit, pengunjung dapat dengan mudah kehilangan informasi.

Optimasi Cross-Browser
tampilan website tidak selalu sama pada setiap browser, hanya karena website kita tampak sempurna di Internet Explorer, bukan berarti akan tampak sempurna pula di browser yang lain.

setiap browser memiliki cara penanganan tag-tag HTML yang berbeda-beda, desain website haruslah hati-hati dan memperhatikan tampilan untuk berbagai browser. sebagai contoh, IE memiliki definisi yang berbeda tentang ukuran pixel dengan Mozilla.

Tidak mengambil keuntungan dari SEO
satu-satunya alasan untuk tidak menggunakan teknologi SEO adalah malas, dan malas akan membuat website kita menjadi biasa-biasa saja atau mungkin makin terpuruk.

penambahan judul di website, META tags, ALT tags, konten yang berhubungan, title tags pada link dan berbagai praktek SEO akan sangat mempengaruhi peringkat website.

internet marketing memang membutuhkan cukup banyak waktu dan dedikasi, namun website yang SEO friendly adalah langkah awal yang baik untuk menarik banyak pengunjung baru. dan bukankah itu yang selalu kita inginkan?

dengan teknologi informasi yang semakin maju sekarang ini, membuat website sudah tidak menjadi hal yang sulit, dan setiap orang bisa menjadi seorang web developer untuk dirinya sendiri.

dan jangan sampai kita menjadi pemilik website yang merugi :D

————————————————-
tulisan ini diterjemahkan dengan kurang seksama dari http://www.rocketface.com

Continue reading

July 16, 2008
by Alit Mahendra Bramantya
Comments Off

Menata Desain Visual Website

sebelum beranjak untuk menggunakan sotosop, gimp, dan semacamnya untuk menggambar desain tampilan website, desainer visual biasanya membutuhkan beberapa patokan, batasan, dan acuan mengenai template yang akan dibuat, seperti dimana logo diletakkan dan mana elemen yang menggunakan gambar atau cukup dengan teks.

desain visual yang baik memang mutlak dibutuhkan, karena desain visual berfungsi agar konten yang ingin ditampilkan menjadi lebih eye-catching dan atraktif, namun desain visual seharusnya tidak terlepas dari tujuan dan
tema yang ditentukan diperancangan konten, so? apa aja sih yang perlu ditata sebenarnya?

1. halaman utama
komponen website yang tampil pada halaman ini sangat menentukan. peletakan gambar, logo, slogan, penggunaan kata, paragraf, dan hyperlink harus dicermati, karena dari halaman ini pengunjung (orang maupun search engine) akan mengawali kunjungannya, dan halaman ini yang menentukan mereka akan menuju halaman-halaman berikutnya atau tidak.

2. menentukan tema visual
tema visual adalah representasi visual dari konten website, tema visual biasanya diwakili dengan pemilihan komposisi warna dan mungkin gambar-gambar pendukung, melalui tema ini desainer mencoba menampilkan apa yang ingin dilihat oleh pengunjung pada masing-masing halaman website.

penggunaan satu tema visual dapat mempermudah desainer untuk meletakkan beberapa elemen pada satu tempat tertentu, karena biasanya header, footer, menu navigasi, dll, sangat diharapkan untuk berada pada tempat yang sama, demi alasan kenyamanan pengunjung. dan bukankah memang itu yang kita cari?hehehe

3. organisasi visual
setelah pemilihan komposisi warna dan tema visual yang tepat, penataan visual konten dengan pengelompokan data dan informasi yang saling berhubungan akan sangat membantu pengunjung untuk menentukan informasi yang diinginkan.

desain visual harus selalu memiliki titik fokus yang akan mengarahkan pengunjung, dan setiap bagian pada halaman harus memiliki titik fokus yang dominan, sehingga ketika keseluruhan bagian memiliki tingkat kepentingan yang sama, maka tidak ada bagian yang tidak penting.

4. perataan teks
perataan paragraf dan elemen lainnya dari website -vertikal dan horizontal- juga cukup penting, minimal harus ditentukan salah satu perataan (rata kiri, kanan, tengah, atau kiri-kanan?), dan bukan berarti harus digunakan pada seluruh bagian website, yang harus dihindari adalah penggunaan perataan yang berbeda pada salah satu kolom dari halaman website.

5. website templates
kadang kala, daripada kita bersusah-susah untuk memikirkan hal ini dan melanjutakan detaling layout dari awal, kita bisa memilih jalan yang cukup mudah dengan menggunakan website templates yang sudah banyak beredar di jagat internet ini, mulai yang gratis sampai yang berbayar.

tapi kita juga harus pula pintar-pintar memilih, dan meng-custom desain tersebut untuk disesuaikan dengan tema dan tujuan yang telah ditentukan pada perancangan konten. karena website yang satu dan lainnya harusnya tidak sama kan?

dan setiap web desainer biasanya mempunyai caranya tersendiri untuk mengimplementasikan metode penataan ini. :D

bahan tulisan ini diambil dari http://www.rocketface.com

Continue reading

July 5, 2008
by Alit Mahendra Bramantya
Comments Off

Layout

desain konten dan pembentukan struktur konten merupakan dua elemen awal yang diperlukan untuk membentuk organisasi konten yang baik secara konseptual perancangan website, karena pada tahap perancangan kita belum perlu terlalu memperdebatkan mengenai pemrograman dan semacamnya :D.
taruh dimana ya?

pengorganisasian konten diperlukan untuk mempermudah proses pembangunan website dan meminimalisir adanya kesalahan, goalnya adalah untuk menyatukan elemen-elemen website tersebut menjadi bagian yang saling bergantung satu sama lain. dan elemen terakhir dari pengorganisasian konten adalah pembentukan layout.

layout adalah rancangan awal dari tampilan visual website yang dibutuhkan oleh desainer tampilan website dalam proses menggambar nanti, proses ini adalah proses penentuan letak dan komposisi bagian2 penyusun website, seperti halnya header, footer, navigasi, logo, links, dll.

seperti potongan-potongan puzzle, setiap bagian yang disusun pada tampilan visual nantinya harus memiliki alasan yang jelas mengapa bagian tersebut diletakkan pada posisi tertentu, bagian-bagian tersebut harus pula saling melengkapi dan menampilkan keseragaman tampilan dan konten ketika satu halaman dilihat secara utuh.

setiap halaman dari website, selain selalu membawa informasinya masing-masing, juga harus selalu terhubung dengan halaman-halaman yang lain dalam hal layout dan skema warna. kesamaan ini yang akan memberikan pengunjung acuan mengenai navigasi dari satu topik ke topik yang lain dan dari halaman satu ke halaman yang lain.

dan website besar kebanyakan (yahoo, google, dsb) memiliki layout yang sangat sederhana, dimana navigasi diletakkan pada satu tempat yang sama pada setiap halaman, dan demikian pula dengan bagian utama website dan bagian pendukung lainnya. tujuannya adalah untuk membuat informasi yang ditampilkan dapat dengan mudah diketahui oleh pengunjung website tersebut.

sebagai contoh : desain layout untuk web elektro brawijaya

layout halaman utama layout selain halaman utama

bahan penulisan didapat dari http://www.rocketface.com

Continue reading

June 30, 2008
by Alit Mahendra Bramantya
Comments Off

Struktur Konten

tulisan ini lanjutan dari tulisan sebelumnya (Desain Konten dan Kerangka Karangan). di tulisan pertama aku mencoba menjelaskan konsep desain dari konten web secara keseluruhan dan fungsinya sebagai pondasi keutuhan web.

struktur konten secara umum sama dengan kerangka karangan pada suatu prosa, namun struktur konten merupakan kerangka dari web. struktur konten biasanya dibagi menjadi dua bagian utama, yaitu bagian statis dan bagian dinamis.

bagian statis adalah bagian yang data didalamnya tidak mengalami perubahan yang signifikan dalam jangka waktu yang cukup lama, contohnya adalah halaman profil, biodata, atau mungkin halaman layanan.

sedangkan bagian dinamis adalah kebalikan dari bagian statis. data pada bagian dinamis akan mengalami perubahan dalam kurun waktu singkat, bisa bertambah ataupun berkurang.

bagian dinamis dibagi menjadi 2 bagian yang lebih spesifik lagi, yaitu interaktif dan non-interaktif.

non-interaktif berarti halaman website hanya memberikan informasi
kepada pengunjung, dan pengunjung tidak dapat memberikan input kepada
pemilik website, misal saja halaman berita, galeri, artikel, dan
sebagainya.

interaktif berarti bahwa ada interaksi antara pengunjung dengan pemilik website melalui halaman website, misalkan saja blog, buku tamu, forum diskusi, dan sebagainya.

mungkin web ini bisa dijadikan studi kasus. web ini terdiri dari 4 menu utama, yaitu about, blog, portfolio, dan guestbook, dengan perincian :

  • about : statis
  • blog : dinamis + interaktif
  • portfolio : dinamis + non-iteraktif
  • guestbook : dinamis + interaktif

yah, semoga tulisan tidak terstruktur ini bisa membuat kita sedikit memiliki gambaran soal struktur web :D. dan biasanya jumlah dan jenis halaman web yang akan menentukan harga dari pembuatan web tersebut. :p

Continue reading