Desain Web

Posted on June 15, 2010. Filed under: Desain Web 1 ( Semester 2) |

Halaman Web
            Secara umum, ada tiga kategori alasan yang mendasari untuk menyusun halaman web, antara lain :
       Sarana promosi produk ataupun jasa di Internet
       Penyedia informasi
       Melakukan transaksi online
Penyusunan Halaman Web
            Berikut ini beberapa langkah yang dapat dilakukan sehingga penyusunan halaman web lebih efektif, antara lain :
       Definisikan secara jelas tujuan penyusunan halaman web
       Buatlah (content) yang menarik untuk disampaikan ataupun didiskusikan.
       Buatlah halaman web sedemikian rupa sehingga para pengunjung dirayu dan ditantang untuk kembali lagi
Desain
       Suatu pekerjaan / kegiatan / proses kreatif untuk menghasilkan sesuatu yang sifatnya : Baru (Inovatif), segar (fresh), menakjubkan.
       Mempunyai daya guna, menghasilkan sesuatu yang lebih baik, lebih mudah dan praktis (useful), memecahkan suatu masalah (solusi).
What is Web Design
Definition :
1.      Web design is the process of creating experiences for users of the web.
2.      Web design refers to the process of conceptualizing and planning the experiences for visitors as they interact with the information and activities on the site
Situs Web yang baik
       Design (50 %)
       Usefulness (50 %)
Situs Web Yang Baik
Elemen Desain
       Estetika : warna (color), tataletak (layout), tipografi (typhography)
       Komunikasi : isi (content), penyampaian        pesan (language style used for communication), interaksi  (interaction/ feedback), pembentukan citra (building image)
Usefulness
       Utility/ fungsionalitas, teknologi yang tepat
       Usability/ kemudahan penggunaan : waktu belajar, kecepatan kinerja, tingkat kesalahan, daya ingat dan kepuasan subyektif
Pengembangan Situs Web
       Content Creation
       User Interface Design
       Graphic/ Visual Design
       Technology Planning
       Web Authoring
       Web Programming
       Multimedia Design
Content Creation
       Content is king
       Langkah-Langkah mempersiapkan content :
        Menentukan tujuan
        Menentukan audience/ target pembaca
        Menulis isi
Tips :
        Harus singkat dan jelas
        Gunakan bahasa sederhana
        Memudahkan scanning: highlighting,bulleted list
        Berikan preview informasi
        Hindari “click here”, “under construction”
        Jangan memaksa user menghapal
User Interface Design
       Perhatikan usability
       Beberapa hal untuk mencapai usability
        Percabangan – struktur yang berarti, tidak berlebihan, tidak menggunakan frame
        Kekompakan situs – hindari halaman terlalu panjang, horisontal scrolling
        Akses universal – platform, browser, kecepatan akses, resolusi layar, warna
        Dukungan navigasi
Graphic / Visual Design
       Tata letak – grid dan struktur
       Konsistensi – warna, font, style
       Kesederhanaan situs – tidak membingungkan user
       Optimasi file grafik – format file, web safe colors
Mengatur Situs Web
            Jenis situs web yang sedang kita susun sangat mempengaruhi struktur situs web itu dan urutan informasi yang akan dihasilkan. Kita dapat mengatur sebuah situs web untuk :
        Mengupas hobby kita atau ketertarikan kita pada satu hal tertentu dsb.
        Membuka suatu forum diskusi dan komunikasi
        Memberikan layanan kepada pelanggan
        Menghasilkan keuntungan bagi perusahaan atau organisasi tertentu
Informasi Pada Halaman Web
       Beberapa situs web terdiri dari ribuan halaman web, beberapa lagi hanya terdiri dari beberapa halaman saja. Semakin banyak informasi yang akan diberikan atau semakin penting informasi itu, maka kita perlu membuatnya mudah bagi pengguna untuk mengaksesnya.
       Walaupun teknik penyusunan situs web telah semakin berkembang, akan tetapi akan lebih baik bila penyusunan sistem navigasinya dibuat sesederhana mungkin sehingga lebih mudah diikuti oleh pengunjung.
       Secara umum, pengunjung pencari informasi juga membutuhkan akses yang cepat. Kadang kala kita perlu menempatkan beberapa space/window untuk iklan, untuk diperlukan ekstra hati-hati supaya pengunjung tidak bosan untuk mengikuti urutan iklan tersebut. Proporsi yang baik diperlukan untuk mengatur antara kemudahan akses dan kecepatan akses dengan kelangsungan situs web.
Nilai Tambah
Animasi yang menarik
       Sekarang ini semakin banyak tendensi sebuah situs web berisi sebanyak mungkin layanan, animasi gambar, trik-trik elektronik, logo-logo yang dapat bergerak, gambar, foto ataupun icon-icon di dalam sebuah situs web. Bagaimanapun, content yang terlalu kompleks bukanlah suatu hal yang menarik bagi pengunjung. Penggunaan animasi, gambar dan elemen-elemen bergerak lainnya haruslah dipertimbangkan dengan matang, karena penggunaannya jangan sampai mengganggu pembaca halaman web untuk memahami isi yang disajikan dalam halaman tersebut.
       Ukuran file-file gambar sangatlah besar bila dibandingkan dengan halaman web tersebut, untuk itu waktu yang diperlukan untuk download juga harus dipertimbangkan.
       Animasi gambar dan elemen-elemen bergerak memang menarik bagi kebanyakan pengunjung, tetapi proporsinya perlu dipertimbangkan dengan matang.
Teks ekuivalen
       Setiap gambar atau image yang kita letakkan di halaman web, haruslah disertai dengan atribut teks ekuivalen pada tag yang digunakan.
       Mengapa ?
            Karena beberapa pengunjung menon-aktifkan opsi untuk mendownload gambar atau animasi untuk mempercepat download time. Sehingga kita perlu memberikan teks ekuivalen untuk setiap gambar yang dipasang supaya pengunjung seperti ini masih bisa mengikuti petunjuk yang ditampilkan di halaman web.
Proses Pembuatan Website
       Define Content / Website Objectives
       Develop Architecture
            Membuat kerangka dasar situs atau arsitektur atau hirarki.
       Create Design
Desain seharusnya bisa tampak bagus di monitor komputer. Konsistensi desain pada semua halaman web SANGAT penting. Warna, Huruf, Grafis, Garis, Tabel, Logo, dan Navigasi
       Implement The Site
            Ujikan desain web anda pada berbagai monitor komputer, platform dan browser
       Maintaining the site
Define Content/ Isi
       Tentukan Maksud dan Tujuan Situs Anda
       Apa Kebutuhan Orang Mengunjungi Situs Anda
       Tentukan Target Umur Rata-rata Audience dan Tingkat Ketrampilan.
       Kenali AudienceAnda
       Jagalah Content Anda Fresh dan Up To Date
       Dahulukan Kualitas di Atas Kuantitas
       Nyatakan Kebijaksanaan Anda Dengan Jelas [Privacy Policy, Copyright, Disclaimer]
Navigasi Situs
Pembuatan navigasi situs hendaknya mengikuti beberapa aturan dasar, seperti:
       Batasi jumlah item dalam list dan menu.
       Jangan menggantungkan sepenuhnya pada image grafis untuk navigasi.
       Homepage harus mudah ditemukan.
       Integrasikan fasilitas navigasi dengan content.
       Hindari frame jika mungkin (gunakan tabel atau CSS).
List of contents
       Merupakan jenis navigasi dasar menggunakan list-item.
       Biasanya digunakan sebagai daftar isi, atau navigasi dalam content situs.
Breadcrumb trail
       Umumnya digunakan untuk memberikan informasi ke pengunjung dimana dia berada dan juga berguna untuk mempermudah pengunjung jika akan kembali ke halaman awal.
       Digunakan jika situs memiliki content (isi) yang cukup panjang.
Horizontal top bar
Tabs
2-level top (bar or tabs)
Top and side bars
Paging
Buttons bar with revealed drop-down
Multiple-level tree nav
Arsitektur Situs
            Arsitektur situs menentukan bagaimana situs dan halaman-halaman di dalamnya diorganisasikan, dinamai, dan saling dihubungkan (linked) untuk mempermudah proses browsing dan pencarian informasi oleh pengunjung.
            Dalam membuat arsitektur atau struktur situs web, hendaknya kita mengikuti beberapa prinsip dan aturan, diantaranya:
       Semua halaman di situs harus memiliki link ke halaman utama (homepage).
       Tunduk pada “aturan tiga-klik” dimana pengunjung harus sudah menemukan informasi dalam 3 kali klik atau kurang.
       Tempatkan content paling penting di awal halaman.
       Batasi panjang halaman (no scrolling).
       Sederhanakan tata-letak halaman.
       Usahakan agar content utama mudah dicari.
       Tampilkan produk dari berbagai perspektif/kategori.
       Ikuti prinsip-prinsip umum penulisan yang baik.
All-in-one
         Semua content situs disajikan dalam sebuah halaman tunggal (halaman utama atau homepage).
         Arsitektur ini merupakan arsitektur yang paling sederhana.
         Keuntungan dari model ini adalah mudah dalam perawatan file (maintenance) karena hanya terdiri dari satu halaman (file).
Flat    
       Merupakan model struktur web yang menyusun halaman-halaman secara linier.
       Setiap halaman dapat diakses dari halaman yang lainnya secara berurutan.
       Struktur ini merupakan struktur yang sederhana dan sering diterapkan dalam situs-situs dengan jumlah halaman yang tidak terlalu banyak. Contohnya, situs yang tersusun dalam menu Home, Contact Us, Products, About Us dll
Index
       Mirip seperti struktur flat, hanya saja pada struktur index menu atau halaman sudah tersusun berdasarkan index tertentu.
       Arsitektur ini memudahkan pengunjung untuk mengakses suatu halaman.
Hub-and-spoke / Daisy
      Model ini cocok untuk situs yang memiliki beberapa alur, misalnya pada aplikasi situs email. Pengunjung dapat mengakses halaman inbox (kotak surat) melalui beberapa cara, seperti setelah membaca isi surat, setelah mengirim surat atau saat sudah berhasil menyimpan contact.
Strict hierarchy
       Halaman-halaman web disusun dalam susunan parent-and-child (per kategori).
       Arsitektur ini memungkinkan untuk mengakses suatu halaman melalui parent atau kategorinya.
       Keuntungan dari model ini adalah pengunjung mudah dan cepat dalam mencari informasi atau halaman yang diinginkannya karena informasi disusun berdasarkan kategori tertentu.
Multi-dimensional hierarchy
      Pada dasarnya sama dengan arsitektur strict-hierarchy, hanya saja pada model ini, informasi memungkinkan diakses dari beberapa kategori sekaligus. Dengan kata lain, beberapa kategori dapat mengakses satu informasi (halaman) yang sama.
Search
      Jika kita akan menambahkan form pencarian pada situs kita, maka jenis arsitektur web ini yang diterapkan. Informasi atau halaman dapat diakses oleh pengunjung setelah pengunjung tersebut melakukan pencarian melalui form (halaman) yang sudah disediakan. Tentu saja, informasi atau halaman yang ditampilkan sesuai dengan kata kunci (keyword) yang dimasukkan oleh penggunjung.

Make a Comment

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

  • Blog Stats

    • 53,773 hits
  • Top Rated

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: