CARA MERANCANG HALAMAN

WEB
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.
A MEMBUAT STRUKTUR DASAR

1. Tentukan fungsi situs web tersebut.

2. Buatlah diagram peta situs (site map).
3. Cobalah metode penyusunan konsep dengan kartu.
4. Gunakan kertas dan papan buletin, atau papan tulis putih.
5. Buatlah inventaris konten.
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,
• Apakah web tersebut memerlukan Storefront?
Perlukah dibuat komentar pengguna? Perlukah
Anda perlu mencari tahu apa yang mereka inginkan
pengguna membuat akun nantinya? Apa web
dan fungsionalitas situs tersebut. Semua yang Anda
tersebut berorientasi artikel? Atau berorientasi
tentukan di sini akan berpengaruh saat halaman web
gambar? Semua pertanyaan ini dan pertanyaan
selesai nantinya.
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.
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.
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
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.
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.
B MEMBUAT KERANGKA DASAR HTML

1. Buatlah kerangka dasar (wireframe) untuk memantapkan hierarki halaman

web.
2. Cobalah metode Gray Box.
3. Cobalah program pembuat kerangka dasar.
4. Gunakan markah (markup) HTML sederhana.
5. Buatlah kerangka dasar untuk setiap halaman web.
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.
2 COBALAH METODE GRAY BOX.

Blok atau sorot konten halaman web • Ini belum termasuk catatan kepala
Anda di Gray Box, konten paling penting (header) dan catatan kaki (footer).
berada di urutan teratas. Urutkan konten- Gray Box adalah representasi visual
konten tersebut dalam satu kolom. konten yang akan terlihat di web.
Contohnya, jika halaman tersebut adalah
“Tentang Perusahaan” maka detail
informasi mengenai perusahaan berada
paling atas, diikuti dengan daftar staf,
kemudian informasi kontak, dll.
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
• Pattern Lab. Situs ini khusus untuk “desain atomik”, setiap
konten dianggap sebagai “molekul” yang menyusun
berbeda-beda untuk masing-masing program. Beberapa
halaman web yang lebih besar.
program yang cukup populer antara lain:
• 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.
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.
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.
C MEMBUAT KONTEN

1. Persiapkan konten sebelum membuat halaman web.

2. Ingatlah bahwa konten yang bagus bukan hanya berisi teks.
3. Mintalah bantuan fotografer profesional.
4. Tulislah artikel berkualitas.
1 PERSIAPKAN KONTEN SEBELUM MEMBUAT
HALAMAN WEB.
Anda akan jauh lebih mudah melihat • Anda tidak harus memiliki seluruh
pratinjau tampilan web jika Anda materi artikel, tetapi setidaknya
sudah memiliki konten aktual harus ada pokok berita aktualnya.
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.
2 INGATLAH BAHWA KONTEN YANG BAGUS
BUKAN HANYA BERISI TEKS.
Internet jauh lebih kompleks daripada • Gambar.
halaman web sederhana berisi tulisan. • Suara.
Anda memerlukan berbagai konten
berbeda agar bisa menciptakan web • Video.
yang bagus untuk menarik dan • Transmisi web atau webstream
mengundang pengunjung. Contohnya: (Twitter)
• Integrasi Facebook
• RSS
• Umpan web
3 MINTALAH BANTUAN FOTOGRAFER
PROFESIONAL.
• Jika Anda ingin memasukkan foto ke • Carilah sarjana seni fotografi yang
dalam situs Anda, kesan pertama baru lulus sebagai solusi yang lebih
yang didapatkan dari web Anda murah dibandingkan dengan
akan jauh lebih baik jika diisi fotografer profesional yang sudah
dengan fotografi profesional. Satu lama berkecimpung.
foto yang bagus jauh lebih bernilai
daripada dua puluh foto berkualitas
rendah.
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.
D MENGUBAH KONSEP MENJADI SITUS

1. Susunlah elemen-elemen dasar.

2. Buatlah tata letak sederhana.
3. Buatlah maket.
4. Ganti contoh konsep dengan konten asli.
5. Buatlah pedoman gaya web.
6. Terapkan gaya web tersebut.
1 SUSUNLAH ELEMEN-ELEMEN DASAR.

Susunan elemen ini akan teraplikasikan di • Jangan terlalu memusingkan detail,

setiap halaman di situs Anda, misalnya cobalah untuk mencermati (pratinjau)
catatan kepala, catatan kaki, dan menu tampilan catatan kepala.
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.
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.
3 BUATLAH MAKET.

Gunakan program seperti Photoshop untuk • Masukkan konten aktual di dalam maket
membuat maket atau contoh halaman situs untuk membuatnya terlihat bagus.
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.
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.
5 BUATLAH PEDOMAN GAYA WEB.

Hal ini sangat penting untuk menjaga perpaduan gaya, • Navigasi

terutama untuk situs yang besar. Jika situs tersebut ditujukan
untuk keperluan bisnis dan sudah memiliki merek atau corak
• Catatan kepala
sendiri, hal ini harus dipadukan dengan desain situs. Hal-hal • Paragraf
yang perlu dipertimbangkan dalam pembuatan pedoman
gaya halaman web: • Karakter miring
• Karakter tebal
• Tautan (aktif, tidak aktif, melayang)
• Penggunaan gambar
• Ikon
• Tombol
• Daftar
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.