Cara Merancang Halaman Web

Presentasi berjudul: "Cara Merancang Halaman Web"— Transcript presentasi:

1 Cara Merancang Halaman Web

2 Cara Merancang Halaman Web
Jika Anda ingin mendesain dan membuat halaman web, proses ini akan jauh lebih mudah jika Anda membuat perencanaan lebih dahulu. Di fase perencanaan, perancang dan klien bisa bekerja sama untuk menemukan format dan tata letak (layout) yang sesuai dengan kebutuhan mereka. Proses perencanaan mempengaruhi corak atau gaya situs tersebut, bisa dibilang ini merupakan aspek terpenting dalam mendesain web, khususnya jika itu untuk keperluan bisnis.

3 A Membuat Struktur Dasar
Tentukan fungsi situs web tersebut. Buatlah diagram peta situs (site map). Cobalah metode penyusunan konsep dengan kartu. Gunakan kertas dan papan buletin, atau papan tulis putih. Buatlah inventaris konten.

4 1 Tentukan fungsi situs web tersebut.
Jika Anda membuat situs pribadi, Anda mungkin sudah tahu jawabannya. Namun, jika Anda membuat situs untuk organisasi, perusahaan, atau orang lain, Anda perlu mencari tahu apa yang mereka inginkan dan fungsionalitas situs tersebut. Semua yang Anda tentukan di sini akan berpengaruh saat halaman web selesai nantinya. Apakah web tersebut memerlukan Storefront? Perlukah dibuat komentar pengguna? Perlukah pengguna membuat akun nantinya? Apa web tersebut berorientasi artikel? Atau berorientasi gambar? Semua pertanyaan ini dan pertanyaan lainnya akan membantu Anda dalam mendesain dan merancang situs tersebut. Proses perencanaan ini bisa disusun ke dalam gambar, terutama jika itu untuk perusahaan besar dan banyak orang yang terlibat dalam pembuatan proyek ini.

5 2 Buatlah diagram peta situs (site map).
Diagram peta situs mirip dengan diagram alir (flow chart), menunjukkan bagaimana pengguna beralih dari halaman satu ke halaman berikutnya. Anda tidak memerlukan halaman web di tahap ini, cukup aliran konsep umumnya saja. Anda bisa menggunakan program komputer untuk membuat diagram atau membuat sketsa sendiri di kertas. Gunakan diagram ini untuk menunjukkan konsep penyusunan hierarki dan konektivitas halaman web.

6 3 Cobalah metode penyusunan konsep dengan kartu.
Salah satu metode populer penyusunan web secara grup adalah dengan menggunakan sejumlah kartu untuk mengetahui harapan setiap orang. Ambil sejumlah kartu catatan dan tulis satu per satu konten dasar halaman web di masing-masing kartu. Susunlah kartu-kartu ini bersama dengan tim Anda untuk menemukan konsep terbaik. Cara ini cocok digunakan saat Anda berkolaborasi dengan orang lain dalam pembuatan halaman web

7 4 Gunakan kertas dan papan buletin, atau papan tulis putih.
Ini adalah metode perencanaan orisinal dengan anggaran kecil, Anda bisa dengan cepat menghapus atau menggeser konten dan mengubah alurnya. Gambarlah desain web Anda di kertas, lalu hubungkan kertas-kertas itu dengan benang, atau gambarlah garis di papan tulis. Cara ini sangat cocok digunakan dalam sesi curah pendapat.

8 5 Buatlah inventaris konten.
Sebenarnya ini cenderung lebih tepat digunakan dalam perancangan web ulang daripada perancangan web baru. Masukkan setiap bagian konten atau halaman web yang sudah jadi ke lembar lajur (spreadsheet). Buatlah catatan berisi tujuan masing-masing konten atau halaman tersebut, gunakan daftar ini untuk menentukan bagian yang perlu dibuang dan yang perlu dipertahankan. Anda bisa menyederhanakan struktur web dan memudahkan proses pendesainan ulang nantinya.

9 B Membuat Kerangka Dasar HTML
Buatlah kerangka dasar (wireframe) untuk memantapkan hierarki halaman web. Cobalah metode Gray Box. Cobalah program pembuat kerangka dasar. Gunakan markah (markup) HTML sederhana. Buatlah kerangka dasar untuk setiap halaman web.

10 1 Buatlah kerangka dasar (wireframe) untuk memantapkan hierarki halaman web.
Kerangka dasar HTML adalah cetak biru dari situs yang akan Anda buat, hanya menggunakan tag paling dasar dan contoh (block/template) konten. Kerangka ini menjawab pertanyaan, “Apa yang terlihat di web dan di mana?” Pemformatan dan pengaturan gaya tidak diperlukan dalam pembuatan kerangka ini. Anda bisa melihat struktur dan diagram aliran konten dengan kerangka dasar sebelum Anda memilih pengaturan gaya. Kerangka dasar HTML tidak statis seperti PDF atau gambar, Anda bisa dengan cepat menggeser contoh konten untuk membuat struktur baru. Kerangka dasar bersifat interaktif yang menguntungkan baik bagi pengembang web maupun klien. Karena kerangka dasar ini ditulis dengan kode HTML sederhana, Anda masih bisa menavigasikannya dan mengetahui cara kerja perpindahan halaman web. Hal ini tidak bisa dilakukan dengan PDF.

11 2 Cobalah metode Gray Box.
Blok atau sorot konten halaman web Anda di Gray Box, konten paling penting berada di urutan teratas. Urutkan konten- konten tersebut dalam satu kolom. Contohnya, jika halaman tersebut adalah “Tentang Perusahaan” maka detail informasi mengenai perusahaan berada paling atas, diikuti dengan daftar staf, kemudian informasi kontak, dll. Ini belum termasuk catatan kepala (header) dan catatan kaki (footer). Gray Box adalah representasi visual konten yang akan terlihat di web.

12 3 Cobalah program pembuat kerangka dasar.
Ada berbagai program yang bisa Anda gunakan dalam proses pembuatan kerangka dasar web. Banyaknya kode (bahasa) pemrograman web yang harus Anda kuasai berbeda-beda untuk masing-masing program. Beberapa program yang cukup populer antara lain: Pattern Lab. Situs ini khusus untuk “desain atomik”, setiap konten dianggap sebagai “molekul” yang menyusun halaman web yang lebih besar. Jumpcharts. Halaman web ini menyediakan layanan perencanaan dan penyusunan kerangka dasar web. Situs ini berbayar dan mengharuskan Anda berlangganan, tetapi Anda bisa membangun kerangka web dengan cepat tanpa harus menguasai banyak kode pemrograman web. Wirefy. Wirefy adalah situs lain yang menawarkan “desain atomik”. Pengembang web bisa mendapatkan tool secara gratis.

13 4 Gunakan markah (markup) HTML sederhana.
Kerangka dasar yang baik akan mudah dikonversikan ke situs aslinya. Jangan terlalu memikirkan pengaturan gaya web selama proses pembuatan kerangka ini. Gunakanlah markah yang bisa dipahami dan diubah dengan mudah. Kerangka dasar sederhana jauh lebih baik. Tujuan pembuatan markah adalah untuk membangun struktur. Tampilan visual bisa diatur nanti dengan CSS dan markah lanjutan.

14 5 Buatlah kerangka dasar untuk setiap halaman web.
Anda mungkin tergoda untuk menyamakan setiap halaman web dengan satu kerangka dasar. Nyatanya, hal ini hanya akan membuat situs Anda menjadi biasa saja dan membosankan. Buatlah kerangka berbeda untuk tiap halaman, Anda akan mengerti bahwa setiap halaman memerlukan desain sendiri.

15 C Membuat Konten Persiapkan konten sebelum membuat halaman web.
Ingatlah bahwa konten yang bagus bukan hanya berisi teks. Mintalah bantuan fotografer profesional. Tulislah artikel berkualitas.

16 1 Persiapkan konten sebelum membuat halaman web.
Anda akan jauh lebih mudah melihat pratinjau tampilan web jika Anda sudah memiliki konten aktual daripada menggunakan sampel atau placeholder. Anda tidak perlu memiliki terlalu banyak konten, tetapi maket Anda akan jauh terlihat lebih baik jika menggunakan salinan gambar aslinya. Anda tidak harus memiliki seluruh materi artikel, tetapi setidaknya harus ada pokok berita aktualnya.

17 2 Ingatlah bahwa konten yang bagus bukan hanya berisi teks.
Internet jauh lebih kompleks daripada halaman web sederhana berisi tulisan. Anda memerlukan berbagai konten berbeda agar bisa menciptakan web yang bagus untuk menarik dan mengundang pengunjung. Contohnya: Gambar. Suara. Video. Transmisi web atau webstream (Twitter) Integrasi Facebook RSS Umpan web

18 3 Mintalah bantuan fotografer profesional.
Jika Anda ingin memasukkan foto ke dalam situs Anda, kesan pertama yang didapatkan dari web Anda akan jauh lebih baik jika diisi dengan fotografi profesional. Satu foto yang bagus jauh lebih bernilai daripada dua puluh foto berkualitas rendah. Carilah sarjana seni fotografi yang baru lulus sebagai solusi yang lebih murah dibandingkan dengan fotografer profesional yang sudah lama berkecimpung.

19 4 Tulislah artikel berkualitas.
Konten tulisan di halaman web akan menentukan jumlah trafik web Anda. Walaupun Anda tidak perlu terlalu memusingkan pembuatan konten dalam proses perancangan ini, tidak ada salahnya untuk mulai memikirkannya karena nantinya Anda juga memerlukan konten secara reguler saat situs sudah aktif. Selain konten artikel, ada materi tulisan yang juga perlu Anda miliki dalam proses penyusunan halaman web. Misalnya informasi kontak, nama perusahaan, atau apa pun yang akan digunakan secara multipel di dalam situs.

20 D Mengubah Konsep Menjadi Situs
Susunlah elemen-elemen dasar. Buatlah tata letak sederhana. Buatlah maket. Ganti contoh konsep dengan konten asli. Buatlah pedoman gaya web. Terapkan gaya web tersebut.

21 1 Susunlah elemen-elemen dasar.
Susunan elemen ini akan teraplikasikan di setiap halaman di situs Anda, misalnya catatan kepala, catatan kaki, dan menu navigasi. Aturlah dengan gaya yang sangat sederhana sehingga Anda bisa memeriksa tampilan semua halaman. Hal ini sangat berguna saat Anda berlanjut ke proses penyusunan tata letak web. Jangan terlalu memusingkan detail, cobalah untuk mencermati (pratinjau) tampilan catatan kepala.

22 2 Buatlah tata letak sederhana.
Mulailah dengan menggeser posisi jam dari kolom kerangka dasar ke lokasi aktual di halaman. Contohnya, Anda mungkin ingin menggeser contoh menu navigasi ke sebelah kiri halaman dan daftar pokok berita ke kanan. Teruslah bereksperimen dengan tata letak web untuk beberapa halaman, sebelum Anda berlanjut ke tahap berikutnya. Ijinkan orang lain ikut melihatnya untuk memeriksa apakah tata letak yang Anda buat terasa hidup.

23 3 Buatlah maket. Gunakan program seperti Photoshop untuk membuat maket atau contoh halaman situs Anda. Gunakan tata letak yang telah Anda susun sebagai panduannya. Anda bisa membuat maket lebih cepat dan mendapatkan hasil yang diinginkan dengan program pengolah gambar. Hasil gambar- gambar ini nantinya bisa dijadikan sebagai referensi dalam proses penulisan kode pemrograman web. Masukkan konten aktual di dalam maket untuk membuatnya terlihat bagus.

24 4 Ganti contoh konsep dengan konten asli.
Tambahkan konten dan elemen ke halaman web. Jangan memusingkan pengaturan gaya web untuk saat ini, susun saja semuanya ke lokasi yang benar. Hal ini akan membantu Anda dalam meninjau perubahan gaya web yang Anda buat nantinya.

25 5 Buatlah pedoman gaya web.
Hal ini sangat penting untuk menjaga perpaduan gaya, terutama untuk situs yang besar. Jika situs tersebut ditujukan untuk keperluan bisnis dan sudah memiliki merek atau corak sendiri, hal ini harus dipadukan dengan desain situs. Hal-hal yang perlu dipertimbangkan dalam pembuatan pedoman gaya halaman web: Navigasi Catatan kepala Paragraf Karakter miring Karakter tebal Tautan (aktif, tidak aktif, melayang) Penggunaan gambar Ikon Tombol Daftar

26 6 Terapkan gaya web tersebut.
Setelah Anda menemukan gaya dan desain yang pas, implementasikanlah. CSS adalah salah satu cara termudah untuk mengimplementasikan gaya di halaman web atau di seluruh situs tersebut. Lihat petunjuk berikut untuk lebih memahami detail penggunaan CSS.