Panduan Lengkap Merancang Website
 |
| Panduan Lengkap Merancang Website |
TipsIM.com - Panduan merancang website. Bagi para pengguna internet atau penjelajah dunia maya, tentu tidak asing lagi dengan yang namanya website atau web. Apalagi para blogger, para publisher, atau para programer web, pasti setiap harinya akan bertatap muka dengan yang namanya web.
Nah, di postingan kali ini, TipsIM.com akan mencoba menyusun sebuah panduan bagaimana cara merancang suatu website. Namun sebelum itu, ada beberapa hal yang perlu anda ketahui sob. Dalam panduan kali ini bukan hanya membahas tentang cara-caranya merancang website saja, tapi juga hal apa saja yang harus dipelajari sebelum merancang web.
Jika anda ingin merancang suatu web, yang perlu anda ketahui paling utama adalah pengertian dari website itu sendiri. Bukan hanya sekedar tahu tentang pengertiannya saja sob, tapi juga paham dan tahu gambarannya website itu seperti apa.
Dalam panduan yang saya buat ini, nantinya akan berisi tentang:
2. Apa manfaat dari membuat suatu website?
3. Apa yang harus dipelajari sebelum merancang suatu website?
4. Dari mana harus memulainya?
5. Berlanjut ke cara merancang halaman website
Langsung saja kita masuk pada poin pertama pembahasan panduan merancang website ini sob.
Apa itu Website?
Website adalah kumpulan dari beberapa halaman yang menampilkan berbagai macam informasi, teks, gambar, video, ataupun yang lainnya, yang membentuk satu rangkaian bangunan yang saling berkaitan, dimana masing-masing saling dihubungkan dengan jaringan halaman atau hyperlink.
Untuk lebih jelas secara keseluruhannya, saya akan mencoba menggambarkan seperti ini:
- Internet itu diibaratkan seperti dunia. Tempat yang digunakan oleh manusia untuk hidup, membangun rumah, menjelajah, dan sebagainya.
- Website itu diibaratkan seperti rumah atau bangunan. Jika kita ingin membangun rumah, tentunya kita harus membangunnya di dunia, tidak di luar angkasa.
- Desain itu diibaratkan bentuk rumah atau bangunan. Sebelum membangun rumah, kita harus membuat desainnya terlebih dulu.
- Dan hosting itu diibaratkan seperti tanah. Setelah membuat desain, anda bisa memilih tanah yang cocok untuk dibangun rumah anda.
- Domain itu diibaratkan nama atau alamat rumah. Setelah anda memilih tanah yang cocok untuk dibangun rumah, maka letak tanah itu akan menjadi alamat rumah anda nantinya.
Seperti itulah gambaran mengenai website di dunia internet sob. Bagaimana? Anda sudah memiliki gambaran sob?
Berbicara tentang website, sebenarnya website itu memiliki 3 jenis sob.
Jika anda masih bingung dengan istilah-istilah yang ada di dalam website, silahkan buka KAMUS WEBSITE.
Manfaatnya sangatlah banyak sob. Bahkan anda sekarang pun merasakannya sendiri. Anda bisa lebih dipermudah dengan adanya website. Lebih mudah dalam mencari ilmu atau pengetahuan, lebih mudah dalam berkomunikasi, lebih mudah mendapatkan informasi terupdate, dan lain sebagainya.
Biasanya orang membuat website dengan tujuan dan alasan tertentu. Alasan itulah yang nantinya akan menghasilkan manfaat untuk dirinya sendiri maupun untuk orang lain yang menjadi pengunjung websitenya.
Berikut ini beberapa manfaat yang mungkin salah satunya telah menjadi tujuan anda sob:
Untuk merancang atau membuat suatu website, kita memang harus memiliki pengetahuan minimal dasa-dasar dari website itu sendiri sob, seperti struktur dasar website hingga pengcodingan.
Namun, jika anda ingin membuat website tanpa melakukan perancangan dari awal, yaitu dari pembuatan template. Maka pengetahuan tentang pengcodingan website (HTML, CSS, PHP, JS, dll) tidak terlalu penting. Sebab, anda hanya tinggal terima jadi dan langsung pakai (meminta orang lain untuk membuatkan).
Akan tetapi jika anda ingin membuat website mulai dari nol yaitu dari perancangan desain, anda harus tahu mengenai dasar-dasar website. Mulai dari struktur dasar, pembuatan kerangka menggunakan html, tata letak atau layout dari website, dan masih banyak lagi.
Nah, kita disini akan membahas cara pembuatan atau perancangan website dari nol. Yang perlu dipelajari paling utama adalah konsep dasar website, bagian-bagian atau layout dari suatu website, dan apa saja yang diperlukan untuk membuat website.
Sebelum melakukan perancangan web, anda harus paham mengenai konsep dasar website sob. Konsep dasar website antara lain mengenai pengertian website, pengertian situs web, dan istilah-istilah dalam perancangan web seperti HTTP, WWW, URL,URI, HTML, CSS, dan masih banyak lagi.
Kita akan coba bahas satu per satu sob.
> Pengertian web : Seperti yang telah dijelaskan diatas, website itu sendiri merupakan aplikasi di dunia internet yang berisikan dokumen-dokumen multimedia seperti teks, gambar, video, animasi, suara, yang menggunakan protokol HTTP dan diakses menggunakan browser.
> Situs web : Kumpulan dari halaman web yang sudah dipublikasikan di jaringan internet dan memiliki domain/URL yang diakses dengan cara mengetikkan alamat web tersebut.
Istilah dalam perancangan web:
> HTTP (Hyper Text Transfer Protocol) : Protokol yang digunakan untuk mentransfer dokumen dalam WWW.
> WWW (World Wide Web) : Halaman-halaman website yang saling terkoneksi satu sama lain yang membentu suatu informasi.
> URL (Uniform Resourse Locator) : Rangkaian karakter menurut suatu format standar tertentu, untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di internet.
> URI (Uniform Resourse Indentifier) : Untaian rangkaian karakter untuk mengidentifikasi nama, sumber, atau layanan internet.
> HTML: Bahasa (Markup Language) yang digunakan untuk membentuk suatu halaman web yang terdiri atas sekumpulan markups tag. (Lebih lengkap pembahasan di bawah).
Mari kita bahas satu per satu sob.
Saya akan mencoba membahas satu per satu mengenai HTML, CSS, Java Script, dan PHP.
#1. HTML
Seperti yang telah dijelaskan diatas, bahwa HTML adalah suatu bahasa (Markup Language) yang digunakan untuk membentuk suatu halaman web yang terdiri atas sekumpulan markups tag.
HTML sangat penting dalam perancangan atau pembuatan website. Tanpa HTML, website tidak akan bisa berjalan sebagaimana mestinya sob.
Berikut ini beberapa bagian penting dalam HTML.
Jika anda masih merasa bingung memahami kode-kode html silahkan buka KAMUS HTML.
#2. CSS
CSS (Cascading Style Sheet) adalah suatu kode pendukung html untuk mengatur desain atau tata letak suatu halaman website.
Berikut ini kode yang biasa digunakan dalam penyusunan CSS.
#3. Javascript
Berbicara tentang website, sebenarnya website itu memiliki 3 jenis sob.
- Website statis, website yang dibuat secara manual menggunakan kode-kode, website tersebut tidak diperuntukkan untuk dilakukan perubahan secara berkala. Sebab, jika ingin mengubah harus secara manual mengedit kode-kode yang menjadi struktur web.
- Website dinamis, website yang secara strukturnya diperuntukkan untuk update sesering mungkin. Web dinamis ini bisa diakses oleh pengguna atau user, dan biasanya telah disediakan halaman backend untuk mengedit konten. Misalnya, website berita yang terdapat fasilitas berita.
- Website Interaktif, website ini merupakan pengembangan lebih lanjut dari website dinamis. Dimana didalamnya terjadi komunikasi dua arah antara pengunjung dengan pengurus web atau pengunjung dengan sesama pengunjung. Contohnya seperti facebook, twitter, dll.
Jika anda masih bingung dengan istilah-istilah yang ada di dalam website, silahkan buka KAMUS WEBSITE.
Apa Manfaat Membuat Website?
Biasanya orang membuat website dengan tujuan dan alasan tertentu. Alasan itulah yang nantinya akan menghasilkan manfaat untuk dirinya sendiri maupun untuk orang lain yang menjadi pengunjung websitenya.
Berikut ini beberapa manfaat yang mungkin salah satunya telah menjadi tujuan anda sob:
- Memperluas jangkauan promosi. Jika anda memiliki produk tertentu untuk dijual, maka dengan adanya website, produk anda akan bisa lebih dikenal luas oleh masyarakay, khususnya bagi para pengguna internet.
- Bisa memberikan informasi dengan waktu yang tak terbatas. Artinya, kita bisa menuliskan informasi kapan saja pada website, dan para pengguna bisa mengakses kapan saja serta mengambil informasi dari website anda kapan saja.
- Bisa dijadikan sebagai media pengenalan. Baik untuk pengenalan diri sendiri maupun perusahaan. Jika anda memiliki perusahaan, maka anda bisa memanfaatkan website untuk mengenalkan perusahaan anda kepada semua orang khususnya di dunia internet. Sehingga perusahaan anda akan lebih dikenal luas dan tentunya akan berefek baik meningkatnya konsumen pada perusahaan anda.
- Mungkin manfaat yang ada pada anda bisa dituliskan disini sob.
Apa saja yang Harus Dipelajari Sebelum Merancang Website?
Namun, jika anda ingin membuat website tanpa melakukan perancangan dari awal, yaitu dari pembuatan template. Maka pengetahuan tentang pengcodingan website (HTML, CSS, PHP, JS, dll) tidak terlalu penting. Sebab, anda hanya tinggal terima jadi dan langsung pakai (meminta orang lain untuk membuatkan).
Akan tetapi jika anda ingin membuat website mulai dari nol yaitu dari perancangan desain, anda harus tahu mengenai dasar-dasar website. Mulai dari struktur dasar, pembuatan kerangka menggunakan html, tata letak atau layout dari website, dan masih banyak lagi.
Nah, kita disini akan membahas cara pembuatan atau perancangan website dari nol. Yang perlu dipelajari paling utama adalah konsep dasar website, bagian-bagian atau layout dari suatu website, dan apa saja yang diperlukan untuk membuat website.
1. Konsep dasar website
Perancangan web atau yang biasa disebut dengan web design adalah suatu istilah umum yang biasa digunakan untuk mencakup bagaimana konten web ditampilkan, biasanya berupa hypertext atau hypermedia yang dikirimkan ke pengguna akhir melalui World Wide Web (WWW), dengan menggunakan sebuah web browser.Sebelum melakukan perancangan web, anda harus paham mengenai konsep dasar website sob. Konsep dasar website antara lain mengenai pengertian website, pengertian situs web, dan istilah-istilah dalam perancangan web seperti HTTP, WWW, URL,URI, HTML, CSS, dan masih banyak lagi.
Kita akan coba bahas satu per satu sob.
> Pengertian web : Seperti yang telah dijelaskan diatas, website itu sendiri merupakan aplikasi di dunia internet yang berisikan dokumen-dokumen multimedia seperti teks, gambar, video, animasi, suara, yang menggunakan protokol HTTP dan diakses menggunakan browser.
> Situs web : Kumpulan dari halaman web yang sudah dipublikasikan di jaringan internet dan memiliki domain/URL yang diakses dengan cara mengetikkan alamat web tersebut.
Istilah dalam perancangan web:
> HTTP (Hyper Text Transfer Protocol) : Protokol yang digunakan untuk mentransfer dokumen dalam WWW.
> WWW (World Wide Web) : Halaman-halaman website yang saling terkoneksi satu sama lain yang membentu suatu informasi.
> URL (Uniform Resourse Locator) : Rangkaian karakter menurut suatu format standar tertentu, untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di internet.
> URI (Uniform Resourse Indentifier) : Untaian rangkaian karakter untuk mengidentifikasi nama, sumber, atau layanan internet.
> HTML: Bahasa (Markup Language) yang digunakan untuk membentuk suatu halaman web yang terdiri atas sekumpulan markups tag. (Lebih lengkap pembahasan di bawah).
2. Layout website
Biasanya layout dari masing-masing website itu berbeda-beda sob, bisa diubah sesuai keingian pemilik. Namun pada umumnya bentuk atau penyusunan layout website adalah seperti pada gambar dibawah ini.Mari kita bahas satu per satu sob.
- Body : Body merupakan block paling besar yang menampung seluruh konten dan struktur dari website.
- Outer Wrapper: Elemen ini merupakan bagian yang digunakan sebagai wadah penampung header, navigation, main wrapper, sidebar, dan footer.
- Header : Elemen atau tempat yang biasanya diisi dengan judul website, deskripsi website, dan logo website.
- Navigation Menu: Suatu elemen yang berisi tentang link yang bisa di akses menuju ke halaman-halaman lain dalam web.
- Main Wrapper (Content): Main wraper ini merupakan suatu elemen atau kolom dalam yang paling lebar. Kolom ini berisi tentang judul postingan, isi postingan atau konten, artikel terkait, komentar, dan lain sebagainya.
- Sidebar: Sidebar ini digunakan sebagai penempatan aksesoris website atau widget. Seperti profil singkat, tombol suscribe, artikel popular, gambar slide, dan widget lainnya.
- Footer: Elemen ini merupakan kolom paling bawah yang berisi tentang informasi lain dari website, seperti informasi penggunaan, sitemap, disclaimer, tautan link menuju website lain, link credit, atau keterangan hak cipta template.
3. Dasar pengcodingan (HTML, CSS, Java Script, PHP)
Sebelum anda membuat website yang dimulai dari nol, anda harus paham mengenai pengcodingan sob, meskipun itu hanya dasar-dasarnya saja. Sebab, kita juga bisa membuat website tanpa harus mengetikkan code script secara manual, kita bisa menggunakan software khusus pembuatan web. Seperti Adobe Dreamweaver, Brackets, KompoZer, Bluefish Editor, dan masih banyak lagi.Saya akan mencoba membahas satu per satu mengenai HTML, CSS, Java Script, dan PHP.
#1. HTML
Seperti yang telah dijelaskan diatas, bahwa HTML adalah suatu bahasa (Markup Language) yang digunakan untuk membentuk suatu halaman web yang terdiri atas sekumpulan markups tag.
HTML sangat penting dalam perancangan atau pembuatan website. Tanpa HTML, website tidak akan bisa berjalan sebagaimana mestinya sob.
Berikut ini beberapa bagian penting dalam HTML.
<html> <-- Tag pembuka html
<head> <-- Tag pembuka head
LETAKKAN CSS ATAU JAVASCRIPT DISINI
</head> <-- Tag penutup head
<body> <-- Tag pembuka body
LETAKKAN HTML DAN JAVASCRIPT DISINI
</body> <-- Tag penutup body
</html> <-- Tag penutup html
<head> <-- Tag pembuka head
LETAKKAN CSS ATAU JAVASCRIPT DISINI
</head> <-- Tag penutup head
<body> <-- Tag pembuka body
LETAKKAN HTML DAN JAVASCRIPT DISINI
</body> <-- Tag penutup body
</html> <-- Tag penutup html
- HTML
- Tag yang di awali dengan <html> juga harus diakhiri dengan </html>.
- Diantara tag inilah tag-tag atau struktur lainnya diletakkan, yang nantinya akan membentu suatu tampilan atau design web.
- Head
- Setelah kode <head> biasanya akan diisi dengan tag title atau judul, deskripsi, keyword, tag pengenal lainnya.
- Di antara tag <head> </head> ini harus diisi dengan CSS atau javascript yang nantinya akan menampilkan model atau karakter suatu web.
- Body
- Tag body ini merupakan tag yang paling utama, karena akan menjadi penampung atau penampil semua konten yang ada di web.
- Pada tag ini terbagi menjadi 4 struktur penting, yaitu header, sidebar, content, dan footer. Semuanya ini sudah dijelaskan diatas sob.
Jika anda masih merasa bingung memahami kode-kode html silahkan buka KAMUS HTML.
#2. CSS
CSS (Cascading Style Sheet) adalah suatu kode pendukung html untuk mengatur desain atau tata letak suatu halaman website.
Berikut ini kode yang biasa digunakan dalam penyusunan CSS.
P {
background: #ffffff;
color: #fff000;
font-size: 50p;
margin: 10px;
}
background: #ffffff;
color: #fff000;
font-size: 50p;
margin: 10px;
}
- P { ... } adalah selector. Singkatnya, selector adalah seluruh kode yang berada sebelum {}. Seluruh kode yang ada didalam { ... } merupakan kode yang ditujukan untuk pemberian gaya pada seluruh elemen P. P hanya merupakan contoh, anda bisa menggantinya dengan nama lain terserah anda.
- Background, color, font-size, dll, merupakan property. Kegunaannya sebagai pembuatan bentuk atau gaya atau desain.
- #RRGGBB itu merupakan value atau nilai dari property. Sama halnya dengan 50px atau 10px.
#3. Javascript
Javascript adalah suatu bahasa script yang didasarkan pada konsep pemrograman berbasis prototipe.
Biasanya pengetikan javascript dalam pembuatan web diapit dengan tag html seperti ini.
<script language=""JavaScript>
function tambah_semangat()
function tambah_semangat()
{
var a=document.getElementById("div_semangat");
a.innerHTML+="<p>Sedang Belajar JavaScript, Semangat...!!!</p>";
}
</script>
</script>
Kode tersebut jika diterapkan akan membentuk button dengan tulisan Semangat...!!!. Button tersebut jika di klik otomatis akan menambahkan kalimat sendiri.
#4. PHP
PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP jug digunakan untuk bahasa pemrograman umum (wikipedia).
Misalnya, kita akan membuat sebuah perulangan kata sebanyak 1000 kali. Jika menggunakan PHP, maka kode yang akan dituliskan kurang lebih seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Contoh list PHP</title>
</head>
<body>
<h2>Daftar Absensi Siswa</h2>
<ol>
<?php
for ($i= 1; $i <= 1000; $i++)
{
echo "<li>Nama Siswa ke-$i</li>";
}
?>
</ol>
</body>
</html>
Maka jika di preview, hasilnya akan menunjukkan perulangan kata "Nama Siswa ke-1" sampai "Nama Siswa ke-1000".
Itulah sedikit gambaran mengenai HTML, CSS, JAVASCRIPT, dan PHP yang perlu kita pahami sebelum merancang website sob.
Dari Mana Harus Memulainya?
- Web seperti apa yang akan anda buat?
- Topik atau tema apa yang akan anda pilih?
- Desain yang seperti apa yang anda inginkan?
Tiga perencanaan tersebut harus benar-benar anda persiapkan sob. Jadi, tidak hanya asal-asalan merancang dan membuat website. Selain itu, anda juga harus tahu apa tujuan anda membuat website?
Jika anda sudah menemukan jawaban dari itu semua, maka barulah anda bisa memulai melakukan perancangan web sob.
Cara Merancang Halaman Website
Setelah anda tahu dan paham dengan penjelasan diatas, sekarang saatnya anda berlanjut ke cara merancang website. Namun ingat, anda harus memiliki perencanaan terlebih dahulu agar lebih mudah untuk membuat, karena anda sudah memiliki gambaran website seperti apa yang akan anda buat sob.
1. Buatlah struktur dasar
Pertama kali yang perlu anda lakukan untuk membuat atau merancangang halaman website adalah dengan membuat struktur dasarnya sob. Struktur dasar ini sangatlah penting. Tentukan tujuan anda membuat web untuk apa, lalu rencanakan diagram sitemap, dan buatlah inventaris konten. Berikut ini penjelasan masing-masing sob:
a. Menentukan fungsi situs web yang akan dibuat
Anda harus menentukan fungsi dari web yang akan anda buat sob. Jika anda membuat web pribadi, mungkin anda sudah tahu fungsinya, sebab hanya untuk anda. Namun jika untuk organisasi atau komunitas, anda harus mencaritahu apa yang mereka inginkan dengan cara berunding.
Apa yang anda tentukan dalam pembuatan web nantinya akan berpengaruh saat halaman webnya sudah selesai. Jadi, anda harus menentukan poin-poin dibawah ini:
Apa yang anda tentukan dalam pembuatan web nantinya akan berpengaruh saat halaman webnya sudah selesai. Jadi, anda harus menentukan poin-poin dibawah ini:
- Apakah web tersebut memerlukan storefront?
- Apakah perlu dibuat komentar pengguna?
- Perlukah pengguna membuat akun di web anda nantinya?
- Apakah web tersebut berorientasi artikel atau gambar atau lainnya?
b. Buatlah diagram sitemap (peta situs)
Lalu selanjutnya buatlah sebuah diagram sitemap yang menggambarkan peta situs atau sitemap web yang akan anda buat nantinya. Sitemap ini mirip dengan diagram alir flow cart. Yaitu dengan poin-poin sebagai berikut:
Anda bisa membuatnya dengan menggambar sketsa di kertas atau di komputer anda. Gunakan diagram ini untuk penunjukkan konsep penyusunan hierarki dan konektivitas halaman web.
- Apakah pengguna harus registrasi pendaftaran dulu sebelum masuk ke web anda atau tidak?
- Bagaimana cara pengguna beralih dari halaman satu ke halaman lainnya di web anda?
- Jika pengguna ingin mencari sesuatu di web anda, bagaimana caranya?
- dll.
Anda bisa membuatnya dengan menggambar sketsa di kertas atau di komputer anda. Gunakan diagram ini untuk penunjukkan konsep penyusunan hierarki dan konektivitas halaman web.
c. Gunakan metode penyusunan konsep dengan kartu
Salah satu metode penyusunan web secara grup yang populer adalah dengan menggunakan sejumlah kartu untuk mengetahui harapan setiap orang. Untuk caranya yaitu:
- Ambil sejumlah kartu catatan
- Ttulis satu per satu konten dasar halaman web di masing-masing kartu.
- Susun kartu yang telah ada tulisannya bersama dengan tim anda untuk menemukan konsep terbaik sob.
d. Gunakan kertas dan papan buletin, atau kertas dan papan tulis putih
Metode ini merupakan metode perencanaan orisinal dengan anggaran yang kecil. Dengan cara ini, anda akan lebih mudah menghapus dan mengganti alurnya. Untuk carany yaitu:
- Gambarl desain web di kertas.
- Hubungkan masing-masing kertas dengan benar atau gambar garis.
- Jika di papan tulis gambarlag garis untuk menghubungkan, di papan media bisa menghubungkan dengan benang.
e. Buatlah inventaris konten
Sebenarnya penggunaan cara ini lebih tepat pada perancangan web ulang daripada perancangan web baru.
- Anda bisa mulai memasukkan setiap bagian konten atau halaman web yang sudah jadi ke lembar laju.
- Buatlah catatan berisi tujuan masing-masing konten atau halaman tersebut.
- Gunakan daftar ini untuk menemukan bagian yang perlu dibuang dan yang perlu untuk dipertahankan.
2. Buatlah kerangka dasar HTML
Selanjutnya, yang perlu anda lakukan adalah membuat kerangka dasar HTML. Kerangka dasar HTML ini digunakan untuk membuat kerangka-kerangka desain web yang akan anda buat nantinya sob. Jadi, silahkan mulai menyusun kerangka dasar HTML dengan langkah-langkah dibawah ini:
a. Membuat kerangka dasar (wireframe) untuk memantapkan hierarki halaman web
Buatlah kerangka dasar atau wireframe untuk memantapkan hierarki halaman web yang kan anda buat. Kerangka dasar HTML ini menggunakan cetak biru dari situs yang akan anda buat, hanya menggunakan tag paling dasar dan contoh (block/template) konten. Dalam pembuatan kerangka ini, pemformatan dan pengaturan gaya tidak diperlukan.
Sebelum anda memilih pengaturan gaya, anda bisa melihat struktur dan diagram konten dengan kerangka dasar. Dan kerangka dasar ini tidak seperti gambar atau PDF. Anda akan lebih mudah dengan menggeser contoh konten untuk membuat struktur baru. Kerangka dasar ini bersifat interaktif yang sangat menguntungkan bagi pengembang web maupun klien.
Sebelum anda memilih pengaturan gaya, anda bisa melihat struktur dan diagram konten dengan kerangka dasar. Dan kerangka dasar ini tidak seperti gambar atau PDF. Anda akan lebih mudah dengan menggeser contoh konten untuk membuat struktur baru. Kerangka dasar ini bersifat interaktif yang sangat menguntungkan bagi pengembang web maupun klien.
b. Gunakan metode gray box
Metode gray box ini tidaklah sulit sob. Blok konten halaman web anda di Gray Box. Urutkan konten-konten tersebut dalam satu kolom dan yang paling penting bisa diletakkan paling atas. Misal, anda ingin membuat halaman tentang 'Jual beli', maka informasi tentang jual beli tersebut diletakkan paling atas dan diikuti dengan daftar staf, kemudian info kontak, dan lain sebagainya.
Gray Box itu sendiri adalah representasi visual konten yang akan terlihat di web. Hal ini belum termasuk header dan footer.
Gray Box itu sendiri adalah representasi visual konten yang akan terlihat di web. Hal ini belum termasuk header dan footer.
c. Gunakan program pembuat kerangka dasar
Dalam membuat kerangka web dasar, anda bisa menggunakan berbagai macam program. Namun pada masing-masing program, ada banyak kode-kode atau bahasa pemrograman web yang harus anda kuasai untuk bisa melakukan perancangan web. Berikut ini beberapa program yang cukup popular sob.
- Pattern Lab. Situs ini digunakan untuk 'desain atomik', setiap konten dianggap sebagai 'molekul' yang menyusun halaman web yang lebih besar.
- Jumpcharts. Pada halaman ini disediakan layanan perencanaan dan penyusunan kerangka dasar web. Sayangnya situs ini tidak geratis. Situs ini mengharuskan anda untuk membayar biaya dan berlangganan. Namun kelebihan dari program ini adalah, anda tidak perlu memahami banyak kode pemrograman web, anda bisa lebih cepat membuat kerangka web.
- Wirefy. Situs ini juga menawarkan desain atomik. Di situs ini, para pengembang web bisa mendapatkan tool secara geratis.
d. Gunakan markup HTML sederhana
Dalam pembuatan kerangka web, yang perlu anda perhatikana dalah membuat kerangka dasar dengan baik agar mudah dikonversikan ke situs aslinya. Dan juga anda jangan terlalu memikirkan pengaturan gaya web selama proses pembuatan kerangka ini. Anda bisa menggunakan markah yang mudah dipahami oleh anda sendiri khususnya.
Kerangka dasar sederhana jauh lebih baik jika anda belum terlalu paham mengenai kode-kode pemrograman. Tujuan pembuatan kerangka markah ini untuk membangun struktur. Tampilan visual yang ada bisa diatur dengan CSS dan markah lanjutan.
Kerangka dasar sederhana jauh lebih baik jika anda belum terlalu paham mengenai kode-kode pemrograman. Tujuan pembuatan kerangka markah ini untuk membangun struktur. Tampilan visual yang ada bisa diatur dengan CSS dan markah lanjutan.
e. Buatlah kerangka dasar untuk setiap halaman
Dalam hal ini, banyak yang tergoda untuk menyamakan setiap halaman web dengan satu kerangka dasar. Biasanya kebanyakan jika hal ini dilakukan hanya akan membuat situs atau web anda menjadi biasa saja dan cenderung membosankan sob.
Buatlah tiap kerangka berbeda untuk tiap halaman. Yang perlu anda ketahui adalah setiap halaman web memerlukan desain sendiri.
Buatlah tiap kerangka berbeda untuk tiap halaman. Yang perlu anda ketahui adalah setiap halaman web memerlukan desain sendiri.
3. Membuat konten
Sebelum anda merancang dan membuat halaman web, sebaiknya anda persiapkan konten terlebih dahulu agar nantinya anda langsung bisa memasukkan konten anda kedalam halaman web yang anda buat sob.
a. Persiapkan konten yang bagus sebelum membuat halaman web
Pastikana nda mempersiapkan konten yang bagus untuk anda isikan pada halaman web anda. Dalam membuat artikel, anda tidak harus menguasai atau memiliki semua materi artikel sob, anda hanya perlu memiliki pokok atau inti dari pembahasan artikel anda sob.
Dan ingat, konten yang bagus tidak hanya berisi teks saja sob. Sertakan juga seperti gambar, animasi, video, suara atau mp3, RSS, umpan web, dan lainnya. Ini bertujuan agar web anda menjadi lebih menarik dan bisa membuat para pengunjung merasa puas.
Dan ingat, konten yang bagus tidak hanya berisi teks saja sob. Sertakan juga seperti gambar, animasi, video, suara atau mp3, RSS, umpan web, dan lainnya. Ini bertujuan agar web anda menjadi lebih menarik dan bisa membuat para pengunjung merasa puas.
b. Tulislah artikel yang berkualitas
Trafik pengunjung pada web anda akan tergantung pada tulisan artikel yang anda buat sob. Buatlah artikel yang berkualitas agar para pengunjung menyukainya. Konten yang berkualitas adalah konten yang mudah dipahami, penjelasannya tidak terlalu basa-basi atau bertele-tele, foto atau video yang anda pasang dalam artikel haruslah foto yang jelas dan tidak buram. Kalau perlu, sewa fotografer untuk menghasilkan foto yang bagus dan berkualitas.
Baca juga: Cara membuat artikel berkualitas
Baca juga: Cara membuat artikel berkualitas
4. Mengubah konsep menjadi sebuah situs
Setelah anda membuat konsep dan srtuktur web, sekarang saatnya anda mengubah konsep tersebut menjadi sebuah situs yang sebenarnya sob. Anda bisa menggunakan software seperti Photoshop ataupun Corel Draw.
a. Susunlah elemen-elemen dasar
Dimulai dengan penyusunan elemen-elemen dasar web anda. Elemen-elemen ini akan teraplikasikan pada setiap halaman web anda, misalnya catatan kepala, catatan kaki, dan menu navigasi. Anda bisa mengatur gaya sesuka hati anda sob.
Disarankan agar anda menyusun elemen-elemen dasar ini dengan gaya sesederhana mungkin sob. Hal ini akan sangat berguna ketika anda berlanjut pada penyusunan tata letak atau layout. Jangan terlalu memusingkan detail, cobalah untuk mencermati tampilan catatan kepala.
Disarankan agar anda menyusun elemen-elemen dasar ini dengan gaya sesederhana mungkin sob. Hal ini akan sangat berguna ketika anda berlanjut pada penyusunan tata letak atau layout. Jangan terlalu memusingkan detail, cobalah untuk mencermati tampilan catatan kepala.
b. Buat tata letak sederhana
Anda bisa mulai bereksperimen dengan tata letak web yang akan anda buat. Mulailah mengatur dan menggeser kolom kerangka. Anda bisa meminta izin agar orang lain ikut melihat dan memeriksa apakah tata letak anda sudah terasa hidup atau belum.
c. Buatlah maket
Anda bisa menggunakan photoshop atau corel draw untuk membuat market atau contoh halaman web. Gunakanlah tata letak yang telah anda susun sebagai panduan agar lebih mudah. Hasil-hasil dari pembuatan ini nantinya akan dapat anda jadikans ebagai referensi dalam proses penulisan kode pemrograman web yang akan anda buat sob. Masukkanlah konten aktual ke dalam market agar terlihat lebih bagus.
d. Ganti contoh konsep dengan konten asli
Tambahkanlah konten dan elemen ke halaman web anda. Jangan terlalu memusingkan pengaturan gaya web untuk saat ini. Focuskan saja pada penataan ke lokasi yang benar. Hal ini akan dapat membantu meninjau perubahan gaya web yang anda buat nantinya sob.
e. Buatlah pedoman gaya web
Anda jangan melupakan hal ini sob. Ini sangat penting untuk anda lakukan agar perpaduan gaya tetap terjaga, terutama untuk situs-situs besar. Jika situs anda sudah memiliki merk atau corak sendiri, anda bisa memadukan desain corak yang pas. Buatlah navigasi, catatan kaki, tautan, penggunaan gambar, ikon, tombol, daftar, dan lain sebagainya.
f. Terapkan gaya web tersebut
Setelah anda menemukan gaya atau desain yang pas untuk web anda, sekarang waktunya anda untuk mengimplementasikannya. Gunakanlah CSS untuk mengimplementasikan gaya di halaman web anda. Anda bisa mengembangkannya sendiri seiring berjalannya waktu sob.
Mungkin hanya itu yang bisa saya bagikan sob. Semoga panduan perancangan web ini bisa bermanfaat bagi anda sob. Terimakasih telah berkunjung dan membaca. Selamat mencoba sob.
Mungkin hanya itu yang bisa saya bagikan sob. Semoga panduan perancangan web ini bisa bermanfaat bagi anda sob. Terimakasih telah berkunjung dan membaca. Selamat mencoba sob.
