Cara Merancang Halaman Web

Disusun bersama Ryan Conway

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.

Bagian 1

Bagian 1 dari 4:

Membuat Struktur Dasar

Unduh PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/Plan-a-Website-Step-1.jpg\/v4-460px-Plan-a-Website-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/Plan-a-Website-Step-1.jpg\/v4-728px-Plan-a-Website-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3e\/Plan-a-Website-Step-2.jpg\/v4-460px-Plan-a-Website-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3e\/Plan-a-Website-Step-2.jpg\/v4-728px-Plan-a-Website-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fb\/Plan-a-Website-Step-3.jpg\/v4-460px-Plan-a-Website-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fb\/Plan-a-Website-Step-3.jpg\/v4-728px-Plan-a-Website-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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. ^{[1]
X
Teliti sumber}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/Plan-a-Website-Step-4.jpg\/v4-460px-Plan-a-Website-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/Plan-a-Website-Step-4.jpg\/v4-728px-Plan-a-Website-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ac\/Plan-a-Website-Step-5.jpg\/v4-460px-Plan-a-Website-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ac\/Plan-a-Website-Step-5.jpg\/v4-728px-Plan-a-Website-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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.

Iklan

Bagian 2

Bagian 2 dari 4:

Membuat Kerangka Dasar HTML

Unduh PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Plan-a-Website-Step-6.jpg\/v4-460px-Plan-a-Website-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Plan-a-Website-Step-6.jpg\/v4-728px-Plan-a-Website-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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. ^{[2]
X
Teliti sumber}
- 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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/Plan-a-Website-Step-7.jpg\/v4-460px-Plan-a-Website-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/Plan-a-Website-Step-7.jpg\/v4-728px-Plan-a-Website-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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. ^{[3]
X
Teliti sumber}
- Ini belum termasuk catatan kepala ( header ) dan catatan kaki ( footer ). Gray Box adalah representasi visual konten yang akan terlihat di web.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a6\/Plan-a-Website-Step-8.jpg\/v4-460px-Plan-a-Website-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a6\/Plan-a-Website-Step-8.jpg\/v4-728px-Plan-a-Website-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/40\/Plan-a-Website-Step-9.jpg\/v4-460px-Plan-a-Website-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/Plan-a-Website-Step-9.jpg\/v4-728px-Plan-a-Website-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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. ^{[4]
X
Teliti sumber}
- Kerangka dasar sederhana jauh lebih baik. Tujuan pembuatan markah adalah untuk membangun struktur. Tampilan visual bisa diatur nanti dengan CSS dan markah lanjutan.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/02\/Plan-a-Website-Step-10.jpg\/v4-460px-Plan-a-Website-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/02\/Plan-a-Website-Step-10.jpg\/v4-728px-Plan-a-Website-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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.

Iklan