Sebelum membuat layout website, kita harus memahami elemen-elemen web terlebih dahulu. Proses selanjutnya adalah merancang tata letak (layout) dan user experience untuk mempermudah interaksi dengan pengguna (user friendly) yang biasa disebut perancangan wireframe, kemudian merancang tampilan grafis web misalnya warna tema, bentuk elemen web,dll.
Elemen-elemen pada website
Elemen dasar
Header
Bagian halaman web yang membungkus semua komponen halaman web
Logo
Berisi identitas perusahaan, organisasi, pemilik situs
Navigasi
Bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
Content atau isi
Memuat Sebagian besar informasi yang disajikan
Footer
Bagian bawah dan berisi informasi pemilik situs (copyright) dan beberapa link
White space
Area kosong yang membatasi antar komponen. White space menjadi penting agar pengunjung mempunyai ruang berhenti antara bagian-bagian situs lain. White space dapat diisi dengan banner atau animasi
Elemen form
Input text field
Untuk memasukkan data berupa karakter, kata atau angka
Radio button
Untuk 2-5 pilihan yang hanya bisa memilih satu opsi saja
Checkbox
Untuk pilihan yang bisa memilih lebih dari satu opsi
Dropdown
Untuk pilihan yang lebih dari 2 pilihan tetapi hanya dapat memilih satu opsi saja
Text area
Untuk memasukkan data berupa teks panjang
Button
Untuk memproses form, misalnya untuk reset ataupun submit
Elemen pada content
Page title
Judul halaman
Icon
Sebuah gambar atau objek kecil yang mewakili judul website, file program, tombol dll.
Title
Judul artikel
Paragraph
Isi artikel berupa tulisan
Image
gambar
Media
Berupa video ataupun audio
Table
Berupa tabel yang berisi data-data ataupun gambar
Pagination
Sebuah elemen yang berisi link navigasi untuk tabel maupun list
List
Sederetan tulisan yang berurutan, misalnya judul-judul artikel, dll.
Container
Beberapa box/kotak yang biasanya berada dipinggir dengan konten apa saja
d.Elemen pada tabel
Sort
Untuk mengurutkan tabel berdasarkan kolom tertentu
Filter
Untuk menampilkan isi tabel dengan kriteria khusus
Search box
Untuk mencari data yang terdapat pada tabel
e.Elemen dinamis
Modal window/lightbox
Tampilan layar diatas layar. Biasanya layar ini muncul jika pengguna memberikan interaksi tertentu, misalnya menekan tombol tertentu
Popup/tooltip
Sebuah elemen yang muncul apabila pengguna menekan meng-hover elemen tertentu
Carousell slideshow
Carousel biasanya menampilkan konten gambar ataupun promosi yang berubah-ubah setiap beberapa saat pengguna juga bisa melihat isi konten carousel yang lain dengan menekan tombol navigasi pada slideshow
Progress bar
Biasanya berupa bar Panjang untuk menunjukkan kepada pengguna tahapan-tahapan interaksi user
Accordion
Istilah untuk mode panel yang dapat dibuka (expand/show) dan ditutup (collapse/hide)
Alert/notification
Pemberitahuan kepada pengguna (user) jika terjadi kesalahan atau informasi lainnya
Hover
Istilah untuk item yang dikenakan oleh kursor
Kode Script Anda Di Sini
