Pengantar Desain Web

Fakta tentang web :

Web terbukti menjadimedia informasi global dan up to date.

Web sebagai senjata bisnis yang ampuh

Web banyak diperlukan sebagai sarana komunikasi bisnis

antara B to B, B to C, C to B dan C to C.

Pengertian Web Design :

Adalah sebuah ilmu yang kompleks dalam hal merancang bangun situs web:

termasuk di dalamnyatehnical development.

Siapa yang merancang bangun :

Web Designer

Tool &scripting

User Interfacetechnique

Art

Menguasai

Yang Harus dikuasai oleh Web Designer : (1)

Tool & Scripting : Penguasaan tool dan teknik pemrograman web

• Menguasai tool untuk mengatur layout web, seperti ; Ms. Frontpage, Macromedia Dreamwweaver, Adobe Go

Live, Page maker, dsb.

• Menguasai tool untuk pembuatan animasi web, seperti ; Macromedia Flash, Macromedia Director, Swish, dsb.

• Menguasai tool untuk desain grafis, seperti ; Adobe Photoshop, Corel Draw, Adobe Ilustrator, Free Hand, dsb.

• Menguasai scripting (client side script), seperti ; HTML, CSS, Javascript, Jquery, dsb.

• Menguasai scripting (server side script), seperti ; PHP, CGI, Python, Perl, ASP, dsb.


User Interface Technique : Penguasaan teknik antarmuka

• Memiliki wawasan dalam bidang IMK (Interaksi Manusia dan Komputer), sehingga dapat merancang desain web yang memenuhi aspek-aspek user friendly.

• Memiliki wawasan tentang teknologi informasi dan jaringan komputer.


Art : Penguasaan citra rasa dibidang seni

• Memiliki imajenasi dan citra rasa seni yang tinggi.

• Menguasai teknik pewarnaan. Memahami arti dan komposisi warna, kombinasi warna, sehingga dapat menciptakan perpaduan warna yang serasi namun tidak terkesan mencolok.

• Mampu merancang bentuk atau sketsa yang baik dari bentuk dasar halaman web.

• Mampu menggabungkan imajinasi atau ide orisinil dengan ide dari pihak klien, sehingga halaman web memberikan nilai tambah bagi pihak klien.

Konsep Dasar Web Design

User Oriented

Usability

Page Design

Content Design

Site Design

User Oriented (1)

• Seorang web designer harus mem-fokuskan desainnya pada kepentingan pengguna. (user requirement)

• Harus memertimbangkan karakter pengguna, baik dari latar belakang, budaya, pendidikan dan kepentingan yang berbeda.


Usability (2)


Usability : merupakan sifat yang dimiliki sebuah situs yang membantu pengguna dalam menyelesaikan keputusan secara

efisien, efektif dan kepuasan.

Prinsip-Prinsip Dasar Usability:

• Navigator• Functionality• Control• Language• Help and Support• Feedback• Consistency• Error (Correction)• Visual Clarity

Usability (2)


Page Design (3)


• Halaman Web harus mendukung semua jenis browser.

• Mempertimbangkan setting browser pengguna, sehingga halaman web dapat tampil dengan lebih maksimal.

• Halaman Web didesain dengan teknologi yang compatible dan dapat diakses oleh sebagian besar pengguna.

• Halaman web dapat diload browser secara cepat.

• Halaman web dilengkapi dengan atribut yang dapat membantu browser untuk menampilkan halaman web dengan baik walaupun belum seluruh halaman di-load secara lengkap dari web server.

• Halaman web menggunakan format citra yang efisien.

Content Design (4)


• Desain isi sebuah halaman web harus menggunakan prinsip-prinsip yang telah dikenal oleh pengguna. Baik dari sisi text, simbol, bahasa, warna, icon dsbnya.

• Isi halaman web harus singkat, padat dan jelas. Dengan tujuan agar mudah dipahami pada saat pertama kali pengguna mengunjungi situs web tersebut

Prinsip-prinsip dalam menentukan content:

• Writing for the web (tulisan/artikel)• Scanability (daya pikat)• Page Titles (Judul halaman)• Writing Headlines (tulisan/artikel Utama)• Legibility (mudah dipahami)• Online Documentation • Multimedia • Response Time• Image and Photographs• Animation/Video/Audio embedding• Connectivity

Content Design (4)


Site Design (5)


• The home page ( where Am I, what does this site do)

• Splash Screen Mush Die

• Navigation

• Subsites / Sitemap

• URL Design

Elemen-elemen penting pada sebuah website

• Organization and Navigation• Content• Performance• Visual Design• Compability• Interaction

Organization and Navigation

•Organization :• Terstruktur/memiliki jenjang hierarki• Terkoneksi antara satu dengan yang lainnya• Bersih (warna putih sangat dianjurkan )

•Navigation : adalah aspek yang paling penting untuk mempertahankan keberadaan pengunjung situs. Tujuan utama navigasi adalah :

• Membuat pengunjung anda tetap berada pada situs Anda

• Membantu pengunjung untuk menemukan apa yang mereka cari dengan mudah dan cepat.

• Menarik pengunjung untuk mencoba hal-hal lain yang Anda tawarkan di situs Anda.


Merancang/Desain Navigasi (1)

• Organisasi Link

Pastikan link anda terorganisasi dengan baik sesuai dengan urutan kepentingannya. Pengunjung harus dapat dengan mudah menemukan apa yang mereka cari di bawah kategori berbeda.

• Jelas dan menonjol

Anda perlu memikirkan tempat terbaik untuk menempatkan navigasi. Navigasi harus mudah dilihat, jelas dan konsisten. Posisi atas atau di sebelah kiri halaman adalah tempat terbaik, karena ini adalah tempat pertama mata kita pergi ke.



• Konsisten

Navigasi harus jelas dan konsisten. Link penting dari website Anda harus berada pada setiap halaman, di lokasi yang sama, dan dalam urutan yang sama.

• Mudah dimengerti

Navigasi harus mudah dipahami dan dimengerti. Biasanya Anda tidak akan mempunyai tempat yang cukup untuk menyajikan link, sehingga memanfaatkan ruang adalah cara bijaksana. Pengunjung perlu tahu di mana mereka akan terus mengklik link tertentu, jadi pastikan link Anda dimengerti.



• DHTML MenuJika Anda memiliki banyak link di bawah kategori dan sub-kategori, Anda bisa menggunakan menu navigasi untuk mengatur link Anda.Ada “banyak skrip” yang tersedia di internet yang dapat Anda gunakan untuk membuat sistem navigasi yang besar.

Content

Content mengacu pada informasi dalam bentuk teks, grafik, gambar maupun dalam format-format lain yang perlu dikelola dengan tujuan memudahkan proses pembuatan, pembaharuan, distribusi, pencarian, analisis, dan meningkatkan fleksibilitas untuk ditransformasikan ke dalam bentuk lain.

Pengertian Content Web :

Content

Strategi Desain Content Web:

• Sederhana (Simple)• Layout Terpusat (Central Layout)• Minimalisasi Kolom• Berbasis Area / Section• Navigasi Sederhana dan Konsisten• Menonjolkan Identitas Web• Teks Mudah dibaca• Pemilihan dan penggunaan Warna• Pemanfaatan Icon

•Sederhana (Simple)Ada dua aspek penting untuk mencapai keberhasilan dengan kesederhanaan:

• Menghapus komponen yang tidak perlu, tanpa mengorbankan efektivitas.

• Coba solusi alternatif yang mencapai hasil yang sama, namun lebih sederhana.

Content

•Layout Terpusat (Central Layout)(browser). Pada dasarnya, sebagian besar situs hari ini ditempatkan terpusat di dalam jendela browser. Desain terbaru, sangat sedikit sekali halaman yang memenuhi layar atau rata kiri/kanan.

Content

•Minimalisasi KolomKolom Content yang lebih sedikit akan terasa sederhana, berani, dan lebih lugas dalam penyajian content informasi. Hal ini akan mengurangi informasi yang kurang jelas.

Content

•Berbasis Area / SectionLayout Content web harus terbagi dalam beberapa area/bagian. Biasanya terbagi dalam 3 area (Header(top), Main(middle) dan Footer(Bottom)).

Content

• Navigasi Sederhana dan Konsisten (1)

Navigasi situs harus sederhana (mudah menafsirkan target dan pilihan). Konsisten berarti navigasi situs harus muncul di setiap halaman sebagai bagian dari template halaman.

• Positioning link navigasi harus konsisten

• Menggunakan warna, dan bentuk

• Item navigasi besar dan tebal

• Menggunakan teks yang jelas untuk membuat tujuan setiap link tidak ambigu

Content

• Navigasi Sederhana dan Konsisten (2)

Content

•Menonjolkan Identitas Web (logo)Kesan pertama untuk membangkitkan emosi pengunjung, adalah desain dan penggunaan Logo yang jelas, berani, kuat, dan selaras dengan nuansa warna background web.

Content

•Teks Mudah DibacaTeks harus mudah dibaca. Penggunaan size/style font akan membuat text lebih mencolok dari elemen yang lebih rendah. Khusus elemen tertinggi dari sebuah teks, misal untuk judul artikel, judul halaman dan headlines sebaiknya lebih mencolok.

Content

•Pemilihan dan penggunaan WarnaPilihlah warna cerah dan kuat untuk menarik perhatian mata. Gunakan warna untuk membagi bagian-bagian content halaman, dan untuk menyoroti elemen penting ( baik teks atau content ).

Content

•Pemanfaatan IconIkon dapat berguna ketika mereka dengan mudah dikenali dan membawa makna yang jelas. Dalam banyak kasus, gambar lebih bermakna dari pada sejuta kata-kata.

Content

• Untuk menghasilkan sebuah web usability. Setiap desainer web harus memahami karakter dan keinginan pengguna/pengunjung situs, kemudian item-item dari hasil pemahaman tersebut diimplementasikan secara rinci pada setiap desain webnya.

Performance and Visual Design

• Performance

• Fast site

• Menentukan audience

• Style and graphics compressed

• Menggunakan cross scripting

• Visual Design

• Kualitas tinggi dan profesional

• Mengidentifikasikan Coorporate

• Menggambarkan brand perusahaan


Kecepatan Loading halaman web

Performance

Kualitas Desain Web (professional)

Visual Design

VS


•Minimalkan Penggunaan Gambar/Image :

1. Kunci ke situs web loading cepat adalah untuk meminimalkan penggunaan gambar.

2. Gambar tidak memenuhi 70% dari halaman web.3. Gunakan tag-tag HTML sederhana.4. Perhatikan situs populer seperti Yahoo, Google,

Ebay, Amazon dll, mereka memiliki sedikit gambar karena waktu loading lebih penting.

5. Desain sederhana adalah yang terbaik.


•Optimalisasi Penggunaan Gambar/image :

1. Gunakan gambar/image format GIF, dan atau JPEG/JPG.

2. Perkecil ukuran gambar dan sesuaikan dengan kebutuhan

3. Semakin sedikit warna yang digunakan pada gambar/image, semakin sedikit ukuran file gambar/image.

4. Gunakan warna yang dibutuhkan, dari pallete warna.

5. Penggunaan Gambar ukuran besar. Usahakan ditampilkan melalui area latar belakang.


•Gunakan Content Grouping:

Tag HTML Table, DIV atau Span adalah tag HTML untuk keperluan grouping yang bisa digunakan untuk mendesain layout web kreatif.


•Mengurangi penggunaan animasi/video

1. Jangan gunakan animasi/video kecuali diperlukan.2. Animasi membutuhkan waktu lama untuk proses

loading halaman web.3. Untuk tujuan menarik perhatian, gunakan

animasi/video yang berukuran kecil (ukuran file atau dimensi objek)


•Desain Icon Sederhana

Buat dan gunakan ikon sederhana untuk tujuan menarik perhatian pengunjung


•Gunakan Cascading Style Sheet

1. Memformat dan memodifikasi halaman, text, multimedia, grouping dan form untuk keperluan visual design dapat dilakukan dengan menggunakan kode-kode CSS

2. CSS mampu mengurangi beban kerja HTML

•Menentukan resolusi layar

1. Tentukan resolusi terendah dan tertinggi layar menampilkan halaman web terbaik.

2. Konversi desain halaman atau elemen-elemen HTML dalam bentuk persentase

3. Kurangi penggunaan ukuran pixel pada desain halaman


•Menentukan browser/penerjemah

1. Tentukan browser standar untuk menampilkan halaman web terbaik.

2. Gunakan script untuk mengindentifikasi jenis dan tipe browser


www.NetMechanic.com

Pengantar Desain Web

Documents