Arsip untuk web design and animation

PNG vs GIF

Artikel ini, mengajak anda menjelajahi dua pilihan utama dari format
gambar yang dapat dipakai dalam Web untuk menggambarkan graphic sederhana
berupa skema atau logo.

GIF
Graphics Interchange Format (GIF) dikembangkan pada tahun 1980 dan semakin
meluas penggunaanya.
Format GIF adalah format yang mengompress/memperkecil ukuran filenya
menggunakan algoritma yang disebut LZW
Nilai lebih dari GIf adalah dukungannya yang sangat luas dan muncul sebagai pilihan default untuk gambar sederhana pada web
Dibandingkan dengan yang lain(seperti PNG) GIF secara teknis tidak
begitu unggul,tetapi selama setahun ini berada di Web, mendukung
muncul dan berkembangnya PNG,ini tentu saja menjadi pilihan yang aman hingga saat ini.

Salah satu persoalan yang menyatakan disekeliling format GIF adalah
algorima LZW yang paten dilindungi USA oleh perusahan Unisys.
Perusahaan Unisys LZW berakhir diUSA 20 juni 2003. Hak paten LZW berakhir di
Kanada, Prancis, Italia, Jerman, Inggris dan Jepang.

PNG
(Portable Network Graphics) dikembangkan pada tahun 1995 dan menjadi rekomendasi W3C pada tahun 1996, dan telah berkembang pada hampir semua Web browser hingga tahun 1998.

PNG(Portable Network Graphics), sebuah file format untuk lossless,ptohotable,
yang diperkecil storage imagenya.PNG menyediakan patent-free
pengganti GIF dan juga dapat mengganti banyak menggunakan TIFF. mendukung Indexed-color,
grayscale,truecolor,plus optional alpha channel.

Untuk Web, PNG mempunyai tiga kelebihan dari pada GIF:
alpha channels (variable transparency)
cross-platfrom gamma correction (control untuk ketajaman/brightnes gambar)
dan color correction two-dimension interlancing( metode untuk progresif display).
PNG juga mengompres lebih baik dari GIF tiap2 case (5% sampai 25% pada type case)

Komentar bertahan »

Padding Untuk Tampilan Eksklusif

Padding atau space kosong cukup besar pengaruhnya untuk sebuah layout desain web. Ruang kosong mampu memberikan penonjolan pada content di dalam ruang kosong tersebut. Dalam ilmu komunikasi visual, istilah ruang kosong yang dinamakan whitespace adalah ruang dimana pembaca dapat mengistirahatkan indera visual sejenak atau “bernafas lega” dan melihat content di dalam whitespace secara lebih terkonsentrasi.

Sebuah analogi yang paling mirip adalah ketika kita berada di ruangan yang penuh sesak dengan barang. Kita akan merasa terhimpit, sesak, dan tidak nyaman. Akan sangat berbeda rasanya jika barang – barang tersebut tersusun dengan rapi, tidak terlalu sesak, dan seolah – olah kita masih dapat bernafas dengan lega di dalamnya.

Padding yang dalam dunia komunikasi visual dinamakan whitespace fungsinya adalah untuk memfokuskan mata pembaca pada tulisan yang berada di dalam space tersebut. Penggunaannya tentu saja untuk text ataupun grafis yang ingin ditonjolkan kepada pembaca.

Kesimpulannya, pemberian padding atau ruang kosong tidak akan menyiakan space, akan tetapi justru mampu membuat website tampil secara eksklusif dan pesan yang ingin disampaikan dapat tertampil dengan lebih menonjol.

Komentar bertahan »

Merancang Navigasi Website

Navigasi pada sebuah website yang tertampil pada menu dan links adalah petunjuk bagi pengunjung terhadap halaman – halaman yang terdapat dalam website. Pengunjung akan semakin mudah menemukan halaman – halaman dalam website Anda jika menu – menu dan link yang ada tampil secara terstruktur. Sudah pasti pengunjung akan kesal apabila tidak mendapatkan halaman website yang ia cari gara – gara navigasi yang ruwet.

Rencanakan dengan Baik
Hal yang mutlak dilakukan sebelum mulai membuat sebuah web tentunya adalah pembuatan konsep dari website itu sendiri. Konsep tersebut akan memuat navigasi dasar dalam bentuk “tree view” (bercabang dan beranting) dari mulai konten yang bersifat umum hingga konten yang bersifat mendetail. Inilah garis besar navigasi dari situs yang akan dibuat.

Dimana Navigasi diletakkan
Seperti telah dikemukakan di atas, bahwa navigasi akan membawa pengunjung dari hal – hal yang bersifat umum hingga hal – hal yang bersifat mendetail. Halaman utama (index) tentu saja akan memuat menu – menu pokok yang bersifat umum. Percabangan dari menu – menu inti tersebut dapat di letakkan pada halaman – halaman cabang dari index.
Alternatif lain, Anda dapat menggunakan javascript untuk menampilkan menu dan sub-menu sekaligus.

Konsisten
Sebisa mungkin jangan merubah letak menu pada setiap halaman web sehingga pengunjung lebih mudah menemukan menu – menu tersebut. Misalnya menu utama berada di atas, setelah itu pada halaman – halaman yang terdapat dalam menu utama dapat ditampilkan sub-menu di sebelah kiri atau kanan halaman.

Komentar bertahan »

Image Slicing mempercepat loading website?

Desain web dan kecepatan akses website terkadang menjadi dua hal yang kontradiktif. Web yang sarat dengan image berukuran besar tentu tampilannya akan lebih lambat daripada web yang hanya mengandung unsur text singkat. Padahal menurut survey yang dilakukan oleh Zona research (April, 1999) menyatakan bahwa 80% pengunjung akan menutup browser (atau memindahkan Address/URL ?) bila halaman Web yang ia buka tidak tampil dalam 7-8 detik.

Untuk mengakalinya biasanya webmaster biasanya men-slice image (image slicing) menjadi dimensi yang lebih kecil. Pada artikel ini akan dijelaskan tentang apa itu image slicing.

Kemampuan Paralel Request Browser
Browser memiliki kemampuan untuk me-request pada web server secara paralel agar loading website lebih cepat dan kemungkinan kegagalan satu transaksi data akan digantikan secara cepat oleh transaksi yang lain.
Secara default Internet Explorer memiliki 4 paralel request. Sedangkan pada Firefox dan Opera kemampuan paralel download dapat di atur secara mudah tanpa mengkutak – katik registry.
Kemampuan request paralel inilah yang dimanfaatkan oleh para webmaster dengan men-slice image yang ditampilkan di web. Dengan maksud secara bersamaan browser akan berusaha mendownload beberapa image yang berbeda sekaligus sehingga loading halaman website menjadi lebih cepat. Sedangkan apabila image tersebut di tampilkan sebagai image tunggal maka hanya satu transaksi data yang terjadi.

Jangan terlalu banyak
Ada kalanya teknik image slicing ini malah memperlambat proses loading sebuah halaman web. Hal ini dikarenakan image di slice dalam jumlah yang terlalu banyak sehingga dalam satu waktu browser diharuskan mendownload banyak gambar sekaligus. Hal ini menyebabkan kelambatan loading image karena semakin banyak image tersebut di slice, maka browser akan membutuhkan waktu yang lebih lama karena proses negosiasi untuk mendownload banyak file akan lebih lama daripada mendownload sedikit file saja.

Komentar bertahan »

Tips untuk Web Design

Apakah para pengembang web memahami berapa lama orang akan mengunjungi websitenya?
Apakah kita adalah internet newbie atau pemasar berpengalaman, kita perlu memahami hal terbaik tentang website, disain menjadi bagian yang menyangkut sukses kenyamanan.

Berikut tips untuk kesuksesan sebuah web:

1. Navigasi
Kita pernah bahas bagian ini pada artikel merancang navigasi website

Ketika orang datang ke website kita mereka pada umumnya mencari sesuatu yang khusus.Misal resep untuk diet rendah, sehat dan mencarinya serta menyiapkannya kurang dari beberapa menit atau apa yang merupakan bisnis terbaik untuk dimulai secara online.
Apapun yang pengunjung inginkan, kita harus mempunyai jawaban untuk itu. Maka tanyakan pada diri kita,kenapa orang-orang datang ke website kita? Ketika kita mengetahuinya kemudian kita harus membuatnya gampang untuk mereka temukan apa yang mereka cari.

2. Grafis
Jika kita menjalankan suatu site profesional, dan tidak menggunakan grafis/gambar2 yang menyenangkan, maka jangan harap orang akan mau berlama-lama di website kita. Orang datang keweb
kita untuk mencari informasi. Tidak untuk klik suatu iklan atau mengasah otak saja.

Membuat website menjadi lingkungan menyenangkan bagi pengunjung untuk menikmatinya. Memikirkan seperti kita pergi ke mall. Kita ingin masuk suatugudang/ toko yang bersih, yang dipersiapkan, mempunyai layanan baik pada pelanggan dan produk yang sedang dicari. Website kita perlu mencerminkan hal ini. Jika ada apa yang kita harapkan didalamnya
seperti pengalaman berbelanja, pengunjung akan menikmati apa yang sedang mereka cari diwebsite kita.

3. Warna
Ya, bagian ini juga sudah kita bahas di artikel sebelumnya. (link)
Warna adalah pilihan perorangan, tetapi studi menunjukkan warna itu mempunyai suatu pengaruh pada emosi publik.
Jika kita mempunyai suatu lokasi investasi keuangan,
Pilih warna konservatif. Atau jika kita menjual materi pantai, maka pilihlah warna yang lembut.

Komentar bertahan »