Pedia Learning Solution 2022

1. Layout atau Tata Letak

Layout sebuah situs web hendaklah mempertimbangkan letak penyusunan elemen-elemen
desain yang memudahkan pembaca untuk mencerna aliran informasi. Perhatikan hierarki dan
keseimbangan layout secara keseluruhan. Susunan paling umum adalah atas-bawah-kiri-kanan.

Tips:

• Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca.
• Susun elemen berdasarkan skala prioritas dari paling penting → penting → kurang

penting.
• Sebagian besar orang terbiasa membaca dari kiri ke kanan, maka letakkan main post di

sebelah kiri sedangkan sidebar di sebelah kanan.
• Perhatikan pula keseimbangan susunan elemen desain.

2. White Space atau Ruang Kosong

White space bisa diartikan sebagai ruang kosong yang memisahkan antara satu elemen dengan
elemen lainnya. Situs web adalah sebuah ruang berisi berbagai informasi, agar informasi itu
dapat diolah dengan baik oleh mata pembaca, maka ruang kosong berfungsi sebagai jeda.

Tips:

• Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen
lainnya.

• White space juga termasuk jarak antarbaris dan antarparagraf dalam body text.

3. Pilihan Font

Berikut beberapa hal yang harus diperhatikan ketika memilih jenis huruf untuk web:

• Klasifikasi huruf. Kenali klasifikasi huruf dan karakternya masing-masing. Setidaknya
ada 4 klasifikasi dasar huruf: serif, sans serif, script, dan dekoratif.

1. Serif memberikan kesan klasik, resmi, dan elegan. Biasanya digunakan pada buku, surat
kabar, dan konten formal atau semi formal. Contoh: Times New Roman (TNR),
Garamond, Georgia, Cambria.

2. Sans Serif adalah huruf yang paling cocok untuk digunakan karena memiliki
tingkat readibility yang lebih tinggi di layar komputer jika dibandingkan dengan huruf
serif. Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial, Trebuchet,
Verdana, Josefin Sans.

3. Script memiliki banyak sekali variasi (brush, handwriting, kaligrafi, dll), memberikan
kesan klasik, santai, dan kasual. Karena karakternya yang seperti huruf tegak
bersambung (well, ini memang huruf tegak bersambung), jenis huruf script lebih sulit
dibaca di layar. Kita bisa menggunakan jenis huruf ini untuk judul post, tapi hindari
menggunakannya untuk body text.

4. Dekoratif, sama seperti script, huruf dekoratif juga memiliki banyak sekali variasi dari
mulai yang betul-betul alfabet, simbol, hingga ikon-ikon tertentu. Huruf dekoratif tidak
terlalu cocok digunakan untuk web fonts baik untuk judul maupun body text. Tapi, Anda
bisa menggunakan huruf jenis ini untuk tulisan di image asalkan hanya untuk satu atau
dua kata, bukan untuk kalimat panjang.

• Karakter. Huruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf yang sesuai
dengan karakter situs web atau produk kita

• Legibility. Adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus
bersusah payah. Ada beberapa jenis huruf yang sulit dibaca sehingga pesan yang ingin
disampaikan pun sulit diolah oleh pembaca, misalnya jenis-jenis huruf script atau
dekoratif. Perhatikan contoh huruf di bawah, keduanya memakai jenis huruf yang sama,
tetapi memiliki legibility yang berbeda. Kata pertama menggunakan tittle case atau
kombinasi huruf besar dan kecil, sedangkan yang kedua memakai all caps atau kapital.

• Readibility. Readibility berkaitan dengan bentuk huruf dan hubungannya dengan huruf
lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang
memiliki tinggi sama. Readibility juga berhubungan dengan jarak antarhuruf dan jarak
antarkata.

• Warna. Apa pun warna favorit kita, entah itu merah, ungu, biru, atau merah muda, Anda
tidak bisa begitu saja mengaplikasikannya ke dalam web fonts. Warna paling baik
untuk body text adalah hitam atau gradasi abu-abu tua. Warna lain di dalam body
text hanya dipergunakan untuk link atau subjudul. Judul? Boleh, kita boleh memakai

huruf berwarna-warni untuk judul atau judul sidebar, tapi pastikan warna yang kita
gunakan konsisten.

• Ukuran. Ukuran berpengaruh terhadap readibility. Dalam jarak dekat, mata manusia
tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran paling
pas untuk body text biasanya antara 10-12px. Untuk judul, header, sidebar, dan elemen
lainnya bisa Anda sesuaikan dengan bidang layout.

Tips:

• Jenis huruf sans serif paling baik untuk digunakan di layar.
• Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web. kita bisa mengkombinasikan

antara huruf serif dengan sans serif atau script dengan sans serif. Misalnya, Georgia
untuk judul dan Helvetica untuk body text.
• Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi.
Misalnya, 12px untuk body text, 10 px untuk text snippet di sidebar, 8 atau 9px
untuk footer.

4. Skema Warna Website

Situs web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada
pembaca, bukan sedang mendistraksi mata mereka. Yang terpenting dari situs web adalah
konten, jangan sampai warna latar yang kita gunakan lebih ramai dari konten itu sendiri.

Tips:

• Gunakan warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya.
Misalnya, latar putih atau abu-abu muda untuk latar dan hitam atau abu-abu tua untuk
huruf body text.

• Jika kita tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu
(grayscale).

• Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada
jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.

• Pilih hanya SATU warna yang akan di-highlight. Untuk variasi, kita bisa menggunakan
warna lain tapi dengan tone yang sama atau gradasi dari warna utama.

5. Desain Navigasi

Navigasi juga bertujuan seperti sistem kearsipan: mudah menyimpan dan menemukan data.

Tips:

• Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas header.
• Kategorikan navigasi berdasarkan produk atau subtopik utama dari situs web kita.
• Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris

navigasi.
• Gunakan menu dropdown untuk memisahkan antara subtopik dengan sub-subtopik.
• Anda bisa menggunakan navigasi linear atau navigasi hamburger.

6. Desain Tombol Pencarian (dan Tombol
Lain)

Tips:

• Letakkan tombol di tempat yang mudah dilihat. Biasanya di sebelah navigasi atau di
bawah header.

• Gunakan tombol berupa huruf atau simbol. Jika menggunakan simbol, HANYA gunakan
simbol lup yang merupakan simbol universal.

• Untuk pengalaman pengguna yang lebih baik, kita bisa menggunakan fitur Google
custom search.

7. Desain Halaman About US

Tips:

• Letakkan laman “About Me/Us” di navigasi agar mudah ditemukan.
• Laman “About Us” bisa dipergunakan untuk menceritakan visi dan misi perusahaan atau

organisasi.
• Berikan informasi yang jelas dan tidak bertele-tele.

8. Desain Halaman Kontak

Kita bisa meletakkan laman kontak di beberapa tempat: navigasi, header, footer.

Apa saja yang harus ada di laman kontak:
• Perusahaan: Alamat lengkap, jam operasional, nomor telepon, surel.
• Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel.
• Form (opsional).

9. Desain Footer yang Informatif

Footer bisa saja berisi pengulangan informasi dengan catatan informasi tersebut memang krusial.
Bisa juga berupa tambahan informasi berupa sitemaps, copyright, privacy policy, atau informasi
lain yang memudahkan pembaca.

10. Kualitas Gambar pada Website

Tips:

• Gunakan foto atau ilustrasi dengan resolusi yang cukup agar tidak blur, minimal 150 PPI.
• Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman

warnanya tidak berubah.
• Gunakan foto yang relevan dengan konten.
• Jika menggunakan foto dari situs web lain, sebutkan sumbernya berupa direct link, bukan

hanya menyebutkan “Foto: Google”. Sebab Google adalah mesin pencari, bukan penyedia
foto gratis.

Cara Menggunakan Bootstrap 4 Untuk
Membuat Website

Apa itu Bootstrap?

Bootstrap adalah framework CSS yang dikhususkan untuk pengembangan front-end website.
Framework ini mempunyai nama asli Twitter Blueprint. Bootstrap terdiri dari beberapa file. File
pada Bootstrap berisi kumpulan baris kode tersusun dari CSS dan JavaScript yang
berbentuk class. Jadi ketika Anda menggunakan Bootstrap untuk mengembangkan website,
membuat satu tombol tidak perlu menyusun beberapa baris kode karena tinggal memanggil salah
satu class saja.

Cara Menggunakan Bootstrap

1. Membuat Tabel Dengan Bootstrap

Untuk menggunakan class dengan kombinasi class lainnya, gunakan class table ditambah
dengan class lain. Contoh penggunaannya seperti di bawah ini:

# untuk membuat tabel stripped
<table class=”table table-stripped”>
Atau
# untuk membuat tabel hovel<table class=”table table-hover”>

Di dalam file Bootstrap sudah terdapat beberapa class yang didesain untuk kebutuhan
pembuatan tabel, antara lain “.table”, “.table-striped”, “.table-bordered”, dan “.table-hover”.

• “.table”: class yang digunakan untuk membuat dan mendefinisikan tabel biasa/standar.
Class ini hanya menambahkan lapisan yang kecil dan pembatas secara horizontal. Class
ini menggunakan baris kode <table class=”table”>.

• “.table-stripped”: class yang digunakan untuk membuat table dengan gaya yang zebra.
Jadi warna setiap baris berselang seling. Class ini menggunakan baris kode <table
class=”table table-sripped”>.

• “.table-bordered”: merupakan class yang digunakan untuk menampilkan border di
dalam table. Jadi keseluruhan table akan dipasang sebuah border. Class ini menggunakan
baris kode <table class=”table table-bordered”>.

• “.table-hover”: dapat Anda manfaatkan untuk memberikan efek hover pada sebuah row.
Efek ini akan berjalan ketika Anda meletakkan mouse di row yang diberikan class ini.
Class ini menggunakan baris kode <table class=”table table-hover”>.

Selain kumpulan class untuk mendesain table, terdapat beberapa class pewarnaan row tabel dan
data menggunakan Bootstrap, yaitu “.success”, “.danger”, “.info”. “.warning”, dan “.active”.

Untuk menggunakan class ini, selipkan di antara tag tr, seperti ini:

… <td>Info</td> <td>Khafid</td> <tr
class=”info”> <td>[email protected]</td>

</tr>…

Menggunakan kumpulan class ini, kita dapat mendesain tabel yang menarik dan mudah dibaca
oleh pengunjung website.

2. Mengatur Tampilan Gambar Dengan Bootstrap

Membuat gambar yang responsive, berbentuk round, lingkaran, dan juga thumbnail sangat
mudah menggunakan framework ini.

Class “.img-responsive”, “.img-rounded”, ”img-circle”, dan ”img-thumbnail” adalah kumpulan
class yang digunakan untuk memanipulasi gambar di Bootstrap. Kembangkan desain yang
maksimal dan hadirkan gambar menarik di website Anda.

• “.img-responsive”: class ini memungkinkan Anda membuat gambar yang dapat dibuka
di berbagai macam resolusi layar. Class .img-responsive membuka ukuran gambar dapat
menyesuaikan dengan ukuran elemen inti. Anda dapat melihat efeknya ketika melakukan
resize pada browser.

<img src=”kantor-niagahoster.png” class=”img-responsive” alt=”Logo
Niagahoster”>

• “.img-rounded”: ketika Anda ingin membuat gambar dengan sisi melengkung, gunakan
class ini, maka Anda akan memiliki gambar yang melengkung di bagian sisinya.

<img src=”kantor-niagahoster.png” class=”rounded” alt=”Logo Niagahoster”>

• ”.img-circle”: terkadang ingin gambar yang berbentuk lingkaran, gunakan class ini dan
gambar akan tampil dengan bentuk yang melingkar.

<img src=”kantor-niagahoster.png” class=”rounded-circle” alt=”Logo
Niagahoster”>

• ”.img-thumbnail”: class ini digunakan untuk membuat gambar thumbnail dengan
Bootstrap.

<img src=”kantor-niagahoster.png” class=”img-thumbnail” alt=”Logo
Niagahoster”>

3. Membuat Pesan Peringatan (Alert) Dengan Bootstrap

Supaya tampilan alert dapat muncul, cukup panggil class “alert” untuk mendefinisikan tampilan
alert di Bootstrap. Supaya tampilannya lebih bervariasi, tambahkan class lain.

Untuk membuat class ini caranya cukup mudah. Cukup buat tag <div> dengan isi peringatan yang
ingin dibuat. Kemudian di tag pembuka <div> buat class alert untuk mendeklarasikan alert,
berikut contohnya:

…<div class=”container”> <h2>Alerts</h2> <div class=”alert alert-

success”> <strong>Success!</strong> Alert box ini dapat digunakan untuk

mengindikasikan aksi sukses atau positif. </div> <div class=”alert alert-

info”> <strong>Info!</strong> Alrt box ini dapat mengindikasikan informasi

yang netral. </div> <div class=”alert alert-

warning”> <strong>Warning!</strong> Alert box ini dapat untuk

mengindikasikan pesan warning dan mungkin butuh perbaikan. </div> <div

class=”alert alert-danger”> <strong>Danger!</strong> Alert box ini dapat

mengindikasikan pesan penting dan kemungkinan efek buruk. </div></div>…

Terdapat beberapa pilihan class untuk menampilkan pesan peringatan di Bootstrap, seperti
“.alert-success”, “.alert-info”, “.alert-warning”, atau “.alert-danger”. Kumpulan class ini akan
membuat tampilan alert Anda lebih bervariasi.

• .alert-success: Class alert box ini dapat digunakan untuk mengindikasikan aksi sukses atau
positif.

Kita dapat memanfaatkan class ini ketika ada input yang berhasil. Misalnya ketika pengguna
selesai mengisikan data dan mengirimkannya.

Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-success”>.

• .alert-info: Class alert box ini dapat mengindikasikan informasi yang netral.

Class ini dapat kita gunakan ketika ingin memberikan informasi tambahan kepada
pengguna. Misalnya memberikan informasi kegunaan tombol atau fungsi tertentu dan cara
penggunaannya.

Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-info”>.

• .alert-warning: Class alert box ini dapat untuk mengindikasikan pesan warning dan mungkin
butuh perbaikan.

Class ini dapat kita gunakan ketika ingin memberikan informasi yang sedikit mendesak atau
penting. Misalnya ketika terjadi error pada suatu konfigurasi atau kesalahan pada saat
pengisian data.

Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-warning”>.

• .alert-danger: Class alert box ini dapat mengindikasikan pesan penting dan kemungkinan
efek buruk.

Class ini dapat kita gunakan ketika terjadi suatu yang sangat serius. Misalnya ketika terjadi
permasalahan pada server atau konfigurasi keamanan yang gagal. Penggunaan alert yang
sesuai akan memberikan user experience yang menarik.

Untuk menggunakan class ini cukup masukkan kode <div class=”alert alert-danger”>.

4. Membuat Tombol Dengan Bootstrap

Tombol adalah komponen yang umum dan sering digunakan untuk membuat website. Inilah
yang membuat Bootstrap juga menyediakan class untuk membuat tombol yang menarik.

Terdapat banyak variasi tombol yang disediakan oleh Bootstrap, seperti “.btn”, “.btn-default”,
“.btn-primary”, “.btn-success”, “.btn-info”, “.btn-warning”, “.btn-danger”, dan “.btn-link”.

Contoh penggunaan skrip seperti di bawah ini:

<div class=”container”> <h2>Button Styles</h2> <button type=”button”
class=”btn”>Basic</button> <button type=”button” class=”btn btn-
default”>Default</button> <button type=”button” class=”btn btn-
primary”>Primary</button> <button type=”button” class=”btn btn-
success”>Success</button> <button type=”button” class=”btn btn-
info”>Info</button> <button type=”button” class=”btn btn-

warning”>Warning</button> <button type=”button” class=”btn btn-
danger”>Danger</button> <button type=”button” class=”btn btn-
link”>Link</button> </div>

• .btn: Class ini untuk membuat tombol standar warna abu kehitaman.
• .btn-default: Class ini untuk membuat tombol default berwarna abu.
• .btn-primary: Class ini digunakan untuk membuat tombol warna biru. Biasanya

digunakan untuk tombol login dan masuk ke dalam menu tertentu.
• .btn-success: Class ini digunakan untuk membuat tombol ketika berhasil menginputkan

sesuatu atau memproses suatu program.
• .btn-info: Class ini digunakan untuk membuat tombol warna biru muda.
• .btn-warning: Class ini digunakan untuk membuat tombol warning dengan warna

kuning.
• .btn-danger: Class ini digunakan untuk membuat tombol warning warna merah tua.
• .btn-link: Selain tombol persegi, Bootstrap juga menyediakan tombol untuk link. Anda

bisa menggunakan class ini.

5. Membuat Panel Dengan Bootstrap

Panel adalah sebuah garis yang terbentuk dari garis dan padding. Di Bootstrap, sebuah panel
terdiri dari tiga bagian; header, body, dan footer. Untuk membuat panel dengan header, body,
dan footer harus dideklarasikan terlebih dahulu menggunakan kode seperti di bawah ini.

<div class=”panel panel-default”> <div class=”panel-heading”>Panel
Heading</div> <div class=”panel-body”>Panel Content</div> <div
class=”panel-footer”>Panel Footer</div> </div>

Terdapat banyak variasi panel yang dapat dibuat menggunakan Bootstrap, seperti “.panel-
default”, “.panel-primary”, “.panel-success”, “.panel-info”, “.panel-warning”, dan “.panel-
danger”

• .panel-default: Class ini digunakan untuk membuat sebuah panel dengan warna biasa
(abu).

<div class=”panel panel-default”> <div class=”panel-heading”>Panel dengan
class panel-default</div> <div class=”panel-body”>Isi Konten</div> </div>

• .panel-primary: Class ini digunakan untuk membuat panel dengan warna biru tua.

<div class=”panel panel-primary”> <div class=”panel-heading”>Panel dengan
class panel-primary</div> <div class=”panel-body”>Isi Konten</div> </div>

• .panel-success: Class ini digunakan untuk membuat panel dengan dengan warna atas
hijau.

<div class=”panel panel-success”> <div class=”panel-heading”>Panel dengan
class panel-success</div> <div class=”panel-body”>Isi Konten</div> </div>

• .panel-info: Class ini digunakan untuk membuat panel dengan warna header biru muda.

<div class=”panel panel-info”> <div class=”panel-heading”>Panel dengan
class panel-info class</div> <div class=”panel-body”>Isi Konten</div> </div>

• .panel-warning: Class ini digunakan untuk membuat panel dengan warna header kuning
muda.

<div class=”panel panel-info”> <div class=”panel-heading”>Panel dengan
class panel-info class</div> <div class=”panel-body”>Isi Konten</div> </div>

• .panel-danger: Class ini digunakan untuk membuat panel dengan warna merah muda,

<div class=”panel panel-danger”> <div class=”panel-heading”>Panel dengan
class panel-danger class</div> <div class=”panel-body”>Isi
Konten</div> </div>